基于p5.js 2D图像接口的扩展(交互实现)


Posted in Javascript onNovember 30, 2020

本文为大家分享了基于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();
 createCanvas(600, 400).parent(root).id('js-canvas')
 background(0);
 makeSize = createVector(40, 40);

}

function draw() {
 if(mouseIsPressed){// 鼠标按下画
 if(mouseButton === LEFT){
 // stroke(random(255), random(255), random(255)); // 线条颜色
 //画心电图 
 if(Conce){ 
 mx[0] = mouseX;
 my[0] = mouseY;
 Conce = false;
 }
 else
 {mx[1] = mouseX;
 my[1] = mouseY; 
 background(0);
 stroke(255);
 strokeWeight(1); // 线条粗细
 line_Heart_0414(mx[0], my[0], mx[1]/2, my[1],30,(mx[1]-mx[0])/5);
//Conce = true;
 } 
 isButtonRight = false;
 }
 }
 
 if(keyIsPressed){// 按下空格键清空画布
 if(keyCode == 32)
 background(0);
 }
}

function mouseReleased(){
 Conce = true;
}
function line_Heart_0414(x0,y0,x1,y1,Distance,res)
{
 var theta = 0;
 var xp = x0; //初始点
 var yp = y0;
 for(var i=1;i<res;i++)
 {  
 var t = i/res;
 var yt = lerp(y0,y1,t);
 //t决定yt是靠近y0还是y1
 var biasY
 if(i%2==0)
 biasY = random(-Distance,0);
 else
 biasY = random(0,Distance);
 
 var x = x0+5;
 var y
 y = yt+biasY; 
 line(xp,yp,x,y);
 x0 =x;
 xp = x;
 yp = y;
 }
}

效果图:

基于p5.js 2D图像接口的扩展(交互实现)

二、生成气泡笔刷

组织结构:

定义了气泡结构函数,含有属性(圆的横纵坐标,透明值,圆的半径,向上平移的单位)
不同气泡的大小、位置、透明值等取随机值,生成一定数量的气泡压进气泡数组里。
绘制数组里的气泡,并靠不停刷新气泡的x值和y值来形成运动的效果
用相同颜色的直线掩盖运动轨迹

基本用法:

鼠标左键绘制气泡

let isButtonRight = false;
let make = null;
let root = null;
let makeSize = null;
var bubbles = [];
var c1, c2;
function setup() {
 root = createDiv();
 createCanvas(600, 400).parent(root).id('js-canvas')
 
 
 makeSize = createVector(40, 40);
}

function draw() {

 if(mouseIsPressed){// 鼠标按下画
 if(mouseButton === LEFT){
 CreateBubbles0414(2);
 isButtonRight = false;
 }
 }
 
 //画气泡
 //创建一定数量的气泡
 c1 = color(60, 195, 255, 1);
 c2 = color(0, 100, 200, 10);
 colorMode(RGB, 255, 255, 255, 1);
 //从y=0到y=h开始画线,构成背景面
 for (var i = 0; i <= 400; i++) {
 line(0, i, 600, i);
 }
 BubblesRise_0414();
}


//设置气泡结构函数
function Bubble_0414(xloc, yloc, zloc, rise, rad) {
 this.xloc = xloc; //横坐标
 this.yloc = yloc; //纵坐标
 this.zloc = zloc; //透明值
 this.rad = rad; //半径
 this.rise = rise; //向上平移的单位
}
function CreateBubbles0414(count) {
 for (i = 0; i < count; i++) {
 var x = mouseX;
 var y = mouseY;
 var z = random(0.3, 0.7);
 //map从一个范围内映射一个数字去另一个范围
 var r = map(z, 0.3, 0.7, 7, 25);
 var rise = map(z, 0.3, 0.7, 0.7, 1.7);
 var b = new Bubble_0414(x, y, z, rise, r);
 bubbles.push(b);
 }
}

function BubblesRise_0414() {
 //绘制气泡
 var c = lerpColor(c1, c2,0.5);//插值混合两个颜色,最后的amt参数是倾向值
 stroke(c);
 for (i = 0; i < bubbles.length; i++) {
 var x = bubbles[i].xloc;
 var y = bubbles[i].yloc;
 var z = bubbles[i].zloc;
 var r = bubbles[i].rad;
 fill(255, 255, 255, z);
 ellipse(x, y, r, r);
 }
 //设置气泡运动轨迹
 for (i = 0; i < bubbles.length; i++) {
 var x = bubbles[i].rise; 
 bubbles[i].yloc -= x;
 //想要各自的摆动频率不一样,借助他们互不相同的透明值
 //结合map,限定了气泡的摇摆范围
 var zmin = bubbles[i].zloc* -2.0;
 var zmax = bubbles[i].zloc * 2.0;
 //产生cos函数路径
 var slowy = bubbles[i].yloc* 0.08;
 //映射x坐标的移动位置是符合cos函数的
 bubbles[i].xloc += map(cos(slowy), -1, 1, zmin, zmax)
 }
}

效果:

基于p5.js 2D图像接口的扩展(交互实现)

三、DNA观摩

组织结构:

需要呈现运动的效果,除了不同x坐标的y值取sin的值外,还需要相同x坐标自己的y值符合sin模型的变化。为了让效果更明显,在顶点处又添加了圆。

基本用法:

鼠标上下左右移动观察双螺旋结构的基因图

var start = 0,
 inc = 0.01; //直线间呈现的跨度
var canvasWidth = 300,
 canvasHeight = canvasWidth;
var lineInterval = 15; //线条之间的距离
function setup() {
 root = createDiv();
 createCanvas(canvasWidth, canvasHeight).parent(root).id('js-canvas')
}

function draw() {
 background(0);
 DNA_0414();
}


function DNA_0414()
{ //第一条线的y的长度值
 var xoff = mouseX/100;
 for (var x = 2; x < canvasWidth; x++) {
 //使每条直线的长度都满足sin(),xoff自己变化起始点逐渐增大
 var y1 = sin(xoff) * canvasHeight / 5 + mouseY;
 var y2 = -sin(xoff) * canvasHeight / 5 + mouseY;
 if (x % lineInterval == 0) {
  //绘制直线
  stroke(45,120,255);
  line(x, y1, x, mouseY);
  line(x, y2, x, mouseY);
  //在直线顶点画圆
  noStroke();
  ellipse(x, y1, 5, 5);
  ellipse(x, y2,5,5);  
 }
 xoff += inc;
 }
 // start += inc; //每一条线的长度初始值也
 }

效果

基于p5.js 2D图像接口的扩展(交互实现)

四、桌面男孩

基本用法:鼠标在画板上移动,引起男孩的表情变化

function setup() {
 createCanvas(500, 500);
 rectMode(CENTER);
}
function draw() {
 noStroke();
 background(16,30,70);
 drawFace_0414();
}
function drawFace_0414()
{
 fill(255,221,202);//头
 circle(250,140,160);
 
 circle(175,150,30)//耳朵
 circle(325,150,30)
 
 moveeyes_0414();//移动的眼睛
 
 stroke(0);
 noFill(); //眉毛
 strokeWeight(1); 
 arc(215,130,30,10,PI,0); //绘制弧形
 arc(285,130,30,10,PI,0);
 
 stroke('purple'); // 鼻子
 strokeWeight(5); // 
 point(250,175);
 
 moveMouth_0414();//嘴巴

 fill(0);//留海
 arc(250, 120, 170, 140, PI, 2*PI, HALF_PI);
}
///绘制交互动态嘴巴
function moveMouth_0414(){
var deltax=abs(mouseX-250)/250*20; 
fill(209,51,26);
noStroke();
square(250,200, deltax, 10);
}

///绘制交互动态眼睛,朝向鼠标位置
function moveeyes_0414(){
 var deltax=(mouseX-250)/250*7.5;
 var deltay=(mouseY-150)/350*7.5;
 
 fill(255);  
 circle(215,150,35);
 circle(285,150,35);
 fill(0);
 circle(215+deltax,150+deltay,20);
 circle(285+deltax,150+deltay,20);
}

效果:

基于p5.js 2D图像接口的扩展(交互实现)

五、总结

留下不足的地方:
1、没有用UI界面把几个合成在一起
2、心跳图笔刷不能留存上次的痕迹,但这样也是一种用法
3、气泡图不能刷新清空

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
广告显示判断
Aug 31 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
浅析Node.js查找字符串功能
Sep 03 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
jquery仿微信聊天界面
May 06 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
layui表格分页 记录勾选的实例
Sep 02 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
express异步函数异常捕获示例详解
Nov 30 #Javascript
详解Vue 的异常处理机制
Nov 30 #Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 #Vue.js
JavaScript实现商品评价五星好评
Nov 30 #Javascript
详解React路由传参方法汇总记录
Nov 29 #Javascript
基于jQuery拖拽事件的封装
Nov 29 #jQuery
原生js+canvas实现验证码
Nov 29 #Javascript
You might like
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
对于Python中线程问题的简单讲解
2015/04/03 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
python flask框架实现重定向功能示例
2019/07/02 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
用python对excel查重
2020/12/07 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
超级搞笑检讨书
2014/01/15 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
人事专员岗位职责
2015/02/03 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
sass 常用备忘案例详解
2021/09/15 HTML / CSS