let scl = 20;

let cols, rows;

let delayBackground = 460;

​

let zoff = 0;

​

let particle = [];

let flowField = [];

​

​

​

let fadeIn = 26;

let fadeOut = 45;

let next = false;

let i = 0;

​

class FadingWords {

  constructor(w, x, y) {

    this.w = w;

    this.x = x;

    this.y = y;

  }

}

​

let w1 = new FadingWords('face', 476, 704);

let w2 = new FadingWords('plunged', 445, 729);

let w3 = new FadingWords('in a wet bowl', 382, 753);

​

let A = [w1, w2, w3];

​

function preload() {

  myFont = loadFont('font.ttf'); // load font

 poster = loadImage('images/Poster3.jpg');

  img1 = loadImage('images/Poster3-1.png');

  img2 = loadImage('images/Poster3-2.png');

  img3 = loadImage('images/Poster3-3.png');

  img4 = loadImage('images/Poster3-4.png');

}

​

function setup() {

  createCanvas(800, 934);

  textFont(myFont); // set font

  colorMode(HSB, 360, 100, 100, 100);

  noStroke();

  background(220, 1, 94);

  image(img3, 0, 0);

  frameRate(20);

  cols = floor(width/scl);

  rows = floor(height/scl); 

  flowField = new Array(cols * rows);

  for(n = 0; n < 270; n++)

  {

    particle[n] = new Particle();

  }

  drawPoster();

}

​

function draw() {

  delayBackground--;

  if(delayBackground < 70)

  {

    background(220, 1, 94, 25); 

    if(delayBackground < 1)

    {

      delayBackground = 460;

      background(220, 1, 94);

      image(img3, 0, 0);

      drawPoster();

    }

    else

    {

      image(img3, 0, 0);

      drawPoster();

    }

  }

  drawPoster();

  //background(220, 1, 94);

  //image(poster, 0, 0);

  perlinNoise();

  textSize(87);

  fill(0);

​

  fade();

}

​

​

function fade()

{

  noStroke();

  if(next == false)

  {

    fadeOut--;

    if(fadeOut < 26)

    {

      fill(0, fadeOut*4);

      if(fadeOut < 2)

      {

        fadeOut = 45;

        i++;

        if(i > 2){i = 0;}

        next = true;

      }

    }

    text(A[i].w, A[i].x, A[i].y);

  }

  if(next == true)

  {

    fadeIn--;

    fill(0, 100 - fadeIn*4);

    if(fadeIn == 0)

    {

      fadeIn = 26;

       next = false;

    }

    text(A[i].w, A[i].x, A[i].y);

  }

​

}

​

function perlinNoise()

{

  let yoff = 0;

  for(y = 0; y < rows; y++)

  {

    let xoff = 0;

    for(x = 0; x < cols; x++)

    {

      let index = (x + y * cols);

      let angle = noise(xoff, yoff, zoff) * TWO_PI * 1/2; 

      let v = p5.Vector.fromAngle(angle); // angle gen

      v.setMag(0.9);

      flowField[index] = v; //stores vector values

  /*    

      //vector data

      stroke(0, 50);

      push();

      translate(x*scl, y*scl);

      rotate(v.heading());

      strokeWeight(1);

      line(0, 0, scl, 0);

      pop();

  */  

      xoff += inc;

    }

    yoff += inc;

  }

  zoff += 0.01;

  for(n = 0; n < particle.length; n++)

  {

    particle[n].follow(flowField);

    particle[n].show();

    particle[n].update();

    particle[n].edges();

  }

}

​

function drawPoster()

{

  noStroke();

  fill(220, 1, 94);

  rect(250, 0, 500, height);

  image(img1, 0, 0);

  fill(353, 90, 68, 70);

  rect(276, 438, 191, 218);

  image(img2, 0, 0);

  image(img4, 0, 0);

  textSize(267);

  fill(0);

  text('no mandible', 378, 204);

}

​

function keyPressed() {

​

  if (keyCode == SHIFT) 

  {

    let fs = fullscreen();

    fullscreen(!fs);

  }

}

​

​

​

​

/*

​

fill(255);

circle(650, 650, 50);

*/