StarGame

Project Narrative

StarGame was my very first experience with coding, created in 5th grade using Khan Academy's JavaScript environment. It serves as a personal benchmark to showcase my growth and long-held passion for building things with code.

The concept is simple: clicking on the canvas creates a star, and a line connects it to the previously placed star, allowing the user to draw constellations and patterns.

Lessons Learned

This project taught me the fundamentals of programming, including storing data in arrays (for star positions), handling user input (mouse clicks), and writing functions to redraw the screen. It was a foundational experience that sparked my interest in software development.

// Store the x and y coordinates of each star
var xPositions = [200];
var yPositions = [200];

// Redraw all stars and connecting lines
var drawStars = function() {
  background(9, 5, 59);
  imageMode(CENTER);
  for (var i = 0; i < yPositions.length; i++) {
    image(getImage("space/star"), xPositions[i], yPositions[i], 30, 30);
    if (i > 0) {
      stroke(235, 223, 223);
      line(xPositions[i-1], yPositions[i-1], xPositions[i], yPositions[i]);
    }
  }
};

// Add a new star position on every mouse click
mouseClicked = function() {
    xPositions.push(mouseX);
    yPositions.push(mouseY);
    drawStars();
};