eeryan-project03-dynamicdrawing

sketch

//Erin Ryan
//Lab C
//eeryan@andrew.cmu.edu
//Project 03
var circleX = 450;
var circleY = 220;
var cD = 190;//diameter of earth
var mD = 40;//diameter of moon
var time = 1;
skyR = 30;
skyG = 30;
skyB = 89;
//orbit variables
var posX = 0;
var posY = 0;
var radiusX = 280;
var radiusY = 190;
var theta = 0;

function setup() {
  createCanvas(640,480);
  posX = radiusX * cos(theta);
  posY = radiusY * sin(theta);
}

function draw() {
  background(skyR,skyG,skyB);
//make earth
  stroke(66,66,104);
  strokeWeight(3);
  fill(113,111,179);
  ellipse(circleX, circleY,cD,cD);
//earth face
//earth makes sleeping face when sky is darker
  if(mouseX < 200){
    stroke(66,66,104);
    strokeWeight(3);
    arc(circleX - cD/5,circleY - cD/8,10,10,0,PI);
    arc(circleX + cD/5,circleY - cD/8,10,10,0,PI);
    fill(66,66,104);
    ellipse(circleX,circleY+10,15,15);
  //text
    fill(255);
    strokeWeight(1.5);
    noStroke();
    rect(circleX-cD,circleY - 30,90,30,30,30,0,30);
    noFill();
    stroke(80);
    strokeWeight(1);
    text("zzzzzzzzz",circleX - cD + 18,circleY - 11);
  }
  //earth wakes up when sky is lighter
  if(mouseX >= 200){
    noStroke();
    fill(66,66,104);
    ellipse(circleX - cD/5,circleY - cD/8,10,10);
    ellipse(circleX + cD/5,circleY - cD/8,10,10);
    strokeWeight(3);
    arc(circleX,circleY+10,20,20,0,PI);
  //text
    fill(255);
    strokeWeight(1.5);
    noStroke();
    rect(circleX-cD,circleY - 30,90,30,30,30,0,30);
    noFill();
    stroke(80);
    strokeWeight(1);
    text("good morning!",circleX - cD + 8,circleY - 11);
  }
//make moon orbit the earth
  theta = mouseX/5 * 0.05;
  posX = radiusX * cos(theta);//use trigonometric function x = rcos(theta) to determine x coordinate
  posY = radiusY * sin(theta);//use trigonometric function y = rsin(theta) to determine y coordinate
  translate(width/2, height/2);
  fill(226,223,172);
  ellipse(posX, posY, mD, mD);
//make moon change size via mapping
  mD = map(theta,0,6,80*(theta+1),15);
//moon detailing
  noStroke()
  fill(196,193,153);
  ellipse(posX - mD/5, posY - mD/5, mD/6, mD/6);
  stroke(196,193,153);
  noFill();
  ellipse(posX + mD/4, posY + mD/6, mD/7, mD/7);
//make sky change color
  skyR = mouseX/5 + 30;
  skyG = mouseX/4 + 30;
  skyB = mouseX/2 + 89;
}

My concept was to show the Moon orbiting around the Earth, with the Moon changing size, position, and velocity as it moved through space, adding an element of perspective to the drawing.

I was unsure how to code an elliptical orbit, as I knew that the rotate() function used for circular orbits wouldn’t apply.

I ended up using the trigonometric formulas x=rcos(theta) and y=rsin(theta) to get the orbit coordinates – I then tweaked theta so it corresponded with mouseX. I initially tried to use conditionals to get the moon to change size, but it was very complicated, and wouldn’t transition smoothing, so I ended up using the mapping function.

I decided to add more elements of detail to the Moon, and I gave the Earth an awake and asleep face. I wish I could have easily added more details to the Earth so that it looked more like Earth, but it ended up just looking like a random planet.