[Concept] 2D Tangent Effect with Processing

Cover by VladmirF (deviantart)

Today , a splendid , high-standard article on graphics programming ! (yay)

Just kidding.

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 :

int i=0;

while (i<height)
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 :

int i=0;


while (i<height)

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 :


Lazors x_x

Hope that gives you some ideas 😀


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s