Rainbow Spring — Learn Processing with me pt.3

In this week’s processing, we’ll go from making the elements move to expanding on the entire screen using the sin wave function. I used “sin” last time too, but it’ll be more fun this time. Sin is a trigonometry math function used to change the value of angles. Similar we can use cos(),tan(),degree(),radian() etc. We also used colorMode() to use HSB instead of RGB or Hex value.

Rainbow rings expanding and collapsing.

Before we make our rainbow spring, let's see how to code rainbow lines.

Rainbow lines https://github.com/celestinetales/processing/blob/main/rainbow%20lines
void setup() {
size(800, 800);
colorMode(HSB, 360, 100, 100);
println( sin(3*PI/2.0));
noFill();
}
void draw() {
background(0, 0, 0);
float sinvalue = sin((float)frameCount/150); //using the sin function
println(frameCount + “ “ + sinvalue); //it prints the lines
int linespacing = 10; //the line spacing
for( int i=0; i < width/linespacing ; i++)
{
stroke(i* 5 * abs(sinvalue), 100, 100);
float linewidth = map( i, 0, width/linespacing, 0, linespacing);
strokeWeight(linewidth* abs(sinvalue));
float x1 = linespacing * (i);
int y1 = 0;
float x2 = x1;
int y2 = height;
line(x1,y1,x2,y2);
}
}

Using the same principle, lets create ellipse rings that looks like a flower.

int numpetals = 6;
ellipseMode(CORNER); //angling them to center
for(int i=0; i < numpetals; i++) {
stroke(i* 50 * abs(sinvalue), 100, 100); //color that changes
push(); //current drawing setting
translate(width/2, height/2);
rotate(TWO_PI/numpetals*i);
ellipse(0, -25, 200, 50); //our petals
pop(); //resets drawing settings
}
}

Now lets expand it. Increase the number of ellipses and add radian function to create the expanding movement.

Rainbow spring: visit https://github.com/celestinetales/processing/blob/main/rainbow%20circle for code
void setup() {
size(800, 800);
colorMode(HSB, 360, 100, 100);
println( sin(3*PI/2.0));
noFill();
}
void draw() //rings
{
background(0, 0, 0); float sinvalue = sin((float)frameCount/150);
println(frameCount + “ “ + sinvalue);
int numpetals = 200; //no of rings
ellipseMode(CORNER);
for (float i=0; i < numpetals; i++) {
float wave = sin(radians(frameCount)); //creating moving function
stroke(i* 5 * abs(sinvalue), 100, 100);
push();
translate(width/2, height/2);
rotate(TWO_PI/numpetals * I); //this rotates the ellipses
ellipse(0 + wave * 100, -25 + wave *200, 300, 50);
pop();
}
}

This was fun to make.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store