基于JavaScript繪制動(dòng)態(tài)花束的示例代碼
演示

技術(shù)棧
這次用到了一個(gè)名叫p5.js的框架:
p5.js 是一個(gè)JavaScript的函數(shù)庫(kù),它在制作之初就和Processing有同樣的目標(biāo)。就是讓藝術(shù)家,設(shè)計(jì)師,教育工作者和編程初學(xué)者能夠很容易,很輕松地學(xué)習(xí)和使用程序設(shè)計(jì)。并且它也能給現(xiàn)在的網(wǎng)頁(yè)帶來(lái)一些新的東西
它的結(jié)構(gòu):
//初始化,只運(yùn)行一次
function setup () {}
//繪制圖形,每一幀都讀取
function draw() {}
一個(gè)小案例
function setup() {
createCanvas(400, 400);
}
function draw() {
if(mouseIsPressed){
stroke(220);
}else{
stroke(0);
}
line(300,300,mouseX,mouseY);
}
效果是這樣的
源碼
css
* { margin:0; padding:0; }
html, body { width:100%; height:100%; overflow: hidden; background:black;}
canvas { display:block; }
#controls {
z-index: 2;
margin: 20px;
position: absolute;
top: 0; left: 0;
color: white;
}
js
let size = 150;
class Flower{
constructor(s, a1, a2){
let l = pow(random(), 2)*size;
let l2 = random();
this.l2 = l2;
this.x = cos(a1)*(l + l2*size/2);
this.y = sin(a1)*(l + l2*size/2);
this.hue = random();
this.goalX = this.x;
this.goalY = this.y;
this.dx = 10;
this.dy = 10;
this.s = s*(l2*.5 + .5);
this.a = a1;
this.squash = 1 - (l/size)*.8;
this.weights = [];
for (let i = 0; i < 5; i++){
this.weights[i] = random()*.5 + .5;
}
}
update(){
this.x += this.dx;
this.y += this.dy;
this.dx *= .95;
this.dy *= .95;
let mx = (width/2 + this.x) - mouseX;
let my = (height/2 + this.y) - mouseY;
let d = dist(width/2 + this.x, height/2 + this.y, mouseX, mouseY);
let a = atan2(my, mx);
if (d > 1){
this.dx += cos(a)*size/d;
this.dy += sin(a)*size/d;
}
this.x = (this.goalX + this.x)/2;
this.y = (this.goalY + this.y)/2;
}
renderStem(){
pushPop(() => {
noFill();
strokeWeight(this.l2*2 + 1);
stroke(.35, 1, this.l2*.5 + .5);
translate(this.x, size);
let a = PI;
if (this.x <= 0) a += PI/2;
arc(0, 0, this.x*2, (this.y)*2 - size*2, a, a+PI/2);
})
}
render(){
pushPop(() => {
noStroke();
fill(this.l2*.2 + .8);
translate(this.x, this.y);
rotate(this.a);
scale(this.s*this.squash, this.s);
for (let j = 0; j < 2; j++)
for (let i = 0; i < 5; i++){
let a = i*TAU/5;
let s = this.weights[i];
let b = (this.l2*.2 + .8)*(s*.1 + .9)
fill(this.hue, .1*this.l2, b);
if (j == 0){
s += .05;
fill(0);
}
ellipse(cos(a)*.7*s, sin(a)*.7*s, 1);
}
fill(0);
ellipse(0, 0, .7*(this.weights[0] + .05));
fill(.15, 1, 1*(this.l2*.2 + .8));
ellipse(0, 0, .7*this.weights[0]);
})
}
}
function setup (){
pixelDensity(1);
createCanvas();
colorMode(HSB, 1, 1, 1);
windowResized();
}
function init(){
flowers = [];
for (let i = 0; i < 50; i++){
flowers.push(
new Flower(random(20) + 20, random(PI*.8) + PI + PI*.1)
);
}
flowers = flowers.sort((a, b) => a.s - b.s);
}
function draw(){
background(0);
translate(width/2, height/2);
flowers.map(f => f.update());
flowers.map(f => f.renderStem());
flowers.map(f => f.render());
}
function windowResized(){
resizeCanvas(windowWidth, windowHeight);
init();
}
let pushPop = f => {push();f();pop();}以上就是基于JavaScript繪制動(dòng)態(tài)花束的示例代碼的詳細(xì)內(nèi)容,更多關(guān)于JavaScript繪制花束的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
利用js+css+html實(shí)現(xiàn)固定table的列頭不動(dòng)
本文分享了利用js+css+html實(shí)現(xiàn)固定table的列頭不動(dòng)的實(shí)例代碼。小編認(rèn)為具有很好的參考價(jià)值,感興趣的朋友可以看下2016-12-12
原生js實(shí)現(xiàn)秒表計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)秒表計(jì)時(shí)器功能,可以開(kāi)始、暫停、清除,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
學(xué)習(xí)JavaScript設(shè)計(jì)模式之迭代器模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的迭代器模式,對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01
JS實(shí)現(xiàn)移動(dòng)端按首字母檢索城市列表附源碼下載
我們常見(jiàn)的手機(jī)通訊錄或微信通訊錄,聯(lián)系人信息是按字母順序排列的列表,通過(guò)點(diǎn)擊右側(cè)的字母,會(huì)迅速定位檢索到首字母對(duì)應(yīng)的聯(lián)系人。下面通過(guò)本文給大家分享JS實(shí)現(xiàn)移動(dòng)端按首字母檢索城市列表功能,需要的的朋友參考下吧2017-07-07
表單input項(xiàng)使用label同時(shí)引用Bootstrap庫(kù)導(dǎo)致input點(diǎn)擊效果區(qū)增大問(wèn)題
這篇文章主要介紹了表單input項(xiàng)使用label,同時(shí)引用Bootstrap庫(kù),導(dǎo)致input點(diǎn)擊效果區(qū)增大問(wèn)題的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10
BootStrap中Datepicker控件帶中文的js文件
bootstrap-datepicker 是一個(gè)非常優(yōu)秀的時(shí)間選擇插件。這篇文章主要介紹了bootstrap-datepicker帶中文的js文件的相關(guān)資料,需要的朋友可以參考下2016-08-08

