flowFieldConCirculitos.js

gistfile1.txt

const scl = 20;
let cols, rows;
const inc = 0.1;
let fr;
let zoff = 0;
let particles = [];
let flowfield;

let maxspeed = 5;
let forcePower = 2;

let mainColor;
let backgroundColor;
let palette = ['black'];
let interval = 10;

function randomItem(items) {
    const item = items[Math.floor(Math.random() * items.length)];
    return item;
}

function drawRandomCircle() {
  if (frameCount % interval == 0) {
    const position = createVector(random(width), random(height));
    const size = random(width/4);
    // fill(0,0,0,50)
    fill(randomItem(palette));
    stroke(0,0);
    ellipse(position.x, position.y, size)
    console.log("RANDOM CIRCLE")
  } 
} 


function Particle() {
    this.pos = createVector(random(width), random(height));
    this.previousPos = this.pos.copy();
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.maxspeed = maxspeed;
    
    this.color = randomItem(palette);

    this.show = function () {
        stroke(this.color);
        fill(this.color);
        // strokeWeight(1);
        // ellipse(this.pos.x, this.pos.y, 2);
        line(this.previousPos.x, this.previousPos.y, this.pos.x, this.pos.y)
    };

    this.update = function () {
        this.vel.add(this.acc);
        this.vel.limit(this.maxspeed);
        this.previousPos = this.pos.copy()
        this.pos.add(this.vel);
        this.acc.mult(0);
        this.edges();
    };

    this.applyForce = function (force) {
        this.acc.add(force);
    };

    this.follow = function (vectors) {
        const x = floor(this.pos.x / scl);
        const y = floor(this.pos.y / scl);
        const index = x + y * cols;
        const force = vectors[index];
        this.applyForce(force);
    };



    this.edges = function () {
        if (this.pos.x > width) {
          this.pos.x = 0;
          this.previousPos.x = 0;
        };
        if (this.pos.x < 0) {
          this.pos.x = width;
          this.previousPos.x = width;
        }
        if (this.pos.y > height) {
          this.pos.y = 0;
          this.previousPos.y = 0;
        };
        if (this.pos.y < 0) {
          this.pos.y = height;
          this.previousPos.y = height;
        }
    };
}

function setup() {
  
  
  // backgroundColor = color(180, 240, 200, 255);
  backgroundColor = color(0, 0, 0, 255);
  palette = [
        color(119,228,212, 30),
        color(153,140,235, 30),
        color(255, 0, 117,70),
        color(backgroundColor,100)
    ];
  
  
    frameRate(60);
    createCanvas(800, 800);
    mainColor = color(220, 50, 50, 20);
    
    cols = floor(width / scl);
    rows = floor(height / scl);
    fr = createP('');
    background(backgroundColor);

    // colorMode(HSB, 100);

    flowfield = new Array(cols * rows);

    for (var i = 0; i < 1000; i++) {
        particles[i] = new Particle();
    }
}

function draw() {
  
  
    // translate(-width*0.1, height*0.1);
    // background(240, 240, 240,120);
    // translate(-width / 2, -height / 2);
    var yoff = 0;
    for (var y = 0; y < rows; y++) {
        var xoff = 0;
        for (var x = 0; x < cols; x++) {
            const index = x + y * cols;
            const angle = noise(xoff, yoff, zoff) * TWO_PI;
            const v = p5.Vector.fromAngle(angle);
            v.setMag(forcePower);
            flowfield[index] = v;
            xoff += inc;
            stroke(0, 50);
            strokeWeight(1);
            push();
            translate(x * scl, y * scl);
            rotate(v.heading());
            // line(0, 0, scl, 0);
            pop();
        }
        yoff += inc;
    }
    zoff += inc * 0.1;
    fr.html(floor(frameRate()));

    for (var i = 0; i < particles.length; i++) {
        particles[i].follow(flowfield);
        particles[i].show();
        particles[i].update();
    }
  drawRandomCircle();

}