xeromino

sketch03

Oct 17th, 2016
153
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // creating variables for the x and y location of the circle, initializing them at 50 pixels
  2. var x = 50,
  3.   y = 50;
  4. // creating variable for the speed of each direction
  5. var speedX = 2,
  6.   speedY = 3;
  7.  
  8. function setup() {
  9.   createCanvas(800, 600);
  10. }
  11.  
  12. function draw() {
  13.   // drawing the background each frame to get an animation effect
  14.   background(150);
  15.   // drawing an ellipse at the current x and y location
  16.   ellipse(x, y, 50);
  17.   // moving the circle along the x and y axis according to their respective speeds
  18.   x = x + speedX;
  19.   y = y + speedY;
  20.  
  21.   // if the circle is at the right border then change its horizontal direction
  22.   if (x > width) {
  23.     speedX = -speedX;
  24.   }
  25.   // if the circle is at the left border then change its horizontal direction
  26.   if (x < 0) {
  27.     speedX = -speedX;
  28.   }
  29.   // if the circle is at the bottom then change its vertical direction
  30.   if (y > height) {
  31.     speedY = -speedY;
  32.   }
  33.   // if the circle is at the left border then change its vertical direction
  34.   if (y < 0) {
  35.     speedY = -speedY;
  36.   }
  37.  
  38.   // idea: comment out background
  39.   // idea: make the size of the circle random
  40. }
RAW Paste Data Copied