Sun and moon in p5.js, I wish…

Things are getting interesting now. If you play around a bit with the variable values you can get some movement on the canvas:

This is the corresponding code:

var circleX = 50;
var circleY = 50;
var width = 50;
var height = 50;
var el;
var stop = 300;
var newbackground;
var midway = 200;
var r = 0;
var g = 191;
var b = 255;


function setup() {
  createCanvas(400, 400);
  //background(0, 64, 255);
}

function draw() {
    background(r, g, b);
  
  fill(255, 191, 0)
  noStroke()
  el = ellipse(circleX, circleY, width, height)
  if(circleX < stop){
  circleX = circleX + 2
  circleY = circleY + 2
  width = width - 2
  height = height - 2
     } else {
       //background(0, 255, 255)
  circleX = circleX + 1
  circleY = circleY + 1
  width = width - 1
  height = height - 1
       fill(255)
       ellipse(100, 100, 50, 50)
       r = 0;
       g = 0;
       b = 255;
     }
  
  /*if(circleX>midway){
  background(0, 255, 255)
     }*/
  //console.log(circleX)
}

Leave a Reply