Aisha – Loop Art

Before working on my assignment I decided to keep practicing with loops to get myself comfortable with it. Once I did I began brainstorming some ideas and after doing research for inspiration I committed to an idea.

As a background, I  used a for loop to add a pattern of multiple small lines to give a sort of grainy feeling to this piece of work. After I accomplished this, I used Jeff Thompson’s video on youtube to help me with the animation of the squares. I placed the larger square in the center and had a global variable ‘angle’ that made the shape continuously rotate. After this, I created two rings of squares around the initial square. However, instead of keeping it in the center, I made it move around as well as rotate. I’m not going to lie this wasn’t intentional I was just experimenting and I ended up liking it. This is the piece of code I’m most proud of:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// ring of squares rotating
for (let a=0; a<radians(360); a+=radians(30)) {
push();
translate(140,140);
rotate(a); // rotate each by 30º
translate(0, 80); // puts it around the center square
rotate(-angle); // rotate the other way
fill(random(0), random(255), random(255), random(255));
rect(0,0, 25);
pop();
}
for (let a=0; a<radians(360); a+=radians(30)) {
push();
translate(140,140);
rotate(a);
translate(0, 120);
rotate(-angle);
fill(random(0), random(255), random(255), random(255));
square(0,0, 20);
pop();
}
// ring of squares rotating for (let a=0; a<radians(360); a+=radians(30)) { push(); translate(140,140); rotate(a); // rotate each by 30º translate(0, 80); // puts it around the center square rotate(-angle); // rotate the other way fill(random(0), random(255), random(255), random(255)); rect(0,0, 25); pop(); } for (let a=0; a<radians(360); a+=radians(30)) { push(); translate(140,140); rotate(a); translate(0, 120); rotate(-angle); fill(random(0), random(255), random(255), random(255)); square(0,0, 20); pop(); }
// ring of squares rotating
 for (let a=0; a<radians(360); a+=radians(30)) {
   push();
   translate(140,140);   
   rotate(a);   // rotate each by 30º
   translate(0, 80);  // puts it around the center square
   rotate(-angle);  // rotate the other way
   fill(random(0), random(255), random(255), random(255));
   rect(0,0, 25);
   pop();
 }

 for (let a=0; a<radians(360); a+=radians(30)) {
   push();
   translate(140,140);   
   rotate(a);               
   translate(0, 120);             
   rotate(-angle);                 
   fill(random(0), random(255), random(255), random(255));
   square(0,0, 20);
   pop();
 }

My sketch:

 

Improvements for next time:

– What I wanted to do but couldn’t achieve in this assignment was change the colors by mousePressed. So next time I’d really like to achieve this.

-I’d also think I should slow down the framerate a bit as the colors are changing too quickly and could cause a headache if you look at it for a long time.

Leave a Reply