p5通过彩色点线绘制爱心动画效果代码
代码语言:html
所属分类:动画
代码描述:p5通过彩色点线绘制爱心动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { margin: 0; padding: 0; } canvas { display: block; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script> <script> let heart = [], particles = [], a = 0, cNoise, rNoise, colorNoise = []; const colors = ["#ffbe0b", "#fb5607", "#ff006e", "#8338ec", "#3a86ff"]; const chunk = (arr, size) => Array.from({ length: Math.ceil(arr.length / size) }, (v, i) => arr.slice(i * size, i * size + size) ); class NoiseLoop { constructor(d, min, max) { this.d = d; this.min = min; this.max = max; this.cx = random(320); this.cy = random(320); } value(a) { let xoff = map(cos(a), -1, 1, this.cx, this.cx + this.d); let yoff = map(sin(a), -1, 1, this.cy, this.cy + this.d); let r = noise(xoff, yoff); return map(r, 0, 1, this.min, this.max); } } class Particle { constructor(x, y, r, c) { this.x = x; this.y = y; this.c = c; this.r = r; this.homeX = x; this.homeY = y; } update() { // mouse let mouseD = dist(this.x, this.y, mouseX-width/2, mouseY-height/2); let mouseA = atan2(this.y - mouseY-height/2, this.x - mouseX-width/2); // home let homeD = dist(this.x, this.y, this.homeX, this.homeY); let homeA = atan2(this.homeY - this.y, this.homeX - this.x); // forces let mouseF = constrain(map(mouseD, 0, 100, 10, 0), 0, 10); let homeF = map(homeD, 0, 100, 0, 10); let vx = cos(mouseA) * mouseF; vx += cos(homeA) * homeF; let vy = sin(mouseA) * mouseF; vy += sin(homeA) * homeF; this.x += vx; this.y += vy; } draw() { fill(this.c); ellipse(this.x, this.y, this.r); } } function setup() { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0