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

[Notion] Update docs

content/xx_1_creature_design.html

@@ -0,0 +1,69 @@
+<section data-type="chapter">
+<h1 id="appendix-creature-design">Appendix: Creature Design</h1>
+<h1 id="appendix-creature-design-1">Appendix: Creature Design</h1>
+<p><em>This guide is by Zannah Marsh, who illustrated all of the figures 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!</p>
+<p>You can start developing creatures using a few visual building blocks, like basic shapes and lines, and reuse them for different results.</p>
+<p>This design task is similar to programming, where code is reused and repurposed.</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 evaluate and compare iterations quickly. You won’t need to switch back and forth between thinking visually and typing code.</p>
+<p>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:”</p>
+<ul>
+  <li>The basics: circle, square, and triangle</li>
+  <li>The basics, stretched: oval, rectangle, and tall triangle</li>
+  <li>Extras: curved line, straight line, and dots</li>
+</ul>
+<p>Begin by drawing these nine ingredients on your paper. Easy, right?</p>
+<figure>
+  <img src="images/xx_1_creature_design/xx_1_creature_design_1.png" alt="">
+  <figcaption></figcaption>
+</figure>
+<p>Now you can start putting these visual elements together to create a creature. Your creatures 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>Here’s a design scheme, familiar to residents of Planet Earth:</p>
+<ul>
+  <li>A body</li>
+  <li>Pairs of fins, wings, arms, or legs</li>
+</ul>
+<p>Any of the six shapes mentioned above can become the body of a character. This extremely basic example qualifies:</p>
+<figure>
+  <img src="images/xx_1_creature_design/xx_1_creature_design_2.png" alt="">
+  <figcaption></figcaption>
+</figure>
+<p>You might want keep it simple, and stop right there! But, before you start recreating your drawing in code, it’s worth considering the perspective or view you’ll have on your ecosystem. Are you looking the scene from above, as if you’re gazing into a pond? Or are you looking from the side, across a meadow or into a forest? (Think of a top-down video game vs a side-scroller).</p>
+<p>The orientation of your creature is important— especially since you’ll be moving it around a scene. In the drawing above, do the two curved lines represent legs, or antennae? Most creatures move in a headfirst direction. In our drawing above, where’s the head? Reuse the shapes and extras to add features—such as a mouth, eyes, nose, ears, tail, antennae, horns, etc— to clarify your creature’s orientation.</p>
+<p></p>
+<figure>
+  <img src="images/xx_1_creature_design/xx_1_creature_design_3.png" alt="">
+  <figcaption></figcaption>
+</figure>
+<p>Do we love these drawings? Are they perfect? Well, maybe not. But it’s important <em>not</em> to erase your work, even if you don’t like it. You’ll need all your drawings as data points you can 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 different different behaviors and interactions. Modifying your creatures’ appearances can help visually organize and emphasize these behaviors and interactions— and perhaps even inspire them.</p>
+<p>Try varying elements, such as:</p>
+<ul>
+  <li>The size and roundness or narrowness of the body.</li>
+  <li>The length, shape or number of the legs or wings, and the angle and distance between them.</li>
+</ul>
+<figure>
+  <img src="images/xx_1_creature_design/xx_1_creature_design_4.png" alt="">
+  <figcaption></figcaption>
+</figure>
+<p>It may help to think of a familiar environment— a meadow, the bottom of a lake, a shady tropical treetops, etc. What features might come in handy in these environments? Big eyes? Big wings? A long narrow body? A round bobbing shape? Camouflage patterning?</p>
+<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 (or for spotting predators in search of snacks)?</p>
+<p>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="">
+  <figcaption></figcaption>
+</figure>
+<p></p>
+<p>When you’re ready to build your creatures in code, functions like translate(), rotate(), push() and pop() are your friends, since all your characters features are arranged in relation to each other. Remember that object oriented programming will, of course, save you time and trouble. You’ll be able to re-use and modify patterns quickly.</p>
+<p>Start simple, and build slowly.</p>
+<p>A few final tips… especially if it’s been a while since you tried to “draw” anything:</p>
+<ul>
+  <li>Like many of us, you may have enjoyed drawing as a kid, but gave up when your skills didn’t match your vision. Think of these drawings as experiments! There’s no “right” or “wrong” when you’re exploring. Lower the stakes by drawing on scrap paper.</li>
+  <li>If you feel tense before you even start, relax by making some scribbles or spirals on paper. This is like stretching before you exercise… artists do warm-ups too!</li>
+  <li>There are great digital drawing tools available, but be wary of easy erasing and endless “undos.” If you obliterate everything you don’t like, you won’t get a chance to compare and learn.</li>
+</ul>
+<p>So, grab a pen and some scrap paper, get drawing, and get ready to meet some creatures!</p>
+<p></p>
+</section>