let noiseFilter;
let offset = 0.0;

function setup() {
  createCanvas(windowWidth, windowHeight);

  //button
  let button = createButton("S I 2 1");
  button.position(358, 319);
  button.size(48, 17);
  button.style("background-color", "#000000");
  button.style("font-size", "10px");
  button.style("color", "#ffffff");
  button.mousePressed(goLink);

//   //noise
  noiseFilter = createImage(width, height);
  noiseFilter.loadPixels();
  let pix = noiseFilter.width * noiseFilter.height * 4;
  for (let i = 0; i < pix; i += 4) {
    noiseFilter.pixels[i] = random(255);
    noiseFilter.pixels[i + 1] = random(255);
    noiseFilter.pixels[i + 2] = random(255);
    noiseFilter.pixels[i + 3] = 30;
  }
  noiseFilter.updatePixels();
 }

window.alert("HELLO, OPERATOR HERE! YOU HAVE A COLLECT CALL FROM NY. TO ACCEPT, CLICK ON SI21.");

function drawCircles(circleX, circleY) {
  strokeWeight(2);

  // bigcircle
  fill("#fffff");
  circle(circleX, circleY, 30);

  //smallercircle
  fill("#fffff");
  circle(circleX, circleY, 25);

  //smallestcircle
  fill("#000000");
  circle(circleX, circleY, 20);
}

function drawRect(rectX, rectY) {
  stroke(28, 40, 51 );
  strokeWeight(1);
  fill("#000000");
  rect(rectX, rectY, 45, 15);
}

function drawLights(lightX, lightY) {
  fill(255, 105, 180, 50);
  noStroke();
  circle(lightX, lightY, 18);

  fill(255, 105, 180, 64);
  noStroke();
  circle(lightX, lightY, 13);

  fill(255, 105, 180);
  strokeWeight(0.5);
  stroke(170, 51, 106);
  circle(lightX, lightY, 8);
}


//button again
function goLink() {
  window.open('https://hub.xpub.nl/breadcube/webcam.html');
}

function draw() {
  background(111, 78, 55);
  stroke(3);

  // apply noise filter
  image(noiseFilter, 0, 0, width, height);

  //circles pattern
  for (let col = 30; col < windowWidth; col = col + 70) {
    for (let row = 30; row <= windowHeight; row = row + 90) {
      drawCircles(col, row);
    }
  } //endcircles

  //labels pattern
  for (let col = 9; col < windowWidth; col = col + 70) {
    for (let row = 50; row <= windowHeight; row = row + 90) {
      drawRect(col, row);
    }
  } //endlabels

  //lights pattern
  for (let col = 30; col < windowWidth; col = col + 70) {
    for (let row = 2; row <= windowHeight; row = row + 90) {
      drawLights(col, row);
    }
  } //endlights
  
    //flickerin light
  function greenLight() {
    
    fill(255, 255, 255);
    circle(380, 272, 8);
    
    fill(0, 204, 51, 50, flickering());
    noStroke();
    circle(380, 272, 18);

    fill(0, 204, 51, 64, flickering());
    circle(380, 272, 13);

    fill(0, 204, 51, flickering());
    circle(380, 272, 8);
  
  }
  
   greenLight();
  
  //the flickering bit
  function flickering(){
  offset += 0.2;
  let n = noise(offset);
  if(n < 0.40) return 0;
  else return 100;
}
  
}