How to use p5 - 10 common examples

p.translate(0, height-50);
        // stroke(random(100,200),random(100,200),0)

        for(let i = 0; i < systems.length; i++){
            const options = systems[i];
            options.p = p;
            console.log(options)
            const l = new LSystem(options);
            p.translate(distanceX, 0)
            l.run(iterations[i]);
        }
    }
}

// set global functions for p5
const p5Instance = new p5(sketch)

function separate(boids, boid) {
  const [count, direction] = boids.reduce(
    ([count, direction], otherBoid) => {
      const d = boid.position.dist(otherBoid.position);
      if (d > 0 && d < CONFIG.desiredSeparation) {
        // Calculate vector pointing away from neighbour
        const diff = Vector.sub(boid.position, otherBoid.position)
          .normalize()
          .div(d); // Weight by distance
        return [count + 1, direction.add(diff)];
      }
      return [count, direction];
    },
    [0, new Vector(0, 0)],
  );

  return count > 0
    ? direction
        .div(count) // average
        .normalize()
        .mult(boid.maxSpeed)
        .sub(boid.velocity)
        .limit(boid.maxForce)
    : direction;
}

function seek(target, boid) {
  // A vector pointing from the boid location to the target
  const desired = Vector.sub(target, boid.position);
  // Normalize and scale to maximum speed
  desired.normalize();
  desired.mult(boid.maxSpeed);
  // Steer = Desired - Velocity
  const steer = Vector.sub(desired, boid.velocity);
  // Limit to maximum steering force
  steer.limit(boid.maxForce);
  return steer;
}

function seek(target, boid) {
  // A vector pointing from the boid location to the target
  const desired = Vector.sub(target, boid.position);
  // Normalize and scale to maximum speed
  desired.normalize();
  desired.mult(boid.maxSpeed);
  // Steer = Desired - Velocity
  const steer = Vector.sub(desired, boid.velocity);
  // Limit to maximum steering force
  steer.limit(boid.maxForce);
  return steer;
}

This is a port of Daniel Shiffman Nature of Code: Intelligence and Learning
Original Repo: https://github.com/shiffman/NOC-S17-2-Intelligence-Learning

Cristóbal Valenzuela
https://github.com/cvalenzuela/p5deeplearn
===
*/

import p5 from 'p5';
import 'p5/lib/addons/p5.dom';
import { lstm } from './lstm';

let textInput, tempSlider, lengthSlider, maxlen = 40,
  waiting = false;

let sketch = new p5((p) => {

  p.setup = () => {
    p.noCanvas();

    // Grab the DOM elements
    textInput = p.select('#textInput');
    lengthSlider = p.select('#lenSlider');
    tempSlider = p.select('#tempSlider');

    // Run generate anytime something changes
    textInput.input(generate);
    lengthSlider.input(generate);
    tempSlider.input(generate);
  };

  let generate = () => {

getCanvas = () =>
      new p5(p => {
        this.instance = p

        this.renderer(p)

        // Do some extra stuff here with processing
        this.props.extras && this.props.extras(p)
      }, this.wrapper)

(_this.getCanvas = function() {
          return new p5(function(p) {
            _this.instance = p

            _this.renderer(p)

            // Do some extra stuff here with processing
            _this.props.extras && _this.props.extras(p)
          }, _this.wrapper)
        }),
        _temp)),

([count, direction], otherBoid) => {
      const d = boid.position.dist(otherBoid.position);
      if (d > 0 && d < CONFIG.desiredSeparation) {
        // Calculate vector pointing away from neighbour
        const diff = Vector.sub(boid.position, otherBoid.position)
          .normalize()
          .div(d); // Weight by distance
        return [count + 1, direction.add(diff)];
      }
      return [count, direction];
    },
    [0, new Vector(0, 0)],

p.setup = function() {
        // Canvas setup
        p.background(7, 11, 21);
        canvas = p.createCanvas(width, height);
        fft = new p5.FFT(0.9, 256); // for the waves
        amplitude = new p5.Amplitude(); // for the ellipses
        p.noFill();
        p.stroke(0, 100);
        initAudioStream();
    };

p.setup = () => {
      this.canvas = p.createCanvas(window.innerWidth, window.innerHeight);

      if (this.state.mode === "mic") {
        this.mic = new p5.AudioIn();
        this.mic.start();
        this.fft = new p5.FFT();
        this.fft.setInput(this.mic);
      } else {
        // using a song file
        this.song.setVolume(1.0);
        this.song.playMode("restart");
        this.song.play();
        this.fft = new p5.FFT();
        this.fft.setInput(this.song);
      }
    };