Lab Three- The Sun

Concept 

My initial idea was to create this one with the hydrogen that is in a different color bouncing around. I enjoy the writing the code I had some challenges with adding the number of bouncing balls that I wanted inside of the ellipses since I would run into the problem of them being stuck either at the top or the bottom. I came up with this idea since in class only worked with a random bouncing ball bouncing around the screen, I initially wanted to look at it if it’s trapped in a certain area. this idea then developed and to thinking what artwork would work with this and I came up with the idea of this sun. the piece itself is interactive so if you click on the background it changes from day to night.

initial design

this evolved to my idea of the sun

Code

I used the mouse background that we learned in class to change the background between day and night. I added an ellipse to form the sun and created a class for the bouncing balls to randomly bounce around the ellipse. I added array to control the amount of hydrogen that I wanted inside the sun

let ball= []; 
 let ball2

function setup() {
  createCanvas(400, 400);
  for (let i= 0; i< 3; i++){
    ball[i] = new BouncingBall(i+1, 2);
  }
   ball1 = new BouncingBall(2, 2);
  ball2 = new BouncingBall(8, 10);
}

function draw() {
  if (mouseIsPressed ) {
    background(color(54));
  } else {
    background(color("#33A1FD"));
  }
 // background("#33A1FD");
  fill("#F79824")
  ellipse (width/2, height/2, 200, 200)
  noFill()
  fill("#FDCA40")
  for (let i= 0; i< 3; i++){
  ball[i].move();
  ball[i].collision();
  ball[i].draw();
  }
  ball2.move();
  ball2.collision();
  ball2.draw();
}



class BouncingBall {
  constructor() {
    this.xPos = width / 2;
    this.yPos = random(100, 300);
    this.xSpeed = 4;
    this.ySpeed = 7;

  }

  move() {
    this.xPos += this.xSpeed;
    this.yPos += this.ySpeed;
  }

  collision() {
    if (this.xPos <= 150 || this.xPos >= (width - 150)) {
      this.xSpeed = -this.xSpeed;
    }
    if (this.yPos <= 150 || this.yPos >= (height - 150)) {
      this.ySpeed = -this.ySpeed;
    }
  }
  
  draw() {
    circle(this.xPos, this.yPos, 30);
  }
}

What i could improve 

I am happy with my work since my first-time coding, I feel like it’s something I wouldn’t have been able to achieve prior to this class. However, I would have liked the night sky to have some stars and I would have added lines to the sun to make it look more realistic. since hydrogen is usually arc shaped rather than balls that would have made it look more realistic and better.