• Gabriella Garcia

ICM Week 6: Entering the Void

This week was a whole lot of learning at once, I have the idea in my head but executing it within and while learning the multiple layers of html/js/css proved too much for my week. Alas.


The idea:

I wanted to create a full-window interactive canvas, that would lead people through multiple input boxes that would pop up as each input was submitted. They would all have a question to be answered, the answer would not be stored... currently because I don't know how, but I also took that lack of knowledge as a choice and decided to make it a game of deep listening.


What is deep listening?

It's a form of communication (usually between two people) in which one party speaks for a given amount of time, and the other party acts as a non-reactive, fully-receptive listener. No responses, either vocal, tonal, facial, or body language.


The struggle:

I got stuck on the first function, and it time-sucked my ICM assignment budget. I wanted to have the input ask a question, and upon submit there would be a fairly generic response, or the input box would "remove" from its location and pop up somewhere else on the screen. At the same time, a meditative image of some sort would pop up behind the text generated with the input value. Another thought was drawing a line using a for loop of points that would connect one input box to the next, creating a web of pointless answers.


I got the input working and the response, but nothing past that. Office hours needed, or a full day of deep code study.





Full page: https://editor.p5js.org/full/rJVdjuSsm

Editor: https://editor.p5js.org/medusamachina/sketches/rJVdjuSsm


First layer of questions:

Can you store images in project-folder?

how do you 'centerMode' an input?

How do you call an image as a background in a function?

How do you center text generated by a function using the input value?


Achievements:

"Clear" canvas at windowWidth/Height that would resize when windowResized

Input that was centered and responsive to windowResized

CSS button class

input.remove &submit.remove to delete all text fields to only show text "response" using input value

© 2020 Gabriella Garcia