5379@TOC

对P5基本二维图像绘制库的交互性扩展

因为课程需要接触学习了P5.js ，觉得还蛮有意思的下面是对它的2D绘图函数的一些简单扩展。
///终于等到你/
无非是用周期性、随机性、对称性带来各种视觉效果
为原来的绘图函数增加参数来增加灵活性
（也可能是减少灵活性从而减少用户使用难度，比如正三角形的绘制不需要三个顶点，只要中点加半径就好啦）

- line 拓展函数1“周期噪声直线”+演示调用（所有的调用演示都在draw函数中）
对线条进行了三次扩展
输入参数为位置（x，y）尺寸（size）还有与动画相关的时间参数（T）
使用噪声生成杂乱的线，噪声的范围是周期性变化的，形成动态的感觉。
再用杂乱的线组成规则的图案。

function setup() {// put setup code herecreateCanvas(400,300);}function draw() {fill(255,100,25);rect(-1,-1,width+2,height+2);let T=millis();DRELine0424(mouseX,mouseY,20,T);
}
function DRELine0424(x,y,size,T)
{translate(x,y);rotate(T/(500+500*abs(sin(T/100))));DRLine0424(0,0,2*size+size*sin(T/1000),T); rotate(PI/8);DRLine0424(0,0,1.5*size+0.5*size*sin((T+2000)/1000),T);DRLine0424(50,50,size+0.4*size*sin((T+500)/1000),T); DRLine0424(-50,-50,size+0.4*size*sin((T+500)/1000),T); DRLine0424(50,-50,size+0.4*size*sin((T+500)/1000),T); DRLine0424(-50,50,size+0.4*size*sin((T+500)/1000),T);
}function DRLine0424(x0,y0,size,T)
{line_rand_0011(x0-size,y0-size,x0+size,y0-size,size/10*abs(sin((T+500)/1000)),100+abs(100*sin(T/1000)));line_rand_0011(x0-size,y0-size,x0-size,y0+size,size/10*abs(sin((T+1000)/1000)),100+abs(100*sin(T/1000)));line_rand_0011(x0+size,y0+size,x0-size,y0+size,size/10*abs(sin((T+1500)/1000)),100+abs(100*sin(T/1000)));line_rand_0011(x0+size,y0+size,x0+size,y0-size,size/10*abs(sin((T+2000)/1000)),100+abs(100*sin(T/1000)));
//  line_rand_0011(x0,y0-size*1.41,x0+size*1.41,y0,size/10*abs(sin((T+500)/1000)),100+abs(100*sin(T/1000)));line_rand_0011(x0,y0-size*1.41,x0-size*1.41,y0,size/10*abs(sin((T+1000)/1000)),100+abs(100*sin(T/1000)));line_rand_0011(x0,y0+size*1.41,x0+size*1.41,y0,size/10*abs(sin((T+1500)/1000)),100+abs(100*sin(T/1000)));line_rand_0011(x0,y0+size*1.41,x0-size*1.41,y0,size/10*abs(sin((T+2000)/1000)),100+abs(100*sin(T/1000)));}
function line_rand_0011(x0,y0,x1,y1,randness,res)
{var xp = x0;var yp = y0;for(var i=1;i<res;i++){var t = i/res;var xt = lerpAB(x0,x1,t);var yt = lerpAB(y0,y1,t);var biasX = random(-randness,randness);var biasY = random(-randness,randness);var x = xt + biasX;var y = yt + biasY;line(xp,yp,x,y);xp = x;yp = y;}
}

- line2 “随机弧线”
参数为起点(x1,y1)和终点(x2,y2)以及控制取线波动的随机范围(D)，加入动画时间（T）控制颜色和D的变化
本质上是多重贝塞尔曲线叠加

function setup() {createCanvas(400, 400);
}function draw() {background(220);T=millis();rotate(0.1);fill(T/10%255,20,T/20%255)for(var i=1;i<=50;i++){rotate(2*PI/50)arclinepluse0424(0,0,400,400,40*abs(sin(T/1000)));}}function arcline0424(x1,y1,x2,y2,D)
{bezier(x1,y1,x1+(x2-x1)/3+D/2-random(D),y1+(y2-y1)/3+D/2-random(D),x1+2*(x2-x1)/3+D/2-random(D),y1+2*(y2-y1)/3+D/2-random(D),x2,y2);}
function arclinepluse0424(x1,y1,x2,y2,D)
{x3=x1+(x2-x1)/3+D/2-random(D);y3=y1+(y2-y1)/3+D/2-random(D);x4=x1+(x2-x1)/3*2+D/2-random(D);y4=y1+(y2-y1)/3*2+D/2-random(D);arcline0424(x1,y1,x3,y3,D);arcline0424(x3,y3,x4,y4,D);arcline0424(x4,y4,x2,y2,D);
}

多根在一起叠加的效果，裂开了

- 对圆弧拓展
增加了输入参数动画时间（T）和迭代次数（gen）来控制形状和颜色

function setup() {createCanvas(400, 400);
}function draw() {background(220);let T=millis();DArc0424(mouseX,mouseY,10+mouseX/50,3+mouseY/10,T);
}function DArc0424(x,y,R,A,T)//半径R，圈数A,时间T
{for(var i=A;i>0;i--){fill(10+255*sin(T/(80*i)),10+255*sin(T/(75*i)),10+255*sin(T/(150*i)));arc(x, y,i*R,i*R,i*PI*0.9,(i+1)*PI,PIE) }}

- circle
小圆组成大圆，通过参数 x y 控制位置，n控制数量
同时用动画时间T控制渐变的颜色

function setup() {createCanvas(400, 400);
}function draw() {background(220);let T=millis();circle0424(mouseX,mouseY,50,mouseY/20,T)
}
function circle0424(x,y,size,N,T)//位置、尺寸、角度、数目
{for(var i=1;i<=N;i++){fill(abs(sin(T/1000))*255*i/N);circle(x+size*sin(2*i*PI/N),y+size*cos(2*i*PI/N),size/2)}
}

- 对ellipse拓展
和对圆的拓展类似，为了增加趣味性，填色时用的是rgb，可以观察到周期性很好的体现在颜色的变换中。参数：坐标（x，y），轴比（rate）
大小（size），绘图密度（N），迭代次数（M）

function setup() {createCanvas(400, 400);
}function draw() {background(220);ellipse0424(mouseX,mouseY,2,10,mouseY/10,1+mouseX/50)
}function ellipse0424(x,y,rate,size,N,M)//位置，长宽比，尺寸，数量
{circle(x,y,size);translate(x,y);  for(var i=1;i<=N;i++){ fill(255*i/N,255*(N-i)/N,255*abs(sin(3*PI/i)));for(var k=1;k<=M;k++){rotate(2*PI/N);ellipse(x/size/k*2,y/size/k*2,size/k,rate*size/k);}}
}

- point 拓展
本身就比较简单，所以给点增加了变色和形状的变化以及随机生成的效果

function setup() {createCanvas(400, 400);
}function draw() {background(220);T=millis();for(var i=1;i<=50;i++){point0424(200+200-random(400),200+200-random(400),10,30,T);}}function point0424(x,y,sizeMin,sizeMax,T)
{stroke(T/4%255,T/8%255,T/16%255); strokeWeight(sizeMin+abs(sin(T/2000)*(sizeMax-sizeMin))); point(x,y);
}

- quad 本事就是一个需要很多参数的函数，需要用户输入四个点的坐标，就很不合理
为了方便绘制，给他增加了一个中心的概念，通过中心来绘图会清晰一点。因为自己输入的图形往往不规则，所以给他增加了周期性

function setup() {createCanvas(400, 400);
}function draw() {background(220);quad0424(mouseX,mouseY,10,20,30,20,50,60,50,80,mouseY/10);
}function quad0424(x,y,a1,a2,b1,b2,c1,c2,d1,d2,N)//中心位置，四点位置，数目
{translate(x,y);for(var i=1;i<=N;i++){fill(100+155*(N-i)/N)rotate(2*PI/N)translate(i*3,2);quad(a1,a2,b1,b2,c1,c2,d1,d2);}}

- square 每次看到正方形就想起来分型系统，不过这个js好像不支持递归调用，搞半天没搞好
两层拓展；位置、尺寸、最大灰度值、动画时间T五个参数；颜色会慢慢变亮，灵感是觉得这个像沙漏一样是个计数器。

function setup() {createCanvas(400, 400);
}function draw() {translate(mouseX,mouseY);background(220);rotate(millis()/1000);SquarePluse0424(0,0,25+25*abs(sin(millis()/1000)),5,255+millis()/100);
}function Square0424(x,y,size,C)//位置，尺寸，最大灰度
{fill(C/2)square(x-size,y-size,2*size)fill(C)square(x-size-size/2,y-size-size/2,size);square(x+size-size/2,y-size-size/2,size);square(x-size-size/2,y+size-size/2,size);square(x+size-size/2,y+size-size/2,size);}function SquarePluse0424(x,y,size,gen,C)//位置、尺寸、迭代次数、最大灰度
{while(gen>=0){gen--;x=x/1.5;y=y/1.5;size=size/1.5;C=C/1.5;Square0424(x+size,y+size,size,C);Square0424(x+size,y-size,size,C);Square0424(x-size,y+size,size,C);Square0424(x-size,y-size,size,C);size++;}
}

- triangle 拓展
将原来的画三角形修改成了画正三角形，用户只需要输入两个参数就能控制生成，增加了灰度控制

function setup() {createCanvas(400, 400);
}function draw() {background(220);translate(mouseX,mouseY);rotate(millis()/500);dr();
}function dr()
{for(var j=1;j<=10;j++){SixAngleStar0424(100-random(20),100-random(20),20+random(10),4+mouseY/50+mouseX/50,225)}}
function triangle0424(x,y,size,C)//正三角形，位置，半径，灰度
{fill(C);triangle(x,y-size,x+size*cos(PI/6),y+size/2,x-size*cos(PI/6),y+size/2);
}function SixAngleStar0424(x,y,size,N,C)
{for(var i=1;i<=N;i++){rotate(2*PI/N);triangle0424(x,y,size,C*((N-i)/N)); }}

以上就是对p5.js中2D绘图的基本拓展和简单使用，还蛮好玩的。
谢谢学姐这么好看还看完了我的作业！

js项目链接在这里：快来康康吧

对P5基本二维图像绘制库的交互性扩展相关推荐

OPENGL学习（三）GLUT二维图像绘制
文章目录 1.Opengl的Hello world 2.初始化(调整试图) 3.增加Reshape函数 3.事件 4.动画 1.Opengl的Hello world 最基础的程序,画了个三角形,请确保 ...
Matlab数据可视化方法与模板(2)——二维图像绘制
当下越来越多研究人员选择运用Matlab对数据进行建模处理,并进行相应的数据可视化操作.本系列对Matlab绘图与可视化方法进行了总结,并给出了相应的模板供各位参考使用,希望对各位的研究与工作有所帮助
【Python】函数图像绘制：二维图像、三维图像、散点图、心形图
[Python]函数图像绘制:二维图像.三维图像.散点图.心形图所有需要用的包二维图像三维图像散点图绘制心形图绘制所有需要用的包 from mpl_toolkits.mplot3d imp ...
python 二维强度图_荐 python数据分析matplotlib库使用之二维图形绘制
本篇内容会在后期不定时更新什么是matplotlib matplotlib是最流行的python底层绘图库,主要做数据可视化图表. 为什么要学习matplotlib 能将数据进行可视化,更直观的呈现 ...
python怎么画简单图片-Python绘制简易的二维图像
大家好,我是飞向天空的牛. 最近学习了一下用Python绘制简易的二维图像,代码如下图所示:绘图代码文本如下: import matplotlib.pyplot as plt import nump ...
【MATLAB】二维绘图 ( 绘制二维图像 | 设置图像样式 )
文章目录一.绘制二维图像 1.二维绘图步骤 2.二维绘图步修饰 3.代码示例二.设置图像参数 1.图像参数 2.代码示例一.绘制二维图像 1.二维绘图步骤绘图前需要给定 xxx 轴 , yyy ...
python画车辆轨迹图_如何利用 Python 绘制酷炫的车辆轨迹 — 速度时空图？三维数据用二维图像呈现...
说明:本文系交通攻城狮原创文章,如需转载请私信联系,侵权必究. 2020,第 30 期,编程笔记建议直接阅读精编版:如何利用 Python 绘制酷炫的车辆轨迹 - 速度时空图?三维数据用二维图像呈 ...
python绘制曲线y=2x+5_Python绘制简易的二维图像
大家好,我是飞向天空的牛. 最近学习了一下用Python绘制简易的二维图像,代码如下图所示:绘图代码文本如下: import matplotlib.pyplot as plt import nump ...
[2021]Linux下C语言qrencode二维码生成库的基本使用和ARM开发板移植
文章目录一.前言二.准备所用到的环境以及版本信息 1.Ubuntu和内核版本 2.gcc和g++版本 3.交叉编译gcc和g++版本 4.开发板信息三.开发环境编译&安装qrencode ...

对P5基本二维图像绘制库的交互性扩展

对P5基本二维图像绘制库的交互性扩展

对P5基本二维图像绘制库的交互性扩展相关推荐

最新文章

热门文章