let currentVal=0;

let x1, y1, x1speed, y1speed;

// let x2, y2, x2speed, y2speed;

​

function setup() {

  createCanvas(600, 400);

  //star1

  x1 = width/2;

  y1 = height/2;

  x1speed = 1;

  y1speed = 0.3;

  //star2

  // x2 = width / 2;

  // y2 = height / 2;

  // x2speed = 1.4;

  // y2speed = -1.3;

}

​

function draw(){

  // change(0,200);

  background(currentVal);

  change(0,255);

  move();

  star1();

  // star2();

}

​

function star1() {

 translate(x1, y1);

  fill(currentVal,50,180);

  beginShape();

  vertex(0, -50);

  vertex(14, -20);

  vertex(47, -15);

  vertex(23, 7);

  vertex(29, 40);

  vertex(0, 25);

  vertex(-29, 40);

  vertex(-23, 7);

  vertex(-47, -15);

  vertex(-14, -20);

  scale(0.3);

  endShape(CLOSE);

}

// function star2() {

//  translate(x2, y2);

//   fill(currentVal,50,180);

//   beginShape();

//   vertex(0, -50);

//   vertex(14, -20);

//   vertex(47, -15);

//   vertex(23, 7);

//   vertex(29, 40);

//   vertex(0, 25);

//   vertex(-29, 40);

//   vertex(-23, 7);

//   vertex(-47, -15);

//   vertex(-14, -20);

//   endShape(CLOSE);

// }

​

function move() {

  x1 += x1speed;

  y1 += y1speed;

  //star1 dir

  x1speed = bounce(x1, 100, 400, x1speed);

  y1speed = bounce(y1, 150, 200, y1speed);

  //star2 dir

  // x2speed = bounce(x2, 0, width, x2speed);

  // y2speed = bounce(y2, 0, height, y2speed);

​

}

​

function bounce(pos, low, high, speed) {

  if (pos < low || pos > high) {

    speed *= -1;

    return speed;

  } else return speed;

}

​

function change(minVal,maxVal){

  currentVal += changeRate;

  // currentVal =currentval+bounceRate;

  if(currentVal>=maxVal|| currentVal<=minVal){

  changeRate=changeRate*-1;

  // bounceRate *= -1;

  }

}