Project-03-Dynamic-Drawing – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

-The triangles rotate clockwise when mouse moving to the right, and counterclockwise when moving to the left

-The color become lighter when mouse moving to the bottom right, and darker when moving to the top left

-The triangle and change distance as mouse moving left, and it do the opposite when moving right.

– The smile faces shrink as mouse moves.

/* Jiayi Chen
   jiayiche    Section A */
function setup() {
     createCanvas(600, 450);
     rectMode(CENTER);
}

function draw() {
    print('mouseX='+ mouseX +'mouseY'+mouseY)
    //change background
    backgroundchange();

    // smile face background
    for (var a=5;a<600;a=a+35){
        for (var b=0;b<450;b=b+35){
        push();
        translate(a,b);
        smileface();
        //change size
        var mx =constrain(mouseX,0,450)
        var my =constrain(mouseY,0,300)
            if(dist(mx,my,a,b)<= 150){ 
                d=30* dist(mx,my,a,b)/150;
            }
        pop();
        } 
    }
    //floating triangle and rectangle
    translate(constrain(mx,0,575),constrain(my,0,425));
    push();
    noStroke()
    cr=mx/450*255
    fill(cr,cr,cr,200)
    rect(0,0,50,50);
    var ang=mouseX/600*360
    //6 triangles
    push();
    scale(3*constrain(my,0,450)/450*3)
    push();
    triDist=100*constrain(mx,0,600)/600
    rotate(radians(ang));
    translate(triDist,0);
    triangle(0, 30, 30, 30, 15, 15);
    pop();
    push();
    rotate(radians(ang+60));
    translate(triDist,0);
    triangle(0, 30, 30, 30, 15, 15);
    pop();
    push();
    rotate(radians(ang+120));
    translate(triDist,0);
    triangle(0, 30, 30, 30, 15, 15);
    pop();
    push();
    rotate(radians(ang+180));
    translate(triDist,0);
    triangle(0, 30, 30, 30, 15, 15);
    pop();
    push();
    rotate(radians(ang+240));
    translate(triDist,0);
    triangle(0, 30, 30, 30, 15, 15);
    pop();
    push();
    rotate(radians(ang+300));
    translate(triDist,0);
    triangle(0, 30, 30, 30, 15, 15);
    pop();
    pop();
    pop();
}



var x=16
var y=16
var d=30



//single simle face
function smileface(){
    push();
    fill('yellow')
    //head
    ellipse(x,y,d); 
    //mouth
    arc(x, y+d*1/7, d/2, d/2, 0, PI); 
    //eye
    fill(0)
    ellipse(x+d*1/5,y-d*1/5,d/6);
    ellipse(x-d*1/5,y-d*1/5,d/6);
    pop();
}


   //change in background
function backgroundchange(){
    var r = mouseX/600*255
    var g = mouseX/600*255
    var b = mouseY/600*255
    background(r,g,b)
}

Leave a Reply Cancel reply