利用p5.js进行“运动”主题的绘画创作

最新推荐文章于 2022-11-04 09:07:25 发布

BigBerlin

最新推荐文章于 2022-11-04 09:07:25 发布

阅读量1.1k

点赞数

分类专栏： homework 文章标签： p5.js Siri 码绘

本文链接：https://blog.csdn.net/weixin_41992922/article/details/84369561

版权

本文介绍了如何使用p5.js库进行‘运动’主题的绘画创作，特别是模仿Siri的动态水波纹效果。通过分析Siri的视觉特点，作者实现了码绘版的动态波纹，并添加了声音交互功能，根据声音强度改变波形。同时，对比了码绘与手绘在表现动态效果上的差异，并分享了创作过程中的挑战与体验。

摘要由CSDN通过智能技术生成

利用p5.js进行“运动”主题的绘画创作

主题

用码绘和手绘两种方式创作“运动”主题的作品，对比二者在表现“动态”方面的异同。

码绘

工具

p5.js

创作理念

因为喜欢Apple，当提到“运动”或者“动态”这个主题时，脑海中第一个冒出来的就是Siri动态的水波纹形状，所以决定用p5.js实现Siri的动态效果。

Siri的实际效果如下：（右侧为动态图片，图片源自网络）

实现过程

分析

Siri是由红黄蓝绿等多种颜色的波纹混合起来的，每种波纹都有较低的透明度，并且不同颜色的波纹重叠部分要显示多种颜色混合的效果；波纹的运动方式比较平滑自然，要考虑使用比random()更自然的随机数函数来实现；不同颜色的波纹起始位置也不同，所以初始化每种波纹的时候要注意错开起始位置；

代码实现

sketch.js中的一些基本设置：

//定义几个全局变量
var w;
var h;
var mult = 75;
//初始函数
function setup() {
   
    createCanvas(windowWidth, windowHeight);
    background(51);
    }
//绘制函数
function draw() {
   
    background(51);
    push();
    blendMode(ADD);//混合颜色
    
    //红
    stroke(255, 0, 255, 3);
    drawLine(w, h, 2000);
    //黄
    stroke(255, 255, 0, 3);//stroke()四个参数：R、G、B、透明度
    drawLine(w, h, 0);
    //蓝
    stroke(0, 0, 2