let bgcolor

​

// all the things characterizing the images

var xs = new Array()

var ys = new Array()

var healths = new Array()

var imgdisplay = new Array()

​

// an actual list of images

var imgs = new Array()

​

N = 3

var alive = N*N;

borderWidth = 10

imageWidth = 100

jittersize = 100

small_jittersize = 10

maxHealth = 255

deltaHealth = 50

imagechangefreq = 300

​

let curri

let currj

​

//var killedis = new Array()

//var killedjs = new Array()

​

function preload() {

    // this gets all the images from some source. need to figure out how to do this right. 

  for (i = 1; i<=18; i++) {

  imgs.push(loadImage('https://raw.githubusercontent.com/nabiliqbal/yellatnews/master/pic' + i + '.jpeg'));

  }

  /* imgs.push( loadImage('https://static.politico.com/dims4/default/22f65e1/2147483647/resize/1160x%3E/quality/90/?url=https%3A%2F%2Fstatic.politico.com%2Fb9%2Fc3%2F54a99abc4bd5832dea2d4cb25ffb%2Fgettyimages-1256156642-773.jpg'));

  imgs.push(loadImage('https://cdn.cnn.com/cnnnext/dam/assets/200804120240-trump-axios-wide-exlarge-169.jpg'));

  imgs.push(loadImage('https://www.nationalgeographic.com/content/dam/science/2020/03/13/coronavirus_og/01_coronavirus_cdc_2871.adapt.1900.1.jpg'))*/

}

​

function resizeImages() {

​

  // now I should make sure they are all square. if they aren't take a square bit from the middle

  //loadPixels();

  for (i = 0; i<imgs.length; i++) {

    print("Here");

    //print(eff_w);

    eff_w = imgs[i].width;

​

    eff_h = imgs[i].height;

    if (imgs[i].width > imgs[i].height) {

      eff_w = imgs[i].height;

    }

    else {

      eff_h = imgs[i].width;

    }

    // now resize it correctly

    imgs[i] = imgs[i].get((imgs[i].width-eff_w)/2,(imgs[i].height-eff_h)/2,eff_w,eff_h);

  }

}

​

​

function setup() {

  let cnv = createCanvas(500, 500);

  bgcolor = color(0,0,0);

  cnv.mousePressed(userStartAudio);

  mic = new p5.AudioIn();

  mic.start();

​

  // load in the images

  resizeImages();

  // initialize the arrays

  for (i = 0; i<N; i++) {

    xs.push(new Array(N));

    ys.push(new Array(N));

    healths.push(new Array(N));

    imgdisplay.push(new Array(N));

  }

​

  // now fill the things:

  for (i = 0; i<N; i++) {

    for (j = 0; j<N; j++) {

      xs[i][j] = i*(imageWidth+borderWidth);

      ys[i][j] = j*(imageWidth+borderWidth);

      healths[i][j] = maxHealth;

      imgdisplay[i][j] = floor(random(imgs.length));

    }

  }

  // pick the first news image to perturb

  curri = floor(random(N));

  currj = floor(random(N));

​

}

​

​

​

function draw() {

  //printStuff();

  micLevel = mic.getLevel();

  //print(micLevel);

  //translate(width/2,height/2);

  background(bgcolor);

​

  for (i = 0; i< N; i++) {

    for (j = 0; j <N; j++) {

      // do we want to change the image? only do it if itsnt the current wiggly one. 

      if (floor(random(imagechangefreq)) == 1 && !(i==curri && j ==currj))

        imgdisplay[i][j] = floor(random(imgs.length));

      // adjust the jitter

      deltaX = random(micLevel*small_jittersize);

      deltaY = random(micLevel*small_jittersize);

      if (i==curri && j ==currj) {

        deltaX = random(micLevel*jittersize);

        deltaY = random(micLevel*jittersize);

        //xs[i][j] = xs[i][j] + random(micLevel*jittersize)-micLevel*jittersize/2;

        //ys[i][j] = ys[i][j] + random(micLevel*jittersize)-micLevel*jittersize/2;

        healths[i][j] -= random(micLevel*deltaHealth);

        // if we have killed it, move on

        if (healths[i][j] <= 0) {

          // add it to the list of dead ones

          //killedis.push(curri);

          //killedjs.push(currj);

          alive--;

          //print(killedis.indexOf(1));

          //print(killedjs.indexOf(1));

          // now find a living one to pass it on to. 

          while (healths[curri][currj]<=0 && alive > 0) {

            //print("In the loop");

            curri = floor(random(N));

            currj = floor(random(N));

          }

        }

      }

      // fade the image

      //tint(255,healths[i][j]/100*255);

      //tint(255,128);

      image(imgs[imgdisplay[i][j]], xs[i][j]+deltaX, ys[i][j]+deltaY, imageWidth, imageWidth);

      //now put on something that fades it with the right color

      fill(red(bgcolor),blue(bgcolor),green(bgcolor),255-healths[i][j]);

      square(xs[i][j]+deltaX, ys[i][j]+deltaY,imageWidth)

      //print(healths[i][j]);

    }

  }

  //circle(0,0,micLevel*1000);

  //print(micLevel);

  //circle(0,0,100);

}