基于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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
清空上传控件input file的值
Jul 03 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
vue-router的钩子函数用法实例分析
Oct 26 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
php单件模式结合命令链模式使用说明
2008/09/07 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
php实现读取内存顺序号
2015/03/29 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
Python内置函数之filter map reduce介绍
2014/11/30 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
python简单的三元一次方程求解实例
2020/04/02 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
2014年社区个人工作总结
2014/12/02 职场文书
2014年林业工作总结
2014/12/05 职场文书
社会实践活动总结
2015/02/05 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
防止web项目中的SQL注入
2021/12/06 MySQL