Month: September 2017

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.