rsp1-Section-B-Project-03-Dynamic-Drawing

sketch

//Rachel Park
//Section B @ 10:30 AM
//rsp1@andrew.cmu.edu
//Project-03-Dynamic-Drawing

var c = 70;
var triX1 = 307;
var triX2 = 320;
var triX3 = 333;
var triX4 = 305;
var triX5 = 290;
var triX6 = 335;
var triX7 = 350;
var triX8 = 313;
var triX9 = 327;

var triY1 = 230;
var triY2 = 210;
var triY3 = 253;
var triY4 = 235;
var triY5 = 260;
var triY6 = 280;
var triY7 = 268;


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

function draw() {
  background(c,60);

//modifying the background fill color
  if (mouseX < 640)  {
    c = mouseX * 0.5;
  }
  if (mouseX < 0) {
    c = mouseX;
  }

  var m = max(min(mouseX,400),0);
  var size = m * (7/8);
  var starsize = c;

  var n = max(min(400,mouseY),0);
  var moonlocation = n * (7/8);

  //making the moon
  push();
  noStroke();
  translate(width/4,height/4);
  fill(254,255,182);
  ellipse(0,moonlocation,50,50);
  fill(c);
  ellipse(10,moonlocation,45,45);
  pop();

  //constructing the rocketship + fire blast
  push();
  noStroke();
  fill(255,4,4);
  triangle(309 + m * (1/8),triY1-5, 320 + m * (1/8),triY2,
  331 + m * (1/8),triY1-5);

  fill(215);
  triangle(305 + m * (1/8),triY3,305 + m * (1/8),triY4,292 + m * (1/8),triY5);
  triangle(335 + m * (1/8),triY3,335 + m * (1/8),triY4,350 + m * (1/8),triY5);

  fill(255,80,16);
  ellipse(width/2 + m * (1/8),265,15,15);
  triangle(320 + m * (1/8),triY6,313 + m * (1/8),triY7,327 + m * (1/8),triY7);

  scale(0.5);
  fill(255,248,16);
  translate(width/2 + m * (1/8),260);
  ellipse(width/2 + m * (1/8),265,15,15);
  triangle(320 + m * (1/8),triY6,313 + m * (1/8),triY7,327 + m * (1/8),triY7);
  pop();

  noStroke();
  fill(188);
  translate(width/2,height/2);
  scale(0.25);
  rectMode(CENTER);
  rect(m * (1/2),0,100,100,10);
  //  rect(m * (1/2),0,100,100,10);
  push();

  //rotation of the stars
  rotate(frameCount / 90.0);
  //small star
  push();
  noStroke();
  fill(mouseX/4, mouseY,mouseX/2);

  /*changing the color of the stars
  using the mouse movement*/
  translate(width-100,height/2);
  rotate(frameCount / 100.0);
  scale(0.5);
  star(0,0,30,50,5);
  pop();

  //construction of mid-size star
  push();
  noStroke();
  fill(mouseX/8, mouseY,mouseX/2);
  translate(width-400, height/2);
  rotate(frameCount / -120.0);
  star(0,0,30,50,5);
  pop();
}

//definition and utilization of variable for the stars
function star(x, y, radius1, radius2, npoints) {
  var angle = TWO_PI / npoints;
  var halfAngle = angle/2.0;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius2;
    var sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a+halfAngle) * radius1;
    sy = y + sin(a+halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

This project was actually more difficult than the other projects that we have done this far, at least for me. I started with a simple idea of wanting to create a drawing of a rocket because it allowed for so many different options for using variables that move with the mouse. For this project, I decided to manipulate the movement of the rocket itself, the background color, the location of the moon, and the colors for the stars that are continually rotating around the rocket itself.

In the image below, I show some of the design ideas for the rocket itself, and which directions I initially wanted it to move.

Move the mouse up and down to move the moon, and move the mouse side to side to move the rocket and change the star colors.