p5.js Web Editor | Generative Mindfulness

xxxxxxxxxx
let writer;
let s;
let m;
let h;
let data = [];
​
var scl = 10;
var cols, rows;
var inc = 0.1;
​
function setup() {
  noCanvas();
  writer = createWriter("userData.txt");
​
  var landingSketch = function (p) {
    let leftbg;
    let rightbg;
​
    p.setup = function () {
      p.colorMode(p.HSB);
​
      leftbg = p.loadImage("assets/ch.jpg");
      rightbg = p.loadImage("assets/bg1.jpg");
​
      let cnv = p.createCanvas(500, 500);
      
      cnv.position(160, 0);
​
//       p.fill(200, 50, 50);
​
//       p.fill(50, 50, 200);
      
     //  flowstatebtn = p.createButton("1: Flowstate");
     //  flowstatebtn.position(200, 210);
     //  flowstatebtn.size(170, 50);
     //  flowstatebtn.style("border-radius", "10px");
     // // flowstatebtn.style("background-color", "red");
     //  flowstatebtn.style("font-size: 24px");
      
​
      
     //  flowfieldbtn = p.createButton("2: Flowfield");
     //  flowfieldbtn.position(450, 210);
     //  flowfieldbtn.size(170, 50);
     //  flowfieldbtn.style("border-radius", "10px");
     // // flowfieldbtn.style("background-color", "red");
     //  flowfieldbtn.style("font-size: 24px");
      
​
      leftButton = p.createButton("Click here to begin");
      leftButton.mousePressed(p.drawChaosOrder);
      leftButton.position(350, 275);
      leftButton.size(120, 60);
       leftButton.style("border-radius:10px");
      leftButton.style("font-size: 18px");
      
      // rightButton = p.createButton("Walkthrough");
      // rightButton.mousePressed(p.drawFlowField);
      // rightButton.position(435, 260);
      // rightButton.size(100, 30);
      // rightButton.style("border-radius:10px");
      
      bleftButton = p.createButton("Sandbox");
      bleftButton.mousePressed(p.drawChaosOrderFull);
      bleftButton.position(235, 425);
      bleftButton.size(100, 30);
      bleftButton.style("border-radius: 10px");
      bleftButton.style("background-color: #0f0f0f");
      bleftButton.style("color: #ededf7");
​
      brightButton = p.createButton("Sandbox");
      brightButton.mousePressed(p.drawFlowFieldFull);
      brightButton.position(485, 425);
      brightButton.size(100, 30);
     brightButton.style("border-radius:10px");
      
      
      
    };
​
    p.drawFlowField = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("start flowfield/ff_intro: " + h + ":" + m + ":" + s);
      p.remove();
      var flowField = new p5(ff_intro);
    };
​
    p.drawChaosOrder = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("start flowstate/CnO1: " + h + ":" + m + ":" + s);
      p.remove();
      var chaosOrder = new p5(CnO1);
    };
    
      p.drawFlowFieldFull = function () {
            s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("flowfield sandbox: " + h + ":" + m + ":" + s);
      p.remove();
      var flowField = new p5(ff_full);
    };
​
    p.drawChaosOrderFull = function () {
            s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("Chaos Order sandbox: " + h + ":" + m + ":" + s);
      p.remove();
      var chaosOrder = new p5(CnO_full);
    };
​
    p.draw = function () {
      //fill(frameCount %360, 75, 100);
​
      p.image(leftbg, 0, 0, 250, 500, 90, 0, 250, 500);
      p.image(rightbg, 250, 0, 250, 500, 0, 0, 250, 500);
      
      
      p.fill('#ededf7');
      p.stroke('#ededf7');
      p.fill('#0f0f0f');
      p.rect(57, 210, 135, 45);
      p.stroke('#0f0f0f');
      p.fill('#ededf7');
      p.rect(307, 210, 135, 45);
      
      
      p.textSize(24);
      p.fill('#ededf7');
      p.text('Flowstate', 77, 240);
      p.fill('#0f0f0f');
      p.text('Flowfield', 327, 240)
    };
  };
​
  var chaosOrderSketch = function (p) {
    let slimes = [];
    var trailMap = [];
    var fr;
    let numOfSlimes = 45;
​
    let instructions = [];
​
    p.setup = function () {
      p.createCanvas(500, 500);
​
      for (let i = 0; i < numOfSlimes; i++) {
        slimes.push(
          new Slime(p, p.random(p.width), p.random(p.height), 18, 40)
        );
      }
      p.colorMode(p.HSB);
​
      p.drawMenu = function () {
        p.remove();
        var landing = new p5(sketch0);
      };
​
      p.draw = function () {
        p.fill(0, 0.05);
        p.rect(0, 0, 500, 500);
​
        for (let slime of slimes) {
          slime.edges();
          if (
            p.mouseIsPressed &&
            p.mouseX > 0 &&
            p.mouseX < p.width &&
            p.mouseY > 0 &&
            p.mouseY < p.height
          ) {
            slime.targetMouse(p.mouseX, p.mouseY);
          } else {
            slime.seperate(slimes);
          }
          slime.display();
          slime.update();
        }
      };
    };
  }; //no control of params
​
  var chaosOrderSketchMass = function (p) {
    let slimes = [];
    var trailMap = [];
    var fr;
    let numOfSlimes = 45;
​
    p.setup = function () {
      p.createCanvas(500, 500);
​
      massSlider = p.createSlider(5, 30, 18, 1);
      massSlider.position(0, 500); // x and y
      massSlider.size(500, 20); // width and height
​
      for (let i = 0; i < numOfSlimes; i++) {
        slimes.push(
          new Slime(
            p,
            p.random(p.width),
            p.random(p.height),
            massSlider.value(),
            35
          )
        );
      }
      p.colorMode(p.HSB);
​
      p.drawMenu = function () {
        p.remove();
        var landing = new p5(sketch0);
      };
​
      p.draw = function () {
        p.fill(0, 0.05);
        p.rect(0, 0, 500, 500);
​
        for (let slime of slimes) {
          slime.edges();
          if (
            p.mouseIsPressed &&
            p.mouseX > 0 &&
            p.mouseX < p.width &&
            p.mouseY > 0 &&
            p.mouseY < p.height
          ) {
            slime.targetMouse(p.mouseX, p.mouseY);
          } else {
            slime.seperate(slimes);
          }
          slime.display();
          slime.update();
          slime.updateMass(massSlider.value());
        }
      };
    };
  }; //control of mass
​
  var chaosOrderSketchMassPerc = function (p) {
    let slimes = [];
    var trailMap = [];
    var fr;
    let numOfSlimes = 45;
​
    let instructions = [];
​
    p.setup = function () {
      p.createCanvas(500, 500);
​
      massSlider = p.createSlider(5, 30, 18, 1);
      massSlider.position(0, 500); // x and y
      massSlider.size(500, 20); // width and height
​
      perceptionSlider = p.createSlider(0, 70, 35, 5);
      perceptionSlider.position(0, 520); // x and y
      perceptionSlider.size(500, 20); // width and height
​
      for (let i = 0; i < numOfSlimes; i++) {
        slimes.push(
          new Slime(
            p,
            p.random(p.width),
            p.random(p.height),
            massSlider.value(),
            perceptionSlider.value()
          )
        );
      }
      p.colorMode(p.HSB);
​
      p.drawMenu = function () {
        p.remove();
        var landing = new p5(sketch0);
      };
​
      p.draw = function () {
        p.fill(0, 0.05);
        p.rect(0, 0, 500, 500);
​
        for (let slime of slimes) {
          slime.edges();
          if (
            p.mouseIsPressed &&
            p.mouseX > 0 &&
            p.mouseX < p.width &&
            p.mouseY > 0 &&
            p.mouseY < p.height
          ) {
            slime.targetMouse(p.mouseX, p.mouseY);
          } else {
            slime.seperate(slimes);
          }
          slime.display();
          slime.update();
          slime.updateMass(massSlider.value());
          slime.updatePerception(perceptionSlider.value());
        }
      };
    };
  }; //control of mass and perception
​
  var CnO = function (p) {
    var canvas = new p5(chaosOrderSketch);
​
    p.setup = function () {
      nextButton = p.createButton(
        "Welcome to the first toolkit, click here to continue."
      );
      nextButton.mousePressed(p.nextInstruction);
      nextButton.position(20, 510);
      nextButton.size(460, 80);
      nextButton.style("border-radius", "10px");
​
      // s = p.second();
      // m = p.minute();
      // h = p.hour();
      // data.push("start flowstate: " + h + ":" + m + ":" + s);
​
      exitButton = p.createButton("Back to menu");
      exitButton.mousePressed(p.drawMenu);
      exitButton.position(510, 445);
      exitButton.size(80, 50);
      exitButton.style("border-radius", "10px");
    };
​
    p.drawMenu = function () {
      p.remove();
      canvas.remove();
      var landing = new p5(landingSketch);
    };
​
    p.nextInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("CnO1: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var firstStep = new p5(CnO1);
    };
  }; //landing
​
  var CnO1 = function (p) {
    var canvas = new p5(chaosOrderSketch);
​
    let cdtimer;
​
    p.setup = function () {
      p.createCanvas(500, 60);
​
      // cdtimer = new Countdown(p, 535, 63, 50, 60);
​
      // calmSlider = p.createSlider(0, 8, 4, 0.1);
      // calmSlider.position(275, 237);
      // calmSlider.size(500, 20);
      // calmSlider.style("transform: rotate(270deg)");
​
      nextButton = p.createButton("Next");
      nextButton.mousePressed(p.nextInstruction);
      nextButton.position(710, 140);
      nextButton.size(100, 50);
      nextButton.style("border-radius", "10px");
      
      // s = p.second();
      // m = p.minute();
      // h = p.hour();
      // data.push("start flowstate: " + h + ":" + m + ":" + s);
​
      // backButton = p.createButton("Previous");
      // backButton.mousePressed(p.prevInstruction);
      // backButton.position(510, 140);
      // backButton.size(100, 50);
      // backButton.style("border-radius", "10px");
​
      let info =
        "This is Flowstate, a mindful and calming toolkit. Watch it for a minute or two and just let yourself relax. While you're watching, think about the behaviour the orbs are exhibiting. When you're ready, click next.";
​
      infoButton = p.createButton(info);
      infoButton.position(510, 5);
      infoButton.size(300, 130);
      infoButton.style("border-radius", "10px");
​
      exitButton = p.createButton("Back to menu");
      exitButton.mousePressed(p.drawMenu);
      exitButton.position(510, 445);
      exitButton.size(80, 50);
      exitButton.style("border-radius", "10px");
    };
​
    p.drawMenu = function () {
      p.remove();
      canvas.remove();
      var landing = new p5(landingSketch);
    };
​
    // p.mouseReleased = function () {
    //   s = p.second();
    //   m = p.minute();
    //   h = p.hour();
    //   if (p.mouseX > 500 && p.mouseX < 550 && p.mouseY > -500 && p.mouseY < 0) {
    //     data.push(
    //       "calmSlider: " + h + ":" + m + ":" + s + " -> " + calmSlider.value()
    //     );
    //   }
    // };
​
    p.nextInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("CnO2: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var mouseStep = new p5(CnO2);
    };
​
    p.prevInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("CnO: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var mouseStep = new p5(CnO);
    };
​
    p.draw = function () {
      // cdtimer.show();
    };
  }; //intro tooolkit
​
  var CnO2 = function (p) {
    var canvas = new p5(chaosOrderSketch);
​
    let cdtimer;
​
    p.setup = function () {
      p.createCanvas(500, 60);
​
      // cdtimer = new Countdown(p, 535, 63, 50, 60);
​
      // calmSlider = p.createSlider(0, 8, 4, 0.1);
      // calmSlider.position(275, 237);
      // calmSlider.size(500, 20);
      // calmSlider.style("transform: rotate(270deg)");
​
      nextButton = p.createButton("Next");
      nextButton.mousePressed(p.nextInstruction);
      nextButton.position(710, 140);
      nextButton.size(100, 50);
      nextButton.style("border-radius", "10px");
​
      backButton = p.createButton("Previous");
      backButton.mousePressed(p.prevInstruction);
      backButton.position(510, 140);
      backButton.size(100, 50);
      backButton.style("border-radius", "10px");
​
      let info =
        "Now try clicking and holding anywhere on the canvas and see how the behaviour of the orbs change. Spend a bit of time playing around with this and when you're ready click next.";
​
      infoButton = p.createButton(info);
      infoButton.position(510, 5);
      infoButton.size(300, 130);
      infoButton.style("border-radius", "10px");
​
      exitButton = p.createButton("Back to menu");
      exitButton.mousePressed(p.drawMenu);
      exitButton.position(510, 445);
      exitButton.size(80, 50);
      exitButton.style("border-radius", "10px");
    };
​
    p.drawMenu = function () {
      p.remove();
      canvas.remove();
      var landing = new p5(landingSketch);
    };
​
    // p.mouseReleased = function () {
    //   s = p.second();
    //   m = p.minute();
    //   h = p.hour();
    //   if (p.mouseX > 500 && p.mouseX < 550 && p.mouseY > -500 && p.mouseY < 0) {
    //     data.push(
    //       "calmSlider: " + h + ":" + m + ":" + s + " -> " + calmSlider.value()
    //     );
    //   }
    // };
​
    p.nextInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("CnO_B: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var massStep = new p5(CnO_B);
    };
​
    p.prevInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("CnO1: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var massStep = new p5(CnO1);
    };
​
    p.draw = function () {
      // cdtimer.show();
    };
  }; //clicking behaviour
​
  var CnO_B = function (p) {
    var canvas = new p5(chaosOrderSketch);
​
    let cdtimer;
​
    p.setup = function () {
      p.createCanvas(500, 60);
​
      // cdtimer = new Countdown(p, 535, 63, 50, 120);
​
      // calmSlider = p.createSlider(0, 8, 4, 0.1);
      // calmSlider.position(275, 237);
      // calmSlider.size(500, 20);
      // calmSlider.style("transform: rotate(270deg)");
​
      nextButton = p.createButton("Next");
      nextButton.mousePressed(p.nextInstruction);
      nextButton.position(710, 140);
      nextButton.size(100, 50);
      nextButton.style("border-radius", "10px");
​
      backButton = p.createButton("Previous");
      backButton.mousePressed(p.prevInstruction);
      backButton.position(510, 140);
      backButton.size(100, 50);
      backButton.style("border-radius", "10px");
​
      let info =
        "Now, for an exercise, hold down the mouse and as you do inhale a deep breath. Hold your breath until all the orbs converge, and once they have, exhale and release. Try and get into a nice rhythm of this and continue for a few minutes. When you're ready to move on, click next.";
​
      infoButton = p.createButton(info);
      infoButton.position(510, 5);
      infoButton.size(300, 130);
      infoButton.style("border-radius", "10px");
​
      exitButton = p.createButton("Back to menu");
      exitButton.mousePressed(p.drawMenu);
      exitButton.position(510, 445);
      exitButton.size(80, 50);
      exitButton.style("border-radius", "10px");
    };
​
    p.drawMenu = function () {
      p.remove();
      canvas.remove();
      var landing = new p5(landingSketch);
    };
​
    // p.mouseReleased = function () {
    //   s = p.second();
    //   m = p.minute();
    //   h = p.hour();
    //   if (p.mouseX > 500 && p.mouseX < 550 && p.mouseY > -500 && p.mouseY < 0) {
    //     data.push(
    //       "calmSlider: " + h + ":" + m + ":" + s + " -> " + calmSlider.value()
    //     );
    //   }
    // };
​
    p.nextInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("CnO_M: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var massStep = new p5(CnO_M);
    };
​
    p.prevInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("CnO2: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var massStep = new p5(CnO2);
    };
​
    p.draw = function () {
      // cdtimer.show();
    };
  }; //breathing exercise
​
  var CnO_M = function (p) {
    var canvas = new p5(chaosOrderSketchMass);
​
    let cdtimer;
​
    p.setup = function () {
      p.createCanvas(500, 60);
​
      // cdtimer = new Countdown(p, 535, 63, 50, 60);
​
      // calmSlider = p.createSlider(0, 8, 4, 0.1);
      // calmSlider.position(275, 237);
      // calmSlider.size(500, 20);
      // calmSlider.style("transform: rotate(270deg)");
​
      nextButton = p.createButton("Next");
      nextButton.mousePressed(p.nextInstruction);
      nextButton.position(710, 140);
      nextButton.size(100, 50);
      nextButton.style("border-radius", "10px");
​
      backButton = p.createButton("Previous");
      backButton.mousePressed(p.prevInstruction);
      backButton.position(510, 140);
      backButton.size(100, 50);
      backButton.style("border-radius", "10px");
​
      let info =
        "We now have access to a slider. Adjust this left and right and see what happens. When you're content, click next.";
​
      infoButton = p.createButton(info);
      infoButton.position(510, 5);
      infoButton.size(300, 130);
      infoButton.style("border-radius", "10px");
​
      exitButton = p.createButton("Back to menu");
      exitButton.mousePressed(p.drawMenu);
      exitButton.position(510, 445);
      exitButton.size(80, 50);
      exitButton.style("border-radius", "10px");
    };
​
    p.drawMenu = function () {
      p.remove();
      canvas.remove();
      var landing = new p5(landingSketch);
    };
​
    p.mouseReleased = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      // if (p.mouseX > 500 && p.mouseX < 550 && p.mouseY > -500 && p.mouseY < 0) {
      //   data.push(
      //     "calmSlider: " + h + ":" + m + ":" + s + " -> " + calmSlider.value()
      //   );
      //}
      s = p.second();
      m = p.minute();
      h = p.hour();
      if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 0 && p.mouseY < 20) {
        data.push(
          "massSlider: " + h + ":" + m + ":" + s + " -> " + massSlider.value()
        );
      }
    };
​
    p.nextInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("CnO_MP: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var percStep = new p5(CnO_MP);
    };
​
    p.prevInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("CnO_B: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var percStep = new p5(CnO_B);
    };
​
    p.draw = function () {
      // cdtimer.show();
    };
  }; //mass slider
​
  var CnO_MP = function (p) {
    var canvas = new p5(chaosOrderSketchMassPerc);
​
    let cdtimer;
​
    p.setup = function () {
      p.createCanvas(500, 60);
​
      // cdtimer = new Countdown(p, 535, 63, 50, 60);
​
      // calmSlider = p.createSlider(0, 8, 4, 0.1);
      // calmSlider.position(275, 237);
      // calmSlider.size(500, 20);
      // calmSlider.style("transform: rotate(270deg)");
​
      nextButton = p.createButton("Flowfield -> ");
      nextButton.mousePressed(p.nextInstruction);
      nextButton.position(710, 140);
      nextButton.size(100, 50);
      nextButton.style("border-radius", "10px");
​
      // saveButton = p.createButton("Save Data");
      // saveButton.mousePressed(p.saveData);
      // saveButton.position(510, 390);
      // saveButton.size(80, 50);
      // saveButton.style("border-radius", "10px");
​
      backButton = p.createButton("Previous");
      backButton.mousePressed(p.prevInstruction);
      backButton.position(510, 140);
      backButton.size(100, 50);
      backButton.style("border-radius", "10px");
​
      let info =
        "We now have access to another slider. Once again play around with it to figure out what it does. Try out different combinations of the two sliders and think about what thoughts and feelings they might evoke. When you're ready to move onto the next toolkit, Flowfield, click the button below.";
​
      infoButton = p.createButton(info);
      infoButton.position(510, 5);
      infoButton.size(300, 130);
      infoButton.style("border-radius", "10px");
​
      exitButton = p.createButton("Back to menu");
      exitButton.mousePressed(p.drawMenu);
      exitButton.position(510, 445);
      exitButton.size(80, 50);
      exitButton.style("border-radius", "10px");
    };
​
    p.drawMenu = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("back to menu: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var landing = new p5(landingSketch);
    };
​
    p.mouseReleased = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      // if (p.mouseX > 500 && p.mouseX < 550 && p.mouseY > -500 && p.mouseY < 0) {
      //   data.push(
      //     "calmSlider: " + h + ":" + m + ":" + s + " -> " + calmSlider.value()
      //   );
      // }
      s = p.second();
      m = p.minute();
      h = p.hour();
      if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 0 && p.mouseY < 20) {
        data.push(
          "massSlider: " + h + ":" + m + ":" + s + " -> " + massSlider.value()
        );
      }
      s = p.second();
      m = p.minute();
      h = p.hour();
      if (
        p.mouseX > 0 &&
        p.mouseX < p.width &&
        p.mouseY > 20 &&
        p.mouseY < 40
      ) {
        data.push(
          "perceptionSlider: " +
            h +
            ":" +
            m +
            ":" +
            s +
            " -> " +
            perceptionSlider.value()
        );
      }
    };
​
    // p.saveData = function () {
    //   s = p.second();
    //   m = p.minute();
    //   h = p.hour();
    //   data.push("end: " + h + ":" + m + ":" + s);
    //   for (let i = 0; i < data.length; i++) {
    //     writer.print(data[i]);
    //   }
    //   writer.close();
    //   //writer.clear();
    // };
​
    p.nextInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("start flowfield/ff_intro: " + h + ":" + m + ":" + s);
      p.remove();
      canvas.remove();
      var flowField = new p5(ff_intro);
    };
​
    p.prevInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("CnO_M: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var percStep = new p5(CnO_M);
    };
​
    p.draw = function () {
      // cdtimer.show();
    };
  }; //perception slider
  
  var CnO_full = function (p){
    
    var canvas = new p5(chaosOrderSketchMassPerc);
    
    p.setup = function(){
      
      exitButton = p.createButton("Back to menu");
      exitButton.mousePressed(p.drawMenu);
      exitButton.position(510, 445);
      exitButton.size(80, 50);
      exitButton.style("border-radius", "10px");
      
    };
    
        p.drawMenu = function () {
      p.remove();
      canvas.remove();
      var landing = new p5(landingSketch);
    };
    
  };
​
  var flowfieldSketch = function (p) {
    var zoff = 0;
​
    var fr;
​
    var particles = [];
​
    var flowfield;
​
    let writer;
    let s;
    let m;
    let h;
    let data = [];
​
    let colorPicker1, colorPicker2;
​
    p.setup = function () {
      p.createCanvas(500, 500);
      cols = p.floor(p.width / scl);
      rows = p.floor(p.height / scl);
      fr = p.createP("");
​
      //colorMode(HSB, 360, 100, 100);
​
      // colorPicker1 = p.createColorPicker('#00FFE8');
      colorPicker1 = p.createColorPicker("#0026ff");
      colorPicker1.position(0, 0);
​
      // colorPicker2 = p.createColorPicker('#E200FF');
      colorPicker2 = p.createColorPicker("#ff00e1");
      colorPicker2.position(450, 473);
      
      flowfield = new Array(cols * rows);
​
      for (var i = 0; i < 300; i++) {
        particles[i] = new Particle(p);
      }
      p.background(255);
      
      strengthbtn = p.createButton("<- Strength");
      strengthbtn.position(505, 500);
​
      timehbtn = p.createButton("<- Time");
      timehbtn.position(505, 520);
      
      entropyhbtn = p.createButton("<- Entropy");
      entropyhbtn.position(505, 540);
      
      magSlider = p.createSlider(0.1, 5, 3, 0.1);
      magSlider.position(0, 500); // x and y
      magSlider.size(500, 20); // width and height
​
      timeSlider = p.createSlider(0, 0.0002, 0.00005, 0);
      timeSlider.position(0, 520); // x and y
      timeSlider.size(500, 20); // width and height
​
      chaosSlider = p.createSlider(0.1, 2.8, 1, 0.9);
      chaosSlider.position(0, 540); // x and y
      chaosSlider.size(250, 20); // width and height
​
            saveButton = p.createButton("Save Canvas");
            saveButton.mousePressed(p.saveFile);
            saveButton.position(510, 335);
            saveButton.size(80, 50);
            saveButton.style("border-radius", "10px");
​
            resetButton = p.createButton("Clear Canvas");
            resetButton.mousePressed(p.resetCanvas);
            resetButton.position(510, 390);
            resetButton.size(80, 50);
            resetButton.style("border-radius", "10px");
​
      //       saveDataButton = p.createButton("save data");
      //       saveDataButton.mousePressed(p.saveData);
      //       saveDataButton.position(100, 590);
      //       saveDataButton.size(100, 20);
​
      writer = p.createWriter("flowData.txt");
      m = p.minute();
      s = p.second();
      h = p.hour();
​
      data.push("start: " + h + ":" + m + ":" + s);
    };
​
    p.saveData = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("end: " + h + ":" + m + ":" + s);
      for (let i = 0; i < data.length; i++) {
        writer.print(data[i]);
      }
      writer.close();
      writer.clear();
    };
​
    p.mouseClicked = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
​
      // if (mouseX > 0 && mouseX < width && mouseY > height && mouseY < 530){
      //   data.push('magSlider: '+ h + ':' + m + ':' + s);
      // }
      // if (mouseX > 0 && mouseX < width && mouseY > 530 && mouseY < 560){
      //   data.push('timeSlider: ' + h + ':' + m + ':' + s);
      // }
      // if (mouseX > 0 && mouseX < width && mouseY > 560 && mouseY < 590){
      //   data.push('chaosSlider: ' + h + ':' + m + ':' + s);
      // }
    };
​
    p.resetCanvas = function () {
      p.background(255);
      for (var i = 0; i < 300; i++) {
        particles[i] = new Particle();
      }
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("reset: " + h + ":" + m + ":" + s);
    };
​
    p.saveFile = function () {
      p.save("canvas.jpg");
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("save: " + h + ":" + m + ":" + s);
    };
​
    p.draw = function () {
      // background(255);
      var yoff = 0;
      for (var y = 0; y < rows; y++) {
        //noprotect
        var xoff = 0;
        for (var x = 0; x < cols; x++) {
          var index = x + y * cols;
          var angle =
            p.noise(xoff, yoff, zoff) * p.TWO_PI * chaosSlider.value();
          var v = p5.Vector.fromAngle(angle);
          let mag = magSlider.value();
          v.setMag(mag);
          flowfield[index] = v;
          xoff += inc;
          p.stroke(0, 50);
          p.strokeWeight(0.5);
        }
        yoff += inc;
​
        let timeInc = timeSlider.value();
        zoff += timeInc;
      }
​
      for (var i = 0; i < particles.length; i++) {
        particles[i].follow(flowfield);
        particles[i].update(colorPicker1.color(), colorPicker2.color());
        particles[i].edges();
        particles[i].show();
      }
​
      // fr.html(p.floor(p.frameRate()));
      //noLoop();
    };
  };
  
  var flowfieldSketch_nosliders = function (p) {
    var zoff = 0;
​
    var fr;
​
    var particles = [];
​
    var flowfield;
​
    let writer;
    let s;
    let m;
    let h;
    let data = [];
​
    let colorPicker1, colorPicker2;
​
    p.setup = function () {
      p.createCanvas(500, 500);
      cols = p.floor(p.width / scl);
      rows = p.floor(p.height / scl);
      fr = p.createP("");
​
      //colorMode(HSB, 360, 100, 100);
​
      // colorPicker1 = p.createColorPicker('#00FFE8');
      colorPicker1 = p.createColorPicker("#0026ff");
      colorPicker1.position(0, 0);
​
      // colorPicker2 = p.createColorPicker('#E200FF');
      colorPicker2 = p.createColorPicker("#ff00e1");
      colorPicker2.position(450, 473);
​
      flowfield = new Array(cols * rows);
​
      for (var i = 0; i < 300; i++) {
        particles[i] = new Particle(p);
      }
      p.background(255);
​
//       magSlider = p.createSlider(0.1, 5, 3, 0.1);
//       magSlider.position(0, 500); // x and y
//       magSlider.size(500, 20); // width and height
​
//       timeSlider = p.createSlider(0, 0.0002, 0.00005, 0);
//       timeSlider.position(0, 530); // x and y
//       timeSlider.size(500, 20); // width and height
​
//       chaosSlider = p.createSlider(0.1, 5, 1, 0);
//       chaosSlider.position(0, 560); // x and y
//       chaosSlider.size(500, 20); // width and height
​
      //       saveButton = p.createButton("save");
      //       saveButton.mousePressed(p.saveFile);
      //       saveButton.position(0, 590);
      //       saveButton.size(50, 20);
​
      //       resetButton = p.createButton("reset");
      //       resetButton.mousePressed(p.resetCanvas);
      //       resetButton.position(50, 590);
      //       resetButton.size(50, 20);
​
      //       saveDataButton = p.createButton("save data");
      //       saveDataButton.mousePressed(p.saveData);
      //       saveDataButton.position(100, 590);
      //       saveDataButton.size(100, 20);
​
      writer = p.createWriter("flowData.txt");
      m = p.minute();
      s = p.second();
      h = p.hour();
​
      data.push("start: " + h + ":" + m + ":" + s);
    };
​
    p.saveData = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("end: " + h + ":" + m + ":" + s);
      for (let i = 0; i < data.length; i++) {
        writer.print(data[i]);
      }
      writer.close();
      writer.clear();
    };
​
    p.mouseClicked = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
​
      // if (mouseX > 0 && mouseX < width && mouseY > height && mouseY < 530){
      //   data.push('magSlider: '+ h + ':' + m + ':' + s);
      // }
      // if (mouseX > 0 && mouseX < width && mouseY > 530 && mouseY < 560){
      //   data.push('timeSlider: ' + h + ':' + m + ':' + s);
      // }
      // if (mouseX > 0 && mouseX < width && mouseY > 560 && mouseY < 590){
      //   data.push('chaosSlider: ' + h + ':' + m + ':' + s);
      // }
    };
​
    p.resetCanvas = function () {
      p.background(255);
      for (var i = 0; i < 300; i++) {
        particles[i] = new Particle();
      }
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("reset: " + h + ":" + m + ":" + s);
    };
​
    p.saveFile = function () {
      p.save("design.jpg");
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("save: " + h + ":" + m + ":" + s);
    };
​
    p.draw = function () {
      // background(255);
      var yoff = 0;
      for (var y = 0; y < rows; y++) {
        //noprotect
        var xoff = 0;
        for (var x = 0; x < cols; x++) {
          var index = x + y * cols;
          var angle =
            p.noise(xoff, yoff, zoff) * p.TWO_PI;
          var v = p5.Vector.fromAngle(angle);
          let mag = 3;
          v.setMag(mag);
          flowfield[index] = v;
          xoff += inc;
          p.stroke(0, 50);
          p.strokeWeight(0.5);
        }
        yoff += inc;
​
        let timeInc = 0.00005;
        zoff += timeInc;
      }
​
      for (var i = 0; i < particles.length; i++) {
        particles[i].follow(flowfield);
        particles[i].update(colorPicker1.color(), colorPicker2.color());
        particles[i].edges();
        particles[i].show();
      }
​
      // fr.html(p.floor(p.frameRate()));
      //noLoop();
    };
  };
  
  var flowfieldSketch_mag = function (p) {
    var zoff = 0;
​
    var fr;
​
    var particles = [];
​
    var flowfield;
​
    let writer;
    let s;
    let m;
    let h;
    let data = [];
​
    let colorPicker1, colorPicker2;
​
    p.setup = function () {
      p.createCanvas(500, 500);
      cols = p.floor(p.width / scl);
      rows = p.floor(p.height / scl);
      fr = p.createP("");
​
      //colorMode(HSB, 360, 100, 100);
​
      // colorPicker1 = p.createColorPicker('#00FFE8');
      colorPicker1 = p.createColorPicker("#0026ff");
      colorPicker1.position(0, 0);
​
      // colorPicker2 = p.createColorPicker('#E200FF');
      colorPicker2 = p.createColorPicker("#ff00e1");
      colorPicker2.position(450, 473);
​
      flowfield = new Array(cols * rows);
​
      for (var i = 0; i < 300; i++) {
        particles[i] = new Particle(p);
      }
      p.background(255);
​
      magSlider = p.createSlider(0.1, 5, 0.1, 0.1);
      magSlider.position(0, 500); // x and y
      magSlider.size(500, 20); // width and height
      
      strengthbtn = p.createButton("<- Strength");
      strengthbtn.position(505, 500);
​
//       timeSlider = p.createSlider(0, 0.0002, 0.00005, 0);
//       timeSlider.position(0, 530); // x and y
//       timeSlider.size(500, 20); // width and height
​
//       chaosSlider = p.createSlider(0.1, 5, 1, 0);
//       chaosSlider.position(0, 560); // x and y
//       chaosSlider.size(500, 20); // width and height
​
      //       saveButton = p.createButton("save");
      //       saveButton.mousePressed(p.saveFile);
      //       saveButton.position(0, 590);
      //       saveButton.size(50, 20);
​
            resetButton = p.createButton("Clear Canvas");
            resetButton.mousePressed(p.resetCanvas);
            resetButton.position(510, 390);
            resetButton.size(80, 50);
        resetButton.style("border-radius", "10px");
      
​
​
      //       saveDataButton = p.createButton("save data");
      //       saveDataButton.mousePressed(p.saveData);
      //       saveDataButton.position(100, 590);
      //       saveDataButton.size(100, 20);
​
      writer = p.createWriter("flowData.txt");
      m = p.minute();
      s = p.second();
      h = p.hour();
​
      data.push("start: " + h + ":" + m + ":" + s);
    };
​
    p.saveData = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("end: " + h + ":" + m + ":" + s);
      for (let i = 0; i < data.length; i++) {
        writer.print(data[i]);
      }
      writer.close();
      writer.clear();
    };
​
    p.mouseClicked = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
​
      // if (mouseX > 0 && mouseX < width && mouseY > height && mouseY < 530){
      //   data.push('magSlider: '+ h + ':' + m + ':' + s);
      // }
      // if (mouseX > 0 && mouseX < width && mouseY > 530 && mouseY < 560){
      //   data.push('timeSlider: ' + h + ':' + m + ':' + s);
      // }
      // if (mouseX > 0 && mouseX < width && mouseY > 560 && mouseY < 590){
      //   data.push('chaosSlider: ' + h + ':' + m + ':' + s);
      // }
    };
​
    p.resetCanvas = function () {
      p.background(255);
      for (var i = 0; i < 300; i++) {
        particles[i] = new Particle();
      }
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("reset: " + h + ":" + m + ":" + s);
    };
​
    p.saveFile = function () {
      p.save("design.jpg");
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("save: " + h + ":" + m + ":" + s);
    };
​
    p.draw = function () {
      // background(255);
      var yoff = 0;
      for (var y = 0; y < rows; y++) {
        //noprotect
        var xoff = 0;
        for (var x = 0; x < cols; x++) {
          var index = x + y * cols;
          var angle =
            p.noise(xoff, yoff, zoff) * p.TWO_PI;
          var v = p5.Vector.fromAngle(angle);
          let mag = magSlider.value();
          v.setMag(mag);
          flowfield[index] = v;
          xoff += inc;
          p.stroke(0, 50);
          p.strokeWeight(0.5);
        }
        yoff += inc;
​
        let timeInc = 0.00005;
        zoff += timeInc;
      }
​
      for (var i = 0; i < particles.length; i++) {
        particles[i].follow(flowfield);
        particles[i].update(colorPicker1.color(), colorPicker2.color());
        particles[i].edges();
        particles[i].show();
      }
​
      // fr.html(p.floor(p.frameRate()));
      //noLoop();
    };
  };
  
  var flowfieldSketch_magtime = function (p) {
    var zoff = 0;
​
    var fr;
​
    var particles = [];
​
    var flowfield;
​
    let writer;
    let s;
    let m;
    let h;
    let data = [];
​
    let colorPicker1, colorPicker2;
​
    p.setup = function () {
      p.createCanvas(500, 500);
      cols = p.floor(p.width / scl);
      rows = p.floor(p.height / scl);
      fr = p.createP("");
​
      //colorMode(HSB, 360, 100, 100);
​
      // colorPicker1 = p.createColorPicker('#00FFE8');
      colorPicker1 = p.createColorPicker("#0026ff");
      colorPicker1.position(0, 0);
​
      // colorPicker2 = p.createColorPicker('#E200FF');
      colorPicker2 = p.createColorPicker("#ff00e1");
      colorPicker2.position(450, 473);
​
      flowfield = new Array(cols * rows);
​
      for (var i = 0; i < 300; i++) {
        particles[i] = new Particle(p);
      }
      p.background(255);
      
      strengthbtn = p.createButton("<- Strength");
      strengthbtn.position(505, 500);
​
      timehbtn = p.createButton("<- Time");
      timehbtn.position(505, 520);
      
​
      magSlider = p.createSlider(0.1, 5, 5, 0.1);
      magSlider.position(0, 500); // x and y
      magSlider.size(500, 20); // width and height
​
      timeSlider = p.createSlider(0, 0.0002, 0, 0);
      timeSlider.position(0, 520); // x and y
      timeSlider.size(500, 20); // width and height
​
      // chaosSlider = p.createSlider(0.1, 5, 1, 0);
      // chaosSlider.position(0, 560); // x and y
      // chaosSlider.size(500, 20); // width and height
​
      //       saveButton = p.createButton("save");
      //       saveButton.mousePressed(p.saveFile);
      //       saveButton.position(0, 590);
      //       saveButton.size(50, 20);
​
            resetButton = p.createButton("Clear Canvas");
            resetButton.mousePressed(p.resetCanvas);
            resetButton.position(510, 390);
            resetButton.size(80, 50);
            resetButton.style("border-radius", "10px");
​
      //       saveDataButton = p.createButton("save data");
      //       saveDataButton.mousePressed(p.saveData);
      //       saveDataButton.position(100, 590);
      //       saveDataButton.size(100, 20);
​
      writer = p.createWriter("flowData.txt");
      m = p.minute();
      s = p.second();
      h = p.hour();
​
      data.push("start: " + h + ":" + m + ":" + s);
    };
​
    p.saveData = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("end: " + h + ":" + m + ":" + s);
      for (let i = 0; i < data.length; i++) {
        writer.print(data[i]);
      }
      writer.close();
      writer.clear();
    };
​
    p.mouseClicked = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
​
      // if (mouseX > 0 && mouseX < width && mouseY > height && mouseY < 530){
      //   data.push('magSlider: '+ h + ':' + m + ':' + s);
      // }
      // if (mouseX > 0 && mouseX < width && mouseY > 530 && mouseY < 560){
      //   data.push('timeSlider: ' + h + ':' + m + ':' + s);
      // }
      // if (mouseX > 0 && mouseX < width && mouseY > 560 && mouseY < 590){
      //   data.push('chaosSlider: ' + h + ':' + m + ':' + s);
      // }
    };
​
    p.resetCanvas = function () {
      p.background(255);
      for (var i = 0; i < 300; i++) {
        particles[i] = new Particle();
      }
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("reset: " + h + ":" + m + ":" + s);
    };
​
    p.saveFile = function () {
      p.save("design.jpg");
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("save: " + h + ":" + m + ":" + s);
    };
​
    p.draw = function () {
      // background(255);
      var yoff = 0;
      for (var y = 0; y < rows; y++) {
        //noprotect
        var xoff = 0;
        for (var x = 0; x < cols; x++) {
          var index = x + y * cols;
          var angle =
            p.noise(xoff, yoff, zoff) * p.TWO_PI;
          var v = p5.Vector.fromAngle(angle);
          let mag = magSlider.value();
          v.setMag(mag);
          flowfield[index] = v;
          xoff += inc;
          p.stroke(0, 50);
          p.strokeWeight(0.5);
        }
        yoff += inc;
​
        let timeInc = timeSlider.value();
        zoff += timeInc;
      }
​
      for (var i = 0; i < particles.length; i++) {
        particles[i].follow(flowfield);
        particles[i].update(colorPicker1.color(), colorPicker2.color());
        particles[i].edges();
        particles[i].show();
      }
​
      // fr.html(p.floor(p.frameRate()));
      //noLoop();
    };
  };
  
  var flowfieldSketch_magtimechaos = function (p) {
    var zoff = 0;
​
    var fr;
​
    var particles = [];
​
    var flowfield;
​
    let writer;
    let s;
    let m;
    let h;
    let data = [];
​
    let colorPicker1, colorPicker2;
​
    p.setup = function () {
      p.createCanvas(500, 500);
      cols = p.floor(p.width / scl);
      rows = p.floor(p.height / scl);
      fr = p.createP("");
​
      //colorMode(HSB, 360, 100, 100);
​
      // colorPicker1 = p.createColorPicker('#00FFE8');
      colorPicker1 = p.createColorPicker("#0026ff");
      colorPicker1.position(0, 0);
​
      // colorPicker2 = p.createColorPicker('#E200FF');
      colorPicker2 = p.createColorPicker("#ff00e1");
      colorPicker2.position(450, 473);
​
      flowfield = new Array(cols * rows);
​
      for (var i = 0; i < 300; i++) {
        particles[i] = new Particle(p);
      }
      p.background(255);
      
      strengthbtn = p.createButton("<- Strength");
      strengthbtn.position(505, 500);
​
      timehbtn = p.createButton("<- Time");
      timehbtn.position(505, 520);
      
      entropyhbtn = p.createButton("<- Entropy");
      entropyhbtn.position(505, 540);
​
      magSlider = p.createSlider(0.1, 5, 3, 0.1);
      magSlider.position(0, 500); // x and y
      magSlider.size(500, 20); // width and height
      
​
      timeSlider = p.createSlider(0, 0.0002, 0.00005, 0);
      timeSlider.position(0, 520); // x and y
      timeSlider.size(500, 20); // width and height
​
      chaosSlider = p.createSlider(0.1, 2.8, 0.1, 0.9);
      chaosSlider.position(0, 540); // x and y
      chaosSlider.size(250, 20); // width and height
​
      //       saveButton = p.createButton("save");
      //       saveButton.mousePressed(p.saveFile);
      //       saveButton.position(0, 590);
      //       saveButton.size(50, 20);
​
            resetButton = p.createButton("Clear Canvas");
            resetButton.mousePressed(p.resetCanvas);
            resetButton.position(510, 390);
            resetButton.size(80, 50);
            resetButton.style("border-radius", "10px");
​
      //       saveDataButton = p.createButton("save data");
      //       saveDataButton.mousePressed(p.saveData);
      //       saveDataButton.position(100, 590);
      //       saveDataButton.size(100, 20);
​
      writer = p.createWriter("flowData.txt");
      m = p.minute();
      s = p.second();
      h = p.hour();
​
      data.push("start: " + h + ":" + m + ":" + s);
    };
​
    p.saveData = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("end: " + h + ":" + m + ":" + s);
      for (let i = 0; i < data.length; i++) {
        writer.print(data[i]);
      }
      writer.close();
      writer.clear();
    };
​
    p.mouseClicked = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
​
      // if (mouseX > 0 && mouseX < width && mouseY > height && mouseY < 530){
      //   data.push('magSlider: '+ h + ':' + m + ':' + s);
      // }
      // if (mouseX > 0 && mouseX < width && mouseY > 530 && mouseY < 560){
      //   data.push('timeSlider: ' + h + ':' + m + ':' + s);
      // }
      // if (mouseX > 0 && mouseX < width && mouseY > 560 && mouseY < 590){
      //   data.push('chaosSlider: ' + h + ':' + m + ':' + s);
      // }
    };
​
    p.resetCanvas = function () {
      p.background(255);
      for (var i = 0; i < 300; i++) {
        particles[i] = new Particle();
      }
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("reset: " + h + ":" + m + ":" + s);
    };
​
    p.saveFile = function () {
      p.save("design.jpg");
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("save: " + h + ":" + m + ":" + s);
    };
​
    p.draw = function () {
      
​
      // background(255);
      var yoff = 0;
      for (var y = 0; y < rows; y++) {
        //noprotect
        var xoff = 0;
        for (var x = 0; x < cols; x++) {
          var index = x + y * cols;
          var angle =
            p.noise(xoff, yoff, zoff) * p.TWO_PI * chaosSlider.value();
          var v = p5.Vector.fromAngle(angle);
          let mag = magSlider.value();
          v.setMag(mag);
          flowfield[index] = v;
          xoff += inc;
          p.stroke(0, 50);
          p.strokeWeight(0.5);
        }
        yoff += inc;
​
        let timeInc = timeSlider.value();
        zoff += timeInc;
      }
​
      for (var i = 0; i < particles.length; i++) {
        particles[i].follow(flowfield);
        particles[i].update(colorPicker1.color(), colorPicker2.color());
        particles[i].edges();
        particles[i].show();
      }
​
      // fr.html(p.floor(p.frameRate()));
      //noLoop();
    };
  };
​
  var ff_intro = function (p) {
    var canvas = new p5(flowfieldSketch_nosliders);
​
    p.setup = function () {
      p.createCanvas(500, 60);
      
      
      infoButton = p.createButton(
        "This is Flowfield, a toolkit to create your own art. It works like this: imagine that there is a constant and changing flow of wind blowing across the canvas. This wind is blowing around little drops of paint which leave a trail as they go, resulting in canvases like the one being painted on the left. Click next to proceed."
      );
      infoButton.position(510, 5);
      infoButton.size(300, 160);
      infoButton.style("border-radius", "10px");
      
      nextButton = p.createButton("Next");
      nextButton.mousePressed(p.nextInstruction);
      nextButton.position(710, 170);
      nextButton.size(100, 50);
      nextButton.style("border-radius", "10px");
      
            backButton = p.createButton("<- Flowstate");
      backButton.mousePressed(p.prevInstruction);
      backButton.position(510, 170);
      backButton.size(100, 50);
      backButton.style("border-radius", "10px");
​
      // s = p.second();
      // m = p.minute();
      // h = p.hour();
      // data.push("start flowfield: " + h + ":" + m + ":" + s);
​
      exitButton = p.createButton("Back to menu");
      exitButton.mousePressed(p.drawMenu);
      exitButton.position(510, 445);
      exitButton.size(80, 50);
      exitButton.style("border-radius", "10px");
    };
​
    p.drawMenu = function () {
      p.remove();
      canvas.remove();
      var landing2 = new p5(landingSketch);
    };
​
    p.nextInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("ff_mag: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var firstStep3 = new p5(ff_mag);
    };
    
    p.prevInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("CnO_MP: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var firstStep3 = new p5(CnO_MP);
    };
  }; //landing
  
  var ff_mag = function (p) {
    var canvas = new p5(flowfieldSketch_mag);
​
    p.setup = function () {
      p.createCanvas(500, 60);
      
      
      nextButton = p.createButton("Next");
      nextButton.mousePressed(p.nextInstruction);
      nextButton.position(710, 170);
      nextButton.size(100, 50);
      nextButton.style("border-radius", "10px");
      
      backButton = p.createButton("Previous");
      backButton.mousePressed(p.prevInstruction);
      backButton.position(510, 170);
      backButton.size(100, 50);
      backButton.style("border-radius", "10px");
      
      infoButton = p.createButton(
        "The first slider we'll play with controls the strength of the wind. Currently it is set very low and the result are these wispy flowing lines. Move this slider all the way to the right and these lines become a lot more defined and move with more intent. Have a play around and when you're satisfied, click next. You can clear the canvas at any time by clicking the button below."
      );
      infoButton.position(510, 5);
      infoButton.size(300, 160);
      infoButton.style("border-radius", "10px");
​
​
      exitButton = p.createButton("Back to menu");
      exitButton.mousePressed(p.drawMenu);
      exitButton.position(510, 445);
      exitButton.size(80, 50);
      exitButton.style("border-radius", "10px");
    };
​
    p.drawMenu = function () {
      p.remove();
      canvas.remove();
      var landing = new p5(landingSketch);
    };
​
    p.nextInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("ff_magtime: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var firstStep = new p5(ff_magtime);
    };
    
    p.prevInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("ff_intro: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var firstStep = new p5(ff_intro);
    };
    
    p.mouseReleased = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      // if (p.mouseX > 500 && p.mouseX < 550 && p.mouseY > -500 && p.mouseY < 0) {
      //   data.push(
      //     "calmSlider: " + h + ":" + m + ":" + s + " -> " + calmSlider.value()
      //   );
      //}
      s = p.second();
      m = p.minute();
      h = p.hour();
      if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 0 && p.mouseY < 20) {
        data.push(
          "magSlider: " + h + ":" + m + ":" + s + " -> " + magSlider.value()
        );
      }
    };
  };
  
  var ff_magtime = function (p) {
    var canvas = new p5(flowfieldSketch_magtime);
​
    p.setup = function () {
      p.createCanvas(500, 60);
      
      
      nextButton = p.createButton("Next");
      nextButton.mousePressed(p.nextInstruction);
      nextButton.position(710, 170);
      nextButton.size(100, 50);
      nextButton.style("border-radius", "10px");
      
      backButton = p.createButton("Previous");
      backButton.mousePressed(p.prevInstruction);
      backButton.position(510, 170);
      backButton.size(100, 50);
      backButton.style("border-radius", "10px");
      
      infoButton = p.createButton(
        "The second slider controls how the wind changes over time. It is currently at the far left, indicating that the wind is unchanging. As you can see this tends to create pretty still canvases once the paint has found its route through the flowfield. Move this slider all the way to the right and you can see how the canvas begins to change to reflect the changing wind. Play around and click next when you're ready."
      );
    //  infoButton = p.createButton(info);
      infoButton.position(510, 5);
      infoButton.size(300, 160);
      infoButton.style("border-radius", "10px");
​
      exitButton = p.createButton("Back to menu");
      exitButton.mousePressed(p.drawMenu);
      exitButton.position(510, 445);
      exitButton.size(80, 50);
      exitButton.style("border-radius", "10px");
    };
​
    p.drawMenu = function () {
      p.remove();
      canvas.remove();
      var landing = new p5(landingSketch);
    };
​
    p.nextInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("ff_magtimechaos: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var firstStep = new p5(ff_magtimechaos);
    };
    
    p.prevInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("ff_mag: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var firstStep = new p5(ff_mag);
    };
    
    p.mouseReleased = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      // if (p.mouseX > 500 && p.mouseX < 550 && p.mouseY > -500 && p.mouseY < 0) {
      //   data.push(
      //     "calmSlider: " + h + ":" + m + ":" + s + " -> " + calmSlider.value()
      //   );
      //}
      s = p.second();
      m = p.minute();
      h = p.hour();
      if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 0 && p.mouseY < 20) {
        data.push(
          "magSlider: " + h + ":" + m + ":" + s + " -> " + magSlider.value()
        );
      }
      if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 20 && p.mouseY < 40) {
        data.push(
          "timeSlider: " + h + ":" + m + ":" + s + " -> " + timeSlider.value()
        );
      }
    };
    
  };
  
  var ff_magtimechaos = function (p) {
    var canvas = new p5(flowfieldSketch_magtimechaos);
​
    p.setup = function () {
      p.createCanvas(500, 60);
      
      
      nextButton = p.createButton("Next");
      nextButton.mousePressed(p.nextInstruction);
      nextButton.position(710, 170);
      nextButton.size(100, 50);
      nextButton.style("border-radius", "10px");
      
      backButton = p.createButton("Previous");
      backButton.mousePressed(p.prevInstruction);
      backButton.position(510, 170);
      backButton.size(100, 50);
      backButton.style("border-radius", "10px");
      
      infoButton = p.createButton(
        "The third and final slider we'll have a look at controls what we'll call the entropy of the wind. The higher this slider is, the more chaotic the flowfield. Move this slider up in intervals to get a better idea of how that looks. When you are satisfied, click next."
      );
      infoButton.position(510, 5);
      infoButton.size(300, 160);
      infoButton.style("border-radius", "10px");
​
      exitButton = p.createButton("Back to menu");
      exitButton.mousePressed(p.drawMenu);
      exitButton.position(510, 445);
      exitButton.size(80, 50);
      exitButton.style("border-radius", "10px");
    };
​
    p.drawMenu = function () {
      p.remove();
      canvas.remove();
      var landing = new p5(landingSketch);
    };
​
    p.nextInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("ff_sandbox: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var firstStep = new p5(ff_sandbox);
    };
    
    p.prevInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("ff_magtime: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var firstStep = new p5(ff_magtime);
    };
    
    p.mouseReleased = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      // if (p.mouseX > 500 && p.mouseX < 550 && p.mouseY > -500 && p.mouseY < 0) {
      //   data.push(
      //     "calmSlider: " + h + ":" + m + ":" + s + " -> " + calmSlider.value()
      //   );
      //}
      s = p.second();
      m = p.minute();
      h = p.hour();
      if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 0 && p.mouseY < 20) {
        data.push(
          "magSlider: " + h + ":" + m + ":" + s + " -> " + magSlider.value()
        );
      }
      if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 20 && p.mouseY < 40) {
        data.push(
          "timeSlider: " + h + ":" + m + ":" + s + " -> " + timeSlider.value()
        );
      }
      if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 40 && p.mouseY < 60) {
        data.push(
          "chaosSlider: " + h + ":" + m + ":" + s + " -> " + chaosSlider.value()
        );
      }
    };
  };
  
  var ff_sandbox = function (p) {
    var canvas = new p5(flowfieldSketch);
​
    p.setup = function () {
      
      p.createCanvas(500, 60);
​
      //       nextButton = p.createButton("Next");
      // nextButton.mousePressed(p.nextInstruction);
      // nextButton.position(710, 170);
      // nextButton.size(100, 50);
      // nextButton.style("border-radius", "10px");
      
      backButton = p.createButton("Previous");
      backButton.mousePressed(p.prevInstruction);
      backButton.position(510, 170);
      backButton.size(100, 50);
      backButton.style("border-radius", "10px");
      
//       saveButton = p.createButton("Save Data");
//       saveButton.mousePressed(p.saveData);
//       saveButton.position(510, 280);
//       saveButton.size(80, 50);
//       saveButton.style("border-radius: 10px");
//       saveButton.style("background-color: pink")
      
//       reminderbtn = p.createButton("VERY IMPORTANT! When you have finished playing around with tool, click the pink Save Data button which will download a plain text file and continue to the questionnaire linked below where you will be asked to upload it.")
      // reminderbtn.position(600, 280);
      // reminderbtn.size(170, 170);
      // reminderbtn.style("border-radius: 10px");
      
      // let a = p.createA('https://forms.gle/3etX4Bbxp4rcSWuDA', 'Ctrl/Cmd + click here for Questionnaire');
      // a.position(615, 465);
      
      
      infoButton = p.createButton(
        "Now you know what everything does, it's time for a challenge. Pick a feeling you've experienced today and do you best to represent this feeling on the canvas using the sliders. You can change the colours using the two colour pickers in the corners and you can clear the canvas at any point to start again. You can also download a jpeg of your art at any time by clicking the Save Canvas button. Have fun!"
      );
      infoButton.position(510, 5);
      infoButton.size(300, 160);
      infoButton.style("border-radius", "10px");
​
      exitButton = p.createButton("Back to menu");
      exitButton.mousePressed(p.drawMenu);
      exitButton.position(510, 445);
      exitButton.size(80, 50);
      exitButton.style("border-radius", "10px");
    };
​
    p.drawMenu = function () {
      p.remove();
      canvas.remove();
      var landing = new p5(landingSketch);
    };
​
    // p.nextInstruction = function () {
    //   s = p.second();
    //   m = p.minute();
    //   h = p.hour();
    //   data.push("CnO1: " + h + ":" + m + ":" + s + " ------------");
    //   p.remove();
    //   canvas.remove();
    //   var firstStep = new p5(CnO1);
    // };
    
    p.prevInstruction = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("ff_magtimechaos: " + h + ":" + m + ":" + s + " ------------");
      p.remove();
      canvas.remove();
      var firstStep = new p5(ff_magtimechaos);
    };
    
        p.saveData = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      data.push("end: " + h + ":" + m + ":" + s);
      for (let i = 0; i < data.length; i++) {
        writer.print(data[i]);
      }
      writer.close();
      writer.clear();
    };
    
    p.mouseReleased = function () {
      s = p.second();
      m = p.minute();
      h = p.hour();
      // if (p.mouseX > 500 && p.mouseX < 550 && p.mouseY > -500 && p.mouseY < 0) {
      //   data.push(
      //     "calmSlider: " + h + ":" + m + ":" + s + " -> " + calmSlider.value()
      //   );
      //}
      s = p.second();
      m = p.minute();
      h = p.hour();
      if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 0 && p.mouseY < 20) {
        data.push(
          "magSlider: " + h + ":" + m + ":" + s + " -> " + magSlider.value()
        );
      }
      if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 20 && p.mouseY < 40) {
        data.push(
          "timeSlider: " + h + ":" + m + ":" + s + " -> " + timeSlider.value()
        );
      }
      if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 40 && p.mouseY < 60) {
        data.push(
          "chaosSlider: " + h + ":" + m + ":" + s + " -> " + chaosSlider.value()
        );
      }
    };
  };
  
  var ff_full = function (p) {
    
    var canvas = new p5(flowfieldSketch);
    
    p.setup = function () {
      
          exitButton = p.createButton("Back to menu");
      exitButton.mousePressed(p.drawMenu);
      exitButton.position(510, 445);
      exitButton.size(80, 50);
      exitButton.style("border-radius", "10px");
      
    };
    
    p.drawMenu = function () {
      p.remove();
      canvas.remove();
      var landing = new p5(landingSketch);
    };
​
  };
​
  var landing = new p5(landingSketch);
}
​
Cookies

Sketch Files

Console

Preview
