Considering Generalized 2D Translation Algorithms

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.
visualizing_2D_graphics_translation_operations_login_screen_design_sfml_related

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

Formulation:

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

Formulation:

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

Formulation:

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

Formulation:

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

Formulation:

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.

generalized_2d_algorithm_scratch_pad01_sfml_related

 

With the spreadsheet, the lines highlighted yellow were the inputs for alignment operations along the y-axis.

generalized_2d_algorithm_scratch_pad02a_sfml_related

 

Using ctrl+~ key, the actual expressions are visualized.

generalized_2d_algorithm_scratch_pad02b_sfml_related

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s