Merge pull request #717 from nature-of-code/notion-update-docs

[Notion] Update docs

content/examples/04_particles/4_1_single_particle/sketch.js

@@ -5,7 +5,7 @@
 let particle;
 
 function setup() {
-  createCanvas(640, 240);
+  createCanvas(640,240);
   particle = new Particle(width / 2, 10);
 }
 

content/examples/04_particles/4_2_array_particles/sketch.js

@@ -21,5 +21,4 @@ function draw() {
       particles.splice(i, 1);
     }
   }
-}
-
+}

content/examples/04_particles/4_3_particle_emitter/sketch.js

@@ -5,7 +5,7 @@
 let emitter;
 
 function setup() {
-  createCanvas(640, 240);
+  createCanvas(640,240);
   emitter = new Emitter(width / 2, 50);
 }
 

content/examples/04_particles/4_6_particle_system_forces/sketch.js

@@ -5,17 +5,21 @@
 let emitter;
 
 function setup() {
-  createCanvas(640, 240);
+  createCanvas(1280, 480);
   emitter = new Emitter(width / 2, 50);
 }
 
 function draw() {
-  background(255);
+  background(255,30);
 
   // Apply gravity force to all Particles
   let gravity = createVector(0, 0.1);
   emitter.applyForce(gravity);
 
   emitter.addParticle();
   emitter.run();
+}
+
+function mousePressed(){
+  save('screenshot.png')
 }

content/examples/04_particles/example_4_7_particle_system_with_repeller/sketch.js

@@ -5,9 +5,9 @@ let emitter;
 let repeller;
 
 function setup() {
-  createCanvas(640, 240);
-  emitter = new Emitter(width / 2, 20);
-  repeller = new Repeller(width / 2, 200);
+  createCanvas(640 , 240);
+  emitter = new Emitter(width / 2, 60);
+  repeller = new Repeller(width / 2, 250);
 }
 
 function draw() {
@@ -21,4 +21,4 @@ function draw() {
   emitter.run();
 
   repeller.show();
-}
+}

content/xx_1_creature_design.html

@@ -3,7 +3,7 @@ <h1 id="appendix-creature-design">Appendix: Creature Design</h1>
 <p><em>This guide is by Zannah Marsh, who created all the illustrations you see in this book.</em></p>
 <p>If you aren’t sure how to start the creature design task for your Ecosystem Project, or if the thought of populating a multi-creature ecosystem feels daunting, don’t worry! You can start developing creatures by using a few visual building blocks, like basic shapes and lines, and reuse them for various results. This design task is similar to programming by reusing and repurposing code.</p>
 <p>Though p5.js draws shapes and lines easily, I recommend using paper and pencil to sketch out designs. Working directly on paper allows you to focus on your design and to quickly evaluate and compare iterations. You won’t need to switch back and forth between thinking visually and typing code. Create your creature on paper first, then replicate it in code!</p>
-<p>The cartoonists Greg Stump and David Lasky suggest that nearly everything can be drawn with just nine Ingredients; the first six are considered the basics, and the last three are extras:</p>
+<p>The cartoonists Greg Stump and David Lasky suggest that nearly everything can be drawn with just nine ingredients; the first six are considered the basics, and the last three are extras:</p>
 <ul>
   <li>Square, circle, and triangle</li>
   <li>Rectangle, stretched oval, and tall triangle</li>
@@ -14,7 +14,7 @@ <h1 id="appendix-creature-design">Appendix: Creature Design</h1>
   <img src="images/xx_1_creature_design/xx_1_creature_design_1.png" alt="Figure A.1: Starting with nine ingredients for your drawing">
   <figcaption>Figure A.1: Starting with nine ingredients for your drawing</figcaption>
 </figure>
-<p>Now you can start putting these visual elements together to create a creature. Your creature will live in the imaginary space of the p5 canvas, so you don’t need to make a “real” creature; you can invent something totally new!</p>
+<p>Now you can start putting these visual elements together to create a creature. Your creature will live in the imaginary space of the p5.js canvas, so you don’t need to make a “real” creature; you can invent something totally new!</p>
 <p>Here’s a design scheme, familiar to residents of Planet Earth:</p>
 <ul>
   <li>A body</li>
@@ -33,7 +33,7 @@ <h1 id="appendix-creature-design">Appendix: Creature Design</h1>
   <figcaption>Figure A.3: Adding details to indicate orientation</figcaption>
 </figure>
 <p>Do we love these drawings? Are they perfect? Well, maybe not. But <em>don’t</em> erase your work, even if you don’t like it. You’ll need all your drawings as data points to reference as you iterate on your character. Think of creature design as the process of arranging visual elements and observing how they make you feel—how you respond to them and what they suggest to you.</p>
-<p>You’ll likely start with very simple creatures. Then, as you add to your ecosystem, you’ll implement behaviors and interactions. Modifying your creatures’ appearances can help visually organize and emphasize these behaviors and interactions—and perhaps even inspire them.</p>
+<p>You’ll likely start with very simple creatures. Then, as you add to your ecosystem, you’ll implement behaviors and interactions. Modifying your creatures’ appearances can help you visually organize and emphasize these behaviors and interactions—and perhaps even inspire them.</p>
 <p>Try varying elements such as these, as shown in Figure A.4:</p>
 <ul>
   <li>The size and roundness or narrowness of the body</li>
@@ -47,8 +47,8 @@ <h1 id="appendix-creature-design">Appendix: Creature Design</h1>
 <p>As you sketch, you may discover that the <em>form</em> of your creature suggests a <em>behavior or feeling</em>—one that you can execute in code. Does your creature dart around, creep, or drift slowly? Does it have a huge mouth for gulping big meals or a tiny mouth for nibbles? Does it have massive eyes for finding tasty snacks, as shown in Figure A.5, or for spotting predators in search of snacks? Let your drawings inspire your code and vice versa.</p>
 <p></p>
 <figure>
-  <img src="images/xx_1_creature_design/xx_1_creature_design_5.png" alt="Figure A.5: Matching your creature&#x27;s form to its environment">
-  <figcaption>Figure A.5: Matching your creature's form to its environment</figcaption>
+  <img src="images/xx_1_creature_design/xx_1_creature_design_5.png" alt="Figure A.5: Matching your creature’s form to its environment">
+  <figcaption>Figure A.5: Matching your creature’s form to its environment</figcaption>
 </figure>
 <p></p>
 <p>When you’re ready to build your creatures in code, functions like <code>translate()</code>, <code>rotate()</code>, <code>push()</code>, and <code>pop()</code> are your friends, since all your character features are arranged in relation to one another. Remember that OOP will, of course, save you time and trouble. You’ll be able to reuse and modify patterns quickly.</p>

content/xx_2_image_credits.html

@@ -1,21 +1,21 @@
 <section data-type="page">
 <h1 id="image-credits">Image Credits</h1>
-<p>All emojis in the book were designed by OpenMoji, the open source emoji and icon project, licensed under CC BY-SA 4.0.</p>
-<p>The following credits are for the photos in each chapter.</p>
-<p><strong>0.</strong> <a href="https://www.rand.org/pubs/monograph_reports/MR1418.html.">Photo from </a><a href="https://www.rand.org/pubs/monograph_reports/MR1418.html."><em>A Million Random Digits with 100,000 Normal Deviates</em></a><a href="https://www.rand.org/pubs/monograph_reports/MR1418.html."> (RAND Corporation, 2001)</a>.<strong></strong></p>
-<p><strong>1.</strong> <a href="https://commons.wikimedia.org/wiki/File:Micronesian_navigational_chart.jpg"><em>Marshall Islands Stick Chart</em></a><a href="https://commons.wikimedia.org/wiki/File:Micronesian_navigational_chart.jpg"> by Jim Heaphy, on display at the Berkeley Art Museum and Pacific Film Archive. Licensed under CC BY-SA 3.0</a>.</p>
-<p><strong>2.</strong> <a href="https://calder.org/historical-photos/calder-at-mit-1950/"><em>Calder</em></a><a href="https://calder.org/historical-photos/calder-at-mit-1950/">, </a><a href="https://calder.org/historical-photos/calder-at-mit-1950/">New Gallery, Charles Hayden Memorial Library, Massachusetts Institute of Technology, Cambridge, 1950, by Ezra Stoller</a><a href="https://calder.org/historical-photos/calder-at-mit-1950/">; © Esto</a>.</p>
-<p><strong>3. </strong><a href="https://artvee.com/dl/gala/"><em>Gala</em></a><a href="https://artvee.com/dl/gala/"> by Bridget Riley, 1974; acrylic on canvas, 159.7 by 159.7 cm; © Bridget Riley 2023, all rights reserved</a>.</p>
-<p><strong>4.</strong> <a href="https://commons.wikimedia.org/wiki/File:PositronDiscovery.png">Cloud chamber photograph of a positron passing through a lead plate by Carl D. Anderson, 1932</a>.</p>
-<p><strong>5.</strong> <a href="https://en.m.wikipedia.org/wiki/File:Sixfinger_threadfin_school.jpg">Sixfinger threadfin school circling in a feeding pattern inside a cage off Hawaii from the U.S. National Oceanic and Atmospheric Administration (NOAA) photo library, Fisheries Collection, 2000</a>.</p>
-<p><strong>6.</strong> <a href="https://commons.wikimedia.org/wiki/File:Living_root_bridges,_Nongriat_village,_Meghalaya2.jpg">Double living root bridge in East Khasi by Arshiya Urveeja Bose, 2011. Licensed under </a><a href="https://commons.wikimedia.org/wiki/File:Living_root_bridges,_Nongriat_village,_Meghalaya2.jpg">CC BY 2.0 DEED</a>.</p>
-<p><strong>7.</strong> <a href="https://commons.wikimedia.org/wiki/File:Ewe_kente_stripes,_Ghana.jpg"><em>Ewe Kente Stripes, Ghana</em></a><a href="https://commons.wikimedia.org/wiki/File:Ewe_kente_stripes,_Ghana.jpg"> by ZSM, 2008. Licensed under CC BY-SA 3.0.</a></p>
-<p><strong>7. </strong><a href="https://commons.wikimedia.org/wiki/File:Textile_cone.JPG"><em>Textile Cone</em></a><a href="https://commons.wikimedia.org/wiki/File:Textile_cone.JPG"> by Richard Ling, 2005. A Textile cone snail (Conus textile) at Cod Hole, Great Barrier Reef, Australia. Licensed under CC BY-SA 3.0</a>.</p>
-<p><strong>8.</strong> <a href="https://commons.wikimedia.org/wiki/File:Bangkok-SA5.jpg">Pediment of throne hall Phra Thinang Chakri Maha Prasat with emblem of Chakri dynasty, Grand Palace of Bangkok, Thailand, by Saad Akhtar. Licensed under CC BY-SA 3.0</a>.</p>
-<p><strong>9. </strong><a href="https://commons.wikimedia.org/wiki/File:Bowl_Chaco_Culture_NM_USA.jpg">Chaco Ancestral Pueblo bowl, found at Pueblo Alto, Chaco Canyon, New Mexico, from the 11th–13th centuries, image from the National Park Service</a>.</p>
-<p><strong>10. </strong><a href="https://commons.wikimedia.org/wiki/File:Quipo_in_the_Museo_Machu_Picchu,_Casa_Concha,_Cusco.jpg">Quipu in the Museo Machu Picchu, Casa Concha, Cusco, by Pi3.124. Licensed under CC BY-SA 4.0</a>.</p>
-<p><strong>10.</strong> <a href="https://commons.wikimedia.org/wiki/File:MnistExamplesModified.png">Example of MNIST dataset numbers by Suvanjanprasai, 2023. Licensed under CC BY-SA 4.0</a>.</p>
-<p><strong>11. </strong><a href="https://nypl.getarchive.net/media/the-star-nose-mole-end-of-the-nose-magnified-05cbe6"><em>The Star-Nose Mole</em></a><a href="https://nypl.getarchive.net/media/the-star-nose-mole-end-of-the-nose-magnified-05cbe6">, c. 1826–1828, photo from New York Public Library</a>.</p>
+<p>All emojis in the book are from OpenMoji, the open source emoji and icon project, and licensed under CC BY-SA 4.0.</p>
+<p><strong>Chapter 0:</strong> Pages 314–315 from <em>A Million Random Digits with 100,000 Normal Deviates</em>, RAND Corporation, MR-1418-RC, 2001. As of October 17, 2023: <a href="https://www.rand.org/pubs/monograph_reports/MR1418.html"><em>https://www.rand.org/pubs/monograph_reports/MR1418.html</em></a>.</p>
+<p><strong>Chapter 1:</strong> Courtesy of Jim Heaphy, used under CC BY-SA 3.0. <a href="https://commons.wikimedia.org/wiki/File:Micronesian_navigational_chart.jpg"><em>https://commons.wikimedia.org/wiki/File:Micronesian_navigational_chart.jpg</em></a>.</p>
+<p><strong>Chapter 2:</strong> © Ezra Stoller/Esto, used with permission.</p>
+<p><strong>Chapter 3:</strong> © Bridget Riley 2023, all rights reserved.</p>
+<p><strong>Chapter 4:</strong> Courtesy of Carl D. Anderson, public domain. <a href="https://commons.wikimedia.org/wiki/File:PositronDiscovery.png"><em>https://commons.wikimedia.org/wiki/File:PositronDiscovery.png</em></a>.</p>
+<p><strong>Chapter 5:</strong> Courtesy of the US National Oceanic and Atmospheric Administration photo library, public domain. <a href="https://en.m.wikipedia.org/wiki/File:Sixfinger_threadfin_school.jpg"><em>https://en.m.wikipedia.org/wiki/File:Sixfinger_threadfin_school.jpg</em></a>.</p>
+<p><strong>Chapter 6:</strong> Courtesy of Arshiya Urveeja Bose, used under CC BY 2.0. <a href="https://commons.wikimedia.org/wiki/File:Living_root_bridges,_Nongriat_village,_Meghalaya2.jpg"><em>https://commons.wikimedia.org/wiki/File:Living_root_bridges,_Nongriat_village,_Meghalaya2.jpg</em></a>.</p>
+<p><strong>Chapter 7: </strong>Courtesy of ZSM, used under CC BY-SA 3.0. <a href="https://commons.wikimedia.org/wiki/File:Ewe_kente_stripes,_Ghana.jpg#filelinks"><em>https://commons.wikimedia.org/wiki/File:Ewe_kente_stripes,_Ghana.jpg#filelinks</em></a>.</p>
+<p><strong>Chapter 7, Figure 7.18:</strong> Courtesy of Richard Ling, used under CC BY-SA 3.0. <a href="https://commons.wikimedia.org/wiki/File:Textile_cone.JPG"><em>https://commons.wikimedia.org/wiki/File:Textile_cone.JPG</em></a>.</p>
+<p><strong>Chapter 8:</strong> Courtesy of Saad Akhtar, used under CC BY 2.0. <a href="https://commons.wikimedia.org/wiki/File:Bangkok-SA5.jpg">https://commons.wikimedia.org/wiki/File:Bangkok-SA5.jpg</a>.</p>
+<p><strong>Chapter 9:</strong> Courtesy of the National Park Service, public domain. <a href="https://commons.wikimedia.org/wiki/File:Bowl_Chaco_Culture_NM_USA.jpg">https://commons.wikimedia.org/wiki/File:Bowl_Chaco_Culture_NM_USA.jpg</a>.</p>
+<p><strong>Chapter 10:</strong> Courtesy of Pi3.124, used under CC BY-SA 4.0. <a href="https://commons.wikimedia.org/wiki/File:Quipo_in_the_Museo_Machu_Picchu,_Casa_Concha,_Cusco.jpg"><em>https://commons.wikimedia.org/wiki/File:Quipo_in_the_Museo_Machu_Picchu,_Casa_Concha,_Cusco.jpg</em></a>.</p>
+<p><strong>Chapter 10, Figure 10.15:</strong> Courtesy of Suvanjanprasai, used under CC BY-SA 4.0. <a href="https://commons.wikimedia.org/wiki/File:MnistExamplesModified.png">https://commons.wikimedia.org/wiki/File:MnistExamplesModified.png</a>.</p>
+<p><strong>Chapter 11:</strong> Courtesy of the New York Public Library, public domain.</p>
+<p><a href="https://nypl.getarchive.net/media/the-star-nose-mole-end-of-the-nose-magnified-05cbe6"><em>https://nypl.getarchive.net/media/the-star-nose-mole-end-of-the-nose-magnified-05cbe6</em></a>.</p>
 <p></p>
 <p></p>
 <p></p>