Sijings-project03-DynamicDrawing – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

Sijings-project

//Clair(sijing) Sun
//session C
//sijings@andrew.cmu.edu
//Project-03-Dynamic Drawing

var moonposX=540;//moon position
var moonposY=140;
var moonR=80;
var frontTX1=300;//front mountain1
var frontTY1=260;
var frontTX2=250;//front mountain2
var frontTY2=260;
var frontTX3=350;//front mountain3
var frontTY3=260;
var front2TX1=250;
var front2TY1=260;
var front2TX2=200;
var front2TY2=260;
var front2TX3=300;
var front2TY3=260;
var islandDegree1=180;//island
var islandDegree2=90;
var islandPosX1=300;
var islandPosY1=250;
var islandWidth=390;
var islandHeight=390;
var backTX1=200;//back mountain1
var backTY1=260;
var backTX2=160;
var backTY2=260;
var backTX3=240;
var backTY3=260;
var back2TX1=180;//back mountain2
var back2TY1=260;
var back2TX2=104;
var back2TY2=260;
var back2TX3=254;
var back2TY3=260;
var moonColor1=156;
var moonColor2=193;
var offsetFish=20;//for fish to follow with a distance
var color1=243;//change color when mouse arrive the moon
var color2=244;
var color3=225;
var bird=0;//a condition for mouse in and outside of the island 



function setup() {
    createCanvas(640, 480);
    
}
 
function draw() {
    background(color1,color2,color3);
    noStroke();
    fill(moonColor1,moonColor2,204);
    moonColor1+=mouseY/400;//moon color change
    //print("bird"+bird);for debugging
    if (moonColor1>=254&bird>0){//moon color changing as mouse moves
        moonColor1=mouseX;
        moonColor2=mouseY;
    }
    var moveMouse=mouseX-500;//to create moon rotatons
    moonposX+=moveMouse;
    if (moveMouse>30&bird>0){//two edge cases
        moveMouse=5;
    }
    if (moonposX<5&bird>0){
        moonposX=635;
    }
    if (moonposX>635&bird>0){
        moonposX=5;
    }

    if (mouseX>470&mouseX<530&&mouseY<163&&mouseY>93){
        color1=224;//background color change
        color2=125;
        color3=105;

    }else{
        color1=243;
        color2=244;
        color3=225;
    }
    if (bird==0&back2TY1<305){//for mountains disappear
        back2TY1+=1;
        backTY1+=1;
        frontTY1+=1;
        front2TY1+=1;
    }else{//for the mountains appear
            back2TY1-=1;
            backTY1-=1;
            frontTY1-=1;
            front2TY1-=1;
            if (back2TY1<45){//to stop mountain from moving further
                back2TY1=45;
            }
            if(backTY1<30){
                backTY1=30;
            }
            if (frontTY1<90){
                frontTY1=90;
            }
            if (front2TY1<110){
                front2TY1=110;
            }


    }

    //mountains
    ellipse(moonposX,moonposY,moonR,moonR);
    fill(222,226,227);
    triangle(back2TX1,back2TY1,back2TX2,back2TY2,back2TX3,back2TY3);
    translate(100,0);
    triangle(back2TX1,back2TY1,back2TX2,back2TY2,back2TX3,back2TY3);
    translate(-100,0);
    fill(163,180,90);
    triangle(backTX1,backTY1,backTX2,backTY2,backTX3,backTY3);
    fill(65,69,41);
    triangle(frontTX1, frontTY1, frontTX2, frontTY2, frontTX3, frontTY3);
    fill(93,105,57);
    triangle(front2TX1, front2TY1, front2TX2, front2TY2, front2TX3, front2TY3);
    fill(90,139,157);
    angleMode(DEGREES);
    arc(islandPosX1, islandPosY1, islandWidth, islandHeight, 0, islandDegree1,islandDegree2);
    

    if (mouseX>106&mouseX<494 && mouseY>251){//for determining wether the mouse is on the island
        fill(175,215,198,100);
        bird=0;
    }else{
        fill(175,215,198);
        bird=1;
    }

    //fish drawings
    arc(mouseX-offsetFish, mouseY+offsetFish, 30,30,0,100,130);
    arc(mouseX-offsetFish-9, mouseY+offsetFish+14.5, 10,10,0,100,130);
    translate(-20,5);//for multiple fishes 
    arc(mouseX-offsetFish, mouseY+offsetFish, 30,30,0,100,130);
    arc(mouseX-offsetFish-9, mouseY+offsetFish+14.5, 10,10,0,100,130);
    translate(-20,5);
    arc(mouseX-offsetFish, mouseY+offsetFish, 30,30,0,100,130);
    arc(mouseX-offsetFish-9, mouseY+offsetFish+14.5, 10,10,0,100,130);
    translate(-25,0);
    arc(mouseX-offsetFish, mouseY+offsetFish, 30,30,0,100,130);
    arc(mouseX-offsetFish-9, mouseY+offsetFish+14.5, 10,10,0,100,130);
    translate(30,35);
    arc(mouseX-offsetFish, mouseY+offsetFish, 30,30,0,100,130);
    arc(mouseX-offsetFish-9, mouseY+offsetFish+14.5, 10,10,0,100,130);
    translate(20,-25);
    arc(mouseX-offsetFish, mouseY+offsetFish, 30,30,0,100,130);
    arc(mouseX-offsetFish-9, mouseY+offsetFish+14.5, 10,10,0,100,130);
    translate(25,-10);
    arc(mouseX-offsetFish, mouseY+offsetFish, 30,30,0,100,130);
    arc(mouseX-offsetFish-9, mouseY+offsetFish+14.5, 10,10,0,100,130);
    translate(10,10);
    arc(mouseX-offsetFish, mouseY+offsetFish, 30,30,0,100,130);
    arc(mouseX-offsetFish-9, mouseY+offsetFish+14.5, 10,10,0,100,130);

    //rotating the boat on the water
    if (bird>0){
        var degree=cos(mouseX);
        rotate(degree);
        //print(degree);for debugging the boat rotation
        fill(104,76,16);
        arc(400, 220, 50,30, 0, islandDegree1,islandDegree2);
    }
    

}

For this project, my idea is to create a narrative drawing where the audience can control the pace by either putting the mouse outside of the lake and inside of the lake. The project is intended that the audience start by putting their mouses inside the lake and then gradually towards the outside. The fish group is always following the mouse. When the fish jumps out of the lake, the mountain grows up and the boat appears. The users can also manipulate the speed that the moon/the sun rotates. When the mouse(in my drawing, the fish group) meet the original point of the sun, the background color will change. Four variables here are 1. the color of the moon 2. the background color 3. the speed of moon’s rotation 4. the rotation angle of the boat (slightly to create the effect of its floating) 5. the size of the mountain 6. the location and the color of the fish.

Leave a Reply Cancel reply