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

一、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()));
}