5379@TOC
对P5基本二维图像绘制库的交互性扩展
因为课程需要接触学习了P5.js ,觉得还蛮有意思的 下面是对它的2D绘图函数的一些简单扩展。
///终于等到你/
无非是用周期性、随机性、对称性带来各种视觉效果
为原来的绘图函数增加参数来增加灵活性
(也可能是减少灵活性从而减少用户使用难度,比如正三角形的绘制不需要三个顶点,只要中点加半径就好啦)
- line 拓展函数1“周期噪声直线”+演示调用(所有的调用演示都在draw函数中)
对线条进行了三次扩展
输入参数为位置(x,y)尺寸(size)还有与动画相关的时间参数(T)
使用噪声生成杂乱的线,噪声的范围是周期性变化的,形成动态的感觉。
再用杂乱的线组成规则的图案。
function setup() {
// put setup code here
createCanvas(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项目链接在这里:快来康康吧