个人中心
gpt4 book ai didi

javascript - 如何生成持续多彩艺术柏林流场

转载 作者：行者123 更新时间：2023-12-01 15:45:59 26 4
gpt4 key购买 nike

我正在尝试达到如下图所示的效果:
picture
我使用 p5.js 库，但我不是图形程序员，这就是为什么很难实现这种特殊的图形效果。我正在和你分享我的代码，我也跟着这个 tutorial .
索引.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>
粒子.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();
    }

  }

}
草图.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()));
}
变量 maroon_data , blue_data和 yellow_data是来自 EEG 设备的数据，稍后将计算，但现在它的硬编码值仅用于原型(prototype)。也是 bool 值 gamma_is_high , beta_is_high和 alpha_is_high现在设置为true。但是通过这么多的努力，我只能做到这一点，如下所示:
enter image description here
而实际输出是这样的:
the art of feeling
请帮我得到这个实际的输出。任何帮助，将不胜感激。谢谢。

最佳答案

我以前做过这个。我只有一个粒子数组，只是随机改变了它们的 rgb 值。我使用一个对象来存储颜色值。

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);
}
然后在粒子中: 
show() {
   fill(c.r,c.g,c.b, whateverAlphaYouWant);
   //Do all the rest
}
您可以随时调整值以获得您想要的任何颜色。

关于javascript - 如何生成持续多彩艺术柏林流场，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58932699/

26 4 0
文章推荐： java - java ant build 的问题(未正确设置类路径)
文章推荐： java - 在android中正确传递数据？
文章推荐： javascript - 使用 Google Script 在 Google Forms 中提交时获取地理位置
文章推荐： racket - 启动 Hacker News Clone - 后续步骤？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com