Recitation 6: Processing Basics – By Megan Rhoades

I took inspiration from the artist Sol LeWitt. In particular, I took inspiration from the colors used in this piece: 

colors inspo

However, I also noticed that he used lots of stars and repeating patterns in his work. For example, this piece:

lewitt star

For my project, I wanted to create something that incorported these three elements: First, the star. Second, the repeated stripes of color. And finally, the actual colors used in my first selection of LeWitt’s. For this reason, I decided to create one star as the main focus with different rectangles, each with their own color scheme.  This was the final product:

recitation 6 result _ rhoades

I felt good about the result, but had I been given more time I would have liked to find a way to re-create the layered star piece with the colors of the first piece. Originally I wanted to layer the star over tiles each with a curve on them, but I could not find a good way to create neat curves given the time I had. I do think Processing was great for the creative use of color, but creating natural curves is difficult. 

Below is the code I created. I would like to note that the star I created was tweaked from code by user Jan Vantomme on Openprocessing. His code can be found here: https://www.openprocessing.org/sketch/28207/

The code:

float innerRadius = 70;
float outerRadius = 180;

int numSpikes = 6;

PVector[] points = new PVector[ numSpikes * 2 ];

void setup()
{
size( 400, 600 );
float angle = TWO_PI / points.length;
for ( int i = 0; i < points.length; i++ ) {
float x, y;
if ( i % 2 == 0 ) {
x = cos( angle * i ) * outerRadius;
y = sin( angle * i ) * outerRadius;
} else {
x = cos( angle * i ) * innerRadius;
y = sin( angle * i ) * innerRadius;
}
points[i] = new PVector( x, y );
}
noLoop();
}

void draw()
{
rectMode(CORNERS);

fill(230, 46, 0); //base
rect(0,0,200,300);
fill(0,0,0);
rect(200,0,400,300);
fill(0,0,0);
rect(0,300,200,600);
fill(122, 0, 204);
rect(200,300,400,600);

fill(0, 77, 153); //layer 1
rect(12.5,18.75,187.5,281.25);
fill(255,255,255);
rect(212.5,18.75,387.5,281.25);
fill(255,255,255);
rect(12.5,318.75,187.5,581.25);
fill(255, 255, 0);
rect(212.5,318.75,387.5,581.25);

fill(230, 46, 0); //layer 2
rect(25,37.5,175,262.5);
fill(200,200,200);
rect(225,37.5,375,262.5);
fill(200,200,200);
rect(25,337.5,175,562.5);
fill(122, 0, 204);
rect(225,337.5,375,562.5);

fill(0, 77, 153); //layer 3
rect(37.5,56.25, 162.5, 243.75);
fill(255,255,255);
rect(237.5,56.25,362.5, 243.75);
fill(255,255,255);
rect(37.5,356.25,162.5, 543.75);
fill(255, 255, 0);
rect(237.5,356.25,362.5, 543.75);

fill(230, 46, 0); //layer 4
rect(50, 75, 150, 225);
fill(0,0,0);
rect(250, 75, 350, 225);
fill(0,0,0);
rect(50, 375, 150, 525);
fill(122, 0, 204);
rect(250, 375, 350, 525);

fill(0, 77, 153); //layer 5
rect(62.5, 93.75, 137.5, 206.25);
fill(255,255,255);
rect(262.5, 93.75, 337.5, 206.25);
fill(255,255,255);
rect(62.5 ,393.75 , 137.5, 506.25);
fill(255, 255, 0);
rect(262.5, 393.75, 337.5, 506.25);

fill(230, 46, 0); //layer 6
rect(75, 112.5, 125, 187.5);
fill(0,0,0);
rect(275, 112.5, 325, 187.5);
fill(0,0,0);
rect(75, 412.5, 125, 487.5);
fill(122, 0, 204);
rect(275, 412.5, 325, 487.5);

fill(0, 77, 153); //layer 7
rect(87.5, 131.25, 110, 168.75);
fill(255,255,255);
rect(287.5, 131.25, 310, 168.75);
fill(255,255,255);
rect(87.5, 431.25, 110, 468.75);
fill(255, 255, 0);
rect(287.5, 431.25, 310, 468.75);

translate( width/2, height/2 );  // the star
smooth();

fill(0, 153, 0);
stroke(80);

beginShape();
for (int i = 0; i < points.length; i++) {
vertex( points[i].x, points[i].y );
}
endShape(CLOSE);
}

Leave a Reply