let h = w*2/3

let fontSize = 8

​

let roads = {}

​

​

class Road {

  constructor(name, topX, topY, btmX, btmY, lanes=2) {

    this.top = createVector(topX, topY)

    this.btm = createVector(btmX, btmY)

    this.w = lanes*2

    this.col = ["#000000aa", "#00afffaa", "#ffffaaaa"][floor(lanes/2)]

    this.name = name

    this.theta = p5.Vector.sub(this.btm, this.top).heading()

  }

  show() {

    push();

    stroke(0, 50)

    fill(this.col)

    strokeWeight(1)

    translate(this.top.x, this.top.y)

    rotate(this.theta)

    rect(0, -this.w/2, this.btm.mag(), this.w)

    stroke(this.col)

    rect(-1, -this.w/2+1, this.btm.mag()+1, this.w-2)

    pop();

  }

  showText() {

    push();

    stroke(0)

    strokeWeight(0)

    fill(0)

    textSize(fontSize*(this.w/4))

    translate((this.top.x+this.btm.x)/2, (this.top.y+this.btm.y)/2)

    rotate(this.theta)

    text(this.name, 0, -this.w)

    pop();

  }

}

​

​

​

function setup() {

  createCanvas(w, h);

  roads.snelling = new Road("Snelling Ave", w*0.5, 0, w*0.5, h, 4)

  roads.englewood = new Road("Englewood Ave", 0, h*0.5, w, h*0.5)

  roads.pascal = new Road("Pascal St", w*0.65, 0, w*0.65, h/2)

}

​

function draw() {

  background(245);

  for (st of Object.keys(roads)) {

    roads[st].show()

  }

  for (st of Object.keys(roads)) {

    roads[st].showText()

  }

}