Turbo

/******************

Code by Vamoss

Original code link:

https://openprocessing.org/sketch/2468735

​

Author links:

http://vamoss.com.br

http://twitter.com/vamoss

http://github.com/vamoss

******************/

​

const TOTAL = 10000;

​

let particles = [];

var allColors, selectedColors;

var fbm, sh, gl, pixelBuffer;

​

var speedSlider, turbulenceSlider, variationSlider, revolutionsSlider, fbmCheckbox;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0);

  strokeWeight(0.5);

  fbm = createGraphics(width, height, WEBGL);

  sh = createShader(vert,frag);

  fbm.shader(sh);

  sh.setUniform("u_resolution", [width*pixelDensity(),height*pixelDensity()]);

  sh.setUniform("u_tex", this._renderer);

  gl = fbm._renderer.GL;

  pixelBuffer = new Uint8Array(fbm.width * fbm.height * 4);

​

  speedSlider = createSlider(0.1, 5, 1.8, 0.01);

  speedSlider.position(10, 10);

​

  turbulenceSlider = createSlider(0.5, 3, 1, 0.001);

  turbulenceSlider.position(10, 30);

​

  variationSlider = createSlider(0, 10, 1, 0.001);

  variationSlider.position(10, 50);

  revolutionsSlider = createSlider(1, 100, 30, 0.001);

  revolutionsSlider.position(10, 70);

  fbmCheckbox = createCheckbox('Show shader', false);

  fbmCheckbox.position(10, 90);

  allColors = [

    color("#D3352A"),

    color("#F07525"),

    color("#FFBF52"),

    color("#DDF067"),

    color("#A2D975"),

    color("#60BD62"),

    color("#5EF09D"),

    color("#45DECC"),

    color("#3FC4F5"),

    color("#6691FF"),

    color("#ED9DE8"),

    color("#BBA6FF"),

    color("#B66FC9"),

    color("#D966B2"),

    color("#D95F74")

  ];

​

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

    particles.push({

      x: random(width),

      y: random(height),

      vx: 0,

      vy: 0

    });

  }

  selectColors();

  frameRate(60);

}

​

function draw() {

  background(0, 10);

  strokeWeight(3);

  sh.setUniform("u_time", millis() * variationSlider.value());

  sh.setUniform("u_turbulence", turbulenceSlider.value());

  fbm.rect(-width/2,-height/2,width,height);

  if (fbmCheckbox.checked()) {

    image(fbm, 0, 0, width, height);

    return;

  }

  //fbm.loadPixels();

  gl.readPixels(

    0, 0, fbm.width, fbm.height,

    gl.RGBA, gl.UNSIGNED_BYTE, pixelBuffer

  );

  const vel = speedSlider.value();

  for (let p of particles) {

    if(random() < 0.05) {

      p.x = random(width);

      p.y = random(height);

      p.vx = 0;

      p.vy = 0;

    }

    let val = getValue(p.x, p.y);

    p.vx += cos(val) * vel;

    p.vy += sin(val) * vel;

    stroke(p.color); 

    line(p.x, p.y, p.x + p.vx, p.y + p.vy);

    p.x += p.vx;

    p.y += p.vy;

    p.vx *= 0.5;

    p.vy *= 0.5;

    if (p.x > width) p.x = 0;

    if (p.y > height) p.y = 0;

    if (p.x < 0) p.x = width;

    if (p.y < 0) p.y = height;

  }

}

​

var a = Math.random() * 4 - 2;

var b = Math.random() * 4 - 2;

var c = Math.random() * 4 - 2;

var d = Math.random() * 4 - 2;

​

function getValue(x, y) {

  //const pixel = fbm.get(x, y);

  const index = 4 * (floor(y) * width + floor(x));

  const r = pixelBuffer[index+0]/255;

  const g = pixelBuffer[index+1]/255;

  const b = pixelBuffer[index+2]/255;

  const bright = (r+g+b) / 3;

  return bright * revolutionsSlider.value();

}

​

function selectColors() {

  var colors = [...allColors];

  selectedColors = [];

  selectedColors.push(colors.splice(floor(random(colors.length)), 1)[0]);

  selectedColors.push(colors.splice(floor(random(colors.length)), 1)[0]);

  selectedColors.push(colors.splice(floor(random(colors.length)), 1)[0]);

​

  particles.forEach(p => {

    p.color = random(selectedColors);

  })

}

​

function keyPressed(){

  background(0);

  selectColors();

}

​