Project 3 – Dynamic Drawing

Assemble the astronaut to see a funky-looking space! Careful though, one wrong move and everything will float away.

sketch
/*
 * Michelle Kim
 * michell4
 * Section B
 */
 
function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(0);
    stroke(120);
    strokeWeight(1);
    var x = max(min(mouseX, 600), 0);
    var y = max(min(mouseY, 600), 0);
    var sizeX = x * 350 / 400;
    var sizeY = y * 350 / 400;
    //purple planet
    fill(188, 123, 238);
    ellipse(10 + x * 300 / 600, 225, sizeX / 4);
    //purple planet's orange stripes
    fill(253, 106, 68);
    rect(x * 290 / 600, 200, sizeX / 9, sizeY / 30);
    rect(x * 270 / 600, 225, sizeX / 9, sizeY / 30);
    rect(x * 290 / 600, 250, sizeX / 9, sizeY / 30);
    //yellow planet and rings
    noStroke();
    fill(255, 209, 20);
    ellipse(x * 160 / 600, y * 300 / 600, sizeX / 5);
    ellipse(x * 160 / 600, y * 300 / 600, sizeX / 2, sizeY / 7);
    //yellow planet's squares
    stroke(120);
    strokeWeight(1);
    fill(92, 106, 228);
    square(x * 130 / 600, y * 330 / 600, sizeX / 40);
    square(x * 130 / 600, y * 240 / 600, sizeX / 65);
    square(x * 180 / 600, y * 340 / 600, sizeX / 45);
    square(x * 160 / 600, y * 260 / 600, sizeX / 20);
    //blue planet
    fill(123, 230, 238);
    ellipse(400 - x * 300 / 600, 300 + y * 300 / 600, sizeY * 1.2);
    //blue planet's green dots
    fill(105, 158, 109);
    ellipse(x * 150 / 600, 270 + y * 300 / 600, sizeY / 3);
    ellipse(x * 290 / 600, 250 + y * 300 / 600, sizeY / 5);
    ellipse(x * 290 / 600, 310 + y * 300 / 600, sizeY / 15);
    //astronaut
    stroke(0);
    strokeWeight(3);
    fill(255);
    //astronaut's head
    ellipse(655 -  x * 200 / 600, 20 + y * 300 / 600, sizeX / 3);
    arc(475, 125, 45, 40, radians(190), radians(250));
    arc(471, 140, 45, 40, radians(190), radians(200));
    //astronaut's left hand
    ellipse(265 + x * 200 / 600, 100 + y * 300 / 600, sizeX / 10);
    //astronaut's right hand
    ellipse(415 + x * 200 / 600, 100 + y * 300 / 600, sizeX / 10);
    //astronaut's left foot
    ellipse(310 + x * 200 / 600, 190 + y * 300 / 600, sizeX / 10);
    //astronaut's right foot
    ellipse(370 + x * 200 / 600, 190 + y * 300 / 600, sizeX / 10);
    //astronaut's body
    rect(270 + x * 200 / 600, 70 + y * 300 / 600, sizeX / 3, sizeY / 2);
    ellipse(630 -  x * 200 / 600, 100 + y * 300 / 600, sizeX / 20);
    ellipse(630 -  x * 200 / 600, 130 + y * 300 / 600, sizeX / 20);
}

Leave a Reply