Category: Section B

sketch

var rectSize = 20;
var dir = -1;

//the distance between corner circles and the center
var distCorner;
//the distance between up, bottom, left and right circle and the center
var dist1;
//color

//thin rectangle Y position 
var rectY = 5;

//thin rectangle height
var rectH = 5

function setup() {


    createCanvas(480, 640);
    distCorner = sqrt(11250);
    dist1 = 150;  

}

function draw() {			

	//if mouse is outside the canvas, then the movements stop
	if(mouseX > 480){
		mouseX = 480;
	}

	if(mouseX < 0){
		mouseX = 480;
	}

	background(40);
	noStroke();
	rectMode(CENTER);
	fill(255, 70);	
	
	//the center rectangles 
	push();
	fill(255, 90);
	//change color when mouse is hovering on the rect
	if( dist(mouseX, mouseY, width/2, height/2) < Math.abs(rectSize/2)) {
		fill(230,97,71);
	};
	//when mouse move, the rectangles rotate
	rectMode(CENTER);
	translate(width/2, height/2);
	rotate(mouseX*0.01)	
	//central big rect
	rect(0, 0, rectSize, rectSize);
	//four small rectangles on the center
	fill(255,40);
	rect(-10, 10, rectSize/2, rectSize/2);
	rect(10,-10, rectSize/2, rectSize/2);
	rect(10, 10, rectSize/2, rectSize/2);
	rect(-10,-10, rectSize/2, rectSize/2);
	pop();

	//the left rect
	push();
	//change color when mouse is hovering on the rect
	if( dist(mouseX, mouseY, width/2-100, height/2) < Math.abs(rectSize/2) ){
		fill(125,201,198,90);
	};
	rectMode(CENTER);
	translate(width/2-100, height/2);
	rotate(mouseX*0.01)	
	rect(0, 0, rectSize, rectSize);
	pop();

	//the up rect 
	push();
	if( dist(mouseX, mouseY, width/2, height/2-100) < Math.abs(rectSize/2)) {
		fill(125,201,198,90);
	};
	rectMode(CENTER);
	translate(width/2, height/2-100);
	rotate(mouseX*0.01)	
	rect(0, 0, rectSize, rectSize);
	pop();

	//the right rect
	push();
	if( dist(mouseX, mouseY, width/2+100, height/2) < Math.abs(rectSize/2)) {
		fill(125,201,198,90);
	};
	rectMode(CENTER);
	translate(width/2+100, height/2);
	rotate(mouseX*0.01)	
	rect(0, 0, rectSize, rectSize);
	pop();

	//the bottom rect
	push();
	if( dist(mouseX, mouseY, width/2, height/2+100) < Math.abs(rectSize/2)) {
		fill(125,201,198,90);
	};
	rectMode(CENTER);
	translate(width/2, height/2+100);
	rotate(mouseX*0.01)	
	rect(0, 0, rectSize, rectSize);
	pop();

	//left top rect
	push();
	if( dist(mouseX, mouseY, width/2-sqrt(5000), height/2-sqrt(5000)) < Math.abs(rectSize/2)) {
		fill(125,201,198,90);
	};
	rectMode(CENTER);
	translate(width/2-sqrt(5000), height/2-sqrt(5000));
	rotate(mouseX*0.01)	
	rect(0, 0, rectSize, rectSize);
	pop();

	//right top rect
	push();
	if( dist(mouseX, mouseY, width/2+sqrt(5000), height/2-sqrt(5000)) < Math.abs(rectSize/2)) {
		fill(125,201,198,90);
	};
	rectMode(CENTER);
	translate(width/2+sqrt(5000), height/2-sqrt(5000));
	rotate(mouseX*0.01)	
	rect(0, 0, rectSize, rectSize);
	pop();

	//right bottom rect
	push();
	if( dist(mouseX, mouseY, width/2+sqrt(5000), height/2+sqrt(5000)) < Math.abs(rectSize/2)) {
		fill(125,201,198,90);
	};
	rectMode(CENTER);
	translate(width/2+sqrt(5000), height/2+sqrt(5000));
	rotate(mouseX*0.01)	
	rect(0, 0, rectSize, rectSize);
	pop();

	//left bottom rect
	push();
	if( dist(mouseX, mouseY, width/2-sqrt(5000), height/2+sqrt(5000)) < Math.abs(rectSize/2)) {
		fill(125,201,198,90);
	};
	rectMode(CENTER);
	translate(width/2-sqrt(5000), height/2+sqrt(5000));
	rotate(mouseX*0.01)	
	rect(0, 0, rectSize, rectSize);
	pop();

	//outside circles
	push();
	//rotate as a big circle when the mouse moves 
	translate(width/2, height/2);	
	rotate(mouseX*0.01)
	ellipse(-dist1, 0, 15, 15);
	ellipse(dist1, 0, 15, 15);
	ellipse(0, -dist1, 15, 15);
	ellipse(0, dist1, 15, 15);
	ellipse(distCorner, -distCorner, 15, 15);
	ellipse(-distCorner, -distCorner, 15, 15);
	ellipse(distCorner, distCorner, 15, 15);
	ellipse(-distCorner, distCorner, 15, 15);
	pop();

	//instruction
	fill(255, 70);
	textSize(15);
	text("move your mouse to the squares or drag your mouse", 60, height-20); 

}

function mouseDragged(){	
	//when the mouse is dragged, the size of rects become bigger
	rectSize += 2;
	dist1 +=1.5;
	distCorner +=1.5;
	//if the size is bigger than 120, the rects become smaller
	if (rectSize > 120){
		rectSize *= dir;
		distCorner *=dir;	
		dist1 *=dir;	
	}

	//if the size is 0,the circles go back to original places
	if (rectSize == 0 ){
		distCorner = sqrt(11250);
		dist1 = 150;
		
	};

	//if the mouse if off the canvas, the graphic stop moving
	if(mouseX > 480 || mouseY > 680){
		rectSize = 100;
		distCorner = 1.5*sqrt(11250);
    	dist1 = 1.5*150;
	}
}

I planned to make a rotating dynamic drawing at first, so I started to build a circle of squares and when the mouse wheel was moved, the size of squares would be changed. However, I realized moving the wheel can also scroll down the page which would be very inconvenient. Therefore, I decided to change moving the wheel by dragging the mouse. Also, I realized it would be fun to change the color of squares, so I have made the color can be changed whenever the mouse is hovering on the squares.

sketch

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Project-03

var angle = 0;

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

}

function draw() {
    background(mouseX-70,mouseY-30,mouseY);

    //WHen the mouse is on the right side of the canvas

    if (mouseX > 250) {

        var length = max(min(mouseX,640),0);
        var size = length * 600 / 640;
        
        //outer left white eye + black boarder 
        fill(255);
        strokeWeight(10);
        ellipse(100 + length,170,size,size);

        //inner left black iris
        fill(0);
        ellipse(100 + length,170,100,100);

        //inner left grey pupil
        fill(70);
        ellipse(100 + length,170,50,50);

        //outer right white eye + black baorder
        fill(255);
        strokeWeight(10);
        ellipse(500 - length,170,size-100,size-100);

        //inner right black iris
        fill(0);
        ellipse(500 - length,170,size-200,size-200);

        //inner right grey pupil
        fill(70);
        ellipse(500 - length,170,size-250,size-250);

        //mouth
        fill(209,65,65);
        triangle(250,330,340,330,300,380);

    }

    //When the mouse is on the left side of the canvas

    if (mouseX < 250) {

    //green mouth
    strokeWeight(10);
    fill(71,135,100);
    ellipse(mouseX,mouseY,100,random(0,30));

     //green eyes
     fill(71,135,100);
    ellipse(mouseX-50,mouseY-50,30,30);
    ellipse(mouseX+50,mouseY-50,30,30);
    sizeX = 50;
 
    //red mouth
    fill(198,41,88);
    ellipse(mouseX+100,mouseY+200,100,random(0,30));

    //red eyes
    fill(198,41,88);
    ellipse(mouseX+50,mouseY+150,30,30);
    ellipse(mouseX+150,mouseY+150,30,30);
        
    //blue mouth
    fill(42,149,199);
    ellipse(mouseX+200,mouseY,100,random(0,30));

    //blue eyes
    fill(42,149,199);
    ellipse(mouseX+150,mouseY-50,30,30);
    ellipse(mouseX+250,mouseY-50,30,30);

    //line
    push();
    translate(mouseX,mouseY);
    rotate(radians(angle));
    rectMode(CENTER);
    line(mouseX,mouseY,100,100);
    fill(30,60,100);
    rect(mouseX+50, mouseY+50, 50, 50);
    fill(100,240,245);
    rect(mouseX+70, mouseY+150, 70, 70);
    text("BABABA", mouseX+30, mouseY+30);
    pop();
    angle = angle + 0.5;

    }

}

For this project, I wanted to divide the drawing into two parts: left and right. I tried to integrate two different parts into a single painting and continue with the “face” theme that we have been practicing in our previous works. While working on this project, I was able to learn from my mistakes and overcome problems. Although stressful, I believe I can now understand the language better.

(The picture is straight up on my desktop, but it turns around like this as soon as I attach it…)

sketch

/*
Jamie Ho
10:30
jamieh@andrew.cmu.edu
Project 03
*/

var rectSize = 10;
var d = 75; //distance from edges and distance between each rectangle's corner

function setup() {
    createCanvas(640, 480);
    rectMode(CORNER);
    angleMode(DEGREES);
}

function draw() {
    background(0);
    fill(256);
    
    //to create array of rectangles
    for(var x = 0+d; x <= width-d; x+=d){
        for(var y = 0+d; y <= height-d; y+=d){
            
            //dis = distance between mouse pointer and rectangle
            var dis = dist(x, y, mouseX, mouseY);
            var inCanvas = d < mouseX & mouseX < width-d && d < mouseY && mouseY < height-d;
                
                
        //CHANGING COLOURS
            //if rectangles are far from mouse: rectangles are white
            //far = more than half the width of canvas
            if(dis > width/2 & inCanvas){            
                fill(256, 256, 256);
            }

                //if rectangles are close from mouse: rectangles flash in colour
                //close = less than half the width of canvas
                else if(dis < width/2 & inCanvas){
                    fill(random(0, 256),random(0, 256),random(0, 256));
                }


        //ROTATING + TRANSLATION
            
            //Top L = "starting point" 
                //no rotation no translation no shear, just size change
            
            //Top R = rotates a bit
            if(mouseX > width/2 & mouseY < height/2 && inCanvas){
                rotate(random(-0.05, 0.05));
            }

            //Bottom R = rotates double of Top R + translates
            if(mouseX > width/2 & mouseY > height/2 && inCanvas){
                rotate(random(-0.1, 0.1));
                translate(x*random(0.005, 0.0075), y*random(0.005, 0.0075));
            }

            //Bottom L = rotates quadruple of Top R/double of Bottom R + translates + shears
            if(mouseX < width/2 & mouseY > height/2 && inCanvas){
                rotate(random(-0.2, 0.2));
                translate(x*random(0.005, 0.0075), y*random(0.005, 0.0075));
                shearX(PI/16);
            }




        //CHANGING SIZE
            //if mouse is within borders of "new" canvas, 
            //then rectangles change size based on distance of pointer to rectangle
            if(inCanvas){
                rect (x, y, dis*0.1, dis*0.1);
            }

                //if mouse is not within canvas, then rectangles are small AND rotates
                else{
                    rect (x, y, rectSize, rectSize)

                }

        }
    }
   
}

For this project, I made use of for loops to create an array of the same shapes, then used conditional statements to make modifications. The dynamic drawing starts off static with the original rectangles, but when the mouse moves, the rectangles change in size based on each of their distances from the mouse. When the mouse moves into a different quadrant, the rectangles react differently through rotation, translation, shear. From the top left quadrant to the bottom left quadrant (clockwise), the movements to the rectangles become more dramatic. The hardest parts of this project were making the for loop work, making sure the conditional statements made sense and adjusting the numbers assigned to variables to an appropriate range so that the shapes appear on canvas.