Processing Tweet Tuesday – #1

Processing Tweet #1

So, it’s the first Processing Tweet Tuesday!

What is a Processing Tweet?

A Processing Tweet is a Processing program that can fit inside a tweet. For those who do not know what a tweet is, it is a message that is up to 140 characters long. Essentially this is working code that is less than 140 characters long. It is a fun way to figure how the language works as well.


The following code produces the featured image for the post. In order to use it, copy the code into a .pde file and run using Processing 3.0.
I haven’t tried for Processing 2 but I’m sure it’ll work as well.

float x=0,s=600,f=0,r=365; size(600,600);background(9);while(f++<s*20){stroke(x++%r,9);line(x%s,x%s,sin(x/r)*s,cos(x/r)*s);}
Character Count: 124

How the code works

float x=0,s=600,f=0,r=365;
To start, I have declared all the variables as floats, this means that they do not have to be whole numbers. I also immediately initialised the variables we are using so that each of the variables had a value set to them; this is to keep the character count low.

The size of the canvas is set to a width of 600 and a height of 600 with the background set to a very dark grey.

I then created a while loop that will iterate 20 times the value of s; in this case, s happens to equal 600 so the following code will loop 12000 times.

The stroke function sets the colour for any line objects (any lines and border of a shape). This variation of the function is taking in a greyscale value and an alpha (opacity) value (both have a max value of 255). The higher the greyscale value, the lighter the colour; and the higher the alpha value, the more opaque the object will be.

Let’s start taking this bit of code apart: x++ causes x to increase each time it is called. The value of x++%r has to be between 0 and r because x%r is the remainder when x is divided by r. In this case, r is 365 meaning that the value of x++%r can be between 0 and 364. As colour channels in Processing cannot have value above 255, once x++%r is above that threshold, the value will act as if it is 255.

The line function takes 4 parameters; line( x1, y1, x2, y2 ). The first point x%s,x%s travels from the top left to the bottom right and wraps back to the top left. This is because x%s has a value between 0 and s, which is 600 (the size of the screen). sin(x/r)*s,cos(x/r)*s is the second point in this line.

Let’s break this down: sin(x/r)*s takes the sine value of x/r which will be between -1 and 1. This is then multiplied by s meaning that the value sin(x/r)*s is between -600 and 600. When the program starts, x=0 so sin(x/r) =0. The same logic can be applied for cos(x/r)*s, but with cosine when x=0; cos(x/r) = 1.

This is the end the while loop block. Once this while loop has finished, so has the program.

Try it out yourself

Please copy the code into Processing and try this out for yourself. If you think there are any improvements to be made, leave a comment.

Share this post:
Follow by Email

Leave a Reply

Your email address will not be published. Required fields are marked *