Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/* Star Creator 
Interactive drawing by Paul Williams

Move mouse and click to interact. 
*/

//Do these actions in start function once when the program starts.
void setup(){
  //set size of canvas
  size(400,400);
}

//Do these actions in draw function repeatedly until program is exited.
void draw(){
  //set frame rate to 60.
  frameRate(60);  
  //colour the background black until mouse is passed point 320 on the X axis, and then colour it a dark red.
  background(120*sin(mouseX/320),0,0);
 
/* Objects that are behind the Earth - background */
  
  //Stars
  //Colour the stars white.
  stroke(255);
  //size of stars dependant on speed the mouse is moving.
  strokeWeight(abs(mouseX-pmouseX)+2);
  //Create lines that will act as stars using the varying stroke weights and line lengths to create a flickering effect when moved. Move them based on X coordinate of mouse.
  line(mouseX*1.7-100, 20,pmouseX*1.7 + (mouseX-pmouseX)*4 - 100,20);
  line(mouseX*2 + 50,30, pmouseX*2 +(mouseX-pmouseX)*4 + 50,30);
  line(mouseX*2.5 - 240,40, pmouseX*2.5 + (mouseX-pmouseX)*2 -240,40);
  line(mouseX*3 + 80,120, pmouseX*3+ (mouseX-pmouseX)*4+ 80, 120);
  line(mouseX*2 -200,350, pmouseX*2 + (mouseX-pmouseX)*4 -  200,350);
  line(mouseX*3 -400,250, pmouseX*3+ (mouseX-pmouseX)*4- 400,250);
  line(mouseX + 200, 300, pmouseX + (mouseX-pmouseX)*2 + 200, 300);
  line(mouseX + 250, 75, pmouseX + (mouseX-pmouseX)*2 + 250, 75);
  line(mouseX + 300, 375, pmouseX + (mouseX-pmouseX)*2 + 300, 375);
  
  //removing strokes as we no longer need them. 
  noStroke();
  
  //Moon
  //Colour the moon Grey.
  fill(150);
  //Create circle to act as moon and move it based on X coordinate of mouse.
  ellipse(-mouseX*2+400, 200, 100,100);
  //darker grey for dark spots on moon
  fill(80);
  //making dark spots for moon to give the idea of rotation and for something to look at.
  ellipse(-mouseX*1.85+390, 180, 30,30);
  ellipse(-mouseX*1.85+380, 200, 20,20);
  ellipse(-mouseX*1.86+ 360, 220, 10,10);
  ellipse(-mouseX*1.86+ 390, 220, 10,10);
  
  //Sun
  //Change the colour of the sun from Yellow to White by using a sine wave.
  fill(255,255,sin(mouseX*0.04) + 300);
  //Create center of sun to move at the correct speed and come on screen at the correct time.
  ellipse(-mouseX*3.2+1345, 200, 275,275);
  //Yellow colour for sun rays. Change opacity by using a sin wave change by mouse x.
  //Multiplying sin by 150 gives the maximum opacity. Making it negative inverts when the wave will be at max.
  //Multiplying mouseX by 0.04 slows down the time it takes for a full wave. 
  fill(255,255,0,-150*sin(mouseX*0.04));
  //create the outer areas of the sun at same location as center.
  ellipse(-mouseX*3.2+1345, 200, 300,300);
  //overlaping opacities makes the smaller circle more bright but not as solid as center.
  ellipse(-mouseX*3.2+1345, 200, 325,325);
  
/*Earth - Middle Ground*/
  
  //colour it blue.
  fill(0,50,150);
  //draw it in center of screen.
  ellipse(200,200,200,200);
  //colour green for land
  fill(0,150,0);
  //creating a simple north america.
  ellipse(175,125,60,40);
  triangle(150,135,210,180,180,125);
  //creating a simple south america.
  triangle(200,270,258,210,220,180);
  ellipse(230,200,60,50);
  //white colour for clouds
  fill(255,180);
  //creating multiple clouds that move with mouseX
  ellipse(mouseX/10 +200,150, 90,10);
  ellipse(mouseX/20 +150,200,100,15);
  ellipse(mouseX/10 +175, 275, 80,8);
  ellipse(mouseX/15 + 220, 245, 80,20);
  ellipse(mouseX/25 +190, 110, 70, 10);
  

/* objects infront of Earth - Foreground*/

  //sun
  //fill yellow.
  fill(255,255,0);
  // center of sun
  ellipse(mouseX*3-150,200,300,300);
  //yellow with lower opacity
  fill(255,255,0,150);
  //outer areas of sun
  ellipse(mouseX*3-150,200,350,350);
  ellipse(mouseX*3-150,200,400,400);
  
  //moon
  //change colour of moon to black using sine wave.
  fill(-150*sin(mouseX*0.04) + 50);
  //create moon
  ellipse(mouseX*3.5-1050, 200, 150, 150);
}
//Do actions in the mousepressed function once when left mouse button is clicked.
void mousePressed() {
   //Set frame rate to 10
   frameRate(10);
   //Set fill to a pseudorandom colour with values > 100.
   fill(255*sin(mouseX)+100,255*sin(mouseY)+100,255*sin(2*mouseX)+100);
   //Create a diamond shape at a pseudorandom location using sine waves.
   quad(200*sin(mouseX*100)+190, 200*sin(mouseY*100)+200,200*sin(mouseX*100)+200, 200*sin(mouseY*100)+210,200*sin(mouseX*100)+210, 200*sin(mouseY*100)+200,200*sin(mouseX*100)+200, 200*sin(mouseY*100)+190);
   //Set fill to same colour as quad shape but with an opacity of 100.
   fill(255*sin(mouseX)+100,255*sin(mouseY)+100,255*sin(2*mouseX)+100, 100);
   //Create a circle large circle at the same location as the quad shape. 
   ellipse(200*sin(mouseX*100)+200,200*sin(mouseY*100)+200, 150,150);
   
   
   //Increase stroke size to 20.
   strokeWeight(20);
   //set colour to same as quad shape. Set opacity to 0 when mouse X is < 320 and to max when >= 320.
   stroke(255*sin(mouseX)+100,255*sin(mouseY)+100,255*sin(2*mouseX)+100,255*sin(mouseX/320));
   //draw a line that originates from the center of the moon (or pupil). set the end of the line to the same location as the quad shape.
   line(mouseX*3.5-1050,200,200*sin(mouseX*100)+200,200*sin(mouseY*100)+200);
 }