Generative Arts with AI (March 8)

To Do This Week

Work on World-Building Online Exhibition

Read:

Blog Prompt: Read the article by Amy Goodchild and discuss some of the techniques that interests you. In class we will play with both generative visual art as well as generative literature or language art. Both require the use of JavaScript.

Class

Programming Concepts>Javascript Syntax
statements
variables
data types: strings, numbers, booleans, arrays
basic operators and “shortcut” operators 
comparison operators 
arrays
adding javascript to a page (internal and external methods)
javascript commenting 
objects / methods / properties
functions 
for loops
conditional statements
scope

GENERATIVE Art

Generative visual art is a type of digital art made using computer algorithms. Artists use programming tools like Processing or its JavaScript version P5js to set rules. The computer then creates art by following these rules, leading to unique and sometimes changing images or animations. The artist decides the starting point, but the computer’s actions create the final piece. This art can include anything from simple designs to complex, moving visuals. It’s a way for artists to blend coding with art, creating new and unexpected visual works.

GENERATIVE ART: Art created using autonomous processes

AUTONOMOUS PROCESS: A process not under direct human control

  • randomness / pseudorandomness
  • rules, instructions, algorithms, math
  • natural systems

-Amy Goodchild’

The random() function in p5.js generates pseudorandom numbers. It can return a floating-point number between 0 and 1, a number within a specified range, or a random element from an array, depending on how it’s used. It’s useful for introducing unpredictability and variation in sketches.

The noise() function in p5.js generates Perlin noise, which produces smooth, natural-looking sequences of numbers. Unlike random numbers that jump abruptly, values from noise() change gradually and predictably, making them ideal for creating organic patterns, textures, and motions in generative art and animations.

John Conway’s Game of Life (P5js simultaion)

Vera Molnar

Tyler Hobbs, Fidenza 313 / About the making of 

Michael Hansmeyer

Generative Art In-class Exercise

Examples:

Flow Fields:
Creating a flow field with p5.js involves simulating a fluid-like motion by placing particles in an invisible vector field, where each vector influences the direction and speed of the particles moving over it. Below is a simple example of a flow field in p5.js embedded in a one-page HTML5 document. This example uses Perlin noise to generate the vector directions for a more organic flow.
JavaScript Canvas with Processing (P5js) -Flow Fields
Description by Tyler Hobbs

Procesessing for JavaScript

draw():  executes the code contained within its block repeatedly, allowing for the animation and interaction within the canvas. It’s where most of the dynamic drawing code goes.

fill(): Sets the color used to fill shapes.

arc(): Draws an arc or a portion of an ellipse. 
P5js : arc(x, y, w, h, start, stop, [mode], [detail]);
HTML5 Canvas: arc(x, y, radius, startAngle, endAngle, anticlockwise)

Assignment 1: Interactive HTML5 Work

Create a webpage that changes when the user clicks a button or presses a key.

  1. Discuss with ChatGPT to decide on the interaction (e.g., change color, show text).
  2. Describe in a prompt what you want for a one-page HTML5 page with JavaScript for your idea.Ask for comments in the source code to help you learn
  3. Copy code and paste into a text-editor
  4. Experiment with different events, values and effects.
  5. Upload and post to blog

Assignment 2: Generative Art with P5.js

Use P5.js to create a design that randomly generates shapes or patterns.

  1. Brainstorm ideas, in a Chat, for designs with P5js and random behavior
  2. Describe in a prompt what you want for a one-page HTML5 page with JavaScript for your idea. Ask for comments in the source code to help you learn]
  3. Copy code and paste into a text-editor
  4. Adjust parameters to refine the design.
  5. Upload and post to blog

Assignment 3: Generative Animation with P5.js

Create an animation in P5.js where elements move or change over time

  1. Brainstorm ideas, in a Chat, for designs with P5js and random behavior.
  2. Conceptualize the animation, planning movement and interactions.
  3. Describe in a prompt what you want for a one-page HTML5 page with JavaScript for your idea. Ask for comments in the source code to help you learn
  4. Copy code and paste into a text-editor
  5. Experiment with movement parameters and interactions.
  6. Upload and post to blog

GENERATIVE LITERATURE

Generative language art refers to a type of electronic literature or “e-lit” that uses a computer script or algorithm. The computer generates the artwork, poem or story based on parameters set by the artist/writer or through self-generating processes. The output can be a unique, often random and evolving, digital work.

JavaScript and Poetic Text 

Taroko Gorge , by Nick Monfort
taroko script with comments

Taper: an online literary magazine for small computational pieces.

All code (in the form of ES6, CSS, and HTML) must be placed between the template’s closing header tag (</header>) and the closing body tag (</body>), must be valid HTML5, and must fit within 2KB (2048 bytes)

minifier
unminify

Assignment: Generative Literature Creation

Design a one-page HTML5 website featuring generative literature that reacts to user input.

  1. Brainstorm with ChatGPT to define how user actions (clicks, key presses) will shape the narrative or poetry on your page.
  2. Craft a detailed prompt for a webpage design that supports your generative literature concept, specifying the role of JavaScript.
  3. Ensure your JavaScript includes comments for educational purposes.
  4. Implement the code in a text editor and explore various interactions.
  5. Upload your project and post on the blog
 

Interactive Multimodal Game Development (15%)

DUE April 5

Overview

This project you will get into small groups of 2-3 students to design and build an interactive game using HTML5, CSS, and JavaScript. The objective is to create a browser-based game that incorporates user interactivity, challenges, randomness, and AI-generated visual elements and sound design. The project will stretch your creative and technical skills, as you’ll be required to conceptualize, design, and develop a game without the use of external libraries or frameworks. Whether your game is text-based or involves more complex keyboard interactions, the emphasis is on originality, playability, and the seamless integration of AI-generated content.

Goals

  • Craft a unique game that stands out through its gameplay, challenges, and thematic content.
  • Use AI to generate compelling visual elements and sound design, enhancing the immersive experience of your game.
  • Build your game using only HTML5, CSS, and vanilla JavaScript, with the assistance of ChatGPT
  • Work within your group, drawing on the strengths of each member to contribute to a cohesive and engaging game.

Instructions

  • Brainstorm game concepts as a group, discussing potential themes, gameplay mechanics, and the role of AI-generated content.
  • Use ChatGPT to explore the feasibility of your ideas and to brainstorm additional elements like storylines, challenges, and AI integration.
  • Sketch out a basic structure for your game, including the user interface, game flow, and key interactions.

Setup:

  • One student in the group should create a new directory for the game files, organizing it with subfolders for assets like images and sound.
  • Begin with creating the index.html file as the entry point of your game.

Development with ChatGPT:

  • Work with ChatGPT to define clear, detailed tasks for generating the JavaScript logic, HTML structure, and CSS styling that will bring your game to life.
  • Insert AI-generated visuals and sounds at appropriate junctures to enrich the gaming experience.
  • Use CSS for visual design and JavaScript for game mechanics, such as user inputs, game logic, and randomness.

Collaboration:

  • Assign tasks based on each group member’s strengths and interests, ensuring a balanced workload.
  • Schedule in-class work sessions and use tools like Slack or Zoom for coordinating and collaborating outside of class.

Testing and Deployment:

  • Thoroughly test your game for usability, bug-free performance, and overall enjoyment.
  • Deploy your game by uploading it to a web server, ensuring it is accessible for play and evaluation.

Grading Criteria

  • Game Concept and Design (30%): Originality and creativity of the game idea, including gameplay mechanics and thematic depth.
  • AI Integration (25%): Effectiveness in incorporating AI-generated visual and sound elements to enhance the game experience.
  • Functionality and Interactivity (20%): Smooth gameplay, with responsive controls and error-free operation.
  • Technical Implementation (15%): Quality of coding, including the use of HTML, CSS, and JavaScript to create a well-structured, efficient game.
  • Collaboration and Innovation (10%): Demonstrated ability to work as a team and innovate with interactive elements or gameplay features.

Example Prompt for ChatGPT

“Help us break down the development of a browser-based game that incorporates AI-generated art and sound. We envision a game that includes [describe gameplay mechanics, e.g., puzzles, obstacles, scoring], with a theme centered around [THEME]. We need assistance in generating tasks for coding the game logic in JavaScript, designing the game interface with HTML and CSS, and integrating AI-generated content. Please provide a detailed task list, including suggestions for the AI elements.”

 
 
 
 

Leave a Reply

Your email address will not be published. Required fields are marked *