Ziningy1 – Section C – Project 03 – Dynamic Drawing

Inspired by how planets in solar system orbit around the sun, I made the visualization base on orbiting and pulsing movement. The aspects of image elements that the mouse movement controls include: background color, planet color, halo size(sun), the self-orbiting speed(moon), the stroke weight of the connecting line. I utilized a lot of sin() and cos() in this project to make the change more dynamic instead of one way. It is also my first time experimenting with the time elements in programing to create graphics.

ziningy1 – project 03

//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-03   

var sunx = 300
var suny = 240
var sunw = 130
var sunh = 130
var t = 1; //time





function setup() {
    createCanvas(600,480);
    

    
} 



function draw() { 
   

    angleMode(DEGREES); 

    background(32,50,74+(mouseX-mouseY)/13);
 
    noStroke();

    //multiple pulsing halo 

    fill(50+mouseY,100+mouseX,0,30);

    ellipse(sunx,suny,sunw+50*cos(-mouseX)+50,sunh+50*cos(-mouseX)+50); //halo changes size and color with the mouse moverment 

    fill(100+mouseX,mouseX/2,30,40);

    ellipse(sunx,suny,sunw+20*sin(mouseY)+40,sunh+20*sin(mouseY)+40); 

    fill(150+mouseY,mouseY,30,70);

    ellipse(sunx,suny,sunw+20*cos(mouseX)+10,sunh+20*cos(mouseX)+20); 


    

   
    
  

    //mercury, closest ball to the sun

    var merx = 100*cos(mouseX)+sunx 
    var mery = 100*sin(mouseX)+suny // the x, y coordinates of the first circle will move in a circle with the mouse movement, same for other orbiting circle


    fill(60+mouseX/2);

    stroke(210);
    strokeWeight(1+7*sin(mouseX)); //stroke line of the first orbiting ball changes with the mouse 
    line(merx,mery,sunx,suny);

    strokeWeight(2);
    ellipse(merx, mery, 20, 20);



    //venice 

    var venx = 140*cos(0.5*mouseX)+sunx //same with the first ball 
    var veny = 140*sin(0.5*mouseX)+suny

    fill(150+mouseX,mouseX/4,20);

    stroke(180);
    strokeWeight(1+5*sin(-mouseY));
    line(venx,veny,sunx,suny);

    strokeWeight(1+10*sin(-mouseY))

    ellipse(venx, veny, 30, 30);



    // earth

    fill(40,40+mouseY,100+mouseX);


    var earthX = 190*cos(-mouseX)+sunx;
    var earthY = 210*sin(-mouseX)+suny;


    stroke(200);
    strokeWeight(1+5*cos(-mouseX));
    line(earthX,earthY,sunx,suny);

    ellipse(earthX ,earthY, 50, 50);

    
    //the sun 

    fill(100+mouseX/3,mouseY/2,20);

    ellipse(sunx,suny,sunw,sunh);

  

    //self orbiting moon 
   

    t = t+(mouseY+mouseX)/80; // change the orbiting speed with the mouse movement 

    stroke(150)
    strokeWeight(1+3*sin(2*mouseX));
    noFill();
    ellipse(earthX,earthY,100,100)

    fill(100+mouseX/2,80+mouseX/4,40);




    ellipse(50*cos(t)+earthX ,50*sin(t)+earthY, 15, 15);



}