Processing Tweet Tuesday – #2

Processing Tweet #2

Hello and welcome to the second instalment of Processing Tweet Tuesdays.

This weeks processing tweet creates an image that gives a vibe of the northern lights. The image is divided into two by colour as the green and purple light flow out from the centre line to the bottom left and top right respectively. The code creating this image uses a number of faint straight lines, however through the use of iteration and slight changes it gives the illusion of curves.

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.


Code

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,y=0,s=600,r; size(600,600);background(0);while(x++<s*20){r=sin(y/s);stroke(x%255,r*255,(x+y)%s,9);line(x%s,x%s,(y+=3)%s,r*s);}
Character count: 137

How the code works

float x=0,y=0,s=600,r;
In this line I declared variables x, y, s and r as floats values (values that do not have to be whole numbers); but what are x, y, s and r in this program?

x: a frame counter and just a value to be used in several functions
y: a value to be used in functions
s: represents the width and height of the screen.
r: represents the value sin(y/s)

size(600,600);background(0);
The size of the canvas is set to a width of 600 and a height of 600. The background colour of this canvas is set to black.

while(x++<s*20){...
The program then enters this while loop where the condition inside the parentheses is checked and if the statement is true then the program will enter the while loop code block. In this case, a few things are happening so let me break it down. The statement x++ means that the value of x increments by 1 each time the while loop condition is called. The <s*20 part of the condition checks if the value of the left hand side is less than the value s*20 (as s=600, s*20=12000). This means that the statement is checking whether the value of x is less than 12000.

r=sin(y/s);
The value of r is the calculation of sin(y/s). I have used this because I use this value a few times and it saves on characters for the tweet.

stroke(x%255,r*255,(x+y)%s,9);
The stroke function sets the colour of a line or outline of a shape. This particular variation of the function is in the form RGBA (red, green, blue and alpha[opacity]).

The following are what the values mean:

Component Value Description
Red x%255 The remainder when x is divided by 255. This value is between 0 and 254.
Green r*255 This value is calculated by taking the sin of y divided by s and multiplying that by 255. This means that this value is between -255 and 255.
Blue (x+y)%s The remainder when x+y is divided by s. This value is between 0 and 254.
Alpha 9 This will make the line very transparent.

line(x%s,x%s,(y+=3)%s,r*s);
The line function takes 4 parameters; line(x1,y1,x2,y2) and draws a line from (x1,y1) to (x2,y2). The first point (x%s,x%s) travels from the top left to the bottom right of the screen and wraps back around to the top left. This is due to the %s part of both values.

The second point is (y+=3)%s,r*s. Let me break this down; y+=3 increments the value of y by 3 every time this function is called, while the %s takes the remainder of y/s. This means that the value of (y+=3)%s is between 0 and s, which is 600. The seconds part of this point is r*s, which is similar to the green component in the stroke function but instead of the value being between -255 and 255, the value is between -600 and 600.

…}
This is the end of the while loop code block.Once this while loop has finished, so has this 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:
RSS
Follow by Email
Facebook
Google+
http://mattrclark.com/2016/09/processing-tweet-tuesday-2/
YouTube31
YouTube
LinkedIn

Leave a Reply

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