基于JavaScript绘制动态花束的示例代码
更新时间:2022年06月24日 08:47:58 作者:肥学
p5.js 是一个JavaScript的函数库,它在制作之初就和Processing有同样的目标。本文将利用p5.js 制作出一束动态花束,感兴趣的可以尝试一下
演示
技术栈
这次用到了一个名叫p5.js的框架:
p5.js 是一个JavaScript的函数库,它在制作之初就和Processing有同样的目标。就是让艺术家,设计师,教育工作者和编程初学者能够很容易,很轻松地学习和使用程序设计。并且它也能给现在的网页带来一些新的东西
它的结构:
//初始化,只运行一次 function setup () {} //绘制图形,每一帧都读取 function draw() {}
一个小案例
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绘制动态花束的示例代码的详细内容,更多关于JavaScript绘制花束的资料请关注脚本之家其它相关文章!
相关文章
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
这篇文章主要介绍了表单input项使用label,同时引用Bootstrap库,导致input点击效果区增大问题的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-10-10BootStrap中Datepicker控件带中文的js文件
bootstrap-datepicker 是一个非常优秀的时间选择插件。这篇文章主要介绍了bootstrap-datepicker带中文的js文件的相关资料,需要的朋友可以参考下2016-08-08
最新评论