欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

将”随机性和概率论”的相关技术加入到自己的“库”中

程序员文章站 2022-03-25 12:50:31
文章目录一、Random Gaussian圆1.1 构思1.2 效果1.3 调用案例1.4 利用Random Gaussian圆作图一、Random Gaussian圆1.1 构思P5.js中提供一个函数randomGaussian,因此我用这个函数生成360个值,作为直线的长度,组成一个圆,形成爆炸圆的效果。1.2 效果动图效果1.3 调用案例高斯圆调用案例let circle1 = new Array(360);var a;function setup() {...

一、Random Gaussian圆

1.1 构思

P5.js中提供一个函数randomGaussian,因此我用这个函数生成360个值,作为直线的长度,组成一个圆,形成爆炸圆的效果。
将”随机性和概率论”的相关技术加入到自己的“库”中

1.2 效果

将”随机性和概率论”的相关技术加入到自己的“库”中

  • 动图效果
    将”随机性和概率论”的相关技术加入到自己的“库”中

1.3 调用案例

  • 高斯圆调用案例
let circle1 = new Array(360);
var a;
function setup() 
{
   createCanvas(700, 700);
   background('#fff1e6');
   a = new RandomGaussianCircle(120,'#ff9f1c');

}

function draw() 
{
  background('#fff1e6');  
  a.DrawGaussianCircle();
 }

 function mousePressed()
 {
  a = new RandomGaussianCircle(120,'#ff9f1c');
  redraw();
 }

1.4 利用Random Gaussian圆作图

利用叠加,做两个圆,即可以形成好看的空心高斯圆效果。
将”随机性和概率论”的相关技术加入到自己的“库”中

  • 动图
    将”随机性和概率论”的相关技术加入到自己的“库”中
let circle1 = new Array(360);
var a;
var b;
function setup() 
{
   createCanvas(700, 700);
   background('#fff1e6');
   a = new RandomGaussianCircle(120,'#ff9f1c');
   b = new RandomGaussianCircle(60,'#fff1e6');
}

function draw() 
{
  background('#fff1e6');  
  a.DrawGaussianCircle();
  b.DrawGaussianCircle();
 }



 function mousePressed()
 {
  a = new RandomGaussianCircle(120,'#ff9f1c');
  b = new RandomGaussianCircle(30,'#fff1e6');
  redraw();
 }

二、Gaussian曲线

2.1 构思

上课的时候,律老师给我们放过一个法国的数学大佬的ted演讲,他演讲中用了一个道具,就是小球从一个小孔滚动出来,然后他用力摇,最后会出现一个高斯曲线的形状,其实这就是全部的粒子都服从一个高斯概率分布,最后一起就能形成高斯曲线。课堂上张三醉酒也是一样的道理。因此我让每根线的长度都符合高斯分布,然后将其画出来,最后形成高斯曲线的样子。

2.2 效果

将”随机性和概率论”的相关技术加入到自己的“库”中

2.3 调用案例

  • 调用案例
var gaussianCurveDemo;
function setup() {
  createCanvas(windowWidth, windowHeight);
  background("#edf6f9");
  gaussianCurveDemo = new gaussianCurve();
  gaussianCurveDemo.initial();
}

function draw() 
{
  gaussianCurveDemo.Draw();
}

三、Rondom方形——random虚线

3.1 构思

这个灵感其实是来自于虚线,不过虚线的“空”(破的地方)都是规律的,我在其中加入random,让空的地方不再规律就可以形成另一种虚线效果。

3.2 效果

将”随机性和概率论”的相关技术加入到自己的“库”中

3.3 调用案例

  • 函数解释
/*=========================================================================
随机虚线的效果
参数:
(x,y):表示线的起始点
Lineheight:表示线的宽度
===========================================================================*/
class RondomDottedLine
  • 调用案例
function setup() {
  createCanvas(800,800);
  background("#fcbf49");
  DottedLineDemo = new RondomDottedLine(100,100,2);
  DottedLineDemo.draw();
}

function draw() {
}

3.4 利用Random方形制造二维码效果

将”随机性和概率论”的相关技术加入到自己的“库”中

  • 调用案例
function setup() {
  createCanvas(600,600);
  background("#fcbf49");
  QR_CodeDemo = new RondomLine_QRcode();
  
}

function draw() {
  
QR_CodeDemo.draw();
}

四、 随机渐变圆

4.1 P5.js自带的函数可以实现在颜色中进行线性插值

将”随机性和概率论”的相关技术加入到自己的“库”中

4.2 效果

将”随机性和概率论”的相关技术加入到自己的“库”中

4.3 调用案例

function setup() {
  createCanvas(800, 800);
  background(255);
  fill(255)
  rect(0,0,width,height)
  noStroke()
  
  drawingContext.shadowColor = color(0, 0, 0,30);
  drawingContext.shadowBlur =20;
  drawingContext.shadowOffsetX = 5;
  drawingContext.shadowOffsetY = -5;
}

function draw() {

  // ellipse(mouseX, mouseY, 20, 20);
  GradualRandomCircle();
}

五、柏林随机噪声生成山峰

5.1 构思

5.2 效果

将”随机性和概率论”的相关技术加入到自己的“库”中

5.3 调用案例

var num_waves = 5;
var waves = [];
var colors = [];
var center;
var min_dimension;
var mask_stroke;

function setup() {

  
  ellipseMode(CENTER);
  createCanvas(windowWidth, windowHeight);
  noiseDetail(4, 0.65);
  
  colors.push(color(195, 165, 160, 50));
  colors.push(color( 35, 100, 130, 100));
  colors.push(color( 65, 100, 150, 100));
  colors.push(color( 65,  75,  80, 220));
  colors.push(color( 40, 110, 140, 120));
  colors.push(color(210, 190, 200, 250));


  for(var i = 0; i < num_waves; i++) {
    waves[i] = new NoiseWaveMountain(colors[i], 0.5 + i * 0.03, random(10000));
    waves[i].init();
  }
  
  center = createVector(width*0.5, height*0.5);
  min_dimensions = min(width*0.75, height*0.75);
  mask_stroke = min_dimensions / 5;
}


function draw() {
  background(225,220,205);
  
  for(var i = 0; i < num_waves; i++) {
    waves[i].update();
    waves[i].draw();
  }
  
  drawMask();
  drawText();
}

function drawMask() {
  stroke(255);
  strokeWeight(mask_stroke);
  noFill();
  
  for(var i = 0; i < 15; i++) 
  {
    ellipse(center.x, center.y, min_dimensions + i * mask_stroke, min_dimensions + i * mask_stroke)
  }
}

function drawText() {
  fill(20);
  noStroke();
  textSize(16);
  textAlign(CENTER);
  textFont("Helvetica");
  
  text("ZIZI", width*0.5, 100);
  fill(colors[5]);

  text("柏林噪声生成山峰", width*0.5, 125);

}

六、柏林随机噪声生成流场

6.1 构思

随机和概率真的挺好出效果的,就是要多尝试,这个图案我其实本来想把他放在A3的,因为这种随机的扰乱的线,再用上深沉一点的颜色,特别容易营造出烦躁的情绪,但是由于这个情绪特别好表达,在律老师的其他案例里这种情绪也经常出现,因此我就没有把这个图放进A3的情绪里。

6.2 效果

将”随机性和概率论”的相关技术加入到自己的“库”中

6.3 调用案例

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

var zoff = 0;

var fr;
var particles = [];

var flowfield;

function setup() {
  createCanvas(800, 600);
  cols = floor(width/scl);
  rows = floor(height/scl);
  fr = createP('');
  
  flowfield = new Array(cols * rows);
  
  for (var i = 0; i < 2500; i++) {
    particles[i] = new PerlinFieldParticle();
  }
  background(255);
  stroke(255,195,0,50);
} 


function draw() {

  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 * 4;
      var v = p5.Vector.fromAngle(angle);
      v.setMag(1);
      flowfield[index] = v;
      xoff += inc;
      stroke(255,195,0,50);
    }
    yoff += inc;
    
    zoff += 0.0003;
  }
  
  for (var i = 0; i < particles.length; i++) 
  {
    particles[i].follow(flowfield);
    particles[i].update();
    particles[i].edges();
    particles[i].show();
  }
  
  fr.html(floor(frameRate()));
}

本文地址:https://blog.csdn.net/weixin_43118073/article/details/110748429

相关标签: Processing