Miroirs/noc-book-2
1
0
Fork 0
mirror of https://github.com/nature-of-code/noc-book-2 synced 2024-11-16 07:47:48 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Notion - Update docs

Browse source
This commit is contained in:
shiffman 2024-10-21 23:29:59 +00:00 committed by github-actions[bot]
parent fd17dd8af0
commit 86705b608e
2 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
content/00_randomness.html
View file

@ -157,8 +157,8 @@ function draw() {
<p>Taking this further, I could get rid of <code>floor()</code> and use the <code>random()</code> function’s original floating-point numbers to create a continuous range of possible step lengths from –1 to 1, as shown next.</p>
<pre class="codesplit" data-code-language="javascript"> step() {
//{!2} Any floating-point number from –1 to 1
let xstep = random(–1, 1);
let ystep = random(–1, 1);
let xstep = random(-1, 1);
let ystep = random(-1, 1);
this.x += xstep;
this.y += ystep;
}</pre>
@ -203,7 +203,7 @@ function draw() {
</div>
<div data-type="exercise">
<h3 id="exercise-01">Exercise 0.1</h3>
<p>Create a random walker that has a greater tendency to move down and to the right. (The solution follows in the next section.)</p>
<p>Create a random walker that has a greater tendency to move down and to the right. (A partial solution follows in the next section.)</p>
</div>
<h2 id="probability-and-nonuniform-distributions">Probability and Nonuniform Distributions</h2>
<p>Uniform randomness often isn’t the most thoughtful solution to a design problem—in particular, the kind of problem that involves building an organic or natural-looking simulation. With a few tricks, however, the <code>random()</code> function can instead produce <strong>nonuniform distributions</strong> of random numbers, where some outcomes are more likely than others. This type of distribution can yield more interesting, seemingly natural results.</p>

7
content/04_particles.html
View file

@ -1180,7 +1180,12 @@ class Repeller {
<img src="images/04_particles/04_particles_5.png" alt="Figure 4.8: Two image textures: an all-white circle (left) and a fuzzy circle that fades out toward the edges (right)">
<figcaption>Figure 4.8: Two image textures: an all-white circle (left) and a fuzzy circle that fades out toward the edges (right)</figcaption>
</figure>
<p>Using an image to texture your particles can give you a lot of bang for very little buck in terms of the realism of the visual effect. Before you write any code, however, you have to make your image texture. I recommend using the PNG format, as p5.js will retain the alpha channel (transparency) when drawing the image, which is needed for blending the texture as particles are layered on top of one another. You can create these textures in numerous ways: you can indeed make them programmatically within p5.js (I include an example on the book’s website), but you can also use other open source or commercial graphics editing tools.</p>
<div class="pdf-only">
<p>Using an image to texture your particles can give you a lot of bang for very little buck in terms of the realism of the visual effect. Before you write any code, however, you have to make your image texture. I recommend using the PNG format, as p5.js will retain the alpha channel (transparency) when drawing the image, which is needed for blending the texture as particles are layered on top of one another. You can create these textures in numerous ways: you can indeed make them programmatically within p5.js (I include an example on the book’s website), but you can also use other open source or commercial graphics editing tools.</p>
</div>
<div class="web-only">
<p>Using an image to texture your particles can give you a lot of bang for very little buck in terms of the realism of the visual effect. Before you write any code, however, you have to make your image texture. I recommend using the PNG format, as p5.js will retain the alpha channel (transparency) when drawing the image, which is needed for blending the texture as particles are layered on top of one another. You can create these textures in numerous ways: you can indeed make them programmatically within p5.js (<a href="https://editor.p5js.org/natureofcode/sketches/LOUl3c76k">here’s one example!</a>), but you can also use other open source or commercial graphics editing tools.</p>
</div>
<p>Once you’ve made a PNG and deposited it in your sketch’s <em>data</em> folder, you need only a few extra lines of code.</p>
<div data-type="example">
<h3 id="example-48-an-image-texture-particle-system">Example 4.8: An Image-Texture Particle System</h3>