Graphics objects can be generalized in a 2D graphics system in which operations to determine their position can be defined. I was using Inkscape recently to do a rough sketch of a login screen and thought about the placement of the elements in terms of computer code. It has been many, many years since I had to think about such things and I got to work on a general set of operations to deal with the translation of 2D geometric entities. The information was initially captured on the same sketch document that I also list in this article. The operations may be featured in updates to the article series I have posted titled, Build a Cross Platform C++ Program with SFML (currently up to Part 08 as of this writing).
Sketching 2D with Inkscape
Below is an export from Inkscape showing scratch work. The question was, given the objects represented here, what are feasible operations beginning at origin (-1,-1) that would result in the representations shown? The operations listed further in this article shows some plausible answers.
Define a Few Terms
Given two objects, one object will be assumed to occupy an acceptable position on a cartesian plane. The second object will be oriented in relation to the first. You can describe the first object as the one at rest while the second will be moved (translated) in relation to the first.
The first object is then named rest_obj while the second, mov_obj. Each can have a suffix such as _y for a position along the y-axis, _x for position along the x-axis. Other suffixes may include _h for height and _w for width.
List of Operations
A few basic operations can then be described in which the object to translate can be figured based on the object at rest. These basic operations allow us to quickly discern translations even in the absence of highly tuned geometric libraries. The list of operations are as follows.
X-axis Right Align Object
x1 = resting object’s width – moving object’s width
x2 = x1 + resting object’s pos x
mov_obj_x = (rest_obj_w – mov_obj_w) + rest_obj_x
X-axis Center Align Object
x1 = resting object’s width/2
x2 = resting object’s x
x3 = moving object’s w/2
mov_obj_x = ( (rest_w/2) + rest_x) – (mov_w/2)
Y-axis Space Align Object
y1 = resting object’s y – resting object’s height
y2 = y1 – space amount
mov_obj_y = (rest_obj_y – rest_obj_h) – n
Y-axis Center Align Object
y1 = resting object’s height/2
y2 = moving object’s height/2
y3 = y1-y2
y4 = resting object’s y – y3
mov_obj_y = (rest_obj_y) – ( (rest_obj_h/2) – (mov_obj_h/2) )
Y-axis Top Align Object (Also aligns same sized objects)
y1 = resting object’s y + resting object’s height
y2 = moving object’s h
y3 = y1-y2
mov_obj_y = (rest_obj_y + rest_obj_h) – mov_obj_h
Additional 2D Visualization Sketching Tools
Tools such as text editors, calculators, and spreadsheets were employed in the deduction process. With the various implements involved, the total time to produce the list of operations above was about an hour or less. It helps to have a variety of tools.
With the spreadsheet, the lines highlighted yellow were the inputs for alignment operations along the y-axis.
Using ctrl+~ key, the actual expressions are visualized.