You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/tutorials/en/conditionals-and-interactivity.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -545,7 +545,7 @@ Run the sketch and move the sun below the horizon. See how the sky changes as th
545
545
546
546
Next, you will make a [sunrise animation](https://editor.p5js.org/[email protected]/sketches/9lz2aqfTO) where the sun moves on its own, and creates a gradual change in the color of the sky.
547
547
548
-
<Videosrc="/public/videos/tutorials/sunrise.mp4"alt="A sun rises in a red-orange sky behind a mountain range." />
548
+
<Videosrc="/videos/tutorials/sunrise.mp4"alt="A sun rises in a red-orange sky behind a mountain range." />
549
549
550
550
551
551
#### Step One: Declare and initialize variables for sun location and background color
Copy file name to clipboardExpand all lines: src/content/tutorials/en/how-to-optimize-your-sketches.mdx
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -44,7 +44,7 @@ This framework is useful for all code improvement and is a standard approach in
44
44
45
45
For a blog post I was writing, I wanted to create a simulation of 1,000 particles bouncing around the canvas. I went to the trouble of programming accurate laws of physics that determine the motion of each particle. As I ran the sketch with an increasing number of particles, the particles moved frustratingly slowly.
46
46
47
-
<Videosrc="/public/videos/tutorials/slow-no-fr.mp4"alt="A 2D animation of particles bouncing on the canvas." />
47
+
<Videosrc="/videos/tutorials/slow-no-fr.mp4"alt="A 2D animation of particles bouncing on the canvas." />
48
48
49
49
The problem is that the animation runs too slowly. I wanted to speed up the simulation to improve the visual experience for the viewer. This guide is designed to help you address any situation where you want your code to run more quickly. We will use my example to illustrate the steps involved. If you like, you can view the final blog post: [Scintillating Simulations](https://gbenedis.medium.com/computing-stories-scintillating-simulations-4dad3c480cd4).
50
50
@@ -89,7 +89,7 @@ If you don’t specify the frame rate in p5.js, by default, it attempts to reach
89
89
90
90
Below, I show the animation with the frame rate displayed. Displaying it will make it easier to see the impact of changes we make.
91
91
92
-
<Videosrc="/public/videos/tutorials/slow-w-fr.mp4"alt="Bouncing particles with the frame rate displayed on the canvas that reads at or close to “20”" />
92
+
<Videosrc="/videos/tutorials/slow-w-fr.mp4"alt="Bouncing particles with the frame rate displayed on the canvas that reads at or close to “20”" />
93
93
94
94
In this case, I am trying to improve the performance of my code. The same type of process would apply to improving other aspects of your code’s functionality.
95
95
@@ -152,12 +152,12 @@ Look at the difference it makes! I included the frame rate in the visualization
152
152
<Column>
153
153
#### Before
154
154
155
-
<Videosrc="/public/videos/tutorials/slow-w-fr.mp4"alt="Bouncing particles with the frame rate displayed on the canvas that reads at or close to “20”" />
155
+
<Videosrc="/videos/tutorials/slow-w-fr.mp4"alt="Bouncing particles with the frame rate displayed on the canvas that reads at or close to “20”" />
156
156
</Column>
157
157
<Column>
158
158
#### After
159
159
160
-
<Videosrc="/public/videos/tutorials/fast-w-fr.mp4"alt="Bouncing particles with the frame rate displayed on the canvas that reads at or close to “60”" />
160
+
<Videosrc="/videos/tutorials/fast-w-fr.mp4"alt="Bouncing particles with the frame rate displayed on the canvas that reads at or close to “60”" />
Copy file name to clipboardExpand all lines: src/content/tutorials/en/variables-and-change.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,7 +31,7 @@ import EditableSketch from "../../../components/EditableSketch/index.astro";
31
31
32
32
Follow this tutorial to create an [animated landscape](https://editor.p5js.org/Msqcoding/sketches/WQWNKZppu) as you learn the basics of variables and creating motion in p5.js.
33
33
34
-
<Videosrc="/public/videos/tutorials/landscape.mp4"alt="An animated landscape with a crescent moon and a mountain range in the background, and grass with growing trees in the foreground. Stars randomly appear as clouds move across the canvas." />
34
+
<Videosrc="/videos/tutorials/landscape.mp4"alt="An animated landscape with a crescent moon and a mountain range in the background, and grass with growing trees in the foreground. Stars randomly appear as clouds move across the canvas." />
0 commit comments