p5.js 运用线条库实现交互作品

---

前言

学期已经悄悄过去了一半，互动媒体课上的收获也慢慢增多，在将自己写的线条库丰富起来之后，就要进行进一步的应用，所以今天就将我的应用结果做一个展示
主要对三个方向进行扩展应用——圆，正方形和线条
其实扩展应用也是对函数的一种重写

因为最初在创建库时很多考量都是不周全的，并且在写库的时候关注的是实现方法，而不是视觉效果。所以在重写过程中，除了更多样的图形变换，也同时要更多地考虑到
视觉效果（颜色等），交互方式（运用鼠标等产生更丰富的交互）

---

一、对正方形的扩展应用

在扩展应用前，我会先展示原本的库里的示意图

1. 库函数线条+旋转+鼠标交互

库函数中的效果如下

旋转产生更多的线条是最终效果的基础，扩展更重要的在于对鼠标的交互

（1）鼠标移动可让线条的颜色和形状发生变化

主要代码如下：

var num = 12;
//移动旋转中心
translate(width / 2, height / 2);
for (var i = 0; i < num; i++) {
    //旋转的角度与线条的数量相关
    rotate(TWO_PI / num);
    //颜色与鼠标位置绑定
    let setcolor = color(mouseX / width * 255 * i / num, mouseY / height * 255 * i / num, 10 * i);
    line_sinRect_0119(0, 0, 1500, 400, 0.1 * mouseX, 0.02 * mouseY, setcolor);//库函数
}

效果图：

（2）点击鼠标可以改变线条的个数，每个线条之间的角度也自然变化
当鼠标位置在屏幕左侧，数量-1；当鼠标位置在屏幕右侧，数量+1

主要代码如下：

function mouseClicked() {
    if (mouseX < width / 2) {
        num--;
    } else {
        num++;
    }
}

效果图：

2. 库函数线条+旋转+鼠标交互

库函数中的效果如下

和上一个不同的是，这里的旋转和鼠标绑定，所以其实也是有他的不同之处

（1）鼠标移动可让正方形的颜色和形状发生变化
这里的颜色分为了多个区域，每个区域有不同的设置方式，是为了达到不同的视觉效果

主要代码如下：

//从外层开始一层层上色
fill(color(xt / width * 155 + mouseX / width * 100, yt / height * 155 + mouseX / width * 100, angle / TWO_PI * 155 + mouseX / width * 100));
rect(-wid / 2, -wid / 2, wid, wid);
fill(255);
rect(-wid * 0.8 / 2, -wid * 0.8 / 2, wid * 0.8, wid * 0.8);
fill(color(xt / width * 155 + mouseY / height * 100, yt / height * 155 + mouseY / height * 100, angle / TWO_PI * 155 + mouseY / height * 100));
ellipse(0, 0, wid * 0.6, wid * 0.6);
fill(255);
rect(-wid * 0.4 / 2, -wid * 0.4 / 2, wid * 0.4, wid * 0.4);
fill(color(xt / width * 255 + 100, yt / height * 255 + 100, angle / TWO_PI * 255 + 100));
ellipse(0, 0, wid * 0.2, wid * 0.2);

（2）点击鼠标可以改变正方形的个数，每个正方形的大小也自然变化
当鼠标位置在屏幕左侧，数量-1；当鼠标位置在屏幕右侧，数量+1

主要代码如下：

function mouseClicked() {
    if (mouseX < width / 2) {
        num--;
    } else {
        num++;
    }
}

（3）改变了背景颜色，同样和鼠标绑定
这个其实只是一个大体的效果，丰富视觉，后面的实现也有类似的背景色

fill(mouseX / width * 35 + 220, mouseY / height * 35 + 220, mouseX / width * mouseY / height * 35 + 200);

效果图：

---

二、对圆的扩展应用

因为库函数可丰富的地方不多，所以对圆只进行了一个函数的扩展

1. 库函数线条+鼠标交互

库函数中的效果如下

库函数本身的效果就是随机性，所以保留了这个特性，主要做了在丰富视觉上下了功夫
气泡的大小和数量与鼠标位置有关，多次调用画出多个层次大小的气泡

主要代码如下：

line_randCircle_0119(50, 50, 800, 50, 0.03 * mouseX, 0.02 * mouseY);
line_randCircle_0119(50, 150, 800, 150, 0.05 * mouseX, 0.05 * mouseY);
line_randCircle_0119(50, 250, 800, 250, 0.07 * mouseX, 0.08 * mouseY);
line_randCircle_0119(50, 350, 800, 350, 0.09 * mouseX, 0.10 * mouseY);
line_randCircle_0119(50, 450, 800, 450, 0.11 * mouseX, 0.12 * mouseY);
line_randCircle_0119(50, 550, 800, 550, 0.13 * mouseX, 0.14 * mouseY);

上色想法主要是想实现一个气泡效果，所以主要选用了蓝色，并且为了不让画面看上去太单调，也将一些“气泡”设为白色

主要代码如下：

var cr = random(-res, res);
var range = scale + cr;
//高度不同上不同的蓝色
var c = color(0, 255 - y / height * 255, 245);
fill(c);
//气泡大小在随机后变小了上白色
if (cr < 0) fill(255);
ellipse(x, y, range, range);

效果图：

---

三、对线条的扩展应用

1. 库函数线条+鼠标交互

库函数中的效果如下

如何扩展其实想了很久，因为这个形状很难在颜色等上发生比较明显的变换，所以更加注重鼠标交互
所以最后的实现想法就是根据鼠标位置使线条与鼠标发生联系
当鼠标位置在线条的某个点周围时，让附近的点的坐标与鼠标的位置相匹配

主要代码如下：

//突出鼠标位置
 ellipse(mouseX, mouseY, 10, 10);
 //设定范围，改变坐标
 if ((x - mouseX) < 50 && (x - mouseX) > -50 && (y - mouseY) < 50 && (y - mouseY) > -50) {
    x = mouseX;
    y = mouseY;
}

效果图：

2. 库函数线条+鼠标交互

库函数中的效果如下

其实很明显的是他可以有两种不同的形态，所以也将他的效果分成两个部分实现——较密，较疏

（1）更改不同位置上的线条颜色

因为线条的位置相对来说比较固定，所以颜色的算法一定要足够随机丰富才能有很好的效果

主要代码如下：

stroke(xt / width * 155 + i % 5 * 70 + mouseX / width * 30,
           i % 3 * 60 + i % 2 * 40 + i % 4 * 55, yt / height * 155 + i % 6 * 70 + mouseY / height * 30);

效果图：

（2）如果鼠标位置停留在对应的x值，改变对应位置的线条颜色和长度

主要代码如下：

//设置触发范围
if ((xt - 3) < mouseX && mouseX < (xt + 3)) {
     range = randness / 12;//设置线条长度
     stroke(0);//设为黑色
}

效果图：

3. 库函数线条+鼠标交互

库函数中的效果如下

群山的效果本身很明显，其实主要就是改变颜色，增加层次感

在重复多次后，调整参数让远处的山和近处的山有不同的效果
而远近位置也需要不同的颜色效果
主副色的设置中，副色是基于主色的色调而改变亮度，所以不会突兀

主要代码如下：

//主函数调用
var c1 = color(100, 210, 255);
var c2 = color(80, 190, 235);
//库函数
line_mountLine_0119(10, 100, 790, 100, 0.02 * mouseX, c1, c2, 0.01);

c1 = color(210, 145, 213);
c2 = color(190, 125, 193);
line_mountLine_0119(10, 200, 790, 200, 0.04 * mouseX, c1, c2, 0.015);

c1 = color(40, 145, 113);
c2 = color(20, 125, 93);
line_mountLine_0119(10, 300, 790, 350, 0.07 * mouseX, c1, c2, 0.02);

c1 = color(20, 105, 83);
c2 = color(0, 85, 63);
line_mountLine_0119(10, 400, 790, 450, 0.1 * mouseX, c1, c2, 0.02);

在库函数中分别调用主副色

//库函数重写
stroke(setcolor1);
line(x, y1, x, y2);
stroke(setcolor2);
line(x, y2, x, y3);
stroke(setcolor1);
line(x, y3, x, y4);
stroke(setcolor2);
line(x, y4, x, y5);
stroke(setcolor1);
line(x, y5, x, y0 + 300);

效果图：

---

总结

这就是本次对库函数应用的全部结果，虽然还有很多不足，但也有在继续学习。