P3: Infinite Population
CMPM 147, Program 3
Fall 2019
Overview
In this programming assignment, you’ll create a pseudo-infinite, pseudo-random population of individuals in which every minute detail of each individual is uniquely determined by a user-provided seed number.
Practice goals:
Step 1: Remix our example Glitch project
We've set up some code for you this time, so if you're logged into Glitch you can remix the project by using this link:
Look for this button on the project page:
Step 2: Pick an inspiring image
Browse your personal photo collection, snap a new photo with your phone, or head on over to Google Image Search. Pick something that can serve as a reference point for many of your design choices. There is no required theme.
Step 3: Craft your population generator...
p3_preload()
p3_setup()
p3_getText()
p2_draw()
Placeholder implementations of these functions are provided in my_population.js of the example code. Feel free to modify any aspects of p3_base.js (which builds on p5.js) you need to achieve the desired effect.
Add your artist statement to README.md. You may also optionally modify index.html to customize the look of the page outside of the P5js canvas.
Accessing p5.js functions
The base code for this project used p5.js’s instance mode to allow many different sketches to coexist on the same screen. Access all of the p5.js functions and variables as methods and fields attached to the this object:
ellipse(0, 0, width, height);
this.ellipse(0, 0, this.width, this.height);
Individual size (width/height)
Use these fields in a call to this.createCanvas to draw each individual at the required screen size. You can adjust the value for these in the base code (p3_base.js) if you like.
this.individualWidth, this.individualHeight
Individual seed
Use this field in draw each individual with a unique look. The seed value for the main display is set by the user, and the seeds for additional displays is set by simply counting upwards from the main seed.
this.individualSeed
Individual state data
If you want to store individual-specific data (e.g. to communicate between p3_setup and p3_draw), you must store it in fields on the this object. Using global variables won’t work because they are shared by all individuals on screen.
function p3_setup() {
this.msg = "seed: " + this.individualSeed;
}
function p3_draw() {
this.text(this.msg, 20, 20);
}
p3_getText()
This function is called just after p3_setup() has completed. It is used to access the text message that should be displayed below each individual in your population. To make sure the text you generate is related to the pixels drawn in p3_draw(), you should make the most important design decisions for each individual in p3_setup() rather than re-generating those details every frame in p3_draw().
The Tracery text generation library is a good tool to use in this function.
Step 4: Consider the requirements
To get full credit for this assignment, you'll need to satisfy some requirements:
Now is a good time to make a second, thoughtful choice of your inspiring image. Think through how you'll use it to anchor your design choices.
Step 5: Make a Statement
Edit your README.md file to form an artist’s statement (and edit your Glitch project’s description while you are there too). Starter text:
Overview
This project generates an infinite population of … {What are these things? The variations described below should make sense to apply to whatever these things are.} inspired by {reference to inspiring image}.
Visual Perceptual Variation
Different individuals will have different … {what are three different visual user-visible aspects that vary between individuals?}
Textual Perceptual Variation
Different individuals will have different … {what are the textual user-visible aspects that vary between individuals?}
Coherent Relationship
The relationship between the text and image is … {How are they related?}
Signs of Life
Clicking causes ... while the passage of time results in ...
Step 6: Repeat Steps 1-5 two more times.
Build three meaningfully distinct population generators. The first one will take most of the time while the others will be easier. Your second and third generators might be altered copies of the first, or they might be fresh remixes of the base code.
When you are ready to submit, find the Share button in Glitch and use it to get a link to the "project page" for each generator. It will be a url that starts with https://glitch.com/~...
Scoring Rubric
[3 pts] Perceptual image variation: Different audience-provided seeds lead to meaningful perceptual variations between the visuals for individuals, and the way in which individuals differ is related to what they are. (For example, changing eye styles on a face changes the face’s personality while simply changing line thickness would not.)
[3 pts] Perceptual text variation: Different audience-provided seeds lead to meaningful perceptual variations between the text of individuals, and the way in which individuals differ is related to what they are. (For example, they differ in the attitude they convey rather than merely differing in capitalization or spelling.)
[3 pts] Coherence between Text and image: Each individual has text associated with it, and there is a relationship between the text and the properties of the image.
[3 pts] Signs of Life: Each individual responds to audience clicks and/or the passage of time in an interesting way that keeps them from being static pictures.
Choosing a distinct inspiration image for each population isn’t required, but it is an easy way to guide yourself in a different direction for each generator.
Tips
You don't need to enter all of the text yourself! For source data for generating text, you might want to use a collection of text, such as the Corpora repository: https://github.com/dariusk/corpora
If you want to skip writing the rules by hand, you can instead learn a distribution from a source text. A tool to do this with Tracery is https://serin-delaunay.github.io/cheapmarkovstracedquick/ �Warning: this can result in massively dense Tracery files!
Inspirations
Some generators that you might find inspiring:
Procedural Flags: https://twitter.com/ProceduralFlags�A Strange Voyage: https://twitter.com/str_voyage�Tiny Space Adventure: https://twitter.com/TinyAdv�Out To Sea: https://twitter.com/_OutToSea_�Quadrupet: https://lizzywanders.itch.io/quadrupet�Kirigami Beasts: https://kirigami-beasts.com/kirigami/?599462418�Planetarium: https://managore.itch.io/planetarium�moth generator: https://twitter.com/mothgenerator�Weird Alien Frogs: https://gamejolt.com/games/weird-alien-frogs-frog-generator/60191
Some slightly bigger generators:�One Page Dungeon: https://www.patreon.com/posts/30928418�Mezzacotta: http://www.mezzacotta.net/bestbakes.php�Kozinarium: http://www.cgchannel.com/2018/11/check-out-kozinarium-a-procedural-cg-creature-generator/ �Project Areo: http://www.the-working-man.org/2017/04/procedural-content-creation-faq-project.html�Uncharted Atlas: https://twitter.com/unchartedatlas�X-a-game-of-Y-X: https://yanko.itch.io/x-a-game-of-y-z�Owl Generator: https://procedural-generation.tumblr.com/post/152649218812/owl-generator-russell-fincher-made-this-owl�Perfect Glowing Bodies: https://procedural-generation.tumblr.com/post/115168194403/perfect-glowing-bodies-2015-the-artist-known-as
Inspirations
Alien creatures, Pets, Trees
Trees that are Alien Pets
Dungeon Rooms incorporate text to describe the rooms! Describe a monster! What does the place smell like?
Roguelike Level
Objects Flags, Beverages, Furniture, Perfume Bottles, Bicycles
Towns Drawn with Emoji Who lives here? What kind of pets do they have?
A silhouette of a city, forest, or landscape
A hallway of doors or windows that open on different rooms or spaces
Attach stories or characters to the individual spaceships or gardens
The text is the main thing and the images are illustrations of the text
Fantasy Maps with names of cities and paths of quests and so on
Comic Strips generate characters and dialog, put it in an image. Maybe take inspiration from things like the Bayeux Tapestry construction kit or make clip art from public domain sources like the British Library image collection or the New York Public Library image collection
Character generator generate faces, or complete outfits, and describe something about them. Or concentrate on just part of a character, like facial hair, hats, eyes, or something like that.
Book Covers describe the books plot, or the advertising blurbs quoted on the back
A conversation on the bus? In a conference room? On the street?
Dinosaurs just make some up