Login/Register
How to generate continues Colorful Artistic Perlin Flow Field
Asked Answered
javascriptgraphicsdrawingp5.js
D

1

7

I am trying to achieve effect as shown in the picture below:

picture

Im using p5.js library but im not a graphics programmer and thats why its very difficult to achieve this particular graphical effect. I am sharing my code with you and also I followed this tutorial.

Index.html

    <html>
    <head>
        <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
        <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
        <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
        <script language="javascript" type="text/javascript" src="sketch.js"></script>
        <script language="javascript" type="text/javascript" src="particle.js"></script>
    </head>
<body>
</body>
</html>

particle.js

  function Particle() {
  this.pos = createVector(random(width), random(height));
  this.vel = createVector(0, 0);
  this.acc = createVector(0, 0);
  this.maxspeed = 4;
  this.h = 0;
this.alphaPower = 20;
  this.prevPos = this.pos.copy();

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

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

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

  this.showBlue = function() {
    stroke(0, 76, 153, this.alphaPower);
    
    strokeWeight(1);
    line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
   
    this.updatePrev();
  }

  this.showMaroon = function() {
    stroke(165, 0, 68, this.alphaPower); // maroon
   
    strokeWeight(1);
    line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
     
    this.updatePrev();
  }

  this.showYellow = function() {
    stroke(237, 188, 0, this.alphaPower);
    //stroke(1,2);
    
    strokeWeight(1);
    line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
    
    this.updatePrev();
  }


  this.updatePrev = function() {
    this.prevPos.x = this.pos.x;
    this.prevPos.y = this.pos.y;
  }

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

  }

}

sketch.js

var inc = 0.01;
var scl = 10;
var cols, rows;

var zoff = 0;

var fr;

var particles = [];
var particlesMaroon = [];
var particlesBlue = [];
var particlesYellow = [];

var flowfield;
var flowfieldMaroon;
var flowfieldBlue;
var flowfieldYellow;

var gamma_is_high = false;
var beta_is_high = false;
var alpha_is_high = false;

var maroon_data=1000;
var blue_data = 1000;
var yellow_data = 1000;

setInterval(function() {
    ChangeLines();
}, 5000);

function dataRequest(){
    socket.emit('datarequest', {data: "request"});
}

function ChangeLines(){

    maroon_data = random(500, 2000);
    blue_data = random(500, 2000);
    yellow_data = random(500, 2000);

    gamma_is_high = true;
    alpha_is_high = true;
    beta_is_high = true;
}

function setup() {
  slider = createSlider(0.01, 0.1, 0.02,0);
  slider.position(10, 10);
  slider.style('width', '80px');
  ChangeLines();
  createCanvas(windowWidth-15, windowHeight-20);
  cols = floor(width / scl);
  rows = floor(height / scl);
  fr = createP('');

  flowfield = new Array(cols * rows);
  flowfieldMaroon = new Array(cols * rows);
  flowfieldBlue = new Array(cols * rows);
  flowfieldYellow = new Array(cols * rows);

  for (var i = 0; i < 1000; i++) {
    particles[i] = new Particle();
    particlesMaroon[i] = new Particle();
    particlesBlue[i] = new Particle();
    particlesYellow[i] = new Particle();
  }
  background(255);
}


function draw() {
  
  let val = slider.value();
  inc = val;

  var yoff = 0;
  for (var y = 0; y < rows; y++) {
    var xoff = 0;
    for (var x = 0; x < cols; x++) {
      var index = x + y * cols;
      var angle = noise(xoff, yoff, zoff) * TWO_PI;
      var angleMaroon = noise(xoff, yoff, zoff) * TWO_PI;
      var angleBlue = noise(xoff, yoff, zoff) * TWO_PI;
      var angleYellow = noise(xoff, yoff, zoff) * TWO_PI;

      var v = p5.Vector.fromAngle(angle);
      var vm = p5.Vector.fromAngle(angleMaroon);
      var vb = p5.Vector.fromAngle(angleBlue);
      var vy = p5.Vector.fromAngle(angleYellow);

      v.setMag(5);
      vm.setMag(5);
      vb.setMag(5);
      vy.setMag(5);

      flowfield[index] = v;
      flowfieldMaroon[index] = vm;
      flowfieldBlue[index] = vb;
      flowfieldYellow[index] = vy;
      xoff += inc;
     
    }
    yoff += inc;

    
  }
  zoff += 0.0003;
  for (var i = 0; i < particles.length; i++) {
   
    if(gamma_is_high==true){
        particlesMaroon[i].follow(flowfieldMaroon);
        particlesMaroon[i].update();
        particlesMaroon[i].edges();
        particlesMaroon[i].showMaroon();
    }
    

    if(beta_is_high){
        particlesBlue[i].follow(flowfieldBlue);
        particlesBlue[i].update();
        particlesBlue[i].edges();
        particlesBlue[i].showBlue();
    }
   
    if(alpha_is_high){
        particlesYellow[i].follow(flowfieldYellow);
        particlesYellow[i].update();
        particlesYellow[i].edges();
        particlesYellow[i].showYellow();
    }
    
  }

  fr.html(floor(frameRate()));
}

The variables maroon_data, blue_dataand yellow_data are data coming from EEG device which will be calculated later but for now its hard coded values for prototype only. Also booleans gamma_is_high, beta_is_high and alpha_is_high are set to true for now. But with this much effort I only manage to achieve this as shown below:

enter image description here

And the actual output is like this:

the art of feeling

Kindly help me get this actual output. Any help would be appreciated. Thanks.

Dolli answered 19/11, 2019 at 11:10 Comment(3)
Maybe try with angle noise(xoff, yoff, zoff) * TWO_PI * 4 as given in the sample? – Amain
I did. it just changes the pattern which i dont want. It doesnt work for me. – Dolli
"Kindly help me get this actual output" -- do you mean expected output here? Actual is the failing thing you currently have, expected is the correct thing you want. – Petulancy
D
0

Ive sorta done this before. I only had one array of particles and just changed their rgb values by a small random amount. I used an object to store the colour values.

function setup() {
  //Do all the normal stuff
  var c = {r: 100, g:100, b:100)
}
function draw() {
  //All the other stuff
  c.r += random(-3,3);
  c.g += random(-3,3);
  c.b += random(-3,3);
}

And then in the particle:

show() {
   fill(c.r,c.g,c.b, whateverAlphaYouWant);
   //Do all the rest
}

You can always tweak the values to get whatever colour you want.

Daughtry answered 26/8, 2020 at 11:47 Comment(1)
Man you are so late :D but i will try that. And Thanks. – Dolli

© 2022 - 2024 — McMap. All rights reserved.