基于p5.js 2D圖像接口的擴(kuò)展（交互實(shí)現(xiàn)）

更新時(shí)間：2020年11月30日 10:39:11 作者：小小曉笑哈哈

這篇文章主要為大家詳細(xì)介紹了基于p5.js 2D圖像接口的擴(kuò)展，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文為大家分享了基于p5.js 2D圖像接口的擴(kuò)展，供大家參考，具體內(nèi)容如下

一、心跳筆刷

組織結(jié)構(gòu)：

1.縱坐標(biāo)取一定范圍內(nèi)的隨機(jī)值，橫坐標(biāo)按規(guī)律遞增。

基本用法：

1、按住鼠標(biāo)左鍵畫出一條心跳線，松開鼠標(biāo)左鍵，隨機(jī)心跳線確定
2、按空格鍵清除畫面

let isButtonRight = false;
let make = null;
let root = null;
let makeSize = null;
 var mx=[],my=[];//記錄鼠標(biāo)位置
 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){// 鼠標(biāo)按下畫
 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); // 線條粗細(xì)
 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; //初始點(diǎn)
 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;
 }
}

效果圖：

二、生成氣泡筆刷

組織結(jié)構(gòu)：

定義了氣泡結(jié)構(gòu)函數(shù)，含有屬性（圓的橫縱坐標(biāo)，透明值，圓的半徑，向上平移的單位）
不同氣泡的大小、位置、透明值等取隨機(jī)值，生成一定數(shù)量的氣泡壓進(jìn)氣泡數(shù)組里。
繪制數(shù)組里的氣泡，并靠不停刷新氣泡的x值和y值來(lái)形成運(yùn)動(dòng)的效果
用相同顏色的直線掩蓋運(yùn)動(dòng)軌跡

基本用法：

鼠標(biāo)左鍵繪制氣泡

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){// 鼠標(biāo)按下畫
 if(mouseButton === LEFT){
 CreateBubbles0414(2);
 isButtonRight = false;
 }
 }
 
 //畫氣泡
 //創(chuàng)建一定數(shù)量的氣泡
 c1 = color(60, 195, 255, 1);
 c2 = color(0, 100, 200, 10);
 colorMode(RGB, 255, 255, 255, 1);
 //從y=0到y(tǒng)=h開始畫線，構(gòu)成背景面
 for (var i = 0; i <= 400; i++) {
 line(0, i, 600, i);
 }
 BubblesRise_0414();
}


//設(shè)置氣泡結(jié)構(gòu)函數(shù)
function Bubble_0414(xloc, yloc, zloc, rise, rad) {
 this.xloc = xloc; //橫坐標(biāo)
 this.yloc = yloc; //縱坐標(biāo)
 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從一個(gè)范圍內(nèi)映射一個(gè)數(shù)字去另一個(gè)范圍
 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);//插值混合兩個(gè)顏色，最后的amt參數(shù)是傾向值
 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);
 }
 //設(shè)置氣泡運(yùn)動(dòng)軌跡
 for (i = 0; i < bubbles.length; i++) {
 var x = bubbles[i].rise; 
 bubbles[i].yloc -= x;
 //想要各自的擺動(dòng)頻率不一樣，借助他們互不相同的透明值
 //結(jié)合map，限定了氣泡的搖擺范圍
 var zmin = bubbles[i].zloc* -2.0;
 var zmax = bubbles[i].zloc * 2.0;
 //產(chǎn)生cos函數(shù)路徑
 var slowy = bubbles[i].yloc* 0.08;
 //映射x坐標(biāo)的移動(dòng)位置是符合cos函數(shù)的
 bubbles[i].xloc += map(cos(slowy), -1, 1, zmin, zmax)
 }
}

效果：

三、DNA觀摩

組織結(jié)構(gòu)：

需要呈現(xiàn)運(yùn)動(dòng)的效果，除了不同x坐標(biāo)的y值取sin的值外，還需要相同x坐標(biāo)自己的y值符合sin模型的變化。為了讓效果更明顯，在頂點(diǎn)處又添加了圓。

基本用法：

鼠標(biāo)上下左右移動(dòng)觀察雙螺旋結(jié)構(gòu)的基因圖

var start = 0,
 inc = 0.01; //直線間呈現(xiàn)的跨度
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的長(zhǎng)度值
 var xoff = mouseX/100;
 for (var x = 2; x < canvasWidth; x++) {
 //使每條直線的長(zhǎng)度都滿足sin()，xoff自己變化起始點(diǎn)逐漸增大
 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);
  //在直線頂點(diǎn)畫圓
  noStroke();
  ellipse(x, y1, 5, 5);
  ellipse(x, y2,5,5);  
 }
 xoff += inc;
 }
 // start += inc; //每一條線的長(zhǎng)度初始值也
 }

效果

四、桌面男孩

基本用法：鼠標(biāo)在畫板上移動(dòng)，引起男孩的表情變化

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();//移動(dòng)的眼睛
 
 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);
}
///繪制交互動(dòng)態(tài)嘴巴
function moveMouth_0414(){
var deltax=abs(mouseX-250)/250*20; 
fill(209,51,26);
noStroke();
square(250,200, deltax, 10);
}

///繪制交互動(dòng)態(tài)眼睛，朝向鼠標(biāo)位置
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);
}

效果：