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

To Do This Week:

JavaScript Codecademy #2 (DUE February 26)

Complete the following modules:

  • Arrays
  • Loops
  • Iterators
  • Objects

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

Module Notes

Important:

  • 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.
More Taper Projects

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.

JavaScript Objects:

Learn about Objects and JSON.

Tutorial: JavaScript Object Basics

E-Lit Project (5%):
DUE Wednesday, February 19

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:

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.

Project Prompting

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 such steps into functioning JavaScript and refine them with additional arrays, media, and design elements.

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.

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

 

In-Depth Notes

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