var inc = 0.1;

  var scl = 10;

  var cols, rows;

​

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

    // p.background(0, 0, 100);

​

    backButton = p.createButton("Exit");

    backButton.mousePressed(p.drawMenu);

    backButton.position(400, 600);

    backButton.size(100, 50);

    backButton.style("border-radius", "10px");

​

    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.position(p.width + 5, 0);

​

    colorPicker2 = p.createColorPicker("#E200FF");

    colorPicker2.position(p.width + 5, p.height - 28);

​

    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.3, 0.1);

    magSlider.position(0, 500); // x and y

    magSlider.size(500, 20); // width and height

​

    //labelButton = createButton('< Mag : Time >')

​

    timeSlider = p.createSlider(0, 0.0002, 0, 0);

    timeSlider.position(0, 530); // x and y

    timeSlider.size(500, 20); // width and height

​

    chaosSlider = p.createSlider(0.1, 5, 4, 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.drawMenu = function () {

    p.remove();

    var landing = new p5(sketch0);

  };

​

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

      p.writer.print(data[i]);

    }

    p.writer.close();

    p.writer.clear();

  };

​

  p.mouseClicked = function () {

    s = p.second();

    m = p.minute();

    h = p.hour();

​

    if (

      p.mouseX > 0 &&

      p.mouseX < p.width &&

      p.mouseY > p.height &&

      p.mouseY < 530

    ) {

      data.push("magSlider: " + h + ":" + m + ":" + s);

    }

    if (

      p.mouseX > 0 &&

      p.mouseX < p.width &&

      p.mouseY > 530 &&

      p.mouseY < 560

    ) {

      data.push("timeSlider: " + h + ":" + m + ":" + s);

    }

    if (

      p.mouseX > 0 &&

      p.mouseX < p.width &&

      p.mouseY > 560 &&

      p.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(p);

    }

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

    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;

      //print('Time be flowing');

    }

​

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

      p.fill(i);

      p.rect(15 + i, 15+i, 20+i/2, 20+i/2);

      particles[i].follow(flowfield);

      particles[i].update(colorPicker1.color(), colorPicker2.color());

      particles[i].edges();

      particles[i].show();

    }

  };

};

​

var chaosOrderSketch = function (p) {

  let slimes = [];

  var trailMap = [];

  var fr;

  let numOfSlimes = 45;

  let writer;

  let s;

  let m;

  let h;

  let data = [];

  let instr;

​

  let instructions = [];

​

  p.setup = function () {

​

    let intro_text =

      "Welcome to the first toolkit. This toolkits aims to experiment with what emotions we can inspire from playing around with different parameters. Click this button to continue and when you are ready for further intructions, click the Next button below.";

​

    instr = 0;

    instructions[0] = "empty intruction";

​

    instructions[1] =

      "Above is the canvas. As you can see there are various colour changing particles travelling around somewhat randomly. However, you will find that if you click and hold anywhere on the canvas, the particles will move with very definite direction; directly towards your mouse. Feel free to play around with this and when you are ready click the Next button.";

​

    instructions[2] =

      "Now that you are used to controlling the particles with youre mouse, we are going to start with a breathing exercise. When you click and hold with the mouse, breathe in and hold your breath until all the particles converge, and then release your mouse and breath out and hold and repeat. Repeat this process for a few minutes. When you are ready to move on click Next.";

​

    instructions[3] =

      "Now its time to experiment with the sliders below the canvas. Move them back and forth and try to figure out what they respectively do.";

    instructions[4] = "instruction4";

    instructions[5] = "instruction5";

​

    introButton = p.createButton(intro_text);

    introButton.mousePressed(function () {

      introButton.remove();

    });

    introButton.position(50, 50);

    introButton.size(400, 400);

    introButton.style("border-radius", "10px");

​

    nextButton = p.createButton("Next");

    nextButton.mousePressed(p.nextInstruction);

    nextButton.position(300, 570);

    nextButton.size(100, 50);

    nextButton.style("border-radius", "10px");

​

    backButton = p.createButton("Previous");

    backButton.mousePressed(p.prevInstruction);

    backButton.position(200, 570);

    backButton.size(100, 50);

    backButton.style("border-radius", "10px");

​

    // if (instr > 0){

    // instrText = p.createButton(instructions[instr]);

    // instrText.position(50, 640);

    // instrText.size(400, 50);

    // }

​

    //     p.nextInstruction = function(){

    //       instr++;

    //     }

​

    //     p.prevInstruction = function(){

    //       instr--;

    //     }

​

    exitButton = p.createButton("Exit");

    exitButton.mousePressed(p.drawMenu);

    exitButton.position(400, 570);

    exitButton.size(100, 50);

    exitButton.style("border-radius", "10px");

​

    // p.fill(200, 50, 50);

    // p.rect(0, 0, 500, 500, 25, 25, 25, 25);

​

    p.createCanvas(500, 500);

    //background(0, 0, 10);

​

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

      slimes.push(new Slime(p, p.random(p.width), p.random(p.height), 13, 35));

    }

    p.colorMode(p.HSB);

​

    massSlider = p.createSlider(5, 30, 13, 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, 530); // x and y

    perceptionSlider.size(500, 20); // width and height

​

    saveButton = p.createButton("save");

    saveButton.mousePressed(p.saveFile);

    saveButton.position(0, 560);

    saveButton.size(50, 20);

​

    resetButton = p.createButton("reset");

    resetButton.mousePressed(p.resetFile);

    resetButton.position(50, 560);

    resetButton.size(50, 20);

​

    saveDataButton = p.createButton("save data");

    saveDataButton.mousePressed(p.saveData);

    saveDataButton.position(100, 560);

    saveDataButton.size(80, 20);

​

    p.writer = p.createWriter("chaosData.txt");

    m = p.minute();

    s = p.second();

    h = p.hour();

​

    data.push("start: " + h + ":" + m + ":" + s);

​

    fr = p.createP("");

  };

  // p.drawOnce = function () {

  //   once = !once;

  // };

​

  p.nextInstruction = function () {

    if (instr < instructions.length - 1) {

      instr++;

      // p.drawOnce();

    }

  };

​

  p.prevInstruction = function () {

    if (instr > 1) {

      instr--;

    }

    // instr--;

  };

​

  p.drawMenu = function () {

    p.remove();

    var landing = new p5(sketch0);

  };

​

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

      p.writer.print(data[i]);

    }

    p.writer.close();

    p.writer.clear();

  };

​

  p.saveFile = function () {

    p.save("chaos.jpg");

    s = p.second();

    m = p.minute();

    h = p.hour();

    data.push("save: " + h + ":" + m + ":" + s);

  };

​

  p.resetFile = function () {

    slimes.splice(0, numOfSlimes);

    p.background(0, 0, 0);

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

      slimes.push(

        new Slime(

          p,

          p.random(p.width),

          p.random(p.height),

          massSlider.value(),

          perceptionSlider.value()

        )

      );

    }

    s = p.second();

    m = p.minute();

    h = p.hour();

    data.push("reset: " + h + ":" + m + ":" + s);

  };

​

  // function updateMass(slime, value){

  //   slime.mass = value;

  // }

​

  p.mouseReleased = function () {

    s = p.second();

    m = p.minute();

    h = p.hour();

    if (

      p.mouseX > 0 &&

      p.mouseX < p.width &&

      p.mouseY > 0 &&

      p.mouseY < p.height

    ) {

      data.push(h + ":" + m + ":" + s);

    }

    if (

      p.mouseX > 0 &&

      p.mouseX < p.width &&

      p.mouseY > p.height &&

      p.mouseY < 530

    ) {

      data.push("massSlider: " + h + ":" + m + ":" + s);

    }

    if (

      p.mouseX > 0 &&

      p.mouseX < p.width &&

      p.mouseY > 530 &&

      p.mouseY < 560

    ) {

      data.push("perceptionSlider: " + h + ":" + m + ":" + s);

    }

  };

​

​

  p.draw = function () {

​

    // p.background(0, 0,0,0.03);

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

    }

    if (instr > 0) {

      p.fill(0);

      //let bbox = p.textBounds(instructions[instr], 50, 400);

      //p.rect(bbox.x, bbox.y, bbox.w, bbox.h);

      p.rect(45, 395, 410, 90);

      p.fill(100);

      p.textAlign(p.CENTER);

      p.text(instructions[instr], 50, 400, 400, 80);

    }

  };

};

​

​

​

var sketch0 = 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");

​

    p.createCanvas(500, 500);

​

    p.fill(200, 50, 50);

​

    p.fill(50, 50, 200);

​

    leftButton = p.createButton("Chaos and Order");

    leftButton.mousePressed(p.drawChaosOrder);

    leftButton.position(75, 200);

    leftButton.size(100, 100);

    leftButton.style("border-radius", "10px");

​

    rightButton = p.createButton("Flowfield");

    rightButton.mousePressed(p.drawFlowField);

    rightButton.position(325, 200);

    rightButton.size(100, 100);

    rightButton.style("border-radius", "10px");

  };

​

  p.drawCircle = function () {

    p.ellipse(50, 50, 50, 50);

  };

​

  p.drawFlowField = function () {

    p.remove();

    var flowField = new p5(flowFieldSketch);

  };

​

  p.drawChaosOrder = function () {

    p.remove();

    var chaosOrder = new p5(chaosOrderSketch);

  };

​

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

  };

};

​

var landing = new p5(sketch0);

​

 //var landing = new p5(flowFieldSketch);

​