Project-03 Sophia Kim – Sec C

sketch

// Sophia S Kim
// Section C 1:30
// sophiaki@andrew.cmu.edu 
// Project-03: Dynamic Drawing

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

    var bR = 140 + mouseX * .6; 
    var bG = 255 + mouseX * .2;
    var bB = 100 + mouseX * .3;
    //variables for background color change

    background(bR, bG, bB);

    var size1 = mouseX * .4; 
        //changes size of text for mortal/immortal
    var size2 = mouseX * .15; 
        //changes size of text for forever/dead
    var size3 = mouseX * .1;
        //change size of text for talk/silent
    var size4 = mouseX * .17;    
        //change size of text for fake/real
    var textColor = 255-(mouseX*255/640); 
        //change of for any RGB color value 

    fill(0);
    noStroke();
    ellipse(mouseX-50, mouseY-100, 140, 140);
    /*changes position by following the mouseX and Y
    (image element)*/

    fill(0);
    noStroke();
    ellipse(mouseX+100, mouseY, 70, 70);
    /*changes position by following the mouseX and Y
    (image element)*/

    fill(0);
    noStroke();
    ellipse(mouseX+200, mouseY-40, 100, 100);
    /*changes position by following the mouseX and Y
    (image element)*/

    fill(0);
    noStroke();
    ellipse(mouseX+240, mouseY-180, 120, 120);
    /*changes position by following the mouseX and Y
    (image element)*/

    fill(6, textColor, mouseX*255 / 640);
        //changes color of texts (image element)  
    textFont('old english'); 
    textSize(size1); //changes text size (image element)
    if (mouseX < 200)
        text("MORTAL", mouseX, mouseY);
    else
        text("IMMORTAL", mouseX, mouseY); 
        //changes text when mouseX < 200 (image element)
        /*changes position by following the mouseX and Y
        (image element)*/

    fill(255, textColor, mouseX*255 / 640); 
        //changes color of texts (image element)
    textFont('old english'); 
    textSize(size2); //changes text size (image element)
    if (mouseX < 320)
        text("FOREVER", mouseX - 100, mouseY - 100);
    else
        text("DEAD", mouseX - 100, mouseY - 100); 
        //changes text when mouseX < 320 (image element)
        /*changes position by following the mouseX and Y 
        (image element)*/


    fill(textColor, mouseX*255 / 640, 140);
        //changes color of texts (image element)
    textFont('old english');
    textSize(size3);//changes text size (image element)
    if (mouseX < 300)
        text("TALK", mouseX - 150, mouseY - 50);
    else 
        text ("SILENT", mouseX - 150, mouseY - 50);
        //changes text when mouseX < 300 (image element)
        /*changes position by following the mouseX and Y
        (image element)*/

    fill(160, mouseX*255 / 640, textColor);
        //changes color of texts (image element)
    textFont('old english');
    textSize(size4);//changes text size (image element)
    if (mouseX < 200)
        text("FAKE", mouseX + 200, mouseY - 140);
    else
        text("REAL", mouseX + 200, mouseY - 140);
        //changes text when mouseX < 200 (image element)
        /*changes position by following the mouseX and Y
        (image element)*/
}

I was inspired by one of the links that were offered in the Deliverables (Moving Art at SmaPhoArt.com-Floating Figures). I had a really hard time with conditions, but after awhile, I was able to make the text change using different conditions.