基于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 相关文章推荐
Jquery 获得服务器控件值的方法小结
May 11 Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 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使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
PHP时间和日期函数详解
2015/05/08 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
Python入门篇之函数
2014/10/20 Python
python动态加载包的方法小结
2016/04/18 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python实现图片识别汽车功能
2018/11/30 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
历史系毕业生自荐信
2013/10/28 职场文书
自荐信包含哪些内容
2013/10/30 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
员工入职担保书范文
2014/04/01 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
作弊检讨书范文
2015/05/06 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL