let red;

let yellow;

let black;

let colorpalette;

let max;

let step;

let n = 12;

let radius = 80;

let inter = 0.5; 

let maxNoise = 250;

let value = 200;

let Hochland;

let Punch;

​

function preload() {

  Hochland = loadFont('assets/Hochland.ttf');

  Punch = loadFont('assets/Punch.otf');

}

​

function setup() {

  let renderer = createCanvas(612, 722); // letter size

  ctx = renderer.drawingContext;

  pixelDensity(1); //this compensates for density of retina screens

  angleMode(DEGREES);

  max = random(0.6, 2.0);

  step = 0.01;

  // noStroke();

​

 blue = new Riso("BLUE");

 red = new Riso("BRIGHTRED");

  yellow = new Riso("YELLOW");

  black = new Riso("BLACK");

  const risocolors = [red, yellow, blue];

  colorpalette = random(risocolors);

  background(255);

  clearRiso();

  colorpalette.fill(100);

  colorpalette.rect(0,0, 612, 722);

  let t = frameCount/200;

  for (let i = n; i > 0; i--) {

        let size = radius / i;

        let k = max*2;

        let noisiness = maxNoise * (i / 5);

    fill(220);

    soundwaves2(size, width/2, height/2, k, t - i * step, noisiness*2);

    fill(80);

    soundwaves(size, width/2, height/2, k, t - i * step, noisiness); 

  }

  letters();

  drawRiso();

  // exportRiso();

​

  }

​

function soundwaves(size, xCenter, yCenter, k, t, noisiness) {

    black.fill(50);

    black.beginShape();

    let angle = 10;

    for (let i = 0; i <= 360 * n; i += angle) {

      let r1, r2;

      r1 = sin(i) + 20;

      r2 = cos(i) + 5;

      let r = size + noise(k * r1,  k * r2, t) * noisiness;

      let x = xCenter + r * cos(i);

      let y = yCenter + r * sin(i);

      curveVertex(x, y);

  }

  black.endShape();

}

function soundwaves2(size, xCenter, yCenter, k, t, noisiness) {

    colorpalette.fill(50);

    colorpalette.beginShape();

    let angle = 10;

    for (let i = 0; i <= 360 * n; i += angle) {

      let r1, r2;

      r1 = sin(i) + 20;

      r2 = cos(i) + 5;

      let r = size + noise(k * r1,  k * r2, t) * noisiness;

      let x = xCenter + r * cos(i);

      let y = yCenter + r * sin(i);

      curveVertex(x, y);

  }

  colorpalette.endShape();

}

function letters(){

  let headline = createGraphics(width, height);

  headline.fill(0);

  headline.textFont(Hochland);

  headline.textSize(300);

  headline.rotate(radians(90));

  headline.translate(0,0);

  headline.text('IMMIGRANTS', 14, -20);

  yellow.cutout(headline);

 red.cutout(headline);

 blue.cutout(headline);

  black.cutout(headline);

​

let description = createGraphics(width, height);

  description.fill(0);

  description.textFont(Punch);

  description.textSize(30);

  description.translate(0,0);

  description.text('are the backbone of America', 260, 700);

  yellow.cutout(description);

 red.cutout(description);

 blue.cutout(description);

  black.cutout(description);

  }