SnowFlake Starter - OpenProcessing

mySketch
xxxxxxxxxx
 
let xCenter, yCenter; // Center coordinates for the starting point
let spacing = 5;
let circleWH = 10;
let directions = []; // Array to store directions
​
function setup() {
  createCanvas(500, 500);
  background("#295F98");
  xCenter = width / 2; // Center x-coordinate
  yCenter = height / 2; // Center y-coordinate
  frameRate(10);
​
  // Initialize the directions array with starting positions and deltas for movement
  directions = [{
      x: xCenter,
      y: yCenter,
      dx: -1,
      dy: 0
    }, // Left
    {
      x: xCenter,
      y: yCenter,
      dx: 1,
      dy: 0
    }, // Right
    {
      x: xCenter,
      y: yCenter,
      dx: 0,
      dy: -1
    }, // Up
    {
      x: xCenter,
      y: yCenter,
      dx: 0,
      dy: 1
    }, // Down
    {
      x: xCenter,
      y: yCenter,
      dx: -1,
      dy: -1
    }, // Up-left diagonal
    {
      x: xCenter,
      y: yCenter,
      dx: 1,
      dy: 1
    }, // Down-right diagonal
    {
      x: xCenter,
      y: yCenter,
      dx: -1,
      dy: 1
    }, // down-left diagonal
    {
      x: xCenter,
      y: yCenter,
      dx: 1,
      dy: -1
    } // Up-right diagonal
  ];
}
​
function draw() {
  drawEllipsesInAllDirections();
}
​
function drawEllipsesInAllDirections() {
  for (let dir of directions) {
    if (dir.x > 0 && dir.x < width && dir.y > 0 && dir.y < height) {
      noStroke();
      fill(255); // White color for ellipses
      ellipse(dir.x, dir.y, circleWH, circleWH); // Draw ellipse at the current position
​
      // Move the ellipse in the specified direction by the spacing amount
      dir.x += dir.dx * spacing;
      dir.y += dir.dy * spacing;
    }
  }
}