将”随机性和概率论”的相关技术加入到自己的“库”中
程序员文章站
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
上一篇: 两大行业面临招人难,月薪2万还招不到员工,到底咋回事?
下一篇: jQuery选择器的简单实现和笔记