Cover by VladmirF (deviantart)
Today , a splendid , high-standard article on graphics programming ! (yay)
In this short, concept article, i will show you the basics i ‘ve found to do some “tangent effect” with the Processing language. It’s an high level graphic programming language , close to java or python (available in those two version) and , with this, it will be way more easier to learn the basic of shading / dataploting / demoscene , etc..
However , OpenGL (and now Vulkan) are still the reference in this subject and are more powerful than Processing.
The goal is to do some spirographic-like drawing. The geometrical build of this draw is a sequence of displacement between the two exterma of a line and a circle tangent. In reality we can do a simplification of the tangent expression (most of the time / it’s a cheat) by axial expression (x,y) with a proportional value displacement :
The extrema-points shift with the same value in opposite direction (green/red = two example)
So the game is to make a loop who draws “each line for every indentation”.
the skeleton :
i = i + 12;
“Size” is the window dimensions, “background” is the background color (from 0 to 255).
The loop will work until “i” equals the height (800) and the “+12” is the amount of pixels between to steps and it’s completely arbitrary (12 => better for the eyes).
the core :
i = i + 12;
“Stroke” is the color of the line (from 0 to 255) and “line” have 4 parameters (x1,y1,x2,y2)
Ps: two lines have been initialized
As you can see the extrema-points will start from “0” for the first and “height (800)” for the second one (and “Width (800)” / “0” for the second line), because, at start : i = 0.
The shift will displace the extrema with a 12 pixel strength in opposite directions.
Result 1 :
A splendid “tangent” effect @_@
The code is very light and you can enjoy yourself to upgrade it with color effects , dynamic range (easy with processing), and because the shift is not trigonometric you can make quads-shaped limits !
An another example with 4 lines and color variations :
Hope that gives you some ideas 😀