Today

• working with data
• string manipulation

Working with data

Part 1: Strings

Text as data

This semester we have primarily worked with numeric values (integers, floats) and booleans (true/false) as variables.

We already know how to style text through working with fonts, and changing text size.

let customFont;

function preload() {
  customFont = loadFont('camo.otf');
}

function setup() {
  createCanvas(400,400);
  fill(200,10,120);
  textFont(customFont);
  textSize(36);
  text('Testing this font', 10, 50);
}

code

Array of Strings

We call data made up of letters Strings. They can be individual words, a sentence, a paragraph, a page, a book or much more.

Just as we’ve stored values in arrays, we can also work with arrays of strings. We did this previously by creating an array of student names in the class and then picking a random name. let students = ['Alvin', 'Billie', 'Celia', 'Dwayne','Ellie', 'Fay'];

let textList = ['even', 'a', 'stopped','clock','tells','the','right','time','twice','a','day'];
let wordNum = 0;
let wordX = 400;

function setup(){
 createCanvas(400,400);
  textSize(24);
}

function draw(){
  background(0);
  wordX -= 10;
  if (wordX < -20) {
    wordX = width + 20;
    wordNum++;
    fill(random(255), random(255), random(255));
  }
  if (wordNum == textList.length) {
    wordNum = 0;
  }
  text(textList[wordNum], wordX, height/2);
}

code

Working with Strings

p5.js has a number of built-in string functions.

• join()
• match()
• matchAll()
• nf()
• nfc()
• nfp()
• nfs()
• split()
• splitTokens()
• trim()

These are used for manipulating strings, combining them, removing spaces or commas, transforming a sentence into an array of words, etc.

In the previous code sketch, I specified an array of words that I called textList, separating each individual word manually with a comma and surrounding them with quotes. We have other options to simplify working with whole strings, breaking them into an array of words.

We can take our previous example for example and separate the words using splitTokens()

textList =  splitTokens("even a stopped clock tells the right time twice a day");

We declare let textList = []; as a global variable and then use splitTokens to split our sentence, to initialize set our textList variable to the array of its individual words.

code

Combining Strings Generatively and Dada Computation

Javascript also makes it easy for us to concatenate (combine) strings.

You are probably familiar with the kids’ storytelling word game Mad Libs where you fill in categories of words

Mad Libs

There is a similar dada and surrealist practice to generate new texts.

Dadaism was an early 20th century art movement, based originally in Switzerland, then in New York and Paris. Dadaists rejected logic and reason in favor of the irrational or nonsense. Dada artists created collaged art and texts, poetry, visual arts, plays, sound poetry and sculpture. They rejected traditional notions of beauty and form.

Dadaist Tristan Zara developed a technique for creating a dadaist poem.

Take a newspaper. Take some scissors. Choose from this paper an article the length you want to make your poem. Cut out the article. Next carefully cut out each of the words that make up this article and put them all in a bag. Shake gently. Next take out each cutting one after the other. Copy conscientiously in the order in which they left the bag. The poem will resemble you. And there you are–an infinitely original author of charming sensibility, even though unappreciated by the vulgar herd.

William Burroughs made use of this technique when he wrote his famous book Naked Lunch.

In-class Experiment: Make your own Dadaist Poetry Generator

…

Loading Strings

In our previous example sketches we loaded a sentence as an array, or manually entered a literal array. What if we want to load in a page or a whole book to select from?

Just as we’ve been able to load in external photo image and soundfiles we can also load in text files. There are methods to load in strings, csv (comma separated values - like individual cells in a spreadsheet), or other more complex data files called json.

Using loadStrings you can load in a text file so that each sentence of that file becomes a separate element in the array.

There are free books available online at Project Gutenberg. You can also find corpora (plural of corpus, collections of categorized words) compiled by artist/researcher Darius Kazemi on his GitHub.

To load strings into a variable we use the loadStrings() method.

let result;
function preload() {
  result = loadStrings('textFile.txt');
}

function setup() {
  background(200);
  var phrase = floor(random(result.length)); //random number produces a float and we need to round it so we round down with floor
  text(result[phrase], 10, 10, 80, 80);
}

example code

More complex sentences can be created through combining multiple categories.

Nick Montford is an artist specializing in this technique.

For further research:

History

• Tristan Zara
• Brian Gysin
• William Burroughs
• Hans Arp
• Marcel Duchamp
• Hugo Ball

Hugo Ball performing sound art

Present

Present-day artists and spammers are the inheritors of this history. We can use the techniques of Dadaists’ past to new ends.

• Allison Parrish
• Nick Montfort
• Taper
• Darius Kazemi
• Kate Compton - Tracery
• Twitter Bots
• Markov Chains

Basic Random Sentence Generator example code

code

Final Project

For this assignment, you are to write up a one paragraph proposal. You are welcome to also include screenshots, links to past projects or projects that inspire you. I will give you feedback and approve projects. –Lee

Our assignments so far have been fairly restrictive. For your final project, I want to open up the field for you to create an artwork of your choice. The project should use skills and tools we developed this semester. You don’t need to use p5.js if there is another library or language that you prefer.

Final Project and presentations/critiques due during finals week.

So far in this course we have covered:

• variables
• arrays
• the debugging process
• functions
• classes and objects
• loops
• conditionals
• working with the web as platform
• history of artists working with programming and creating their own tools
• history of procedural and algorithmic art
• how math and computation can be used in the creation of works of art and design
• cultural, political and social issues inherent in computation and addressed in the work of new media artists

Consider these elements in the creation of your own work for the final project.

Works to examine

The following projects were created with p5.js.

Check out the online exhibit of works in the p5.js showcase:

ALL OF THE PROJECTS IN THE p5.js SHOWCASE

Some additional projects:

Protest Korpe by Friends of Asya Tulesova (Aisha, Kuat, Irina and Jeff), to create banner images that can be shared on social media

PROTEST KORPE is inspired by quraq körpe, a type of Kazakh quilt. Like a quraq körpe, civic activism and protection of our rights depend on the voices and contributions of each of us. In this work, each square on our “collective quilt” is important to sew a new Kazakh reality. We want: a fair trial for Asya Tulesova, police that do not resort to violence, and just laws which respect peaceful assembly. #JusticeForAsya

Room Me by Kat Zhang

An interactive visual essay/game that explores self-isolation and self-care during quarantine.

Cyber Flowers by JPL

With simple and repeated revolving, I created a new form of text art that I’d like to call Cyberflowers - made of digital typography and grew from the digital texts in the cyberspace. Here you can see how individual letters gradually break their shape-based meaning and become blooming cyberflowers while the curves and lines become cyber-petals and cyber-stamens.

Soundings - Loren Britton and Romi Ron Morrison, a browser extension and sound art piece that interacts with your browser

Here we recite selections of poems some by Black Feminist poets & scholars: Audre Lorde and Alexis Pauline Gumbs, and invite you to read some lines from Claudia Rankine. We will invite you to consider how fully you can feel in your daily doings, how the erotic is a well of everyday affirmation….

Suburbia Life by David Schnitman

suburbia.life is a procedurally generated suburban neighborhood created with p5.js. The sketch features roads, houses, trees and clouds as seen from a bird.

Optional Theme

You are welcome to propose your own conceptual idea.

Optionally, here is a theme you are welcome to use:

Hide part of the world

If you adopt this theme as a prompt, you are welcome to interpret this in whichever way you see fit.

Your final project should have a separate document with the following info

1. Final Project title
2. approximately half page summary of project consisting of 1. conceptual idea and 2. technical detail
3. What was your approach or strategy did you take in creating your project?
4. What frameworks, libraries, did you use, if any?
5. What other artists, projects or artworks did you research that led to the creation of this work?
6. Include at least 2 screenshots of your project running.

Your code should:

• be clear and organized
• use comments and modular functions to make your code clear and easy to follow
• work without bugs
• work properly in fullscreen

Your final project should:

• Create a compelling interactive visual artwork synthesizing both concept and technical execution
• Properly cite any code that you found and used online
• Be based on your own aesthetic and conceptual interests
• Go beyond the basics of primitive shapes and colors to a well-executed personal artistic vision