This week we learned about using strings and loading/visualizing text in p5.js. I had MANY different ideas for this week's assignment and all of them failed but this one. I originally wanted to visualize a sound wave from a song using the text from the song lyrics but the program ran so slowly as it was generating the characters that I was unable to really edit it. I think part of the issue was the song choice, because the amplitude values changed rapidly (it was a rock song). Anyway, I abandoned that idea, along with a few others and decided that I wanted to try to flow text down the screen. And from where is the most culturally significant and cliche example of text raining down a screen...yes, The Matrix.
Obviously my science-fiction obsessed brain wanted to try to emulate the famous flowing text screen from the film, but I honestly didn't really want to copy it perfectly. Of course it's already been done in every single programming language, as I quickly found out through my googling. But I did stumble across a tutorial by Emily Xie, which was a pretty good representation of the original and was done in p5.js and not Processing (which was where I originally saw it done). She was even able to use the same Katakana characters from the film. I wanted to go in a different route though and make it out of symbols instead, which got me perusing some old texts on Semiotics that I still have from my undergraduate studies.
What Didn't Worked
It took me about 4 tries to get this code to work. I originally made it using basic class syntax, but I couldn't get the text to generate in a vertical string in the same way that Emily did. When looking at her code, I was able to modify where I got stuck to make it work, but I am not used to how she wrote her code.
function Stream() {
this.characters = []
this.totalCharacters = round(random(20))
this.speed = random(1, 5); //downward stream speed
this.createCharacters = function(x, y) {
let first = true;
for (let i = 0; i < this.totalCharacters; i++) {
character = new Character(x, y, this.speed, first);
character.setRanChar();
this.characters.push(character);
y -= characterSize
first = false
}
}
this.render = function() {
this.characters.forEach(function(character) {
if (character.first) {
fill(255, 100, 255);
} else {
fill(200, 20, 180)
}
text(character.value, character.x, character.y)
character.rain();
character.setRanChar();
});
}
}What Worked
I was really interested in Emily's use of Unicode to pull the characters she needed to use in her sketch and had a lot of fun looking at the Unicode chart, while also learning a bit about the criteria for selecting what Emoji's are chosen to be included in the list. Anyway pulling from the table was quite easy and straightforward and for the second ever I used the modulo operator to slow down how fast the characters change on the screen!
this.setRanChar = function() {
//this.value = myString.charAt(random(0,myString.length))
if (frameCount % this.characterChange === 0) {
this.value = String.fromCharCode(
0x2700 + round(random(0, 99))
);
}
}What I learned
On top of learning how to utilize Unicode to generate symbols on the screen using the text function, I also learned how to use a for-each loop instead of a for-loop, which to me seems like a simpler way to iterate on an element in an array. I was reading a bit more about it and seems like it's advantageous because it makes the code more readable. However, you are unable to skip an element or go through the elements in a reverse order. In this case I didn't need to do that, so the for-each loop worked.
Ideally I would have liked to pull real data from social media and visualize it the same way, which will give the characters some substance as it would be coming from live data and not randomized. So maybe I can work on that next week, if that's even possible to pull off.