Month: September 2019

Xu Xu – Project 03 – Dynamic Drawing

sketch

var cable = 640;
var finger = 480;
var fingercolour1 = 350;
var fingercolour2 = 380;
var light1 = 0;
var light2 = 0;
var light3 = 0;
var light4 = 0;
var light5 = 0;
var light6 = 0;
var ow = 0;

function setup() {
    createCanvas(480, 640);
}

function draw() {    
    background(50);
//light
    noStroke();
    fill(255,267,13,light1);
    ellipse(width/2, height/3, 80,80);
    fill(255,267,13,light2);
    ellipse(width/2, height/3, 155, 155);
    fill(255, 267, 13,light3);
    ellipse(width/2, height/3, 250, 250);
    fill(255, 267, 13,light4);
    ellipse(width/2, height/3, 370, 370);
    fill(255, 267, 13,light5);
    ellipse(width/2, height/3, 600, 600);
    fill(255, 267, 13, light6);
    ellipse(width/2, height/3, 800, 800);
//Finger
    strokeWeight(3);
    fill(227,mouseX-fingercolour1,mouseX-fingercolour2);
    ellipse(finger, 200, 40, 20);
    circle(finger + 50, 220, 50);
    noStroke();
    rect(finger, 190, 50, 20);
    rect(finger + 50, 190, 300, 40);
    fill(208, 156, 158);
    ellipse(finger-10, 198, 15, 10);
//cable
    stroke("black");
    fill("gray");
    beginShape();
    vertex(220, cable);
    vertex(230, cable - 30);
    vertex(250, cable - 30);
    vertex(260, cable);
    endShape();
    line(237,cable-30, 232, cable);
    line(243, cable - 30, 247, cable);
    rect(220,cable,40,55);
    fill("yellow");
    rect(199, cable + 55, 80, 20);
    rect(210, cable + 75, 60, 30);
    strokeWeight(15);
    rect(235, cable + 111, 10, 100);
//lightbulb
    strokeWeight(5);
    noFill();
    arc(width/2, height/3, 200,200, 300,0);
    arc(width/2, height/3, 200,200, 180,150);
    strokeWeight(5);
    stroke("black");
    line(140,height/3, 190,350);
    line(340,height/3, 290,350);
    fill("black");
    rect(170,350,138,10);
    strokeWeight(15);
    line(290, 375, 190, 385);
    line(290, 400, 190, 410);
    line(290, 425, 190, 435);
    fill("black");
    rect(220, 440, 40, 30);
//lightbulb interior
    strokeWeight(3);
    noFill();
    beginShape();
    vertex(220, 350);
    vertex(180, 220);
    vertex(195, 205);
    vertex(210, 220);
    vertex(225, 205);
    vertex(240, 220);
    vertex(255, 205);
    vertex(270, 220);
    vertex(285, 205);
    endShape();
    if (mouseY > 420){
    	cable = mouseY + 50;
	}	
    if (cable < 490 & cable > 370){
		light1 = 100;
		light2 = 75;
		light3 = 55;
		light4 = 35;
		light5 = 15;
		light6 = 5;
	}
    else{
		light1 = 0;
		light2 = 0;
		light3 = 0;
		light4 = 0;
		light5 = 0;
		light6 = 0;
	}
    if (mouseX > 355){
		finger = mouseX;
	}
    if(finger < 365 & cable<490 & cable > 370){
		textSize(20);
		textFont("old english");
		fill("white");
		text("OW!",420, 50);
	}
}

I wanted to create dynamic drawing that incorporates the change of mouseX and mouseY, so I created a lightbulb that will be turned on when the cable is plugged in, and the finger is able to reach the lightbulb. If the finger touches the bulb while it’s on, the person will scream “ow”.

Bo Yang– Project 03 – Dynamic Drawing

sketch

/*
    Bo Yang
    Section A
    byang2@andrew.cmu.edu
    Project-03-Dynamic-Drawing
*/

var angle1 = 0;
var angle2 = 0;
var angle3 = 0;
var angle4 = 0;
var position = 0;


function setup() {
    createCanvas(600, 600);
}

function draw() {
    //background changes color from black to white
    background(mouseX, mouseY);
    noStroke(0);

    //rotating rectangle
    push();
    translate(200, 200);
    rotate(radians(angle2));
    fill(200, mouseX, mouseY);
    rectMode(CENTER);
    rect(0, 0, mouseX, mouseY - 20);
    pop();
    angle2 = angle2 + 5;

    //rotating rectangle
    push();
    translate(180, 180);
    rotate(radians(angle3));
    fill(mouseX, mouseY, 255);
    rect(0, 0, mouseX + 20,  mouseY);
    pop();
    angle3 = angle3 + 15;

    //rotating black ellipse
    push();
    translate(width / 2, height / 2);
    rotate(radians(angle4));
    fill(0);
    ellipse(0, 0, mouseX, mouseY);
    pop();
    angle4 = angle4 + 30;
    

    //rotating ellipse
    push();
    translate(width - 50, height - 50);
    rotate(radians(angle1));
    fill(random(0, 255), random(0, 255), random(0, 255));
    ellipseMode(CORNER);
    ellipse(position, 0, mouseX, mouseY);
    pop();
    position = position + 1; 
    angle1 = angle1 + 10;

}

This is my Dynamic Drawing. To be fancy, I make them all can change colors. The background can change colors from black to white when you moving your mouse. And the two rectangles also can change color, one is blue, the other is red. And also, when you moving your mouse, it can also change size. The two ellipses, one is black and cannot change color. The other one can change all the colors by itself.

Monica Chang – Project 03 – Dynamic Drawing

Suggestion: move cursor in circular motions around the canvas.

sketch

//Monica Chang
//Section D
//mjchang@andrew.cmu.edu
//Project-03

var angle = 0;
var x = 0;

function setup() {
  createCanvas(640, 480);
  noStroke();
  rectMode(CENTER);

  
}
function draw() {


  
// changing color of background as mouse moves around canvas.
  background(mouseX, mouseY, 245); 
  
//mouseX controls x location
  fill(255, 150);
  ellipse(mouseX, mouseY, mouseY, mouseY);
// mouseY controls y location AND size
  fill(0, 159);
  ellipse(width - mouseX, mouseY, height - mouseY, height - mouseY);

//spiraling circle meant to indicate how to move your mouse around and play with it.
  print(x);
  push();
  translate(width/2,height/2);
  rotate(radians(angle));
  fill("red");
  ellipse (x ,0,50,50);
  pop();
  angle = angle +5;
  x = x + 0.5;
  //sending spiral circle return to center and then draw again>

  if (x == 300){
    x = 0;
  }


}

I wanted to explore the use of depth perception within this piece by playing with the size and position. I also integrated what we learned in recitation where we created a spiral; however, I wanted to take it to another level by drawing it continuously while it redraws in a different position. Once it hits the edge of the canvas I wanted the spiral movement to continue again from the center. I struggled to get it to move smoothly but I am still happy with the results.

Sean Meng-Project- 03-Dynamic Drawing

hmeng Project-03

//Sean Meng
//Section C
//hmeng@andrew.cmu.edu
//Project-03-Dynamic-Drawing

var angle = 0;
var mouth = 0;
var shark = 0;

function setup() {
    createCanvas(640, 480);
}
 

function draw() {
//the color of the sea varies as the shark moves
    background(mouseX, 190, 200);
    fill(0)
    rect(0, 0, 250, 480)
    noStroke();

//bait
//When shark touches the bait, the sea turns to red
    fill(120)
    push();
    translate(640 - mouseX / 2, mouseY + 45);
    rotate(radians(angle));
    ellipse(0, 0, 30, 30);
    ellipse(0, 0, 10, mouseX * 90 / 300);
    pop();
    angle = angle + 5;
    rect(640 - mouseX / 2, mouseY + 45, 640 - mouseX / 5, 3)
    


//shark body
    fill(255);
    beginShape();
    vertex(mouseX, mouseY);
    vertex(mouseX - 250, mouseY);
    vertex(mouseX - 160, mouseY + 40);
    vertex(mouseX - 60, mouseY + 60);
    endShape(CLOSE);
//shark fin
    beginShape();
    vertex(mouseX - 80, mouseY);
    vertex(mouseX - 110, mouseY);
    vertex(mouseX - 120, mouseY - 50);
    endShape(CLOSE);

    beginShape();
    vertex(mouseX - 160, mouseY + 40);
    vertex(mouseX - 170, mouseY + 30);
    vertex(mouseX - 180, mouseY + 50)
    endShape(CLOSE);  

    beginShape();
    vertex(mouseX - 70, mouseY + 65);
    vertex(mouseX - 90, mouseY + 30);
    vertex(mouseX - 100 , mouseY + 100);
    endShape(CLOSE);      

//shark tail
    beginShape();
    vertex(mouseX - 230, mouseY + 5);
    vertex(mouseX - 320, mouseY - 40);
    vertex(mouseX - 280, mouseY + 5);
    vertex(mouseX - 320, mouseY + 39);
    endShape(CLOSE); 

//shark eye
    fill(0);
    ellipse(mouseX - 40, mouseY + 17, 10, 10);
    fill(255)
    ellipse(mouseX - 37, mouseY + 17, 5, 4);

//shark mouth appears when it gets out of the dark area
//shark mouth turns red and gets larger when it moves to the right
    if(mouseX > 250){
        fill(mouseX / 500 * 255, 0, 0);
        beginShape();
        vertex(mouseX - 34, mouseY + 35);
        vertex(mouseX - mouseX / 320 * 90, mouth)
        vertex(mouseX - 50, mouseY + 50);
        endShape(CLOSE); 
        mouth = mouseY - mouseX / 640 * 10 + 20
    }


}

In this project, I was interested in the relationship between different visual elements using interactive programming in p5js.

Mihika Bansal – Project 03 – Dynamic Drawing

sketch

/*
Mihika Bansal 
Section E 
mbansal@andrew.cmu.edu
Project-01
*/
var angle1 = 0; //rotates one direction
var angle2 = 0; //rotates the other direction
var rgb1 = 0; //random color generator 1
var rgb2 = 0; //random color generator 2
var dimension = 20; //size of elements
function setup() {
    createCanvas(600, 480);
  }

function draw() {

    rgb1 = random(0, 300); //randomizing here creates the flashing effect 
    rgb2 = random(0,275); 
    dimension = random(5, 60);
    
    if (mouseX < width / 2) { //determine if the mouse is on the left of the canvas 
        background(0, 0, 51);
        push();
        rotate(radians(angle1)); //creating the rows of shapes in the top left corner
        fill(rgb1 * 0.2, rgb2 * 0.5, rgb1 * 0.8); // the multiplication randomizes the color more
        rect(mouseY * 0.8, mouseY * 0.5, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.3, rgb1 * 0.6); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); //the distance from the rotation point is dependent on the position of mouse y 
        fill(rgb1 * 0.85, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension * 1.5, dimension * 1.5); 
        fill(rgb1 * 0.7, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop();
        angle1 += 2; 

        push(); 
        translate(width - 5, height - 5); //creating the line of shapes in the bottom right corner
        rotate(radians(angle2));
        fill(rgb1 * 0.2, rgb2 * 0.5, rgb1 * 0.8);
        rect(mouseY * 0.8, mouseY * 0.5, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.3, rgb1 * 0.6); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); 
        fill(rgb1 * 0.85, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension * 1.5, dimension * 1.5); 
        fill(rgb1 * 0.7, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop(); 
        angle2 -= 2; 
    }
    else { //when mouse is on right of screen
        background(77, 0, 0);
        push();
        rotate(radians(angle1));
        fill(rgb1 * 0.25, rgb2 * 0.4, rgb1 * 0.71);
        rect(mouseY * 0.8, mouseY * 0.57, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.3, rgb1 * 0.6); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); 
        fill(rgb1 * 0.8, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension * 1.5, dimension * 1.5); 
        fill(rgb1 * 0.7, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop();
        angle1 -= 2; 

        push(); 
        translate(width - 5, height - 5);
        rotate(radians(angle2));
        fill(rgb1 * 0.2, rgb2 * 0.54, rgb1 * 0.8);
        rect(mouseY * 0.86, mouseY * 0.5, dimension, dimension);
        fill(rgb2 * 0.5, rgb2 * 0.35, rgb1 * 0.64); 
        ellipse(mouseY * 0.3, mouseY * 0.2, dimension, dimension); 
        fill(rgb1 * 0.85, rgb2 * 0.9, rgb1 * 0.7);
        ellipse(mouseY, mouseY, dimension*1.5, dimension * 1.5); 
        fill(rgb1 * 0.77, rgb2 * 0.65, rgb1 * 0.7);
        rect(mouseY * 1.3, mouseY * 1.3, dimension * 2, dimension * 2);
        pop(); 
        angle2 += 2; // changes angle 
       
    }

}

With this piece I worked with direction of the rotation being dependent on the position of the mouse. I also made the distance of each element dependent on the y position of the mouse. This project was interesting and helpful in understanding the random function and the rotation function.

Emma NM-Project-03(Dynamic Drawing)


Emma’s dynamic drawing

I knew I wanted to create a dynamic drawing with circles so I started there and then moved into changing size, position, translation, and rotation based on mouse position. I added one more feature of if you click the screen you can change between circles and squares.

/* 
Emma Nicklas-Morris
Section B
enicklas@andrew.cmu.edu
Dynamic Drawing
*/

var b = 255;
var r = 200;
var cir = true;

function setup() {
    createCanvas(640, 480);
    
    
}

function draw() {
    background("black");
    b = mouseX/3;
    r = mouseY/2;

    // Changes dot color as you move your mouse
    // Red color is controlled by mouseY and Blue is controlled by mouseX position
    fill(r, 50, b);
    noStroke();

    // Dots increase if mouse moves right or up. 
    // Dot position depends on mouse position from the width or height
    if (cir) {
        ellipse(width-mouseX/2, height-mouseY/2, mouseX/2, mouseX/2); 
        ellipse(width-mouseX, height-mouseY, mouseY/2, mouseY/2);
    }
    else {
        rect(width-mouseX/2, height-mouseY/2, mouseX/2, mouseX/2); 
        rect(width-mouseX, height-mouseY, mouseY/2, mouseY/2);
    }
    
    // Create smaller dots to the left and up on the grid. Follows same principles as above
    push();
    translate(-width/3, -height/3);
    if (cir) {
        ellipse(width-mouseX/2, height-mouseY/2, mouseX/3, mouseX/3);
        ellipse(width-mouseX, height-mouseY, mouseY/3, mouseY/3);
    }
    else {
        rect(width-mouseX/2, height-mouseY/2, mouseX/3, mouseX/3);
        rect(width-mouseX, height-mouseY, mouseY/3, mouseY/3);
    }
    pop();

    // Rotates grid based on mouseX position and follows principles above. Dots are smaller than above
    push();
    translate(-width/3, -height/3);
    rotate(radians(mouseX/3));
    if (cir) {
        ellipse(width-mouseX/2, height-mouseY/2, mouseX/4, mouseX/4);
        ellipse(width-mouseX, height-mouseY, mouseY/4, mouseY/4);
    }
    else {
        rect(width-mouseX/2, height-mouseY/2, mouseX/4, mouseX/4);
        rect(width-mouseX, height-mouseY, mouseY/4, mouseY/4);
    }
    pop();

    // Rotates grid based on mouseY position. Follows same principles as above
    push();
    translate(width/3, 0);
    rotate(radians(mouseY/4));
    if (cir) {
        ellipse(width-mouseX/2, height-mouseY/2, mouseX/4, mouseX/4);
        ellipse(width-mouseX, height-mouseY, mouseY/4, mouseY/4);
    }
    else {
        rect(width-mouseX/2, height-mouseY/2, mouseX/4, mouseX/4);
        rect(width-mouseX, height-mouseY, mouseY/4, mouseY/4);
    }
    pop();

    

}

// By clicking the mouse you switch back and forth between circles and squares
function mousePressed() {
    if (cir == true) {
        cir = false;
    }

    else {
        cir = true;
    }
	
}

Janet Peng – Looking Outwards – 01

Imagination Playground in Play Work Build. Children stand in front of a projection and get their silhouettes turned into a block figure. When they move, the blocks tower explodes/topples.

Play Work Build is an exhibit in The National Building Museum in Washington, DC. The exhibit is about the history of construction and block-based toys. It includes the Imagination Playground; a very unique way children can interact with (and destroy) building blocks (by standing and moving in front of a screen). I find this project inspiring because it revolutionizes the idea of playing this block which is a very old-school and non-techy-y activity. This project reinvents the toy and makes something that could be seen as boring seem interesting. I believe this project required the team at the rockwellgroup to write custom scripts that allows the projection to randomly generate block forms depending on the size and position of the person interacting with the projection. The creators were probably inspired by other interactive exhibit designs that use motion tracking to turn gestures into visual experiences.

Janet Peng Project 01 – Face

jjpeng assignment 1

var verCenter = 300

function setup() {
    createCanvas(500, 500);
}

function draw() {
	// background
	// bush
	fill(86, 137, 124);
	stroke(86, 137, 124);
	ellipse(280, 390, 380, 250)
	ellipse(80, 390, 200, 150)
	ellipse(450, 400, 200, 200)

	// ground
	fill(73, 104, 96);
	stroke(73, 104, 96);
	rect(0, 400, 500, 100);

	// hair (behind)
	fill(51, 119, 135);
	stroke(51, 119, 135);
	ellipse(253, 230, 70, 90);

	// legs
	fill(51, 119, 135);
	stroke(51, 119, 135);
	quad(190, 340, 250, 340, 240, 430, 185, 430);
	quad(245, 340, 310, 340, 315, 430, 260, 430);

	// arms
	push();
	fill(174, 214, 175);
	stroke(174, 214, 175);
	translate(300, 290);
	rotate(radians(-32));
	ellipse(0, 0, 40, 90);
	pop();

	push();
	fill(174, 214, 175);
	stroke(174, 214, 175);
	translate(200, 290);
	rotate(radians(32));
	ellipse(0, 0, 40, 90);
	pop();

	// body
	fill(86, 178, 156);
	stroke(86, 178, 156);
	arc(250, 330, 120, 175, PI, 0);

	push();
	fill(86, 178, 156);
	stroke(86, 178, 156);
	translate(220, 330)
	rotate(radians(20))
	ellipse(0, 0, 60, 70);
	pop();

	push();
	fill(86, 178, 156);
	stroke(86, 178, 156);
	translate(278, 330)
	rotate(radians(-5))
	ellipse(0, 0, 65, 75);
	pop();

	push();
	fill(86, 178, 156);
	stroke(86, 178, 156);
	translate(250, 345)
	rotate(radians(15))
	ellipse(0, 0, 40, 20);
	pop();

	// head
	fill(174, 214, 175);
	stroke(174, 214, 175);
	ellipse(250, 200, 80, 90);
	ellipse(250, 240, 30, 30);

	// hair (top)
	push();
	fill(51, 119, 135);
	stroke(51, 119, 135);
	translate(227, 170)
	rotate(radians(-45))
	ellipse(0, 0, 50, 25);
	pop();

	push();
	fill(51, 119, 135);
	stroke(51, 119, 135);
	translate(268, 175)
	rotate(radians(50))
	ellipse(0, 0, 55, 35);
	pop();

	fill(51, 119, 135);
	stroke(51, 119, 135);
	ellipse(248, 158, 45, 20);

	fill(51, 119, 135);
	stroke(51, 119, 135);
	ellipse(282, 198, 20, 45);

	// glasses
	fill(174, 214, 175);
	stroke(65);
	rect(212, 198, 20, 15);
	rect(248, 198, 20, 15);
	line(232, 203, 248, 203);

	// eyes
	fill(65);
	stroke(65);
	ellipse(218, 205, 5, 5);
	ellipse(255, 205, 5, 5);

	// eyebrows
	fill(65);
	stroke(65);
	triangle(220, 200, 215, 201, 223, 201);
	triangle(257, 200, 252, 201, 260, 201);

	// mouth
	fill(174, 214, 175);
	stroke(65);
	arc(240, 220, 10, 5, 0, 2, OPEN);
}

Fanjie Jin-Project-03-Dynamic-Drawing

fjin

// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project-03-Dynamic Drawing

var rgb = 255 / 640;
var rgb2 = 255 / 480;
var angle = 0;
var size = 15;


function setup(){
    createCanvas(640,480);
}

function draw(){
//change the background color
    size = constrain(size, 10, 80)
    background(255 - mouseY * rgb, 255- mouseX * rgb2, 255);
  
//ellipse1
    if (mouseX > width / 2){
      rectMode(CENTER)
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(width / 2, height / 2);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse2       
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(width / 4, height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse3     
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(3 * width / 4, 3 * height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse4   
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate( width / 4, 3 * height / 4);
      rotate(radians(angle)); 
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse5 
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(3 * width / 4, height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
}
  
    if (mouseX < width / 2){
      fill(255 - mouseX * rgb, 255- mouseY * rgb2, 100);
      noStroke();
      push();
      
//rectangle 1     
      translate(width / 2, height / 2);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 2
      noStroke();
      push();
      translate(width / 4, height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 3
      noStroke();
      push();
      translate(3 * width / 4 , height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 4
      noStroke();
      push();
      translate(width / 4, 3 * height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 5
      noStroke();
      push();
      translate(3 * width / 4, 3 * height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();  
//Change the size of the object
}
    if (mouseX < width / 4){
      size += 1.5;  
}
//Change the size of the object  
    if (mouseX > width / 4 & mouseX < width / 2 ){
      size += -1.5;    
}
//Change the size of the object  
    if (mouseX > width / 2 & mouseX < width * 0.75){
      size += 1; 
}
//Change the size of the object 
    if (mouseX > width * 0.75){
      size -= 1;
}
//Change the speed of the object 
   if (mouseY > height / 2){
      angle += 2; 
}
//Change the speed of the object
   if (mouseY < height / 2){
      angle += 6;
}
//Change the speed of the object
   if (mouseX > width / 2){
      angle += 4; 
}
//Change the speed of the object
   if (mouseX < width / 2){
      angle += 2;
}
}

I have been experimenting to create a dynamic drawing that focuses on rotation. When mouse is moved on the canvas, the size and color of the object, as well as the speed and shapes would be changed.

lee chu – looking outwards 03

Rock, especially gravel, is not often considered a substantial building material on its own, and neither is string; however, when these two elements are combined by laying the string out and entangling it within a pile of rocks to create a solid yet temporary structure. The structure shown above seems to be quite fragile on the surface, but the core is extremely solid due to the tension in the string. Although the uses of this construction type seems quite ambiguous, the potential for temporary strong structures which can be constructed using rubble or scrap materials might be applicable in the future.