Images (from left): Generative Splines Hyper Glu; Arc Bicycle Delft University of Technology (2016); The Sherwin Series Joelle Dietrick (2011); Heydar Aliyev Centre Zaha Hadid (2012)
This assignment asks you to create a web page that can generate new iterations of itself based on some changeable data source. This could be input from the user, other available data (e.g. time, location, etc.), or pure randomness.
Nearly every software or dynamic website generates their interfaces using data. Even a boring shopping website uses cookies to identify and customize pages for users (regardless who stands to benefit).
This process is evident in many other "design" contexts. For example, Generative Design is a related cultural trend that, similar to data-driven websites, uses coded rules and algorithms to create (and recreate) concepts and forms for architecture, objects, behaviors, animations, games, and much more. This diagram from, Generative Design: Visualize, Program, and Create with JavaScript in p5.js by Groß, Bohnacker, and Laub, shows how these processes can create new iterations, using varying degrees of input from the creator, to ideate or solve specific design or aesthetic problems. Regardless of your approach, your project should mimic or somehow find inspiration in these processes, to reflect your own thinking on the subject.
Learning Objectives
Students who complete this assignment will be able to:
- Describe how to use data to create generative processes in software, design, architecture, etc.
- Compare outcomes of generative processes across disciplines.
- Write pseudo code and build a prototype to plan and develop a web application.
- Use HTML, CSS, Bootstrap, and JS build final application.
- Design an identity for the project that communicates a theme or concept
Preparation
Complete the following to prepare for this assignment. See Resources for additional information as needed.
- Codecademy: JS 3-1 Functions (1-7)
- Codecademy: JS 4-1 Scope (1-4)
- Codecademy: JS 5-1 Arrays (1–7)
- Codecademy: JS 6-1 Loops (1–7)
- Javascript.info JS Comparison, Logical operators, Functions, Loops: while and for
Rubric
See Moodle.- 📚 "Off the Grid" (chapter 6) and "Generative Design" (chapter 8) in Critical Web Design
See the Critical Web Design Index for examples tagged with #randomness or #remix, including...
- Chris Baker, Mike Lacher, and Richard Baker Troll the NSA (2013)
- Rafaël Rozendaal Abstract Browsing (2014)
- Colleen Josephson and Kyle Miller endless.horse (2015)
- Mark Sample Two Moji (2018)
- Tero Parviainen How Generative Music Works
- Kevan Davis eBay Feedback Generator (2005)
- 0x72 pixeldudesmaker (example of sprite)
- 📚 Dan Howarth "Generative Design Software Will Give Designers ‘Superpowers’" (2017), video (2:18)
- Eduardo Souza "How Will Generative Design Impact Architecture?" (2020)
- Others from this Random Article Generator
- faker.js and hosted version, and similar projects
- public-apis, apilist.fun, and No Auth APIs - free APIs for software and web development. For example: Cat Facts, Free IP Geolocation API, Random User
- Develop a concept for your project. Consider the above prompt and inspiration.
- Use Figma to create a wireframe and design iterations for your project. Start with desktop design, then create the mobile layout once you have made a few iterations.
- Use Figma to diagram any data transformations or flowcharts as needed. Show the different stages of the user experience or how your app changes depending on the content.
- Fork this repository and clone it to your machine.
- Begin the code portion by writing out the pseudocode for your project. See this activity for practice. Save the pseudocode in a comment in your Javascript.
- Use HTML, CSS, and JS to code your design inside
index.html
- Use Javascript variables, conditional logic, loops, etc. to somehow change the page every time it loads.
- Use images, other media, or code libraries as needed.
- Save and refresh your work in the browser often to see your changes.
- Commit changes regularly.
- Confirm valid HTML and CSS (?)
- When finished, push, publish, and post all deliverables to Moodle per documentation in the Assignments.
Past examples
- 2023
- 2021
- Annelise Road Trip
- Drew Probability Football
- Erina Ominous Fortune Cookies
- Emma Card Game Generator
- Meng Clothes Generator
- Maurillio Math Quiz
- Henry Random Dessert Selector
- Caroline SPOOK-IFY
- Anh Ghibli Movie Generator
- Past
- Amy [Game Boy]
- Jose [Washing Machine]
- 2009
- Jose Band Name Generator
- 2008
- Rachel Rossin [Random Paint Splatter]
- 2007
- Alexander [String Art Generator]
†not currently live