Jessica Timczyk – Project 03 Dynamic Drawing

space

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project-03-Dynamic Drawing

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

function draw() {
    background(7, 9, 76);

    var mX = max(min(mouseX, 640), 0); // keeps mouseX between 0 - 640

    var size = mX * 3 / 640

    var colorR = max(min(mouseX, 244), 90);
    var colorG = max(min(mouseX, 70), 1);
    var colorB = max(min(mouseX, 100), 60);

    mX = 640 - mX;
    
    // shooting star
    fill(248, 246, 100);
    stroke(255);
    strokeWeight(4);
    quad(290 + 15/2, mX - 120, 290 + 8, mX - 123, 330, mX - 150, 340, mX - 135); // star tail
    quad(290, mX - 100, 305, mX - 120, 290, mX - 140, 275, mX - 120); // star shape

    mX = max(min(mouseX, 640), 0);

    // spaceship shape setup
    noFill(); // glass dome
    stroke(255);
    ellipse(mouseX, height * 2/3 - 30, 85, 120);


     // alien colors
    fill(9, 172, 20);
    stroke(9, 172, 20);
    rect(mouseX - 2.5, height * 2/3 - 60, 5, 7); // neck

    stroke(18, 111, 25);
    triangle(mouseX, height * 2/3 - 10, mouseX - 15, height * 2/3 - 50, mouseX + 15, height * 2/3 - 50); // torso

    triangle(mouseX - 3/2, height * 2/3 - 74, mouseX, height * 2/3 - 80, mouseX + 3/2, height * 2/3 - 74); // antena

    ellipse(mouseX, height * 2/3 - 65, 22, 15); // head

    fill(0);
    stroke(255);
    strokeWeight(3);
    ellipse(mouseX - 5, height * 2/3 - 65, 7, 6); // left eye ball

    ellipse(mouseX + 5, height * 2/3 - 65, 7, 6); // right eye ball

    fill(142, 142, 144); // spaceship body
    stroke(0);
    strokeWeight(3);
    ellipse(mouseX, height * 2/3, 200, 75);

    // seam on space ship
    strokeCap(ROUND);
    stroke(0);
    fill(0);
    rectMode(CENTER);
    rect(mouseX, height * 2/3, 160, 1);

    // Planet 1
    fill(219, 34, 47);
    noStroke();
    ellipse(125, 125, 100  * size, 100 * size);

    size = 3 - size; // reverse size for second planet

    // Planet 2
    fill(255, 187, 3);
    ellipse(450, 200, 80 * size, 80 * size); // planet
    fill(colorR, colorG, colorB); // color of ring changes with mouse
    ellipse(450, 200, 130 * size, 10 * size); // ring

    // stars
    var starX = mouseX;

    fill(249, 215, 81);
    noStroke();
    push(); // star 1
    translate(100, 400);
    rotate(starX / width * mX); // star rotates around itself as mouse moves
    rectMode(CENTER);
    rect(0, 0, 7, 12);
    pop();

    push(); // star 2
    translate(20, 300);
    rotate(starX / width * mX);
    rectMode(CENTER);
    rect(0, 0, 10, 15);
    pop();    

    push(); // star 3
    translate(260, 30);
    rotate(starX / width * mX);
    rectMode(CENTER);
    rect(0, 0, 20, 15);
    pop();

    push(); // star 4
    translate(500, 70);
    rotate(starX / width * mX);
    rectMode(CENTER);
    rect(0, 0, 5, 7);
    pop();

    push(); // star 5
    translate(600, 430);
    rotate(starX / width * mX);
    rectMode(CENTER);
    rect(0, 0, 40, 40);
    pop();

    push(); // star 6
    translate(210, 200);
    rotate(starX / width * mX);
    rectMode(CENTER);
    rect(0, 0, 15, 20);
    pop();

    push(); // star 7
    translate(450, 400);
    rotate(starX / width * mX);
    rectMode(CENTER);
    rect(0, 0, 10, 15);
    pop();
}

When writing this code I found it easy to come up with ideas of how and what I wanted to move but writing the code to implement such ideas was more difficult, and I thus had to simplify my ideas in certain areas. I am happy with how the drawing came out, looking very cartoonish how all of the variables move in conjunction to each other.