diff --git a/content/images/xx_1_creature_design/xx_1_creature_design_1.png b/content/images/xx_1_creature_design/xx_1_creature_design_1.png new file mode 100644 index 00000000..6112c4d5 Binary files /dev/null and b/content/images/xx_1_creature_design/xx_1_creature_design_1.png differ diff --git a/content/images/xx_1_creature_design/xx_1_creature_design_2.png b/content/images/xx_1_creature_design/xx_1_creature_design_2.png new file mode 100644 index 00000000..d7cac5bc Binary files /dev/null and b/content/images/xx_1_creature_design/xx_1_creature_design_2.png differ diff --git a/content/images/xx_1_creature_design/xx_1_creature_design_3.png b/content/images/xx_1_creature_design/xx_1_creature_design_3.png new file mode 100644 index 00000000..2b7b1c1a Binary files /dev/null and b/content/images/xx_1_creature_design/xx_1_creature_design_3.png differ diff --git a/content/images/xx_1_creature_design/xx_1_creature_design_4.png b/content/images/xx_1_creature_design/xx_1_creature_design_4.png new file mode 100644 index 00000000..53f7700f Binary files /dev/null and b/content/images/xx_1_creature_design/xx_1_creature_design_4.png differ diff --git a/content/images/xx_1_creature_design/xx_1_creature_design_5.png b/content/images/xx_1_creature_design/xx_1_creature_design_5.png new file mode 100644 index 00000000..74512720 Binary files /dev/null and b/content/images/xx_1_creature_design/xx_1_creature_design_5.png differ diff --git a/content/xx_1_creature_design.html b/content/xx_1_creature_design.html new file mode 100644 index 00000000..edae7d22 --- /dev/null +++ b/content/xx_1_creature_design.html @@ -0,0 +1,69 @@ +
+

Appendix: Creature Design

+

Appendix: Creature Design

+

This guide is by Zannah Marsh, who illustrated all of the figures you see in this book.

+

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 using a few visual building blocks, like basic shapes and lines, and reuse them for different results.

+

This design task is similar to programming, where code is reused and repurposed.

+

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.

+

Create your creature on paper first, then replicate it in code!

+

The cartoonists Greg Stump and David Lasky suggest that nearly everything can be drawn with just “Nine Ingredients:”

+ +

Begin by drawing these nine ingredients on your paper. Easy, right?

+
+ +
+
+

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!

+

Here’s a design scheme, familiar to residents of Planet Earth:

+ +

Any of the six shapes mentioned above can become the body of a character. This extremely basic example qualifies:

+
+ +
+
+

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).

+

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.

+

+
+ +
+
+

Do we love these drawings? Are they perfect? Well, maybe not. But it’s important not 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.

+

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.

+

Try varying elements, such as:

+ +
+ +
+
+

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?

+

As you sketch, you may discover that the form of your creature suggests a behavior or feeling— 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)?

+

Let your drawings inspire your code, and vice versa.

+

+
+ +
+
+

+

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.

+

Start simple, and build slowly.

+

A few final tips… especially if it’s been a while since you tried to “draw” anything:

+ +

So, grab a pen and some scrap paper, get drawing, and get ready to meet some creatures!

+

+
\ No newline at end of file