//                                            //

//   Co-Lab Mural for Space 21. Version 1.2   //

//                                            //

////////////////////////////////////////////////

​

// --- Instructions --- //

​

/*

​

- Change the "seed" to explore new designs

​

- Go to file->share->fullscreen and click the icon. The changes made in this tab will be reflected on fullscreen tab once the sketch is saved

​

- Play with the strand field parameters to change the strand design

​

- Play with the noiseStrength to make it more or less curved

​

- To have a bigger image, change the canvas size(canvasWidth,canvasHeight) from 100(x,y) to 2000(x,y). Bare in mind that a larger canvas could take more time to render. Up to   3-4 minutes, so dont close the tab if it says taht is crashing.

​

- To save the image press the "s" key on the keayboard. This will output a PNG file, with the seed for the chosen design. Remember to save the other values somewhere else.'

​

- A P5JS account is required to saved the changes, but it it not required to run and change the parameters. It it not adviced to modify the functions or classes. Hoever, any of the const paramters can be modified.

​

- Have fun!

​

*/

​

// --- StrandMaster --- //

​

// Set Parameters

const colours = [

  "#0D2935",

  "#30659A",

  "#BADAFF",

  "#7EBAAE",

  "#ED7345",

  "#0D2935",

  "#30659A",

  "#BADAFF",

  "#0D2935",

  "#30659A",

  "#BADAFF",

  "#7EBAAE",

];

const backgroundColour = 255;

​

// Canvas Parameters

let image = null;

const canvasWidth = 700;

const canvasHeight = 550;

const margin = 20;

​

// Strand Field Parameters

let strands = [];

const maxNumber = 5000; // Use integers ONLY

const minStrandWidth = 2;

const maxStrandWidth = 30;

const minStrandLength = 20;

const maxStrandLength = 500;

const separation = 2; // Use ZERO before the decimal point

​

// Noise Parameters

const noiseScale = 1000;

const noiseStrength = 200;

const noiseZoff = 0.05; // Dont Touch

const seed = 777;

​

function setup() {

  // Toggle comment of lines below to export png or svg. ONLY enable 1

  image = createCanvas(canvasWidth, canvasHeight);

  // createCanvas(canvasWidth, canvasHeight, SVG);

  background(backgroundColour);

  noStroke();

  noiseSeed(seed);

  randomSeed(seed);

}

​

function draw() {

  let completed = true;

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

    if (createStrand()) {

      completed = false;

    }

  }

  // If there is no more space, stop the program

  if (completed) {

    console.log("DONE");

    noLoop();

  }

}

​

// Create strand element

function createStrand() {

  // Set origin

  let s = new Strand(

    random(margin, canvasWidth - margin),

    random(margin, canvasHeight - margin)

  );

  // Keep creating objects as long as the dont collide

  while (s.update());

  if (

    s.segments.length > minStrandLength &&

    s.segments.length <= maxStrandLength

  ) {

    strands.push(s);

    s.show();

    return true;

  }

  return false;

}

​

class Strand {

  constructor(initX, initY) {

    this.x = initX;

    this.y = initY;

    this.colour = random(colours);

    this.segments = [createVector(initX, initY)];

    this.thickness = random(minStrandWidth, maxStrandWidth);

  }

​

  update() {

    // Created the noise field

    let angle =

      noise(this.x / noiseScale, this.y / noiseScale, noiseZoff) *

      noiseStrength *

      TAU;

    let rad = 1;

    this.x += rad * cos(angle);

    this.y += rad * sin(angle);

    // Check that the strand init position is within the boundaries

    if (

      this.x < margin ||

      this.x > canvasWidth - margin ||

      this.y < margin ||

      this.y > canvasHeight - margin

    ) {

      return false;

    }

    // Create the direction vector from the noise field position

    let direction = createVector(this.x, this.y);

    // Check each strand against every other strand, only if there is space available

    for (let s of strands) {

      for (let seg of s.segments) {

        if (direction.dist(seg) < separation * 2 + this.thickness) return false;

      }

    }

    this.segments.push(direction);

    return true;

  }

​

  show() {

    let len = this.segments.length;

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

      fill(this.colour);

      let position = this.segments[i];

      // Create a circle for each segment of the strand

      circle(

        position.x,

        position.y,

        sin(map(i, 0, len, 0, PI)) * this.thickness

      );

    }

  }

}

​

function keyTyped() {

  switch (key) {

    // Save Image (S KEY)

    case "s":

      // Toggle comment of lines below to export png or svg. ONLY enable 1

      saveCanvas(image, "Co-Lab_Strands_V1.2_" + seed, "png");

      // save("co-lab-strands-" + seed, "svg");

​

      let params = [

        "maxNumber: " + maxNumber,

        "minStrandWidth: " + minStrandWidth,

        "maxStrandWidth: " + maxStrandWidth,

        "minStrandLength: " + minStrandLength,

        "maxStrandLength: " + maxStrandLength,

        "separation: " + separation,

        "noiseScale:" + noiseScale,

        "noiseStrength:" + noiseStrength,

        "noiseZoff:" + noiseZoff,

        "seed:" + seed,

      ];

      save(params, "Co-Lab_Strands_V1.2_"+seed+"_PARAMS");

      break;

  }

}

​