Week 2: Simple Work of Art

Description:

For this assignment, I mainly used for() loops to make a simple work of art.

Inspiration:

Inspired by the Fraser spiral illusion used to test a person’s ability to be hypnotized, I decided to implement a set of particles in a constant rotation around the center of the display window.

Process:
Setup():

First, I had to set the display window’s size to 640 x 640 (1:1 aspect ratio) to get a square instead of a rectangle.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
void setup(){
size(640,640);
}
void setup(){ size(640,640); }
void setup(){
  size(640,640);
}
Global variables:

I have only used two global variables which are:

  • Angle: for the rotation of the spiral.
  • Spacing: To manage the space between the particles (dots).
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
float angle=0;
float spacing=80;
float angle=0; float spacing=80;
float angle=0;
float spacing=80;
Draw():

To set a proper animation, I have added (background(0)) to clear the display window at the beginning of each frame (60 frames per second).

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
void draw(){
// Clear the background
background(0);
}
void draw(){ // Clear the background background(0); }
void draw(){
  // Clear the background
  background(0);
}
Random():

To generate random colors, I have used the random(255) function which returns an unexpected value within the range of (0,255) each time it is called.

 

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
void draw(){
// Clear the background
background(0);
// Fill with randomly generated colors
fill(random(255), random(255), random(255));
}
void draw(){ // Clear the background background(0); // Fill with randomly generated colors fill(random(255), random(255), random(255)); }
void draw(){
  // Clear the background
  background(0);
  
  // Fill with randomly generated colors
  fill(random(255), random(255), random(255));
}
Translate():

The Translate() function allowed me to move the shapes to the middle of the display window by setting the x-axis offset to width/2 and the y-axis offset to height/2.

 

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
void draw(){
// Clear the background
background(0);
// Fill with randomly generated colors
fill(random(255), random(255), random(255));
translate(width/2,height/2);
}
void draw(){ // Clear the background background(0); // Fill with randomly generated colors fill(random(255), random(255), random(255)); translate(width/2,height/2); }
void draw(){
  // Clear the background
  background(0);
  
  // Fill with randomly generated colors
  fill(random(255), random(255), random(255));
  translate(width/2,height/2);
}
Rotate():

To add a motion to the spiral, the rotate() function was necessary. After each frame, the angle of rotation increases by 0.02 rad which is a little over 1 degree.

For() loops:

At the center of rotation, I have added a rectangle, and 4 circles using a for() loop to avoid unnecessary repetition.

The main for loop is used to generate all the particles using both sin() and cos() multiplied by the spacing which also gets incremented inside the for() loop.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
void draw(){
// Clear the background
background(0);
// Fill with randomly generated colors
fill(random(255), random(255), random(255));
translate(width/2,height/2);
rotate(angle);
// Draw the shapes at the center
rect(-20, -20, 40, 40);
for (int j=0; j<=30; j+=10){
ellipse(0,0,40-j,40-j);
}
// Draw the particles
for(int i=0; i<width*2; i++){
rect(cos(i)*spacing, sin(i)*spacing, 5, 5);
spacing+=2;
}
}
void draw(){ // Clear the background background(0); // Fill with randomly generated colors fill(random(255), random(255), random(255)); translate(width/2,height/2); rotate(angle); // Draw the shapes at the center rect(-20, -20, 40, 40); for (int j=0; j<=30; j+=10){ ellipse(0,0,40-j,40-j); } // Draw the particles for(int i=0; i<width*2; i++){ rect(cos(i)*spacing, sin(i)*spacing, 5, 5); spacing+=2; } }
void draw(){
  // Clear the background
  background(0);
  
  // Fill with randomly generated colors
  fill(random(255), random(255), random(255));
  translate(width/2,height/2);
  rotate(angle);
  
  // Draw the shapes at the center
  rect(-20, -20, 40, 40);
  
  for (int j=0; j<=30; j+=10){
    ellipse(0,0,40-j,40-j);
  }
  
  // Draw the particles
  for(int i=0; i<width*2; i++){
    rect(cos(i)*spacing, sin(i)*spacing, 5, 5);
    spacing+=2;
  }
}

And at the end, I had to reset the spacing.

 

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
void setup(){
size(640,640);
}
float angle=0;
float spacing=80;
void draw(){
// Clear the background
background(0);
// Fill with randomly generated colors
fill(random(255), random(255), random(255));
translate(width/2,height/2);
rotate(angle);
// Draw the shapes at the center
rect(-20, -20, 40, 40);
for (int j=0; j<=30; j+=10){
ellipse(0,0,40-j,40-j);
}
// Draw the particles
for(int i=0; i<width*2; i++){
rect(cos(i)*spacing, sin(i)*spacing, 5, 5);
spacing+=2;
}
angle+=0.02;
// Reset the spacing
spacing=80;
}
void setup(){ size(640,640); } float angle=0; float spacing=80; void draw(){ // Clear the background background(0); // Fill with randomly generated colors fill(random(255), random(255), random(255)); translate(width/2,height/2); rotate(angle); // Draw the shapes at the center rect(-20, -20, 40, 40); for (int j=0; j<=30; j+=10){ ellipse(0,0,40-j,40-j); } // Draw the particles for(int i=0; i<width*2; i++){ rect(cos(i)*spacing, sin(i)*spacing, 5, 5); spacing+=2; } angle+=0.02; // Reset the spacing spacing=80; }
void setup(){
  size(640,640);
}

float angle=0;
float spacing=80;

void draw(){
  // Clear the background
  background(0);
  
  // Fill with randomly generated colors
  fill(random(255), random(255), random(255));
  translate(width/2,height/2);
  rotate(angle);
  
  // Draw the shapes at the center
  rect(-20, -20, 40, 40);
  
  for (int j=0; j<=30; j+=10){
    ellipse(0,0,40-j,40-j);
  }
  
  // Draw the particles
  for(int i=0; i<width*2; i++){
    rect(cos(i)*spacing, sin(i)*spacing, 5, 5);
    spacing+=2;
  }
  angle+=0.02;
  
  // Reset the spacing
  spacing=80;
}

 

 

 

Leave a Reply