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

本文主要是介绍基于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还是y1var biasYif(i%2==0)biasY = random(-Distance,0);elsebiasY = random(0,Distance);var x = x0+5;var yy = yt+biasY;  line(xp,yp,x,y);x0 =x;xp = x;yp = y;}
}

效果图：
在这里插入图片描述

二、生成气泡笔刷

组织结构：
定义了气泡结构函数，含有属性（圆的横纵坐标，透明值，圆的半径，向上平移的单位）
不同气泡的大小、位置、透明值等取随机值，生成一定数量的气泡压进气泡数组里。
绘制数组里的气泡，并靠不停刷新气泡的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)}
}

效果：
在这里插入图片描述

三、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;  //每一条线的长度初始值也}

效果
在这里插入图片描述

四、桌面男孩

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

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);
}