DTC 477: Advanced Web Design & Development

Week 6: Generative Language Art

Interactive Website (complete with CSS design) (Due Thursday Feb 19)

Hangman Game (complete with CSS design) (Due Feb 26 )

JavaScript Codecademy #2 (DUE March 5 )

Module Notes

Important:

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:

Student E-Lit

Code Guidelines for Taper:

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 Animation

// get the box element
let box = document.getElementById("box");

// starting position
let position = 0;

// run the function every 50 milliseconds
setInterval(moveBox, 50);

// function to move the box
function moveBox() {
  position += 2;                // move 2px each tick
  box.style.top = position + "px";
}

JavaScript / CSS Animation Reference

https://javascript.info/css-animations 

/* CSS: define the box and the animation class */

#box {
  position: absolute;
  width: 50px;
  height: 50px;
  background: red;
  top: 0;
  left: 100px;
  transition: transform 0.5s;
}

/* this class triggers the movement */
.moveDown {
  transform: translateY(200px);
}

// JavaScript: add or remove the class

let box = document.getElementById("box");

// add the class (moves the box down)
function moveDown() {
  box.classList.add("moveDown");
}

// remove the class (moves the box back up)
function moveUp() {
  box.classList.remove("moveDown");
}

<!-- Example HTML buttons to trigger animation -->

<button onclick="moveDown()">Move Down</button>
<button onclick="moveUp()">Move Up</button>

<div id="box"></div>

Shuffle an Array (No Repeats)

The simplest reliable way to shuffle an array so every item appears exactly once (no repeats) is the Fisher–Yates shuffle.

Shuffle the array in place

function shuffleArray(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));

    let temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
}

let words = ["apple", "banana", "cherry", "date"];
shuffleArray(words);

console.log(words);

Draw items one-by-one (still no repeats)

After shuffling, use pop() to pull a new item each time until the array is empty. 

shuffleArray(words);

let nextWord = words.pop(); // removes and returns one item
console.log(nextWord);

Thursday Workshop

Work independently on the Interactve Website or the Hangman projects. I will come around to help.

Project 3: Generative Language Art (15%) DUE March 12

Create an electronic literature piece using JavaScript to manipulate text. No other media, just text designed on the page with HTML, CSS and Javascript. Include comments listing your logic steps and ChatGPT url(s).

Development Steps:

  1. Idea Generation
  2. Conceptual Breakdown
  3. Consult with JS mentor to see if your idea is possible
  4. Work out Logic Steps with JS Mentor
  5. JavaScript Implementation with JS Mentor
  6. Testing and Refinement
  7. Styling with CSS
  8. Include the Statement
  9. Final Submission

Suggested Ideas:

Student Logic Steps:
  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

Objects and Object Literals

Objects are variables that store properties and methods.

JSON (JavaScript Object Notation) is a format for storing and exchanging data. It looks similar to a JavaScript object and behaves in a comparable way.

Simple Object Literal


// JavaScript Object Literal Example
const person = {
    firstName: "Margie",
    lastName: "Pepper",
    age: 50,
    eyeColor: "brown",
};

console.log(`Hi, ${person.firstName}`);

Object Literal with "this"



// JavaScript Object Literal Example
const person = {
    firstName: "Henry",
    lastName: "Smith",
    age: 24,
    eyeColor: "green",
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
};

console.log(`Hi, ${person.fullName()}`);

Person Object Constructor


// JavaScript Object Constructor Example
function Person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.fullName = function() {
        return `${this.firstName} ${this.lastName}`;
    };
}

// Create new Person objects
const person1 = new Person("Alice", "Brown", 32, "blue");
const person2 = new Person("Carlos", "Diaz", 28, "hazel");

console.log(person1.fullName()); // "Alice Brown"
console.log(person2.fullName()); // "Carlos Diaz"

Learn more about JSON and objects: