Words in the wind

// Whisper something nice (One word at a time) and watch the wind carry it away

​

let input, button;

​

let flow;

let agents = [];

let agent_pop = 800;

var state = 2;

​

let grotesk;

let fontSize = 150;

let textArr = [];

​

let speechRec;

​

p5.disableFriendlyErrors = true;

​

function preload() {

  grotesk = loadFont('grotesk.otf');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  speechRec = new p5.SpeechRec('en-US');

  speechRec.continuous = true;

  // If you want to try partial recognition (faster, less accurate)

  speechRec.interimResults = false;

  speechRec.onResult = gotSpeech;

  speechRec.onError = error

  // This must come after setting the properties

  speechRec.start();

​

  textArr = grotesk.textToPoints("Words in the wind", 50, height / 2, fontSize, {

    sampleFactor: 0.5

  });

  flow = new Flowfield(15);

​

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

    var a = new Agent(textArr[i].x, textArr[i].y);

    agents.push(a);

  }

​

  background(150, 30, 240, 15);

  //flow.display();

}

​

function error() {

  console.log("error");

}

​

function gotSpeech() {

  //console.log("heard");

  //console.log(speechRec.resultString)

  if (agents.length == 0) {

    const msg = speechRec.resultString.split(" ")[0];

    let cWidth = textWidth(msg);

    //console.log(cWidth)

    textArr = grotesk.textToPoints(msg, (width - cWidth) / 4, height / 2, fontSize, {

      sampleFactor: 0.5

    });

​

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

      var a = new Agent(textArr[i].x, textArr[i].y);

      agents.push(a);

    }

  }

}

​

function draw() {

  background(250, 250, 255, 25);

  //flow.update();

  //flow.display();

​

  for (var agent of agents) {

    agent.update();

    agent.seek();

    agent.display();

  }

​

}

​

class Agent {

  constructor(x = random(width), y = random(height)) {

    this.position = createVector(x, y);

    this.velocity = createVector(0, 0);

    this.acceleration = createVector(0, 0);

​

    this.r = 255

    this.g = 255;

    this.b = 255;

    this.randomizeColor();

​

    this.life = random(155);

    this.pause = 45;

​

    this.maxForce = 0.1;

    this.maxSpeed = 1;

  }

​

  randomizeColor(r = 255, g = 255, b = 255) {

    this.r = random(r);

    this.g = random(g);

    this.b = random(b);

  }

​

  display() {

    push();

    this.r = constrain(random(this.r - 5, this.r + 5), 0, 255);

    this.g = constrain(random(this.g - 5, this.g + 5), 0, 255);

    this.b = constrain(random(this.b - 5, this.b + 5), 0, 255);

    noStroke();

    fill(this.r, this.g, this.b, this.life);

    this.life--;

    if (this.life < 0) {

      agents.splice(agents.indexOf(this), 1);

    }

​

    strokeWeight(1);

    translate(this.position.x, this.position.y);

    rotate(random(0, TWO_PI));

    triangle(4, 0, -4, 0, 0, 4);

    pop();

    if (this.position.x < 0 || this.position.x > width || this.position.y < 0 || this.position.y > height) {

      agents.splice(agents.indexOf(this), 1);

    }

  }

​

  applyForce(force) {

    this.acceleration.add(force);

  }

​

  seek() {

    var desired = flow.lookup(this.position);

    desired.normalize();

    desired.mult(this.maxSpeed);

    var steer = p5.Vector.sub(desired, this.velocity);

    steer.limit(this.maxForce);

    this.applyForce(steer);

  }

​

  update() {

    if (this.pause == 0) {

      this.velocity.add(this.acceleration);

      this.velocity.limit(this.maxspeed);

      this.position.add(this.velocity);

      this.acceleration.set(0, 0);

    } else this.pause--;

  }

​

}

​

class Flowfield {

  constructor(resolution = 10) {

    this.resolution = resolution;

    this.rows = height / this.resolution;

    this.cols = width / this.resolution;

    this.field = [];

    this.zoff = 0;

    this.update();

  }

​

  update() {

    var xoff = 0;

    for (var i = 0; i < this.cols; i++) {

      this.field[i] = [];

      var yoff = 0;

      for (var j = 0; j < this.rows; j++) {

        var theta = map(noise(xoff, yoff, this.zoff), 0, 1, 0, TWO_PI);

        this.field[i][j] = createVector(cos(theta), sin(theta));

        yoff += 0.05;

      }

      xoff += 0.05;

    }

    this.zoff += 0.9;

  }

​

  lookup(v) {

    var v1 = v.copy();

    var col = Math.floor(constrain(v1.x / this.resolution, 0, this.cols - 1));

    var row = Math.floor(constrain(v1.y / this.resolution, 0, this.rows - 1));

    return this.field[col][row].copy();

  }

​

  display() {

    for (var i = 0; i < this.cols; i++) {

      for (var j = 0; j < this.rows; j++) {

        push();

        var x = i * this.resolution + this.resolution / 2;

        var y = j * this.resolution + this.resolution / 2;

        translate(x, y);

        rotate(this.field[i][j].heading());

        stroke(0);

        line(-10, 0, 10, 0);

        line(10, 0, 7, 3);

        line(10, 0, 7, -3);

        pop();

      }

    }

  }

​

}