WEEK 5: E-Lit Project
(February 6 & 8)

To Do This Week:

Catch up on tutorials. Start reviewing JavaScript’s (and programming’s) basic concepts. See links to W3schools topics below.

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, due Feb 20th, 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. Remember, we did this in class with Hangman. 

Class

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 digital art or writing refers to a type of creative expression 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.

minifier
unminify

JavaScript and Poetic Text 
Taroko Gorge
Taper: an online literary magazine for small computational pieces
https://taper.badquar.to/2/local_optimum.html
https://taper.badquar.to/2/find_someone.html
https://taper.badquar.to/2/why_2k.html

Interactive text toy
template – story-generator
template – line scramble poem

Past student work:

JavaScript Animation 

JavaScript/CSS Animation
js/css animations

Working with strings (manipulating text):

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

Student Examples:

 

  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

  

ChatGPT E-lit response:
 
  1. Find poems to include in the project.
  2. Create arrays to store the sections of each poem. You can use these arrays to manipulate the text and create a new poem.
  3. Use JavaScript string and array methods to split the text into individual words or lines and rearrange them to create a new poem.
  4. Have the poem stop generating after a certain length.
  5. Display the output of the poem mashup.

  

E-Lit response
  1. Create a screen full of random characters in an array
  2. Generate a word based on characters that are available in the previously created array
  3. Have the user find the characters to spell the word that is generated
  4. Have a timer running which determines if the player fails or not, complete before timeout is a win for the player

 

E-lit project:
“Would You Rather” game that will generate a poem based off of the user’s choices.
  1. Create an alert to grab the viewer attention, introducing the game
  2. Display two text options to choose from with a randomized array, as radio buttons
  3. Create a function that keeps track of the selected text
  4. The end of the game will generate a poem based off the user’s choices
  5. The poem string will be an additional array

 

E-Lit Project: A statement that describes the type of person you are
  1. Create a generic statement describing an individual.
  2. Remove some of the adjectives in the description.
  3. Create a list of adjectives that be used to describe a person.
  4. Create an alert that is generated when you open the site that asks your name.
  5. Create an array dividing the alphabet in 4 and assign adjectives to those 4 groups.
  6. Assess the 4th letter of the name provided, and depending on which group that 4th letter falls into in the array, use that adjective in the statement.

  

E-Lit Project: Haiku generator
  1. Create multiple lines with a certain amount of syllables, following the Haiku pattern (3 lines total, 5-7-5 syllable format).
  2. Create an array with the haiku lines/format.
  3. After the array is generated, apply the correct code to add all the haiku lines together into one final poem.
  4. Once the information is submitted, the user will be able to view their completed haiku.
  5. Try the generator again!

 

Steps for a Band Name Generator:
1.)Determine the questions to match up with possible band names.
2.) Make different arrays for the two words that make up the band name Ex: Adjectives and nouns
3.)Create a form for user input (Ex: Radio buttons)
4.)Create instructions for the program to match arrays with user selections
4.) Send user input to the code containing the instructions
5.) Write a code to generate band name based on users input
6.) Code will return a string from arrays
7.) Add reset code and button
8.) Test, debug if necessary, and add CSS
 

E-Lit Project (10%) DUE Wednesday Feb 22nd

In this project, you will be creating a work of “electronic literature”– a digital work of poetry or storytelling that uses programming (in this case JavaScript) to manipulate text. Here are the steps for this project using ChaGPT as an assistant:

  1. Come up with an idea for what you want to do with text.  Break down the idea into a sequence of specific steps. Be as detailed as you can. Write out the steps in natural human language.
  2. Check with ChatGPT about the sequence of steps needed for programming your project (still in natural language). Compare the ChatGPT results with your written steps. Adjust.
  3. Try to translate the sequence of steps into what you know so far about JavaScript’s programming concepts: variables, operators, functions, loops, arrays etc. Come up with what you think you will need to code in JavaScript with each step. Do you need arrays? Functions? Note these JavaScript concepts with each step in your list.
  4. Start to write your JavaScript. Make sure you have all the HTML in place. Don’t worry about CSS design yet. Just use basic outlines to show what is happening. 
  5. Use ChatGPT to figure out certain tasks in your script as you build it. For example, “help me write a function to animate a div horizontally across the browser page.” Working with ChatGPT on each task will give you maximum control over your work and your will learn how to write JavaScript. If you ask it to write the whole script, you will not have control of the script and you will not learn anything!
  6. Test your script. Check the console for problems. 
  7. Apply CSS design.
  8. Upload the project to the server and post the url in the Slack channel along with a description of the steps that you started with.