Assignment 2 Starry-Night

going back to the first assignment, creating a portrait of an alien with stars popping in the back of the head. I took the starry night background and tried to enhance it so i can create an artwork pulling it out from the first assignment.  At the beginning I tried to make it animated and the stars move horizontally in the canvas but It was challenging for me and faced a lot of errors. but I thought of making it still within the canvas and give it a twinkle effect, by the help of a youtube video, I was able to create the starry night and the twinkle effect. I faced a challenge with the format of the canvas that if I add 44 to the width it doesn’t fully appear on the web, even with the previous assignment. 

let stars = [];
let numStars = 200; 

function setup() {
  createCanvas(800, 644);
  for (let i = 0; i < numStars; i++) {
    stars.push(new Star()); // Create and add stars 
  }
}

function draw() {
  background(18, 18, 30); // dark blue sky
  stars.forEach(star => {
    star.twinkle(); // Update star properties for twinkle effect
    star.move(); // Move the star slightly
    star.show(); // Display the star
  });
}

class Star {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.size = random(0.25, 3);
    this.brightness = random(150, 255);
  }
  
  move() {
   
    this.x += random(-1, 1);
    this.y += random(-1, 1);
    // Keep stars in canvas
    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
  }
  
  twinkle() {
    // twinkling
    this.size = random(0.25, 3);
    this.brightness = random(150, 255);
  }
  
  show() {
    noStroke();
    fill(this.brightness);
    circle(this.x, this.y, this.size);
  }
}

 

Reflection:

I found this assignment very helpful in terms of pulling something I built before and enhancing it to become a new artwork and apply the new things we learnt in class is an effective way of learning.