let y = 0;

let button;

let backgroundIsMoving = false;

let screen = 1;

let fade2 = 0;

let fade3 = 0;

let start = false;

​

let particle_texture = null;

let fadeDevice = 1;

let ps = null;

​

function preload() {

  particle_texture = loadImage("assets/fog.png");

  cover = loadImage("assets/cover.png");

  //mountain = loadImage("assets/Asset 1.png");

  img = loadImage("assets/Artboard 1.png");

  font = loadFont('assets/Calistoga-Regular.ttf');

}

​

function setup() {

  createCanvas(650, 850);

  btn = createButton("Motion");

  btn.mousePressed(function () {

    DeviceOrientationEvent.requestPermission();

  });

​

  img.resize(0, 850);

  particle_texture.resize(0,250);

​

  ps = new ParticleSystem(

    0,

    createVector(-100,0),

    particle_texture

  );

​

}

​

function draw() {

drawCover();

if(start == true) {

    noTint();

    background(220);

    image(img, x, 0);

    fill(255, 90);

    noStroke();

    textSize(12.5);

    text("next page >", width - 95, height - 30);

    //rect(width - 100, height - 50, 70, 30);

    print(x);

    changeBG();

    textAppear();

​

    setTimeout(fogReappear, 15000);

​

    let dx = map(mouseX, 0, width, -0.1, 0.1);

    let wind = createVector(dx, 0);

​

    ps.run();

    for (let i = 0; i < 2; i++) {

      ps.addParticle();

  }

}

​

​

}

​

​

function drawCover(){

  cover.resize(0,850);

    clear();

    noTint();

    image(cover, 0, 0);

   fill(255, 90);

    noStroke();

  rectMode(CENTER);

    rect(width/2, height/2, 50,50);

  rect(width/2, height/2, 60,60);

​

  textSize(30);

  textAlign(CENTER);

  fill(255,200);

  textSize(11);

  text('press to read',width/2, height/2 -40);

  fill(255);

  textSize(30);

  textFont(font);

  text('Arts of Living on a Damaged Planet', width/2, height/2 -90);

}

/*

 * @name SmokeParticles

 * @description a port of Dan Shiffman's SmokeParticleSystem example originally

 * for Processing. Creates smokey particles :p

 */

​

//========= PARTICLE SYSTEM ===========

​

let ParticleSystem = function (num, v, img_) {

  this.particles = [];

  this.origin = v.copy(); // we make sure to copy the vector value in case we accidentally mutate the original by accident

  this.img = img_;

  for (let i = 0; i < num; ++i) {

    this.particles.push(new Particle(this.origin, this.img));

  }

};

​

/**

 * This function runs the entire particle system.

 */

ParticleSystem.prototype.run = function () {

  let len = this.particles.length;

​

  for (let i = len - 1; i >= 0; i--) {

    let particle = this.particles[i];

    particle.run();

    if (particle.isDead()) {

      this.particles.splice(i, 1);

    }

  }

};

​

ParticleSystem.prototype.addParticle = function () {

  this.particles.push(new Particle(this.origin, this.img));

};

​

//========= PARTICLE  ===========

​

let Particle = function (pos, img_) {

  this.loc = pos.copy();

​

  let vx = randomGaussian() * 4;

  let vy = randomGaussian() * 4 - 1.0;

​

  this.vel = createVector(vx, vy);

  this.acc = createVector();

  this.lifespan = 100.0;

  this.texture = img_;

};

Particle.prototype.run = function () {

  this.update();

  this.render();

};

Particle.prototype.render = function () {

  //imageMode(CENTER);

  //fadeDevice = map(mouseX,0,width,1,0.05)

  tint(255, this.lifespan * fadeDevice);

  image(this.texture, this.loc.x, this.loc.y);

};

​

Particle.prototype.isDead = function () {

  if (this.lifespan <= 0.0) {

    return true;

  } else {

    return false;

  }

};

​

Particle.prototype.update = function () {

  this.vel.add(this.acc);

  this.loc.add(this.vel);

  this.lifespan -= 1.2;

  this.acc.mult(0);

};

​

function touchMoved() {

  fadeDevice -= 0.05;

  if (fadeDevice <= 0) {

    return false;

  }

}

​

//function touchMoved() {

//  ellipse(mouseX, mouseY, 5, 5);

//  return false;

//}

​

function fogReappear() {

  if (fadeDevice < 1 && fadeDevice >= 0.5) {

    fadeDevice += 0.005;

  }

  if (fadeDevice < 0.5) {

    fadeDevice += 0.001;

  }

}

​

function mouseClicked() {

  if (

    mouseX > width - 100 &&

    mouseX < width - 30 &&

    mouseY > height - 50 &&

    mouseY < height - 20 &&

    backgroundIsMoving == false

  ) {

    backgroundIsMoving = true;

    print("true");

  }

}

​

function mousePressed() {

  if (

    mouseX > width/2 - 25 &&

    mouseX < width/2 + 25 &&

    mouseY > height/2 - 25 &&

    mouseY < height/2 + 25 &&

    start == false

  ) {

    start = true;

  }

}

​

function changeBG() {

  if (backgroundIsMoving == true) {

    x -= 10;

  }

  if (x <= -500 && screen == 1) {

    backgroundIsMoving = false;

    screen = 2;

  }

​

  if (x <= -1000 && screen == 2) {

    backgroundIsMoving = false;

    screen = 3;

  } else if (backgroundIsMoving == true && screen == 3) {

    remove();

  }

}

​

function textAppear() {

  if (backgroundIsMoving == false && screen == 1) {

    textSize(15);

    textAlign(CENTER);

    textLeading(25);

    fill(255, fade2);

    text(

      "Introduction: Haunted Landscapes of the Anthropocene \nWhat Kinds of Human Disturbance Can Life on Earth Bear?",

      width / 2,

      160

    );

    fade2 += 10;

  } else if (backgroundIsMoving == false && screen == 2) {

    textSize(15);

    textLeading(25);

    fill(255, fade2);

    text(

      "The winds of the Anthropocene carry ghosts—the vestiges and signs of past ways of life still charged in the present. This book offers stories of those winds as they blow over haunted landscapes. Our ghosts are the traces of more-than-human histories through which ecologies are made and unmade. ",

      (width - 500) / 2,

      160,

      500,

      300

    );

    fade2 += 10;

  } else if (backgroundIsMoving == false && screen == 3) {

    textSize(15);

    textLeading(25);

    fill(255, fade3);

    text(

      "“Anthropocene” is the proposed name for a geologic epoch in which humans have become the major force determining the continuing liv-ability  of  the  earth.  The  word  tells  a  big  story:  living  arrangements that took millions of years to put into place are being undone in the blink of an eye. ",

      (width - 500) / 2,

      160,

      500,

      300

    );

    fade3 += 10;

  }

}

​