基于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 相关文章推荐
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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教程 预定义变量
2009/10/23 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
详解PHP归并排序的实现
2016/10/18 PHP
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
学习jQuey中的return false
2015/12/18 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
浅谈js闭包理解
2019/04/01 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
Python使用redis pool的一种单例实现方式
2016/04/16 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
基于Python List的赋值方法
2018/06/23 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
汽车机电维修工求职信
2014/09/30 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
网络销售员岗位职责
2015/04/11 职场文书
水浒传读书笔记
2015/06/25 职场文书
小学班级口号大全
2015/12/25 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL