☰ a-generative-web

05.08
class
  1. tool share ... create a tool-share folder in your google drive
  2. final review
links project 2 links project 1 upload project 2 upload
async
    project 2 / project 1 final submission

    thank you all for a very inspiring semester. be sure to upload your project 1 & 2
  • project 1: upload your final website code + a screen recording of the site to the folder below
  • project 2: upload your 50 outputs, final code + a screen recording of the site to the folder below
  • project 2: upload your class tool share to your project folder
    • project 1 upload project 2 upload


past

05.03
class
  1. p2 1-1 review
links project 2 upload
resources github pages fav? namecheap
async
    project 2

    final check list:
  • a sharable website that houses your tool hosted on github pages or any other hosting service
  • a functional and designed user interface
  • your website should have a name and description to help new users understand the project
  • upload your final code + a screen recording of the site to the folder above

    • project 2 upload


04.26

—form art
class
  1. p2 group review
links p5.js canvas save canvas save input styling group signup
resources p5.js save canvas style inputs
media ...
async
    project 2

  • while working on your tools inputs/outputs, begin to prototype your entire site
  • choose the typography and ui element styling
  • title the tool and give it a logo moment with any description needed for the user


  • due: designed website that houses the tool
  • due: refined input/output sketches


04.19

NO CLASS TODAY
no class
  1. email screenshots and screen recordings of your outputs to: [email protected]
links ...
resources ...
media ...
async
    project 2

  • program a 1st draft of a completed prototype for your tool for others to use next class
  • your tool should have an interface that directly interacts with the outputs


  • due: a live prototype of your tool


04.12

—image from theusercondition.computer
class
  1. p2 1-1
links sign-up
resources p5.js drop down p5.js checkbox web native inputs
media ...
async
    project 2

  • start sketching variations on potential outputs for your tool. what can the user edit? how does that effect the output?
  • design the interface and get some inputs working, if not all


  • due: 2-3 sketches for potential outputs
  • due: design interface


04.05

—character creation screen, dark souls
class
  1. p2 assigned
  2. demo: inputs and sliders
links lecture link-share
resources demo src p5.js text input p5.js sliders
media computer agency and behavior
async
    project 2

    interface [ ∞ ]
    create a ‘character’
    a program written in html/css/js that is controlled by using a gui interface
    output: a web tool that creates an almost infinite range of ‘characters’.

  • the create a character page is my favorite part of a videogame. each slider and input gives an infinite amount of possible outcomes.
  • for this project, students will propose a ‘create a character’ tool that outputs varied outcomes of an interpretation of ‘character’.
  • though the prompt heavily suggests a literal interpretation of ‘character’, students are encouraged to think outside of the literal definition by defining what character means to them and how to approach it ( typographic, abstract, animation, 2d, 3d, pfp, identity, etc).
  • similar to the past project, the proposal should include research, concepts and sketches that help narrow in on an idea for the script.
  • this project will rely heavily on the web interface that controls the variables of the ‘character’. students will be designing a fully functional interface as well as the subject character.


  • create a proposal for your took that includes
  • due: references with general idea and concept
  • due: 3 code sketches (screenshotted) for outputs
  • due: general wireframe for inputs / how they affect outputs


03.28

—character creation screen, dark souls
class
  1. p1 final review
links travess smalley links p1 upload how to screen record
async
    project 1

    take this week to make any changes to your project. upload a screen-recording of your site + the 50 screenshots:
    here
  • upload a screen-recording of your site
  • upload 50 images of your script


    • project 2

    to start project 2, i'd like you to research each of the following:
  • a video or series of screenshots of a character selection / design from a video game, or some sort of character creation tool.
  • a link to a web tool that allows you to 'make' something ... typography, palletes, etc.


03.22
class
  1. p1 review 1/1
resources sign-up compress images fav? github pages
async
    project 1

    final check list:
  • a working script that generates at least 100 unique ouputs
  • a website that hosts the script, at least 50 outputs, a project name and description. publish the website using github pages. what would the url be?


03.08

"The visible world is no longer a reality and the unseen world is no longer a dream."


–Marshall McLuhan, Understanding Media: The Extensions of Man
class
  1. demo: layout
  2. p1 review
links drones werner's color pigment tool refigured When You're Here, You're Familiar fields RAUSCH impressions of order sinking ?
resources sign-up demo src img css grid tool
media automation-understanding-media.pdf
async
    project 1

    in the upcoming weeks, you should start to finalize what the script is going to be ... both from a formal / output perspective but also a conceptual one.
  • sketch a simple web page that will host your outputs and live script.
  • this web page should include the title of the project, a brief description, all of your outputs numbered and anything else pertaining to your project. design the tone around your project ... typography, color, interface, etc.
  • produce 50 unique outputs
  • Due: 50 screenshots
  • Due: project web page sketch


03.01

"Very few of the tools and materials—including software and computers—that we work with every day are scrutinized to reveal the ways in which they reproduce, support, or simply permit oppressive social or economic relations."


–heritage gold
class
  1. demo: color variables
  2. project 1 1-1
links cage circle(s) 1-1 sign-up
resources objects random array demo src
media form+code-raes.pdf history-of-internet-art
async
    project 1

  • a script that produces 25 unique outputs
  • Due: 25 screenshots


02.22

"Perlin Noise is an extremely powerful algorithm that is used often in procedural content generation. It is especially useful for games and other visual media such as movies. The man who created it, Ken Perlin, won an academy award for the original implementationn."


–Understanding Perlin Noise
class
  1. demo: noise
  2. project 1 small groups
links jodi cables perlin minecraft ▶ perlin noise in games group sign-up
resources perlin noise p5js noLoop demo src
media Nfts-readymade-joselit.pdf manetas.com
async
    project 1

  • Pick a sketch or 2 that seems to be working and start to define what is random / what is not
  • If the project is becoming overwhelming from a technical perspective, start to think smaller. What can you do to simplify your idea?
  • Due: a prototype with refined generative variables: color, form and functions


02.15

"Lissajous figures: from an analogue system by Wayne B. Hales"


–Herbert Franke, Computer art
class
  1. demo: for loops
  2. project 1 1-1
links 1-1 sign-up cory arcangel
resources for loops demo src
media weaving-klück.pdf source-arcangel.pdf
async
    project 1

  • by now, you should have a general dirction for your project. if not, take the time to decide a good starting point. things don't have to be figured out completely for you to begin.
  • Start small. Code some sketches related to your project.
  • these sketches should be related to your project and should start to utilize random in some way.
  • When you get stuck, write down what’s troubling you and do some research on what you need to overcome. Bring other references / hand sketches for what you can't sketch with code.
  • due: 3 project script sketches ( these should be very seperate exploration )


02.08

"Olia Lialina is well known for her famous browser-art piece, My Boyfriend Came Back From The War (1996). The work comprises multiple black-and-white hyperlinked frames of images and text through which viewers can navigate different narrative pathways. “If something is in the net,” Lialina has said, “it should speak in net language."


–Olia Lialina
class
  1. project 1 lecture
  2. demo: functions, if / else
  3. project 1 presentations
links MY BOYFRIEND CAME BACK FROM THE WAR NET ART ANTHOLOGY Rafaël Rozendaal Casey Reas web art contract processing artblocks.io fxhash.xyz/
resources project-1-lecture.pdf functions conditions demo src
media galloway_jodis-infrastructure.pdf franke-computerArt.pdf
async
    project 1

  • Begin to narrow in on an idea that seems to be resonating with yourself and the class as a whole. bring in a revised proposal with your chosed direction.
  • code 5 different script sketches. These can be incredibly small sketches and don't have to be related to your project.
  • due: 5 script sketches
  • due: revised proposal with chosen direction


02.01

"all control is subject to constraints. Different kinds of constraints define different kinds of control."


–game design, habraken
class
  1. project 1 assigned
  2. demo: random()
  3. assignment 1 exercise
links a-map-is-a-score mutant garden solvency towers jpeg homage pixel rugs tombs
resources e-access error vs code paper.js sketch math.random() paper.js shapes demo src
media game-design-habraken.pdf designing-programmes-gerstner.pdf
async
    assignment 1

  • take photos / scan your the outputs from todays exercise and compile them into pdf.
  • include your original instructions somewhere in the pdf
  • due: create a folder with your name and upload the input/output from assignment 1 to the google drive below
    • upload here

    project 1
    canvas [ *100 ]
    a generative canvas

    This project will start with a draft proposal. It should be a pdf / keynote presentation that includes ...

  • 2-3 examples of work you’ve done in other classes / outside of school that you consider to be your best work.
  • The general direction, concept or idea you’re exploring with a generative script.
  • Cross disciplined references to help illustrate your idea. What are you inspired by?
  • A slide or 2 with your technical plan for the project … what do i need to learn? What do i already know?
  • 3 sketches with distinct visual directions. These can be coded or done by hand / by other computer applications.
  • due: presentation in .pdf / .key format


01.25

"I use chance operations instead of operating according to my likes and dislikes. I use my work to change myself and I accept what the chance operations say. The I Ching says that if you don't accept the chance operations you have no right to use them. Which is very clear, so that's what I do."


–John Cage, 'Conversing with Cage'
class
  1. syllabus
  2. lecture
  3. Student intros
  4. demo [ setting up ]
links a-map-is-a-score studio moniker ▶ water walks ▶ wall drawings ▶ conditional design juerg lehni
resources syllabus lecture.pdf demo src paper.js node http-server
media Grapefruit-ono.pdf Conditional-design-moniker.pdf conversation-with-john-cage.pdf
async
    Assignment 1
    letter [ 8.5x11 ],
    a written prompt for a drawing

  • Generate instructions for a drawing on an 8.5 x 11in piece of paper.
  • The instructions should be titled, dated and printed 20 times.
  • each student should bring a pen and pencil and your instructions should specify which drawing tool to use.
  • each instruction will be drawn by other students in 5 minutes, so students have to design a simple set of instructions that can be clearly followed.
  • the language of the prompt should embrace randomness over replica, enabling the participant to come up with intuitive decisions without confusion.
  • due: 20 printed instruction sheets with your instructions