​

// Dot Challenge Starting Point

let perspectiveL;

let perspectiveR;

let perspectiveT; 

​

let colors = ["#000000","#14213d","#fca311","#e5e5e5","#ffffff"]

function setup() {

  createCanvas(windowWidth, windowHeight);

  perspectiveL = createVector(-100, 400);

  perspectiveR = createVector(800 + 100, 400);

  perspectiveT = createVector(width/2, -200);

}

​

function draw() {

  background(50);

​

  noStroke();

  ellipseMode(CENTER);

​

  let noiseFrequency = 0.02;

​

  for (let i = 0; i < 150; i++) {

    // these points are not scattered in the same way

    // how can you make the arrangement match the challenge?

    let x = noise(width*i, second()) * width;

    let y = noise(height*i+100, millis()) * height;

​

    // the diameter shouldn't always be 10, it needs to vary

    let diameter = 20* noise(i)+3;

​

    // the colors also need to change

    // what colorMode would be easiest to work with?

    fill(random(colors));

    // ellipse(x, y, diameter, diameter);

    drawBuilding(x, y, diameter)

​

    perspectiveL.add(0, -2)

    perspectiveR.add(0, 2)

  }

​

  noLoop();

}

​

function drawBuilding(x, y, h) {

​

  // let x = random(0, 400);

  // let y = random(200, 350);

  // let w = random(2, 120);

  let w =  random(2)>1?random(40, width / 5) : h

  // let h = random(40, 240);

  let l = random(2)>1?random(40, width / 5) : h

  // let l = h

  let c = color(random(colors))

  c.setAlpha(100)

  fill(c)

  persRect(x, y, w, h, perspectiveL)

  c = color(random(colors))

  c.setAlpha(100)

  fill(c)

  persRect(x, y, l, h, perspectiveR)

  c = color(random(colors))

  c.setAlpha(100)

  fill(c)

  drawButton(x,y, w,l)

}

​

function persRect(x, y, w, h, p) {

  //v4,v3

  //v2,v1

  let v1 = createVector(x, y);

  let v2 = p.copy().sub(v1).setMag(w).add(v1);

  let v3 = perspectiveT.copy().sub(v1).setMag(h).add(v1);

  let v4 = (intersect(v2.x, v2.y, perspectiveT.x, perspectiveT.y, v3.x, v3.y, p.x, p.y))

  beginShape();

  vertex(v1.x, v1.y);

  vertex(v2.x, v2.y);

  vertex(v4.x, v4.y);

  vertex(v3.x, v3.y);

​

  endShape(CLOSE);

}

​

function drawButton(x,y, w, l){

  //  v1

  //v2w,v3l,

  //  v4

  let v1 = createVector(x, y);

  let v2 = perspectiveL.copy().sub(v1).setMag(w).add(v1);

  let v3 = perspectiveR.copy().sub(v1).setMag(l).add(v1);

  let v4 = (intersect(v2.x, v2.y, perspectiveR.x, perspectiveR.y, v3.x, v3.y, perspectiveL.x, perspectiveL.y))

  beginShape();

  vertex(v1.x, v1.y);

  vertex(v2.x, v2.y);

  vertex(v4.x, v4.y);

  vertex(v3.x, v3.y);

​

  endShape(CLOSE);

}

​

function intersect(x1, y1, x2, y2, x3, y3, x4, y4) {

​

  // Check if none of the lines are of length 0

    if ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4)) {

        return false

    }

​

    denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))

​

  // Lines are parallel

    if (denominator === 0) {

        return false

    }

​

    let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator

    let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator

​

  // is the intersection along the segments

    if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {

        return false

    }

​

  // Return a object with the x and y coordinates of the intersection

    let x = x1 + ua * (x2 - x1)

    let y = y1 + ua * (y2 - y1)

​

    return createVector(x, y)

}

function mousePressed() {

    perspectiveL = createVector(-100, 400);

  perspectiveR = createVector(800 + 100, 400);

  perspectiveT = createVector(width/2, -200);

  setup()

  draw();

}

​