WEEK 6: E-Lit Project
(February 10 & 12)

To Do This Week:

Finish JavaScript Codecademy #2 (due February 12)

Learn JavaScript: Complete the following modules:

  • Arrays
  • Loops
  • Iterators
  • Objects

Submission: Screen grab your completed modules and upload them to Canvas. Ensure the browser address bar is visible in the screenshot.

Class:

Interactive Websites

Review the example: interactive-477-spring2024.html

Important Notes:

  • Submit your projects to Canvas and verify the submission is a URL!
  • Include a commented statement with the starting steps in JavaScript terms. Use a list format for easier reading.
  • Add comments in your script explaining what is happening at each step. Study these comments to understand the logic.
  • When using ChatGPT, specify that you want to use ES6 syntax.
  • To ensure your script runs after the page loads, use: 
    document.addEventListener("DOMContentLoaded", function () {
    // Your script here
});

Review:

Generative Literature:

What is Generative Language Art?

Generative language art is a type of electronic literature (e-lit) where a computer script or algorithm dynamically generates poems, stories, or other text-based works. These works often incorporate randomness or evolving digital processes to create unique and engaging outputs.

JavaScript and Poetic Text:

Examples of generative literature:

Code Guidelines for Taper:

  • All code (HTML, CSS, JavaScript) must fit within 2KB (2048 bytes).
  • Use a Minifier to compress code or Unminify for readability.

Manipulating Text:

Key JavaScript methods for text manipulation:

Array Methods:

Regex (Regular Expressions):

Examples of common tasks:

// Break a line after a period
Find: \.
Replace with: \.\n

// Add a quote at the start of lines
Find: ^
Replace with: "

// Add a quote and comma at the end of lines
Find: $
Replace with: ",

// Remove all line breaks
Find: \n\s+
Replace with: (nothing)

Try it with Sample Text.

Project Reminder:

DUE By This Wednesday (Post to Slack):

Describe in 5-10 lines the sequential steps for your E-Lit Project. Use natural language to outline the programming logic (not the design). Example:

  1. Display a random sentence of text
  2. Make each word in the sentence hoverable
  3. On hover, the word animates a list of other possible words
  4. When not hovering, a new word replaces the original word
  5. When a new sentence is completed, play a sound

You will eventually translate these steps into functioning JavaScript and refine them with additional arrays, media, and design elements.

JavaScript Objects:

Learn about Objects and JSON.

Tutorial: JavaScript Object Basics

E-Lit Project (10%): DUE Wednesday, February 21

Follow the structured process outlined above to create your electronic literature project. Use ChatGPT to assist with brainstorming, refining, and implementing your ideas. Remember to include a commented statement at the top of your source code explaining your steps.

 

 

 

 

 

 

To Do This Week:

Finish Javascript Codecademy #2 (due February 12)
Learn JavaScript: 
Complete the following modules: Arrays, Loops, Iterators, Objects

For submission on Canvas: Screen Grab and Upload what you have completed from the above modules. Include in the screen grab, the browser address bar.

Class

Interactive Websites
interactive-477-spring2024.html

Notes:

  • Submit your projects to Canvas, check if it is the url!
  • The commented statement should have the starting steps, using JavaScript terms. Make them as a list (easier to read)
  • Always good to have comments in the script describing what is happening at each step. Study this. Try to understand the logic.
  • With ChatGPT, specify you want to us ES6!
  • Waiting for page to load before running script:
    document.addEventListener(“DOMContentLoaded”, function () {

 

Review

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 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

JavaScript Animation 

JavaScript/CSS Animation
js/css animations

Manipulating text:

charAt() | at() – get string character at specific location
slice() – extracts a part of a string and returns the extracted part in a new string.
toUpperCase()
toLowerCase()
concat() – joins two or more strings:
trim() – removes whitespace from both sides of a string
replace() – removes whitespace from both sides of a string
replaceAll() – replaces a specified value with another value in a 
split() – convert string to an array 

Array Methods:

pop(); // remove the last element of an array:
push(); // add a new item to an array:
shift(); // remove the first item of an array:
unshift(); // add new items to the beginning of an array:
splice(); // adds/removes items to/from an array, and returns the removed item(s)
sort(), reverse() // the sort() method sorts an array alphabetically, and sets number arrays to ascending or descending, also random sorts
slice(); // returns the selected elements in an array, as a new array object.
join(); //  method returns an array as a string and does not change the original array.

Array Iterator methods:

forEach(); // calls a provided function once for each element in an array, in order
findIndex();  // returns the index of the first element in an array that pass a test (provided as a function)
filter(); // creates an array filled with all array elements that pass a test (provided as a function).
map(); // creates a new array with the results of calling a function for every array element.
some(); // checks if any of the elements in an array pass a test (provided as a function).
every(); // method checks if all elements in an array pass a test (provided as a function)
reduce(); // method reduces the array to a single value

Regex (regular expressions) Basics:

// TO BREAK A LINE AFTER A PERIOD
// find all periods: \.
// replace with: \.\n

// TO ADD QUOTE AT START OF LINES
// find beginning of line: ^
// replace with: ”

// TO ADD QUOTE AND COMMA AT END OF LINES
// find end of line: $
// replace with: “,

// TO REMOVE ALL LINE BREAKS
// find: \n\s+
// replace with nothing

sample text

DUE By This Wednesday (post to Slack)

Describe in 5-10 separate lines, in natural language, the sequential steps for an idea you would like to pursue for the E-Lit Project. The E-Lit project, will be some creative manipulation of text using JavaScript.

Just describe the programming steps, nothing about design. For example:

  1. display a random sentence of text 
  2. make each word in the sentence hoverable 
  3. on hover, the word animates a list of other possible words 
  4. when not hovering, a new word is selected from the animated list, replacing the original word
  5. when a new sentence is figured out with all new words, play a sound

You will eventually translate these steps into functioning JavaScript. And once the script is worked out, you will then design the work and populate it with other elements, arrays, media. This is the conceptual step or “algorithm design” when you work out the logical steps of a process for the work to begin scripting in code. 

 

Student Example:

 

  1. Compile a series of Shel Silverstein poems into arrays, along with arrays for random nouns, verbs, adjectives, the like
  2. Display these random combinations of sentences in a newly randomly generated poem when a button is pressed
  3. On hover on certain highlighted/uniquely colored or displayed words/on button press/on click, cycle through a bunch of words with some sort of animation such as slot machine style
  4. When not hovering/when clicked again, the cycling stops
  5. After the poem is successfully generated, have the option to generate a new one in a random location on the page that is not occupied
  6. If a poem overlaps with a previous one, it should have a higher place on the hierarchy, meaning it covers up the old one, ensuring you can always generate something new

JS Objects

Intro to basic Objects and JSON

 
  

E-lit Project: 10%  DUE Wednesday Feb 21st

This project involves creating an electronic literature (e-lit) piece, a digital form of poetry, language art or narrative that uses JavaScript to dynamically manipulate text. To ensure a structured and effective approach to your project, follow these guidelines, using ChatGPT as a tool throughout the process:

Statement: Your project will require a statement at the top of your source code, enclosed in HTML comments (<!--...-->). This statement should outline, in sequential steps and in plain English, the thought process and JavaScript concepts you plan to employ before any code is written. Include how ChatGPT assisted you in conceptualizing, troubleshooting, or coding aspects of your project.

Your Steps:

  1. Idea Generation: Begin by brainstorming ideas for your e-lit piece, focusing on how you can manipulate text in a digital narrative or poetic form.
  2. Conceptual Breakdown: Once you have an idea, break it down into a sequence of specific, actionable steps. This involves detailing how user interactions will alter the text or narrative flow.
  3. Consult with ChatGPT: Share your project steps with ChatGPT to refine the sequence and ensure it aligns with JavaScript’s capabilities. Adjust your plan based on the feedback.
  4. Script Planning: Identify the JavaScript concepts needed to execute each step (e.g., arrays for storing text segments, functions for changing text based on interaction). Note these alongside your steps.
  5. Coding with JavaScript: Start implementing your JavaScript code, making sure the HTML structure is in place first. Use ChatGPT to assist with specific tasks or to clarify JavaScript functions.
  6. Testing and Refinement: Test your script extensively, checking for bugs and ensuring the intended functionality works smoothly. Use the browser’s Console to identify and fix errors.
  7. Styling with CSS: Apply CSS styling to enhance the visual design of your piece. The focus here is on complementing the textual interaction, not overshadowing it.
  8. Include a Statement: In the source code, comment the list of your steps and describe briefly how you used ChatGPT.
  9. Final Submission: Validate your HTML and CSS, upload your project to the server, and submit the URL in Canvas. 

Suggested Ideas for Your E-lit Piece:

  • Interactive Poetry: Allow users to input or interact with  words/sentences, which are then visually and textually transformed on the page in creative ways.
  • Generative Language Art: Create a poem or work of language art that changes based on user choices, inputs or through autoplay.
  • Recombinant Narrative: Develop a narrative that evolves and changes through different combinations of elements.
  • Text-Based Puzzle: Design a puzzle or game where users solve challenges through text manipulation or interpretation.