// Create Crosswalk class

// Store an array of crosswalks

// Create a 3x3 grid to position cross crosswalks

// Use arrow keys to set slidespeed and stepframes for next cross walk created

// Use number keys to delete crosswalk at that index from array

// Split out denomenator numbers for bspacing, bwidth and blength as constant global variables

​

​

let theta;

let tx;

let ty;

let slidespeed = 0.1; // slide speed in pixels

let stepframes = 180; // step speed in frames

let alphaspeed = 255 / stepframes;

​

// Fixed

let cwx;

let cwy;

let numBars = 0;

let bstart = 0;

let bspacing;

let bwidth;

let bgap;

let blength;

​

​

let a = 0;

​

// When does this start?

let startFrame = 0;

​

// Number frame it takes for cw to slide the number of pixels that is the gap between bars

let fpg;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  theta = PI/2;

  tx = width/2;

  ty = 0;

  cwx = 0;

  cwy = 0;

  bspacing = width/25;

  bwidth = width/50;

  blength = width/10;

  bgap = bspacing - bwidth; // gap between bars

  // Calculate frames per gap

  fpg = floor(bgap / slidespeed);

​

  // Drawing the bar

  noStroke();

  fill(255);

  rectMode(CENTER, CENTER);

​

}

​

function draw() {

  background(0);

​

  // Fade in last step

  a+=alphaspeed;

​

  // New step

  if(a > 255) {

    numBars++;

    a = 0;

  }

​

  // Create pre-bars when we've slid out too far

  if(frameCount % fpg == startFrame) {

    numBars++;

    cwx -= bspacing;

  }

​

​

  // Change offset to move crosswalk

  bstart += slidespeed;

​

  // Use rotation to draw

  push();

  translate(tx, ty);

  rotate(theta);

  for(let b = 0; b < numBars; b++) {

    let bx = cwx + b*bspacing + bstart;

    let by = cwy;

    fill(255, b >= numBars - 1 ? a : 255);

    rect(bx, by, bwidth, blength);

  }

  pop();

}

​