The curve is defined by:\text{The curve is defined by:}{x=i=13sin(t10i)y=i=13cos(t10i)\begin{cases} x = \sum_{i=1}^{3} sin(\frac{t}{10i})\\ y = \sum_{i=1}^{3} cos(\frac{t}{10i}) \end{cases}
155 / 1656
// Player Settings
s.start = 153;
s.duration = 378 + 5 * 225;
s.rate = 1;
s.frameRate = 60;
s.webgl = false;
// Setup the P5.js Sketch
let particles = [];
p.setup = () => {
// Convenience functions like `latex` are available.
p.staticText("The curve is defined by:", 16, 16);
// Demonstrate our system of equations
p.latex(
`\\begin{cases}
${x1Latex}\\\\
${y1Latex}
\\end{cases}`,
16, 48
);
// This is where things that don't need to happen each frame should be called.
for(let i = 0;i<width/10;i++){
particles.push(new Particle());
}
};
p.draw = (t, nextT) => {
// WebGL origin is the center.
if (p.isWebGL()) {
p.translate(- p.width / 2, - p.height / 2)
}
// Draw the background each frame
p.background('#0f0f0f');
// Plot our function based on the current time.
plot(t);
// Update our particles
for(let i = 0;i<particles.length;i++) {
// Draw particles
particles[i].drawParticle();
// Move them according to the current time
particles[i].moveParticle(t);
// Draw connecting lines
particles[i].joinParticles(particles.slice(i));
}
};
// Change the color and stroke according to fraction of drawn plot.
const fadingGradient = (fraction, _) => {
p.stroke(
p.lerpColor(
p.color('#277DA1'),
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX