IFD:All Hail The Pixels/Patterns

ASSIGNMENT 1

"Create three different patterns on paper and formulate these in code with properties using processing"

Please paste your images and processing sketches below:

Rubab Paracha

• Pattern A

//pattern of sqaures overlapping each other. i tried to use colour and opacity to experiment how layers work in processsing

void setup() { size(600, 600); smooth();

}

void draw() { background(0,102,102);

stroke (255); strokeWeight (1.5);

noFill(); rect (30,200, 100,100);

fill (150); rect (100,220, 100,100);

fill (80, 100); rect (170,240, 100,100);

fill (255,237, 188); rect (240,260, 100, 100);

fill (167, 82, 101, 150); rect (310,280, 100, 100);

fill (254, 190, 126); rect (380,300, 100,100);

fill (254, 190, 126, 120); rect (450,320, 100,100);

}

• Pattern B

void setup() {

size(900, 600);

background(216,124,124);

}

void draw() {

variableRect(mouseX, mouseY, pmouseX, pmouseY);

}

//abs() calculates the absolute value (magnitude) of a number. The absolute value of a number is always positive

// and draws a small rectangle if the mouse is moving slowly

// and draws a large rectangle if the mouse is moving quickly

// random(255) calls the random colours from 0-255 for the different squares

//working with opacity to show layering

void variableRect(int x, int y, int px, int py) {

float speed = abs(x-px) + abs(y-py);

stroke(0);

fill(random(255),random(255),random(255), 190);

rect(x, y, speed, speed);

}

Fernando Millán

• Pattern A

Simple pattern in which depending on the position of the Mouse in the Y axis, the pattern starts to get "erased" from the middle.

void setup () {
 size (1000,1000);
}

void draw () {
 background (209);
   noStroke ();
   fill (155,0,0);
   
//pushMatrix();
   Squares();
//popMatrix();
   
float ValueX = mouseX;
float ValueY = mouseY;
   
pushMatrix();
translate(500,500);
    
  rectMode(CENTER);    

  fill (209);
  noStroke ();
   rect(0,0,ValueY,ValueY);
   
  rectMode(CORNER);
popMatrix();

}

void Squares(){
     rect (400,0,200,100);
   
     rect (300,100,100,100);
     rect (600,100,100,100);
   
     rect (200,200,100,100);
     rect (400,200,200,100);
     rect (700,200,100,100);
     
     rect (100,300,100,100);
     rect (300,300,100,100);
     rect (600,300,100,100);
     rect (800,300,100,100);
     
     rect (000,400,100,200);   //both lines at the same time
     rect (200,400,100,200);
     rect (400,400,200,200);
     rect (700,400,100,200);
     rect (900,400,100,200);
     
     rect (100,600,100,100);
     rect (300,600,100,100);
     rect (600,600,100,100);
     rect (800,600,100,100);
     
     rect (200,700,100,100);
     rect (400,700,200,100);
     rect (700,700,100,100);
     
     rect (300,800,100,100);
     rect (600,800,100,100);
     
     rect (400,900,200,100);
}

• Pattern B

Simple checkerboard pattern in which if clicked, the colors get inverted.

void setup() {
 size(600, 600);
 noSmooth();
 fill(255,0,0);
 background(102);
}

void draw() {              //Setting the colors for pattern A
 if (mousePressed) {
   stroke(255,0,0);
   fill(255,0,0);
 } else {
   stroke(0);
   fill(0);
 }
                       //Starting to draw the checkerboard A
 RowOdd();
 
  pushMatrix(); 
  translate(0, 50);
 RowEven();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 100);
 RowOdd();
   popMatrix();
   
    pushMatrix(); 
  translate(0, 150);
 RowEven();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 200);
 RowOdd();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 250);
 RowEven();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 300);
 RowOdd();
   popMatrix();
   
    pushMatrix(); 
  translate(0, 350);
 RowEven();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 400);
 RowOdd();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 450);
 RowEven();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 500);
 RowOdd();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 550);
 RowEven();
   popMatrix();
   
   
   if (mousePressed) {
   stroke(0);
   fill(0);
 } else {
   stroke(255,0,0);
   fill(255,0,0);
 }
                       //Starting to draw the checkerboard B
 RowEven();
 
  pushMatrix(); 
  translate(0, 50);
 RowOdd();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 100);
 RowEven();
   popMatrix();
   
    pushMatrix(); 
  translate(0, 150);
 RowOdd();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 200);
RowEven();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 250);
 RowOdd();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 300);
 RowEven();
   popMatrix();
   
    pushMatrix(); 
  translate(0, 350);
 RowOdd();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 400);
 RowEven();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 450);
 RowOdd();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 500);
 RowEven();
   popMatrix();
   
   pushMatrix(); 
  translate(0, 550);
 RowOdd();
   popMatrix();   
}

void RowOdd(){
 rect(0,0,50,50);
 rect(100,0,50,50);
 rect(200,0,50,50);
 rect(300,0,50,50);
 rect(400,0,50,50);
 rect(500,0,50,50);
}
 
void RowEven(){
 rect(50,0,50,50);
 rect(150,0,50,50);
 rect(250,0,50,50);
 rect(350,0,50,50);
 rect(450,0,50,50);
 rect(550,0,50,50);
}

• Pattern C

In this pattern I wanted to draw the same checkerboard pattern but this time, all the squares would rotate on their own axis to reveal the one behind it (with a different color). So far I have not been able to do so, as the squares insist on all rotating from the same point. I'm uploading this while I try to figure it out, if someone else has an idea feel free to post it here.

<post ideas here> <post ideas here>

void setup () {
 size (500,500);
}
void draw () {
 background (209);
rectMode(CENTER);
float Mouse = mouseX;

pushMatrix();
translate(50,50);
rotate(radians(mouseX));
Ele1();
popMatrix();

pushMatrix();
translate(50,50);
//rotate(mouseX);
Ele2();
popMatrix();
} 
   void Ele1(){
     pushMatrix();
   rect(0,0,100,100);
     popMatrix();
   }
 
   void Ele2(){
     pushMatrix();
   rect(200,0,100,100);
     popMatrix();
   }
 
   void Ele3(){
   //  pushMatrix();
   //  rotate(radians(mouseX));
   rect(400,0,100,100);
   //  popMatrix();
   }