Create a dynamic web page that uses data to change its presentation

^{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.

1. Fork this repository and clone it to your critical-web-design folder on your machine.

1. Develop a concept for your project. Consider the above prompt, as well as Examples of randomness below.
2. Use Figma to create a wireframe and design iterations for your project.
   1. Show the different stages of the user experience or how your app changes depending on the content.
   2. Start with desktop design, then create the mobile layout once you have made a few iterations.
3. Use Figma to diagram any data transformations or flowcharts as needed.

1. 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.
2. Use HTML, CSS, and JS to code your design inside index.html
3. Use Javascript variables, conditional logic, loops, etc. to somehow change the page every time it loads.
4. Use images, other media, or code libraries as needed.

1. Save and refresh your work in the browser often to see your changes.
2. Commit changes regularly.
3. Confirm valid HTML and CSS ^(?)
4. When finished, push, publish, and post your project. Make sure to include a link to your Figma designs in the Moodle post.

• 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
• Dan Kurtz Binky (2017)
• Kevan Davis eBay Feedback Generator (2005)
• Ben Grosser Scaremail
• 0x72 pixeldudesmaker (example of sprite)
• eBay Feedback Generator (2005)
• Hacker Simulator
• itadakimasu.app/
• Tarot-o-bot (2019)
• Hartmut Bohnacker Site Shaker (2018)
• Other Critical Web Design / Radical Software examples tagged with #generative or #remix

• "Generative Design Software Will Give Designers ‘Superpowers’", video (2:18),
• "How Will Generative Design Impact Architecture?"
• and more 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

• codepen.io Random Article Generator
• https://github.com/omundy/learn-javascript/search?q=.random
• Also see, Data Culture: Randomness Activity

• Course references HTML, CSS, and JS