let o = 50; //opacity

let m = 1.3; //modifier

let c = 40; //circle diameter

let s = 50; //square measurements

​

//yellow

let r = 191;

let g = 152;

let b = 1;

​

//red

let r2 = 177;

let g2 = 50;

let b2 = 41;

​

//green

let r3 = 0;

let g3 = 255;

let b3 = 168;

​

function setup() {

  createCanvas(600, 600);

  background(0, 5, 5);

  angleMode(DEGREES);

  ellipseMode(CENTER);

  rectMode(CENTER);

  noLoop();

}

​

function draw() {

  let d = random(7,30); //spacing

  print(d);

  let q = 12; //white grid spacing

​

  // underlaying white grid

  for (let u = 0; u <= width; u += q) {

    for (let z = 0; z <= height; z += q) {

      push();

​

      noFill();

      stroke(180, 180, 180, 30);

      strokeWeight(w * 0.25);

      translate(u, z);

      rect(0, 0, q, q);

      pop();

    }

  }

​

  for (let x = d + m; x <= width; x += d * 4) {

    for (let y = d + m; y <= height; y += d * 4) {

      let r1 = random(0, 1);

      let r2 = random(0, 1);

      let r3 = random(0, 1);

​

      stroke(r, g, b);

​

      if (r1 < 0.5) {

        if (r2 < 0.85) {

          if (r3 < 0.8) {

            baseGrid(x, y);

          } else {

            push();

            pop();

          }

        } else {

          if (r3 < 0.4) {

            textEmpty(x, y);

          } else if (r3 < 0.8) {

            textPan(x, y);

          } else {

            textMay(x, y);

          }

        }

      } else if (r1 < 0.75) {

        if (r2 < 0.6) {

          circleTransparent(x, y);

        } else if (r2 < 0.8) {

          circleOpaque(x, y);

        } else {

          circleLine(x, y);

        }

      } else {

        if (r2 < 0.5) {

          drawCross(x, y);

        } else if (r2 < 0.85) {

          if (r1 < 0.5) {

            squareLine(x, y);

          } else {

            squareOpaque(x, y);

          }

        } else {

          squareTransparent(x, y);

        }

      }

    }

  }

​

  drawRadar();

​

  push();

  translate(300, 300);

  let movement = map(second(), 0, 60, 0, 360);

  rotate(movement * 5);

  radarMovement();

  pop();

​

  push();

  fill(210);

  textFont("sans-serif", 13);

  text("ATC" + year() + "" + month() + "" + day(), 15, 580);

  text(hour() + "" + minute() + "" + second(), 550, 580);

  pop();

}

​

function drawRadar() {

  push();

  noFill();

  stroke(28, 224, 148, 99);

  strokeWeight(1);

  ellipse(height / 2, width / 2, 200, 200);

  ellipse(height / 2, width / 2, 300, 300);

  ellipse(height / 2, width / 2, 400, 400);

  ellipse(height / 2, width / 2, 500, 500);

  fill(28, 224, 148);

  ellipse(height / 2, width / 2, 10, 10);

  fill(28, 224, 148, 50);

  ellipse(height / 2, width / 2, 12, 12);

  pop();

}

​

​

function radarMovement() {

  // The code for the below gradient is adapted from: 

  // Thompson, J. (2021). Gradient Fill. P5.js code.   https://editor.p5js.org/jeffThompson/sketches/ta7msUszJ

  let i = 300;

  let gradient = drawingContext.createLinearGradient(

    20,

    20,

    width - 10,

    height - 10

  );

  let radius = 500;

  let x1 = width/i- radius;

  let y1 = height/i - radius;

  let x2 = width/i + radius;

  let y2 = height/i + radius;

  let c1 = color(r3, g3, b3, 99.99);

  let c2 = color(r3, g3, b3, 0);

  let g = drawingContext.createLinearGradient(x1, y1, x2, y2);

  g.addColorStop(0, c1);

  g.addColorStop(0.5, c2);

  g.addColorStop(1, c1);

​

  //radar

  push();

  stroke(28, 224, 148);

  strokeWeight(1);

  line(300 - i, 300 - i, 300 - i, 50 - i);

  strokeWeight(4);

  stroke(28, 224, 148, 50);

  line(300 - i, 300 - i, 300 - i, 50 - i);

  fill(255);

  drawingContext.fillStyle = g;

  noStroke();

  arc(300 - i, 300 - i, 500, 500, 200, -90);

  pop();

}

​

//green text or strokes

function textEmpty(x, y) {

  push();

  let l = 10;

  translate(x, y);

  stroke(r2, g2, b2);

  strokeWeight(w);

  line(0, 0, 10, 10);

  line(10, 0, 0, 10);

  line(0 + l, 0, 10 + l, 10);

  line(10 + l, 0, 0 + l, 10);

  line(0 - l, 0, 10 - l, 10);

  line(10 - l, 0, 0 - l, 10);

  pop();

}

function textPan(x, y) {

    //grid repeat

  push();

  strokeWeight(w+1);

  stroke(r3, g3, b3);

  translate(x-8, y-5);

  rotate(45);

  line(5, 0, 5, 10);

  line(0, 5, 10, 5);

  pop();

  //panpan text

  push();

  translate(x, y);

  fill(r3, g3, b3);

  text("PAN-PAN", 0, 0);

  pop();

}

function textMay(x, y) {

      //grid repeat

  push();

  strokeWeight(w+1);

  stroke(r2, g2, b2);

  translate(x-8, y-5);

  rotate(45);

  line(5, 0, 5, 10);

  line(0, 5, 10, 5);

  pop();

  //mayday text

  push();

  translate(x, y);

  fill(r3, g3, b3);

  text("MAYDAY", 0, 0);

  pop();

}

​

//red cross grid

function baseGrid(x, y) {

  push();

  strokeWeight(w / m);

  translate(x, y);

  stroke(r2, g2, b2);

  line(5 * m, 0, 5 * m, 10 * m);

  line(0, 5 * m, 10 * m, 5 * m);

  pop();

}

​

//CIRCLES

function circleTransparent(x, y) {

  //grid repeat

  push();

  strokeWeight(w);

  stroke(r2, g2, b2);

  translate(x, y);

  line(5, 0, 5, 10);

  line(0, 5, 10, 5);

  pop();

  //yellow translucent circle

  push();

  fill(r, g, b, o);

  noStroke();

  translate(x, y);

  ellipse(5, 5, c * m, c * m);

  pop();

}

​

function circleOpaque(x, y) {

  //completely opaque circle

  push();

  translate(x, y);

  noStroke();

  fill(r, g, b);

  ellipse(5, 5, (c - 5) * m, (c - 5) * m);

  pop();

  //grid repeat BLACK

  push();

  stroke(0, 5, 5);

  strokeWeight(w);

  translate(x, y);

  line(5, 0, 5, 10);

  line(0, 5, 10, 5);

  pop();

}

​

function circleLine(x, y) {

  push();

  translate(x, y);

  noFill();

  stroke(r, g, b);

  ellipse(5, 5, c * m, c * m);

  fill(r, g, b);

  ellipse(5, 5, 10 * m, 10 * m);

  pop();

  //grid repeat BLACK

  push();

  stroke(0, 5, 5);

  strokeWeight(w);

  translate(x, y);

  line(5, 0, 5, 10);

  line(0, 5, 10, 5);

  pop();

}

​

//CROSS and SQUARES

function drawCross(x, y) {

  //grid repeat

  push();

  stroke(r2, g2, b2);

  strokeWeight(w);

  translate(x, y);

  line(5, 0, 5, 10);

  line(0, 5, 10, 5);

  pop();

  //cross

  push();

  translate(x + 5, y - 2.5);

  rotate(45);

  strokeWeight(w / m);

  line(5 * m, -50 * m, 5 * m, 60 * m);

  line(-50 * m, 5 * m, 60 * m, 5 * m);

  pop();

}

​

function squareTransparent(x, y) {

  //grid repeat

  push();

  stroke(r, g, b);

  strokeWeight(w);

  translate(x, y);

  line(5, 0, 5, 10);

  line(0, 5, 10, 5);

  pop();

  //transparent square

  push();

  translate(x + 5, y + 5);

  rotate(45);

  noStroke();

  fill(r, g, b, o);

  rect(0, 0, s * m, s * m);

  pop();

}

​

function squareLine(x, y) {

  //grid repeat

  push();

  stroke(r, g, b);

  strokeWeight(w);

  translate(x, y);

  line(5, 0, 5, 10);

  line(0, 5, 10, 5);

  pop();

  //square outline only

  push();

  translate(x + 5, y + 5);

  noFill();

  strokeWeight(w / m);

  rotate(45);

  rect(0, 0, s * m, s * m);

  pop();

}

​

function squareOpaque(x, y) {

  push();

  translate(x + 5, y + 5);

  rotate(45);

  //outline

  noFill();

  strokeWeight(w / m);

  rect(0, 0, s * m, s * m);

  //nested

  fill(r, g, b);

  rect(0, 0, 15, 15);

  pop();

​

  //grid repeat BLACK

  push();

  stroke(0, 5, 5);

  strokeWeight(w);

  translate(x, y);

  line(5, 0, 5, 10);

  line(0, 5, 10, 5);

  pop();

}

​