p5实现线条交叉动画效果代码
代码语言:html
所属分类:动画
代码描述:p5实现线条交叉动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body {margin:0px; padding:0px; overflow: hidden} </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script> <script> let lines = []; function setup() { canvas = createCanvas(windowWidth, windowHeight); lines.push(new Line(0, 1, 0)); // X-axis: a = 0, b != 0, c = 0 lines.push(new Line(1, 0, 0)); // Y-axis: a != 0, b = 0, c = 0 lines.push(new Line()); lines.push(new Line()); lines.push(new Line()); } function draw() { clear(); background(255, 235, 59); let boundary = {x: -width / 2, y: -height / 2, w: width, h: height}; for (let i = 2; i < lines.length; i ++) { let f = frameCount; let t0 = i + f * 0.00123, t1 = i + f * 0.00234, t2 = i + f * 0.00345, t3 = i + f * 0.00456; lines[i].fromTwoPoints({ x:signedNoise(t0) * 640, y: signedNoise(t1) * 640 }, { x:signedNoise(t2) * 640, y: signedNoise(t3) * 640 }); } translate(width / 2, height / 2); fill(255); stroke(0); for (let i = 0; i < lines.length; i ++) { lines[i].draw(boundary); } for (let i = 0; i < lines.length; i ++) { for (let j = i + 1; j < lines.length; j ++) { let p = lines[i].getIntersectionPoint(lines[j]); if (p) { drawCircleMarker(p, 3); } } } } function signedNoise(x, y, z) { return (noise(x, y, z) - 0.5) * 2; } class Line { constructor(a, b, c) { this.a = a; this.b = b; this.c = c; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0