computational media – week 6 – midterm project

Finding Words

video showing the visual poetry moving

For my ICM midterm project, I created my first experiment with coding and words. This is a kind of interactive poetry that I’m working on to combine with physical computing, in a way that each word is going to be activated by gestures that press wearable switches. In the future, this is going to be presented as a live storytelling performance.

This is a work in progress. Find the code before I included the serial communication commented above; try it or edit it on the p5.js online editor here; and find the code after I included the serial communication to activate each word with a different button here.

//press the mouse or your keyboard or both together to see or combine the words bird and fire. 

//define each letter of the word as a different piece of data in the array identified by an index number

 let bird = ["b", "i", "r", "d"];
 let fire = ["f", "i", "r", "e"];

 //define the distance between the letters when a word is written
 let betweenletters = 20;

 function setup() {
   createCanvas(600, 400);
 }

 //write the word putting its letters from the array together
 function renderWord(word) {
   for (i = 0; i < word.length; i += 1) {
     fill(random(0, 360), 180, 100, 100);
     text(word[i], (width / 2 - (betweenletters * 2)) + i * betweenletters, height / 2);
   }
 }

 //position each letter of the word in a random position in the canvas and change its color randomly over time
 function randomLetters(word) {
   for (i = 0; i < word.length; i += 1) {
     fill(random(0, 360), 100, 100);
     text(word[i], random(0, width), random(0, height));
   }
 }

 function draw() {

   colorMode(HSB);
   background(255);
   textSize(28);
   translate(random(-1, 1), random(-1, 1)); //vibrant visual effect

   if (mouseIsPressed) {
     renderWord(fire);
   }else{
    randomLetters(fire);
   }
     
   if (keyIsPressed == true) {
     renderWord(bird);
   }else{ 
     randomLetters(bird);
   }
 }

One thought on “computational media – week 6 – midterm project

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: