p5.js 相关问题

p5.js是一个JavaScript库，从最初的处理目标开始，为艺术家，设计师，教育工作者和初学者提供编码，并为今天的网络重新解释。

代码：身体 { 宽度：100vw；高度：100vh；显示：柔性； </desc> <question vote="0"> <pre><code>the code: <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <style> body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: rgb(0, 0, 0, .9) } </style> <script> function startAnimation() { const sketch = (p) => { const createParticleSystem = (location) => { const origin = location.copy(); const particles = []; const addParticle = velocity => { const rand = p.random(0, 1); if (rand <= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force => { particles.forEach(particle => { particle.applyForce(force); }); }; const run = () => { particles.forEach((particle, index) => { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) => { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () => { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) => { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () => { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force => { acc.add(force); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () => { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle => { const radius = p.map(angleVelocity, 0, 0.3, 0, 55); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () => { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem => { particleSystem.run(); }); }; const renderParticleSystem = () => { particleSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( goToVector.y - location.y, (goToVector.x - location.x) * -1 ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () => { angleAcc = 0.001; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(240, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; new p5(sketch); } // Animasyonu başlatmak için startAnimation(); </script> </html> </code></pre> <p>朋友们你好，我改变了前支线（通过改变x和y的组合），我尝试将angleAcc设置为负，但门户转向左侧。它不会向右转。如何实现向右旋转的效果？我不知道我们还可以改变什么来解决这个问题。我正在等待您的帮助...<br/> 必须是： <a href="https://portal-right.netlify.app/" rel="nofollow noreferrer">https://portal-right.netlify.app/</a></p> </question> <answer tick="false" vote="0"> <pre><code>const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); </code></pre> </answer> </body></html>

javascript jquery p5.js

回答 0 投票 0

p5.由于像素密度问题p5js

我使用 get() 来存储动画中每个状态的快照，然后使用图像重播这些状态。然而，当我用图像渲染存储的像素时，它们似乎没有相同的

p5.js

回答 1 投票 0

React 渲染两个 p5.js 画布

我正在尝试将 p5.js 与 React 一起使用。由于某种原因，React 不断渲染两个画布。我知道这可以通过关闭 StrictMode 来解决，但我想保留严格模式的好处，同时...

javascript reactjs p5.js

回答 1 投票 0

创建一个可以在主画布或 createGraphics 实例上绘图的函数

所以，我需要一个函数来绘制一些东西，但是根据情况，我可能需要在主画布或 createGraphics 实例上绘制。显然，以下方法有效，但我...