基于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 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
vue组件实现进度条效果
Jun 06 Javascript
小程序实现发表评论功能
Jul 06 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
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中获取时间的下一周下个月的方法
2014/03/18 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
JS hashMap实例详解
2016/05/26 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
python常见排序算法基础教程
2017/04/13 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
python os用法总结
2018/06/08 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
军训自我鉴定100字
2014/02/13 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
亲戚关系证明
2015/06/24 职场文书
六年级语文教学反思
2016/03/03 职场文书
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers