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

最新推荐文章于 2022-06-24 11:43:07 发布
最新推荐文章于 2022-06-24 11:43:07 发布
阅读量317 收藏 5
点赞数
文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_ush_/article/details/110313608
版权

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;
	}
}

7+1星光芒🗡

- 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++;
    }
}

在这里插入图片描述
j加上一点交互

- 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项目链接在这里：快来康康吧

究极鸽王白嫖客
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
p5.js入门教程之键盘交互
10-18
主要介绍了p5.js入门教程之键盘交互,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
p5.js入门教程之鼠标交互的示例
10-18
主要介绍了p5.js入门教程之鼠标交互的示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于p5.js 2D图像接口的扩展（交互实现）
01-18
本文为大家分享了基于p5.js 2D图像接口的扩展，供大家参考，具体内容如下 一、心跳笔刷 组织结构： 1.纵坐标取一定范围内的随机值，横坐标按规律递增。 基本用法： 1、按住鼠标左键画出一条心跳线，松开鼠标左键，随机心跳线确定 2、按空格键清除画面 let isButtonRight = false; let make = null; let root = null; let makeSize = null; var mx=[],my=[];//记录鼠标位置 let Conce = true; function setup() { root = createDiv(); creat
p5.js新手上路第二关——码绘创作
qq_43348979的博客
11-03 577
ps.js新手上路第二关——代码绘画 实现效果图
【Processing入门】第四章:响应互动
Row Row Row your boat
10-24 2263
mouseX，mouseY void setup() { background(200); size(300,300); smooth(); } void draw() { fill(255,255,0); rect(mouseX,mouseY,50,50); }
p5.js的代码，各种图形的
03-31
里面的JS文件是各种p5.js的代码，粘贴进你的sketch.js文件里面保存，然后打开index.html就能查看使用。
使用p5 js临摹动态图形
weixin_44051776的博客
10-20 552
选取的临摹图片 ** 图片规律 1 背景是由5个不同颜色的长方形组成 2 有4个正方形在整体图形的中线处旋转并只露出一半 3 1号3号正方形是顺时针旋转，而2号4号是逆时针旋转 编写代码 这里需要注意的是后写的图形是会覆盖到先写的图形上的，开始以为没注意这一点所以出现了正方形是全露在外面的情况。 绘制背景： createCanvas(1000,700); background(0); ...
使用p5.js临摹动态图形
12-13
一、临摹 最近正在学习用代码绘图，于是按照下面的动态图形自己临摹了一幅图形 临摹结果 观察发现，整个图案都是由基础的正六边形组成 首先创建一个画布 function setup() { createCanvas(400, 400); } 画六边形的函数为 function polygon(x, y, radius, npoints) {//绘制正多边形函数 let angle = TWO_PI / npoints; beginShape(); for (let a = 0; a < TWO_PI; a += angle) { let sx = x + sin(a) *
p5.js创意绘图(1)动态图形
lepaipai的博客
10-20 1527
利用p5.js临摹一幅动态图形。 原图 分析 看起来像是两个葫芦在转圈，其实每个圆点并没有旋转，只是在以图形中心为原点的射线上来回移动。长瘦葫芦上的圆点移动的周期是短胖葫芦上的圆点移动的周期的两倍，且长瘦葫芦上的圆点的初相位与短胖葫芦上的圆点的初相位相差PI。 因此其实就是每个圆点与图形中心距离按正弦函数随时间发生变化，且每个圆点的初相位与其极坐标下（以图形中心为原点）的角度有关。 (t:时间变...
p5.js 2.0绘制一幅动态图像
bear_Tower的博客
11-24 2868
2.0 p5.js 绘制一幅动态图像1.关于码绘实现动态图像的思考2.明确作品类型3.彩虹猫动画的实现4.手绘和动态的思考5.参考资料 1.关于码绘实现动态图像的思考 上一次我们实现了用静态图形绘画，这次按照老师的要求和进度，我们需要码绘出一幅动态的画。 最初自己完全没有什么好的点子，无从下手，只好祭出百度，在网上找找有没有什么可以参考的例子。 例子还是一抓一大把，大部分给人的感觉都是下面这种。 ...
p5.js实现动态图形临摹
10-16
主要为大家详细介绍了p5.js实现动态图形临摹，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
p5.js临摹动态图形实现方法详解
10-16
主要为大家详细介绍了p5.js临摹动态图形的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
p5.js临摹动态图形的方法
10-16
主要为大家详细介绍了p5.js临摹动态图形的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript开发二维图形绘制接口
08-08
JavaScript开发二维图形绘制接口
p5.js入门教程和基本形状绘制
10-18
本篇文章主要介绍了p5.js入门教程之简介和基本形状绘制，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【JavaScript源代码】基于p5.js 2D图像接口的扩展（交互实现）.docx
12-29
基于p5.js 2D图像接口的扩展（交互实现） 　本文为大家分享了基于p5.js 2D图像接口的扩展，供大家参考，具体内容如下　一、心跳笔刷　组织结构：　1.纵坐标取一定范围内的随机值，横坐标按规律递增。　基本用法：　1...
互动编程习作1——表现随机行为及牛顿运动学
qq_41860654的博客
01-05 184
要求：创作一组编程习作，体现随机行为及牛顿运动学 一、序章——随机游走 二、第一章——向量 三、第二章——力 四、第三章——振荡 五、第四章——粒子系统 一、序章——随机游走 规律：根据鼠标位置的x、y坐标决定随机游走的方向 技术： 概率和非均匀分布 绘制了一个小球使他有60%的概率向着鼠标所在的方向移动。 改变使用random()函数的方式，使它产生“非均匀”分布的随机数。 Perlin噪...
processing 函数translate(mouseX, mouseY)学习
moonlightpeng的博客
06-24 893
processing
对二值化图像进行骨架提取 c++实现
最新发布
06-06
以下是基于OpenCV的C++代码实现对二值化图像进行骨架提取： ```c++ #include using namespace cv; void thinningIteration(Mat& img, int iter) { Mat marker = Mat::zeros(img.size(), CV_8UC1); for (int i ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值