p5.js作业A2

基本介绍

使用作业A1中的形状库以及p5.js的基本功能实现一些有趣的图形效果。

心跳

在这个纷繁喧嚣的世界，每天我们都接收着洪水般泛滥的信息，但我们不能忘了初心，始终要守住心中那片无尘之地。

调用了自定义的心形线函数，再让它按照设定的大小进行颜色和线条粗细变化，变化的同时改变生成点的数量就可以改变线的密度。可以通过鼠标控制大小。

function draw() {
    background(255);
    cardioid0423(500, 500, size);
    if(size>23 ||size<15)
    {
        ds = -ds;
    }
    size += ds;
}
function cardioid0423(cx, cy, size) {
    for (let i = 0 ; i < 30*(60-2*size); ++i) {
        x = size * 16 * pow(sin(i), 3) + cx;
        y = -size * (13 * cos(i) - 5 * cos(2 * i) - 2 * cos(3 * i) - cos(4 * i)) + cy;

        x1 = size * 16 * pow(sin(i + 1), 3) + cx;
        y1 = -size * (13 * cos(i + 1) - 5 * cos(2 * i + 2) - 2 * cos(3 * i + 3) - cos(4 * i + 4)) + cy;
        strokeWeight(random(0.1,2));
        stroke(random(255),random(255),random(255));
        line(x, y, x1, y1);
        strokeWeight(random(2,5));
        point(x,y);
    }
}

粒子纠缠

看似无序的粒子和线条按照一定的规律连接和变化。

线条模式

粒子模式

主要思路是将一定范围内的点连线，超出范围就取消连线。然后用渐进逼近的圆和自定义的粒子渐变线相连就有流体的感觉。用鼠标点击来控制移动的快慢，左键为快，中键为慢。

class Particle {
    constructor() {
        this.pos = createVector(random(width), random(height));
        this.size = 10;
        this.speed = createVector(random(-2, 2), random(-2, 2));
        this.style = 0;
    }

    draw() {
        noStroke();
        fill(random(50) + 215);
        circle(this.pos.x, this.pos.y, this.size);
    }

    update() {
        this.pos.add(this.speed);
        this.edges();
    }

    edges() {
        if (this.pos.x < 0 || this.pos.x > width) {
            this.speed.x *= -1;
        }
        if (this.pos.y < 0 || this.pos.y > height) {
            this.speed.y *= -1;
        }
    }

    checkParticles(particles) {
        particles.forEach(particle => {
            const d = dist(this.pos.x, this.pos.y,
                particle.pos.x, particle.pos.y);
            if (d < 120) {
                stroke(255);
                if (this.style == 0) {
                    circleline0423(this.pos.x, this.pos.y, particle.pos.x, particle.pos.y, 5);
                }
                else {
                    let nodex = [];
                    let nodey = [];
                    for (let i = 0; i < 5; ++i) {
                        let nowx = lerp(this.pos.x, particle.pos.x, i / 100);
                        nodex.push(nowx);
                        let nowy = this.findfx(this.pos.x, this.pos.y, particle.pos.x, particle.pos.y, nowx);
                        nodey.push(nowy);
                    }
                    while (nodex) {
                        stroke(125);
                        strokeWeight(2);
                        point(nodex.pop(), nodey.pop());
                    }
                }
            }
        });

    }
    findfx(startx, starty, endx, endy, nowx) {
        return (endy - starty) / (endx - startx) * nowx + startx * endy - starty * endx;
    }
}
function circleline0423(s_x, s_y, e_x, e_y, num) {
    for (var i = 0 ; i < num; ++i) {
        c_x = lerp(s_x, e_x, i / num);
        c_y = lerp(s_y, e_y, i / num);
        noStroke();
        ellipse(c_x, c_y, i, i);
    }

幻想树

不同参数下的图像
火焰燃烧

这个图像结合了粒子以及噪声，外加调用了A1线条库中的渐变圆线。主要的思想是利用噪声的随机性结合cos函数来模拟树的生长过程，通过这种线条可以用柔和以及渐变来体现生命力。移动鼠标可以擦除不合适的部分。

线条与油泼

和上一张的思路类似，但是除了平滑的cos和sin函数外，该图像还加入了在小范围变化极大的tan函数来作为部分线条的轨道，给图像中加入一些直线条。也可以通过鼠标擦除不合适的部分。

模拟海浪

这是使用了实验A1中的噪声线，主要是通过颜色区别来体现海浪的感觉，代码比较简单，主要是对噪声点的连接以及颜色区域的控制。鼠标左键可以加速海浪速度和幅度，中键可以减慢海浪速度和幅度。

盘绕线画笔

一些效果图如下

岩石纹理

光束

蛛网
该图像的算法实现主要是通过将初始化的点不断地与鼠标位置进行连线画圆实现的，让周围的点按照一个ease速率不断靠近中心点的位置，同时给点一个切线方向的加速度，所画的圆就是椭圆。当改变鼠标位置，点的移动就变成了弧线。当线排的够密时，就能成为素描图像。

class points {
  constructor() {
  this.X= random(width);
  this.Y= random(height);
  this.Xv =0 ;
  this.Yv = 0;
  this.pX = 0;
  this.pY = 0;
  this.w= random(1 / threshold, threshold);
  }
  draw() {
    this.Xv ;
    this.Yv ;
    this.Xv += ease * (cX - this.X) * this.w;
    this.Yv += ease * (cY - this.Y) * this.w;
    this.X += this.Xv;
    this.Y += this.Yv;
    line(this.X,this.Y,this.pX,this.pY)
    this.pX = this.X;
    this.pY = this.Y;
  }
}

椭圆线画笔

用该画笔绘制的发丝
运用了椭圆的画笔，通过打点法画的椭圆，也就是A1作业中的椭圆随机线函数。用户可以直接通过鼠标悬停的方式在上面绘制自己的图案。

圆与方

通过鼠标交互，使用了A1作业中的方形函数，构造旋转的图像，然后在图像的中心位置放大视角就可以看见有规律的直线和弧线。通过鼠标设定中心位置，每次移动时，改变中心位置。鼠标停止运动时，图像有规律地旋转。所以每一个点每一个时间的图像都是截然不同的。

function draw()
{
  background(0);
  square0423(mouseX,mouseY, 300, 20);
}
function square0423(cx, cy, radius, pieces) {
  var c = map(radius, 0, 300, 100, 255);
  var d = map(radius,0, 300, 1, 3);
  var f = map(radius, 0, 300, 10, 255);
   for (var i = 0; i < pieces; i++) 
    {
        var x = cos(i/ pieces * TWO_PI) * radius+cx;
        var y = sin(i/ pieces * TWO_PI ) * radius+cy;
        stroke(random(255),random(255),random(255));
        strokeWeight(d);
        fill(random(50, 255));
        noFill();
        translate(x, y);
        ellipse(x, y, radius * radius / 100, radius * radius / 100);
        rotate(200 / radius * frameCount / 300 + x + y);
        rectMode(CENTER);
        rect(0, 0, radius * radius / 20, radius * radius / 20);
    }
}

三点透视？

三角走廊

什么时候我的布线也能这么丝滑。。

基本调用的是A1中的函数，左键减少三角形大小，右键增加三角形大小。画的不满意就按下delete键清空。

function draw() {
    translate(width / 2, height / 2);
    line(x1, y1, x2, y2);
    line(x1, y1, x3, y3);
    line(x2, y2, x3, y3);
    for (var i = 0; i < 2; i++) {
        pcx = cx;
        pcy = cy;
        var temp = triangles0423(x1, y1, x2, y2, x3, y3, cx, cy, cursize);
        cx = temp.x;
        cy = temp.y;
        line(pcx, pcy, cx, cy);

    }
}
function mouseClicked() {
    if (mouseButton == LEFT)
        cursize += 0.2;
    else if (mouseButton == RIGHT) {
        cursize -= 1;
    }
}
function keyPressed() {
    if (keyCode === DELETE) {
        background(255);
        cursize = 2;
    }
}
function triangles0423(x1, y1, x2, y2, x3, y3, cx, cy, size) {
    r = floor(random(3));
    strokeWeight(random(1 / 50, 10 / 50));
    switch (r) {
        case 0:
            cx = (cx + x1) / size;
            cy = (cy + y1) / size;
            break;
        case 1:
            cx = (cx + x2) / size;
            cy = (cy + y2) / size;
            break;
        case 2:
            cx = (cx + x3) / size;
            cy = (cy + y3) / size;
            break;
    }
    var v = createVector(cx, cy);
    return v;
}