let y = 0;

let button;

let backgroundIsMoving = false;

let screen = 1;

let fade2 = 0;

let fade3 = 0;

let start = false;

let alpha = 255;

let mySound;

​

let a = -5;

let b = -100;

let c = -550;

let d = 80;

let speed = 2;

let fadeDevice = 1;

​

var points;

var font;

var amt = 2;

var multiplier = 0.08;

​

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");

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

  mySound = loadSound("assets/nature.m4a");

}

​

function setup() {

  createCanvas(650, 850);

  btn = createButton("Motion");

  btn.mousePressed(function () {

    DeviceOrientationEvent.requestPermission();

  });

  mySound.play();

  img.resize(0, 850);

​

  //Retrieve title into points

  points = font.textToPoints(

    "Arts of Living on a Damaged Planet",

    22,

    350,

    38,

    {

      sampleFactor: 0.3,

      simplifyThreshold: 0,

    }

  );

}

​

function draw() {

  //Drawing cover page

  background(220);

  drawCover();

​

  //Drawing all the pages after pressing the button

  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);

​

    //Turning pages

    changeBG();

    textAppear();

​

    //Making fog effect

    makeFog();

    setInterval(fogReappear, 45000);

  }

}

​

function drawCover() {

  cover.resize(0, 850);

​

  clear();

  noTint();

  image(cover, 0, 0);

  fill(0, 130);

​

  //Trees disappearing

  alpha -= 0.8;

  fill(50, 61, 67, alpha);

  rect(600, 190, 30, height);

  fill(29, 38, 45, alpha);

  rect(120, 200, 25, height);

  rect(270, 300, 60, height);

  fill(76, 93, 101, alpha);

  rect(380, 140, 50, height);

​

  //Drawing press button

  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);

​

  noStroke();

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

    fill(255);

​

    //Get locations

    var p = points[i];

    var nX = noise(p.x + p.y + frameCount * multiplier);

    var locX = map(nX, 0, 1, -amt, amt);

    var nY = noise(p.x + p.y + 2 + frameCount * multiplier);

    var locY = map(nY, 0, 1, -amt, amt);

    ellipse(p.x + locX, p.y + locY, 1, 1);

  }

}

​

function mouseClicked() {

  if (

    mouseX > width - 140 &&

    mouseX < width - 20 &&

    mouseY > height - 60 &&

    mouseY < height - 10 &&

    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 -= 15;

  }

  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() {

  //Drawing page 1

  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;

  }

​

  //Drawing page 2

  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 / 2,

      250,

      500,

      300

    );

    fade2 += 10;

  }

​

  //Drawing page 3

  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 / 2,

      250,

      500,

      300

    );

    fade3 += 10;

  }

}

​

function touchMoved() {

  fadeDevice -= 0.03;

  if (fadeDevice <= 0) {

    return false;

  }

}

​

function fogReappear() {

  //Make fog reappear

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

    fadeDevice += 0.009;

  }

​

  //Slower process

  if (fadeDevice < 0.5) {

    fadeDevice += 0.008;

  }

}

​

function makeFog() {

  //Drawing fog texture

  push();

  tint(255, 220 * fadeDevice);

  mist.resize(0, 950);

  //for(i=0; i < 3; i ++){

  image(mist, a, b);

  image(mist, c, d);

  //}

  pop();

​

  //Fog moving

  c += speed * 0.5;

  a += speed;

  if (a > 0 || a < -300) {

    speed = speed * -1;

  }

}

​