Control the Big Bang!

This week was an especially difficult one because I had a lot of deadlines and tasks and responsibilities that needed to be done within the short time period of a week and adding to that I was just finding it quite hard to get the inspiration to create a piece of art. But thankfully it finally dawned on me and I decided to pursue a rather cliche idea but give it a twist thanks to all that I have learned in the recent days about Processing.

So I ended up creating my own idea of the big bang and created a star that can be controlled to be bigger or smaller and if it is bigger than a specific size, it erupts and ends up in an asteroid blast.

Difficulties:

  • As I mentioned before, I was really struggling to get an idea this week and tried coming up with multiple ideas to see what might work. However, none of them seem to really appeal to me but thankfully I decided to pursue the Big Bang Idea in the end.
  • The big challenge that I was facing apart from actually getting an idea to make something, was to get the asteroids to work. I had experimented with multiple different ways of trying to make them appear out of the screen but every time I tried a technique I would run into some kind of problems. Sometimes, the asteroids would not spawn properly, other times they would not move the way I wanted them to (appear out of a screen in a 3D sort of fashion) and basically would not give out the right sense of an asteroid blast that I had imagined.

Resolution:

  • In order to solve the asteroid problem, I decided to watch some videos that TheCodingTrain had made regarding a similar problem and found out that the best solution to this is to actually use the concept of classes. And so to implement that I made an asteroid class and added the functions, show and update to it. This allowed me to create multiple asteroids and then manipulate them in the way I wanted. Thus, the utilization of OOP helped me solve this problem.

Elements in the project

  • The project has two scenes – one of an exploding star and the other that of an asteroid blast. It revolves around the concept of a big star bursting so as to create an asteroid shower. The player can control the size of the star – making it bigger or smaller. Once the star reaches a certain limit of the size, going beyond that would cause it to explode and release an asteroid shower. At every point in the visual, the user can pause the animation and play it again and can also make it go faster or slower (done by altering the Frame Rate). During the asteroid shower, the user can control the speed by which the asteroids come using the mouse. Sliding it to the right will increase the speed whereas going to the left will decrease it.
Start Screen of a small star
Star getting bigger
Asteroid Shower

Concepts Learned:

  • This project taught me how to better utilize the random and noise functions better along with obviously teaching me how to use loops to create art works. By using random and noise in this project, I sort of got this understanding that a noise is a more controlled expression of generating a random number between a specified range and the fact that its value is retained (or remembered) whereas in random I feel like the generation of random numbers is more uncontrolled and more dispersed if I were to say.
  • I learned to implement the concepts of OOP in processing.

Project Video:

I will be uploading a vlog about my experience with this project soon by tonight!

Project Code:

//this artwork is a depiction of a big bang and the asteroids that come after that
float speed = 0.01;   //for noise value of the star, determines the pace of the vibration like movement
float extent = 0.7;  //for noise value of the star, determines the limit to which size comes up and goes down
int StarSize = 10;   // variable star size that increases and decreases 

float StrokeSpeed = .01;  
float StrokeExtent = 0.7;
int StrokeSize = 5;     //for the throbbing effect of orbits

float noiseStrokeValue;    
float noiseStarValue;

color bg_color; 


float Asteroid_speed;    //to determine speed of asteroid



class Asteroid
{
  float Asteroid_x;
  float Asteroid_y;
  float Asteroid_d;


  Asteroid() 
  {
    Asteroid_x = random(-width, width);
    Asteroid_y = random(-height, height);
    Asteroid_d = random(width);  //helps create an illusion that it is a 3d space 
  }

  void update() {
    Asteroid_d -= Asteroid_speed;
    if (Asteroid_d < 1)
    {
      Asteroid_x = random(-width, width);
      Asteroid_y = random(-height, height);
      Asteroid_d = width;
    }
  } //allows for movement

  void show_Asteroid() {
    fill(255);
    noStroke();
    float sx = map(Asteroid_x/Asteroid_d, 0, 1, 0, width);
    float sy = map(Asteroid_y/Asteroid_d, 0, 1, 0, height); //taking a ratio and then increasing and decreasing it to make it look 3d
    float size = map(Asteroid_d, 0, width, 16, 0);
    ellipse(sx, sy, size, size);
  }  //shows random asteroids on screen
};

//Asteroid class to create asteroids and to update and show them on screen



Asteroid[] asteroids = new Asteroid[400]; // 400 Asteroids created
void setup() {
  size(640, 480);

  for (int i = 0; i<asteroids.length; i++)
  {
    asteroids[i] = new Asteroid();    // each element is made into an instance of the Asteroid class
  }
}

void draw() {

  background(bg_color);
  Asteroid_speed = map(mouseX, 0, width, 0, 20); //speed controlled by mouse Pointer
  if (StarSize < 510)  //first star gets bigger
    Big_Bang();
  else
    AfterMath();  //after a certain size it bursts and asteroids follow
}





void Big_Bang() {
  bg_color = color(0);
  noFill();
  translate(width/2, height/2);
  stroke(255);
  noFill();



  for (int s=2; s<8; s++)
  {

    strokeWeight(random(s));
    arc(0, 0, s*100+80, s*100, 0, TWO_PI);  //6 orbits created
  }

  noiseStrokeValue = noise(frameCount*StrokeSpeed);
  noiseStrokeValue += StrokeExtent;
  noiseStrokeValue *= StrokeSize;  //adding flashing effect to orbit
  
  noiseStarValue = noise(frameCount*speed);
  noiseStarValue += extent;
  noiseStarValue *= StarSize;  //adding movement to star

 

  stroke(255, 255, 0);
  fill(255, 255, 0);
  strokeWeight(noiseStrokeValue);
  circle(0, 0, noiseStarValue); //making star
}




void AfterMath()
{

  translate(width/2, height/2);
  for (int i = 0; i<asteroids.length; i++)
  {
    asteroids[i].update();
    asteroids[i].show_Asteroid();
  }
}




void keyPressed()
{
  if (key == 'a') //slow
  {
    
    frameRate(frameRate-20);
  }

  if (key == 'b') //pause
  {
    noLoop();
  }

  if (key == 'c') //play
  {
    loop();
  }
  
  if (key == 'k') //fast
  {
    
    frameRate(frameRate+20);
  }

  if (key == 'w') //increase_Star_size
  {
    StarSize += 50;
    print(StarSize);
  }

  if (key == 's') //decrease_Star_size
  {
    StarSize -= 50;
    print(StarSize);
  }
}

void keyReleased()
{
  frameRate(60);
}

 

Aysha’s Avatar

For this project, we were supposed to use coding to make a portrait of ourselves, or other versions of ourselves (cartoon, anime, avatars, etc). I call her Avatar Aysha.

I started off with a simple sketch for my simple portrait. I just wanted it to be an avatar that I could play with in a video game. I think that growing up, I got used to my xbox avatar, which is where I got some of my inspiration from.

An example of an Xbox avatar
Sketch! And me trying to make sense of the line function.

 

Aysha’s Avatar

This is my avatar in her NYUAD violet T-shirt. It may not look on camera, but my eye color matches both my eyebrow and hair color so I added that to my portrait. I  would also NEVER forget my glasses. I added some freckles, nostrils, and teeth.

I also wanted to add a simple interaction for the sake of experimenting and having fun. By pressing the keys from 1-7, a background from NYUAD campus appears, considering we’re all in quarantine :(. Choose your background and say cheese!

Here’s a simple demonstration.

This project really helped me improve my visual skills and visual imagination. At the beginning, I  mainly struggled with drawing a line and with the function beginShape(). I mostly nailed the shapes by multiple trial and errors. However, later on, with enough practice I started to understand the x and y axes and their four quadrants. Moreover, creating the nostrils was a challenge for me as I needed to fully understand the angles in radians for the arcs. I also learned new functions such as arc(), strokeWeight(), beginShape() and endShape().

Personally, “Find in Reference” was a life-saver. I was also often inspired from the processing website itself, and its option for finding “related” functions.

Overall, I had so much fun doing this assignment! Hopefully more is yet to come!

This is my code!

int x;
int y;

void setup(){
  size(640, 480);
  x = width/2;
  y = height/2;
  PImage img;
  img = loadImage("gradient.jpg");
  img.resize(640, 480);
  background(img);  
}




void draw(){
  
  //hair:
  fill(203, 105, 0);
  noStroke();
  beginShape();
  vertex(x+70, y-175);
  vertex(x+40, y-185);
  vertex(x-130, y-130);
  vertex(x-190, y+150);
  vertex(x-160, y+110);
  vertex(x-180, y+190);
  vertex(x+180, y+190);
  vertex(x+160, y+110);
  vertex(x+190, y+150);
  vertex(x+130, y-140);
  vertex(x+70, y-175);
  endShape ();
  
  //neck:
  fill(255,224,189);
  stroke(0,50,50,70);
  beginShape();
  vertex(x+33, y+130);
  vertex(x+22, y+170);
  vertex(x+35, y+200);
  vertex(x+5, y+205);
  vertex(x-35, y+200);
  vertex(x-22, y+170);
  vertex(x-33, y+130);
  endShape();
  
  //nyuad shirt:
  noStroke();
  fill(176, 101, 193);
  beginShape();
  vertex(x-35, y+200);
  vertex(x-110, y+197);
  vertex(x-125, y+250);
  vertex(x+125, y+250);
  vertex(x+110, y+197);
  vertex(x+35, y+200);
  endShape();
  
  //Face:
  stroke(0,50,50,40);
  fill(255,224,189);
  ellipse(x, y, 230, 270);
  
  
  //Eyes:
  noStroke();
  fill(255);
  ellipse( x-52.5, y-50, 40, 25);
  ellipse( x+52.5, y-50, 40, 25);
  noStroke();
  fill(203, 105, 0);
  ellipse( x-52.5, y-50, 22.5, 24);
  ellipse( x+52.5, y-50, 22.5, 24);
  
  
  //eyebrows:
  strokeWeight(7);
  stroke(203, 105, 0);
  line(x+30, y-87, x+75, y-82);
  line(x-30, y-87, x-75, y-82);
  
  
  //glasses:
  noFill();
  strokeWeight(1);
  stroke(116,70, 25, 1000);
  ellipse( x-52.5, y-52.5, 80, 70);
  ellipse( x+52.5, y-52.5, 80, 70);
  line(x-15, y-50, x+15, y-50);
  
  
  
  //nose and nostrils:
  strokeWeight(2);
  stroke(234,192,134, 1000);
  line(x-10, y+10, x-6, y-20);
  line(x+10, y+10, x+6, y-20);
  stroke(234,192,134, 1000);
  noFill();
  arc(x-6, y+10, 21, 21, HALF_PI, PI);
  arc(x+6, y+10, 21, 21,  0, HALF_PI);
  
  
  //mouth:
  noStroke();
  fill(229, 65, 65);
  arc(x, y+53, 100, 65, 0, PI, CHORD);
  
  //teeth:
  fill(255);
  rect(x-40, y+53, 80, 9);
  
  //freckles:
  noStroke();
  fill(242, 143, 44);
  //right side
  ellipse(x+51, y+10, 4.5, 4.5);
  ellipse(x+41, y+5, 4.5, 4.5);
  ellipse(x+52, y+1, 4.5, 4.5);
  ellipse(x+63, y+5, 4.5, 4.5);
  ellipse(x+63, y+15, 4.5, 4.5);
  
  
  
  //leftside
  ellipse(x-51, y+10, 4.5, 4.5);
  ellipse(x-41, y+5, 4.5, 4.5);
  ellipse(x-52, y+1, 4.5, 4.5);
  ellipse(x-63, y+5, 4.5, 4.5);
  ellipse(x-63, y+15, 4.5, 4.5);

}

//You are welcome to change you're background, ready? cheese!!! Press 1-7
void keyPressed(){
   if (key == '1') {
    PImage img;
  img = loadImage("gradient.jpg");
  img.resize(640, 480);
  background(img);
  }
  if (key == '2') {
    PImage img;
  img = loadImage("NYUAD.jpg");
  img.resize(640, 480);
  background(img);
  }
   if (key == '3') {
    PImage img;
  img = loadImage("dorm.jpg");
  img.resize(640, 480);
  background(img);
  }
   if (key == '4') {
    PImage img;
  img = loadImage("library.jpg");
  img.resize(640, 480);
  background(img);
  }
  if (key == '5') {
    PImage img;
  img = loadImage("pool.jpg");
  img.resize(640, 480);
  background(img);
  }
   if (key == '6') {
    PImage img;
  img = loadImage("gym.jpg");
  img.resize(640, 480);
  background(img);
  }
   if (key == '7') {
    PImage img;
  img = loadImage("MP.jpg");
  img.resize(640, 480);
  background(img);
  }
}

 

Serial Communication Project: Abu Dhabi From Day to Night

For this week’s assignment, we were asked to create a project that combines both Arduino and Processing by allowing them to perform a serial “handshake”.

To do this, I used my OOP processing project and replaced the mouse interaction with a rotary potentiometer. This was, for the most part, easy to do. We completed an in-class example where we controlled a basic ellipse shape across the X-axis as well, and I was surprised that I could apply the same simple code (with a few minor tweaks) to a processing sketch that was a bit more complex, without breaking the code.

Here is a video demonstration:

I created a box for the potentiometer, in an attempt to make it a little bit more visually appealing.

Here’s my code:

Arduino:

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  Serial.println('0');
}

void loop() {
  if(Serial.available()>0){
    char inByte=Serial.read();
    int sensor = analogRead(A0);
    delay(0);
    Serial.println(sensor);
    
  }
}

Processing:

//arrayList to hold all stars
ArrayList<Star> stars = new ArrayList<Star>();

import processing.serial.*;
Serial myPort;
int xPos=0;
int State = 0;
//instantiate new moon object
Moon moon = new Moon();
int modifier;
float raindrop;
int red, green, blue;

void setup()
{
  size(585,430);
  background(0);
  raindrop= 0; 
  
  printArray(Serial.list());
  String portname=Serial.list()[1];
  println(portname);
  myPort = new Serial(this,portname,9600);
  myPort.clear();
  //myPort.bufferUntil('\n');
  
  //generate 30 random stars
  for (int i = 0; i < 30; i++)
  {
    //adds them to star ArrayList for easy access
    stars.add(new Star());
  }
}

void draw()
{
  
  //move raindrop down screen
  raindrop = raindrop + 4; //speed
  
  //if raindrop falls below canvas, reset to zero
  if (raindrop >= height)
    raindrop = 0;
  
  //map xPos to rgb values of background
  red = int(map(xPos, 0, width, 83, 0));
  green = int(map(xPos, 0, width, 157, 0));
  blue = int(map(xPos, 0, width, 253, 0));


  modifier = int(map(xPos, width/2, width, 29, 0));
  
  
  background(red, green, blue);
  
  if (xPos > width/2)
  {
    for (int i = 0; i < stars.size() - modifier; i++)
    {
      Star s = stars.get(i);
      s.drawStar();
    }
  }
  
  moon.update();
  moon.drawMoon();
//rainfall
  
  fill(211,211,211);
rect(10, raindrop, 2, 5);
rect(50, raindrop+20, 2, 5);
rect(80, raindrop, 2, 5);
rect(110, raindrop+100, 2, 5);
rect(140, raindrop+150,2, 5);
rect(180, raindrop-200, 2, 5);
rect(200, raindrop-150, 2, 5);
rect(240, raindrop-50, 2, 5);
rect(240, raindrop, 2, 5);
rect(300, raindrop+20, 2, 5);
rect(440, raindrop, 2, 5);
rect(440, raindrop, 2, 5);
rect(550, raindrop+100, 2, 5);
rect(530, raindrop-250, 2, 5);
rect(530, raindrop-200, 2, 5);
rect(580, raindrop-300, 2, 5);
rect(300, raindrop-400, 2, 5);
rect(140, raindrop-350, 2, 5);
rect(400, raindrop-300, 2, 5);
rect(400, raindrop-250, 2, 5);
rect(400, raindrop-200, 2, 5);
rect(550, raindrop, 2, 5);

//this part of my code uses & adapts from "skyline" by Shiwen Qin on OpenProcessing

 //building 1
  fill(250);
  rect(35,255,5,55);
  fill(250);
  rect(40,250,40,60);
  fill(51, 51, 51);
  quad(80,250,80,310,95,310,95,260);
  fill(106,106,71);
  for (int y=258; y<310; y+=8){
    fill(106,106,71);
    rect(36,y,2,2);
  }
  for (int y=258; y<300;y+=10){
    for(int x=44; x<78; x+=10){
    fill(106,106,71);
    rect(x,y,3,3);
    }
  }
  
   //building 2
  fill(51, 51, 51);
  rect(93,265,40,60);
  for (int y=270; y<300;y+=10){
    for(int x=96; x<130; x+=10){
    fill(165,160,102);
    rect(x,y,5,3);
    }
  }
  
    //building 3
  fill(220,220,220);
  rect(150,225,15,120);
  fill(220,220,220);
  rect(164,215,10,140,6);
    fill(169,169,169);
  rect(166,218,2,140,7);
  fill(105,105,105);
  arc(170,250,70,70,-PI/2,0);
  rect(170,250,35,140);
    fill(192,192,192);
  arc(170,250,60,60,-PI/2,0);
  rect(170,250,30,140);
   fill(192,192,192);
  arc(170,250,40,40,-PI/2,0);
  rect(170,250,20,140);
  
  
    //fourth building
  fill(250);
  fill(250);
  rect(235,225,5,75);
  fill(250);
  rect(240,225,40,80);
   fill(106,106,71);
  for (int y=258; y<310; y+=8){
   fill(106,106,71);
    rect(236,y,2,2);
  }
  for (int y=258; y<300;y+=10){
    for(int x=244; x<278; x+=10){
   fill(106,106,71);
    rect(x,y,3,3);
    }
  }
  
   
 // fifth building
 fill(102, 102, 102);
 rect(300,185,36,120);
 fill (51, 51, 51);
 rect (295, 185, 5, 120);
 rect (305, 185, 5, 120);
 
  //sixth building
  fill(51, 51, 51);
  rect(376,172,2,10);
  rect(375,180,3,15);
  quad(350,206,350,316,380,316,380,190);
  fill(102, 102, 102);
  quad(375,198,375,316,405,316,405,215);
  fill(51, 51, 51);
  rect(387,215,1,115);
  rect(396,215,1,115);
  
  //seventh building
  fill(51, 51, 51);
  rect(430,200, 40 ,150);
  fill(250);
  rect(430,200, 40 ,5);
  rect(470,200, 2 ,150);

  //seventh building .2
  fill(192,192,192);
  rect(490,200, 40 ,150);
  fill(250);
  rect(490,200, 40 ,5);
  rect(500,200, 2 ,150);
  
  
  
  //eighth building
   fill(51, 51, 51);
  rect(225,225,10,120);
  rect(270,225,10,120);
    //building 8
  arc(540,190,70,70,-PI*4/6,-PI*1/6,CHORD);
  quad(523,159,523,325,570,325,570,172);
  for(int y=170;y<325 ;y+=5){
   fill(106,106,71);
  quad(523,y,570,y+2,570,y+4,523,y+2);
  }
  
  //ninth building
  fill(51, 51, 51);
  quad(585,165,615,155,620,325,585,325);
  fill(31,30,72);
  triangle(614,155,622,158,619,325);
  for(int y=210;y<325 ;y+=5){
   fill(106,106,71);
  quad(585,y,615,y-1,615,y+1,585,y+2);
  }
  for(int y=210;y<325 ;y+=5){
   fill(64,64,34);
  quad(615,y-1,621,y,621,y+2,615,y+1);
  }

  //shore
  fill(69, 137, 163);
  rect(0,310,900,400);
  
   //mangroves, forloop 
   for(int x=0;x<900;x+=20){
   mangroves(x,310,10,10,3,28,5,255);
   //varying parameters for mangroves
      mangroves(x+10,305,8,8,6,41,8,255); 
      mangroves(x+5,300,5,4,14,62,17,255);
       
   }
}

void cloud(int x,int y,int w,int h,int red,int green,int blue,int a){
 fill(red,green,blue,a);
 ellipse(x,y,w,h);
}

//sets variables they're being created in
void mangroves(int x,int y,int w,int h,int red,int green,int blue,int a){
 fill(red,green,blue,a);
 ellipse(x,y,w,h); 
 ellipse(x+5,y+5,w,h);
 ellipse(x-5,y-3,w,h);
 ellipse(x+3,y-5,w,h);
 ellipse(x-3,y+5,w,h);
}


void serialEvent(Serial myPort){
  String s=myPort.readStringUntil('\n');
  s=trim(s);
  if (s!=null)
    xPos=(int)map(int(s),0,650,0, width); //jere
  println(xPos);
  myPort.write(State);
}
class Moon
{
  int x;
  int y;
  int sizeMod = 0; 
  
  Moon()
  {
    //instantiate moon at x = 60, y = 90
    this.x = 60;
    this.y = 90;
  }
  
  void drawMoon()
  {
    int blue, green;
    
     //map xPos to green and blue rgb values for moon
     green = int(map(xPos, 0, width, 221, 250));
     blue = int(map(xPos, 0, width, 0, 205));
     
     noStroke();
     fill(255, green, blue);
    
    //map Pos X to rgb values for background/sky
    int bg_red = int(map(xPos, 0, width, 83, 0));
    int bg_green = int(map(xPos, 0, width, 157, 0));
    int bg_blue = int(map(xPos, 0, width, 253, 0));
    
    //map xPos to variable sizeMod, starting at 0, ending at 20
    sizeMod = int(map(xPos, 0, width/6, 0, 20));
     
    //width/6 divides canvas into 6, for each moon/sun phase
    if (xPos <= width/6)
    {
      //sizeMod decreases size of moon, starts at 80, ends at 80 - 20 = 60
      ellipse(x, y, 80 - sizeMod, 80 - sizeMod);
    }
    else if (xPos > width/6 && xPos <= 2 * (width/6))
    {
      arc(x, y, 60, 60, HALF_PI, 3 * HALF_PI, OPEN);
    }
    else if (xPos > 2 * width/6 && xPos <= 3 * width/6)
    {
      ellipse(x, y, 60, 60);
      //draw two overlapping circles to give illusion of crescent moon
      fill(bg_red, bg_green, bg_blue);
      ellipse(x + 10, y, 50, 50);
    }
    else if (xPos > 3 * width/6 && xPos <= 4 * width/6)
    {
      ellipse(x, y, 60, 60);
      //can't figure out how to flip arc, just cover with rectangle
      fill(bg_red, bg_green, bg_blue);
      rect(x - 30, y - 30, 30, 60);
    }
    else if (xPos > 4 * width/6 && xPos <= 5 * width/6)
    {
      ellipse(x, y, 60, 60);
      //draw two overlapping circles to give illusion of crescent moon
      fill(bg_red, bg_green, bg_blue);
      ellipse(x - 10, y, 50, 50);
    }
    else
    {
      ellipse(x, y, 60, 60);
    }
  }
  
  void update()
  {
    x = xPos;
  }
}
class Star
{
  int x;
  int y;
  
  Star()
  {
    //instantiate star with random x and random y values, every time you restart sketch it' random
    this.x = int(random(0, width));
    this.y = int(random(0, height/3));
  }
  
  void drawStar()
  {
    fill(255);
    ellipse(x, y, -1.5, -1.5);
  }
}

 

Recreation on Computer Graphics & Art

For the following exercise, I have chosen to recreate “Structured Square Series — Inwards” featured in Computer Graphics and Art for August, 1976.

In the computer generated art below, the title of the piece gave me the biggest clue of how this operates as well as how the piece was designed. In the piece, the outer layer has total of 8 lines within the box (horizontal, vertical, diagonal [R-L], diagonal [L-R], and four lines triangulating the square  into total of 16 equal triangles. And, as each you approach the middle of all the layers, a line is omitted – when you reach the middle, all the lines are omitted.

So, I have recreated the above artwork using processing and the results are show in the images below. For the recreation process, I have used an ArrayList and an IntList, where the arrayList contains eight arrays of quads that represent the coordinates for the triangulating lines and the IntList containing integers from 0 to 7 to represent the indexes for accessing the arrays in the arrayList.

The inner loop for k runs from k=0 to k=7 with incrementing k for every loop, and I have utilized this with a conditional check depending on the location of the squares. For instance, if the location of the square is at the third layer from the outside, it should have 6 lines drawn – and I was able to do this by adding a conditional statement that it should draw the line when k < 6. This was done for each layer to recreate the art piece correctly. Also, to create the random configuration of strokes, I have used the shuffle function of the IntList to mix the order of the stroke quads for each squares.

A version with added fill color:

<Source Code>

int w = 40;
int h = 40;
IntList indexes;
ArrayList<int[]> coords;

void setup() {
  size(680, 680);
  rectMode(CENTER);
  coords = new ArrayList<int[]>();
  indexes = new IntList();
  
  for (int i = 0; i < 8; i++) {
    indexes.append(i);
  }
  
  indexes.shuffle();
  
  int[] coords1 = {-15, 0, 15, 0};
  int[] coords2 = {-15, 0, 0, -15};
  int[] coords3 = {-15, 0, 0, 15};
  int[] coords4 = {-15, -15, 15, 15};
  int[] coords5 = {0, -15, 0, 15};
  int[] coords6 = {0, -15, 15, 0};
  int[] coords7 = {0, 15, 15, 0};
  int[] coords8 = {15, -15, -15, 15};
  
  coords.add(coords1);
  coords.add(coords2);
  coords.add(coords3);
  coords.add(coords4);
  coords.add(coords5);
  coords.add(coords6);
  coords.add(coords7);
  coords.add(coords8);
}

void draw() {
  background(255);
  for (int i=0; i < height; i += h) {
    for (int j=0; j < width; j += w) {  
      pushMatrix();
        translate(i+w/2, j+h/2);
        for(int k = 0; k < 7; k++) {
          if (i+w/2 < 40 || j+h/2 < 40 || i+w/2 > 640 || j+h/2 > 640) {
            fill(255, 240, 240);
            if (k == 0) {
              rect(0, 0, 30, 30);
              line(-15, 0, 15, 0);
              line(-15, 0, 0, -15);
              line(-15, 0, 0, 15);
              line(-15, -15, 15, 15);
              line(0, -15, 0, 15);
              line(0, -15, 15, 0);
              line(0, 15, 15, 0);
              line(15, -15, -15, 15); 
            }
          }
          else if (i+w/2 < 80 || j+h/2 < 80 || i+w/2 > 600 || j+h/2 > 600){
            fill(255, 210, 210);
            if (k == 0) {
              rect(0, 0, 30, 30);
            }
            int coordArr[] = coords.get(indexes.get(k));
            line(coordArr[0], coordArr[1], coordArr[2], coordArr[3]);
          }
          else if (i+w/2 < 120 || j+h/2 < 120 || i+w/2 > 560 || j+h/2 > 560){
            fill(255, 180, 180);
            if (k == 0) {
              rect(0, 0, 30, 30);
            }
            if (k < 6) {
              int coordArr[] = coords.get(indexes.get(k));
              line(coordArr[0], coordArr[1], coordArr[2], coordArr[3]);
            }
          }
          else if (i+w/2 < 160 || j+h/2 < 160 || i+w/2 > 520 || j+h/2 > 520){
            fill(255, 150, 150);
            if (k == 0) {
              rect(0, 0, 30, 30);
            }
            if (k < 5) {
              int coordArr[] = coords.get(indexes.get(k));
              line(coordArr[0], coordArr[1], coordArr[2], coordArr[3]);
            }
          }
          else if (i+w/2 < 200 || j+h/2 < 200 || i+w/2 > 480 || j+h/2 > 480){
            fill(255, 120, 120);
            if (k == 0) {
              rect(0, 0, 30, 30);
            }
            if (k < 4) {
              int coordArr[] = coords.get(indexes.get(k));
              line(coordArr[0], coordArr[1], coordArr[2], coordArr[3]);
            }
          }
          else if (i+w/2 < 240 || j+h/2 < 240 || i+w/2 > 440 || j+h/2 > 440){
            fill(255, 90, 90);
            if (k == 0) {
              rect(0, 0, 30, 30);
            }
            if (k < 3) {
              int coordArr[] = coords.get(indexes.get(k));
              line(coordArr[0], coordArr[1], coordArr[2], coordArr[3]);
            }
          }
          else if (i+w/2 < 280 || j+h/2 < 280 || i+w/2 > 400 || j+h/2 > 400){
            fill(255, 60, 60);
            if (k == 0) {
              rect(0, 0, 30, 30);
            }
            if (k < 2) {
              int coordArr[] = coords.get(indexes.get(k));
              line(coordArr[0], coordArr[1], coordArr[2], coordArr[3]);
            }
          }
          else if (i+w/2 < 320 || j+h/2 < 320 || i+w/2 > 360 || j+h/2 > 360){
            fill(255, 30, 30);
            if (k == 0) {
              rect(0, 0, 30, 30);
            }
            if (k < 1) {
              int coordArr[] = coords.get(indexes.get(k));
              line(coordArr[0], coordArr[1], coordArr[2], coordArr[3]);
            }
          }
          else
          {
            fill(255, 0, 0);
            rect(0, 0, 30, 30);
          }
        }
      indexes.shuffle();
      popMatrix();
    }
  }
  delay(50);
}
          
void mousePressed() {
  noLoop();
}

void mouseReleased() {
  loop();
}