Julie Choi – Project 03 – Dynamic Drawing

installation drawing

/*Julie Choi
15-104 Section C
jjchoi@andrew.cmu.edu
Project-03
*/

// declare necessary variables
var ballSizeB = 10
var ballX = 320;
var ballY = 240;
var x = 50
var angle = 0;
var angle2 = 0;
var starColor = 255;



function setup() {
	// setup canvas
    createCanvas(640, 480);
    // draw background in setup so that stars leave marks
    background(0);
}

function draw() {
	//background(0);
    var ballSizeA = 80;
    ballSizeA = constrain(ballSizeA, 1, 400);
    
    //cover the background of the inside of the planets black
    fill(0);
    noStroke();
    ellipse(width / 2, height / 2, 300, 300);
    
    //drawing yellow installation
    push();
    translate(width / 2, height / 2);
    rotate(radians(angle2));
    noStroke();
    fill(starColor);
    ellipse(x, x, 5, 5);
    pop();
    angle2 = angle2 + 5; 
    x = mouseY - 120;

    strokeWeight(3);
    stroke(255);
    fill(253, 255, 55);
    ellipse(ballX, ballY, ballSizeA, ballSizeA);

 	// draw colored planets
    push();
    noStroke();
    translate(width/2, height/2);
    rotate(radians(angle));
    fill(55, 255, 210);
    ellipse(0, -150, ballSizeB, ballSizeB);
    fill(55, 130, 255);
    ellipse(-150, 0, ballSizeB, ballSizeB);
    fill(255, 182, 55);
    ellipse(150, 0, ballSizeB, ballSizeB);
    fill(255, 55, 79);
    ellipse(0, 150, ballSizeB, ballSizeB);
    pop();
    angle = angle + 1.5;
    
    //text in the moon
    fill(0);
    noStroke();
	textSize(25);
	textFont('didot');
	text('moon', width / 2.22, height / 1.95);
}

My third project is an installation drawing that users can interact with. When you move the mouse, the rotating stars change radius and starting point to draw stars in space. Although I experienced some obstacles while using the rotation function, I enjoyed doing this project because I also learned a lot.