DDeco18

need to have p5.svg.js in project and in index.html

see -https://github.com/zenozeng/p5.js-svg

this will save an SVG file in your download folder

*/

​

//Code is copied from:

//https://github.com/yyyuan/arduino-p5-tutorial-complete/commit/d4c4542d0d24f01cec2cd50c56d5bdb54071c251#

​

// Project exploring interactions | Britt van der Rijt | 5600065

//2022-2023

​

/*sketch is altered so that the user has to calm down the visualization through fidgeting --> fidgeting to control the environment. The sketch is more chaotic when no fidgeting is performed, and becomes more regular and slower when fidgeting is done. i.e., Higher input values from the armrest make the visualization more organized and slow --> more in balance*/

​

let serial;

let options = { baudrate: 9600 };

let portName = "COM3";

let inData;

​

var wid = 1920; //1980;

var hei = 750; //920;

​

var NB_FRAMES;

​

var frame_count = 0;

// var ratiolar ratio_map;

​

function activation(t) {

  return ((1 - cos(10 * PI * t)) / 2) ** 2;

}

​

function serverConnected() {

  console.log("connected to server.");

}

​

function portOpen() {

  console.log("the serial port opened.");

}

​

function serialEvent() {

  inData = Number(serial.read());

  // console.log(inData);

}

​

function serialError(err) {

  console.log("Something went wrong with the serial port. " + err);

}

​

function portClose() {

  console.log("The serial port closed.");

}

​

function setup() {

  createCanvas(wid, hei); //,SVG);

​

  stroke(255, 97); //color lines

  strokeWeight(3); //thickness lines

  fill(0, 100, 150, 6); //fill inbetween lines with opacity

​

//     serial = new p5.SerialPort();

//     serial.on("list", printList);

//     serial.on("connected", serverConnected);

//     serial.on("open", portOpen);

//     serial.on("data", serialEvent);

//     serial.on("error", serialError);

//     serial.on("close", portClose);

​

//     serial.list();

//     serial.open(portName, options);

​

  randomSeed(100);

​

  for (var i = 0; i < NB; i++) {

    Objects[i] = new object(i);

  }

  // better not to have a fill for laser

}

​

function printList(portList) {

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

    console.log(i + portList[i]);

  }

}

​

function object(id) {

  this.id = id;

​

  this.draw = function () {

    NB_FRAMES = 130; //* (1 + mouseX * 0.1); to control speed of waves

   // console.log(mouseX);

​

    var t = ((frame_count * 0.5) % NB_FRAMES) / NB_FRAMES; //speed

​

    var x0 = lerp(0, wid, this.id / NB);

​

    theta = PI / 2;

​

    var xx = x0;

    var yy = 0;

​

    var Nt = 20; //space between lines

​

    var step = hei / Nt;

    var turn = lerp(0, 0.4, activation((this.id / NB + 0 * 2 * t) % 1));

​

    beginShape();

​

    vertex(xx, yy);

​

    for (var i = 0; i <= Nt; i++) {

      theta +=

        turn *

        sin(

          1000 * noise(1000) +

            2 *

              PI *

              (15 * noise(((0.1 / (mouseX * 0.05)) * this.id) / NB, 0.02 * i) +t)); // edited to make sketch less noisy when inData increases; can be manually altered by mouseX

      xx += step * sin(theta);

      yy += step * cos(theta);

​

      var xx2 = lerp(xx, x0, (i / Nt) * (i / Nt) * (i / Nt)); //manipulated

      var yy2 = lerp(

        yy,

        lerp(0, hei - 0, i / Nt),

        max(i / Nt, 1 - sqrt(i / Nt))

      );

​

      vertex(xx2 - 100, yy2);

    }

    endShape();

  };

}

​

var Objects = [];

var NB = 600;

​

function draw() {

  background(0, 150, 100);

  noiseSeed(10); //curSeed); //random  movement

​

  var t = (frame_count % NB_FRAMES) / NB_FRAMES;

​

  for (var i = 0; i < NB; i++) Objects[i].draw();

​

  frame_count++;

  if (frame_count <= 100 && frame_count > 80) {

  }

​

  //////////////////////////////////////EXPORT

  if (keyCode === LEFT_ARROW) {

    save("mySVG.svg");

    print("saved svg");

    noLoop();

  }

}

​