Category: 06

tli-techniques

Reference and examples of p5.js

Soft body dynamics

I'm surprised to learn that p5.js has built-in support for soft body dynamics. I find it difficult to create things with organic movement through code, so this is something I could utilize to achieve that goal.

Libraries of p5.js

p5.bots

I'm interested in this library because it seems very powerful for physical computing projects, which I would like to explore.

Glitch.com blocks

Sending emails with SendGrid

I have wanted to send emails in projects in the past, so I'm pleased to see a building block that already demonstrates how.

Making music with Magenta.js

I'm intrigued by this music-making library and by how it has built-in support for music visualization as well as generative music through machine learning models. I took a computer music class in the past that explored novel ways to generate musical sound through computation, so this could be an opportunity to expand on that experience.

tli-CriticalInterface

2. (To) interface is a verb (I interface, you interface ...). The interface occurs, is action.

Notable propositions:

  • Be gentle with your keyboard, after 70 years typewriting your fingers will appreciate it.
  • 'View source' of a webpage, and print. Replace each verb you do not understand, by a verb you are familiar with. Read the text out loud.
  • Do not click today.

I'm interested in the second tenet because it frames the interface in terms of verbs rather than a physical or visual artifact that users interact with. The interface emphasizes what a person can do--and conversely what a person can't do. In this way, the interface provides an insidious way to obscure what can and cannot be achieved within a system.

The last proposition "do not click today" reminds me of this dilemma the most. As a CS student, I'm anecdotally familiar with a preference among the technically savvy for command line interfaces over GUIs. While both provide an avenue to do, computers were truly designed with command line interfaces, hence interacting with the command line tends to be much more powerful than interacting with the GUI. I think this is a clear example of how the presentation of the interface has powerful implications for what a user can do and how much power a user has within a system.

iSob-CriticalInterface

10. The interface uses metaphors that create illusions: I am free, I can go back, I have unlimited memory, I am anonymous, I am popular, I am creative, it's free, it's neutral, it is simple, it is universal. Beware of illusions!

Propositions:

Imagine your desktop is a kitchen, a garden, a hospital, a computer. Now, imagine it using no metaphor.

Call 5 random facebook friends and ask them for money.

Perform Ctrl+Z on real life. Invent new gestures to bring digital possibilities to oral conversations.

Some of my favorite tenets were 3, 7, 9, and 13, but 10 was my absolute favorite. I first realized the extent to which interfaces create illusion back when iOS switched from skeumorphism to flat design in 2012, and it's been weirdly haunting to think about ever since. On one level, illusions include how the Contacts app  on iOS used to look like a Rolodex with realistic colors, textures, and sound design. That was a visual illusion that imbued the interface with a sense of productivity, utility, and authority. Now the Contacts app is a matte white Apple Interface (TM) like any other, but this is another kind of illusion as described in the tenet -- one of "free"-ness, "neutrality", "simplicity", and "universality." In truth, it is not any of these for everyone anywhere (not even 'simple'! Maybe it's simple for me, but it might not be for an elderly person in Mongolia.)

But it goes beyond one app on one OS to the entire collective understanding of how an interface should work. The 'trash', the idea of 'documents' and the 'folders' they're stored in, and especially 'windows' and the 'desktop' are such fascinating metaphors that were invented in very specific contexts by very specific (probably white straight male) software engineers in the '80s (other than Susan Kare, she is cool.) The ability to "go back" or 'refresh' your situation, the idea that you have established another degree of human relationship by becoming 'friends' on Facebook, it's all an illusion.

As an aspiring (sort of) UX designer, I want to know how I can use my deeper understanding of how interfaces are constructed to make art that is critical of them.

gray-CriticalInterface

Critical Interface Manifesto, Tenet 11. The standard calls for a universal subject and generates processes of homogenization, but reduces the complexity and diversity. What is not standard?

I thought this one was especially interesting because it actually linked to my Looking Outwards subject in one of the propositions: Surf the web closing your eyes. http://www.eyewriter.org/. Weird because the link is kind of about surfing the web using only your eyes.

I take the tenet to be focused mainly on diversity of interfaces, and mostly on diversity of accessibility options for people who can't use or have difficulty using the "standard" visual-based, keyboard and mouse interface. This is really important, and that's also why I found Eyewriter to be so cool. But the tenet isn't just about accessibility for people with disabilities. It's also about a diversity of ways of presenting information, regardless of the sensory aspect of the interface. For example, if you consider the education system to be an interface in some sense, it's very limited to the "standard" way of learning. Someone might have no disabilities and respond well to visual interfaces, but they might not respond well to the structure of the "interface;" that is, they might not learn much from lectures and tests and homework.

Diversity in all things is necessary to allow the most possible people to enjoy, benefit from, and make use of that thing. I agree with this tenet that computer interfaces seem to lack that diversity, although I think other interfaces, like books (audiobooks, Braille, horror, nonfiction, picture books, etc.), are doing much better. Maybe that's because the information behind other interfaces is simpler, or because computer interfaces haven't been around as long.

gray-Techniques

Looking through the p5js reference, the functions about drawing shapes caught my eye because I haven't made my own polygons before, I've always just used quad or ellipse or whatever. So the beginShape(), vertex(), and endShape() functions are something I'll definitely plan to use more. I also looked at beginContour(), which is used for negative spaces within the shape you're drawing, which would've been nice to know about when I spent some time in my clock project trying to draw a ring. Here's the beginContour() reference.

Out of all the p5js libraries, I was most interested in p5bots, which allows you to incorporate input from microcontrollers like Arduinos into your sketch. I've never used Arduino before, but I'm interested in trying, and once I learn more about it, it'll be cool to be able to use it with p5js.

This online socketio chatroom is really cool, and chatrooms have a lot of potential. I was reading an article about someone who found an API for Tinder and would catfish guys then have them actually be messaging with each other instead of the girl. Here's the article I read. Manipulating people's chats could be very powerful if done carefully.

iSob-techniques

p5 Examples

My favorite example was Springs. Though it's one of the more mathematically intense examples, it shows that it's still within the scope of p5 to simulate some types of satisfying, realistic motion. Not that realism is the key to everything, or that computer graphics shouldn't look like computer graphics -- it's just fun.

p5 Libraries

RiTa.js is used for generative text, and has features like a user-customizable lexicon. The projects in the gallery and examples include generated poetry, haikus, and even resumes.

Glitch Primitives

You could use the Cesium Viewer to show geographical data on a map, or maybe in combination with p5.geolocation to display user location. Maybe you see a different aspect of the project depending on where you access it from. You could also use this building block to ask questions about the ethics of tracking user location, and what nefarious purposes this data could be used for.

zapra – CriticalInterface

4. The interface collects traces: traces and remains of all agents/agencies which converge in it.

  • Use a notebook to write down your bookmarks, your contacts, your searches.
  • Block the GPS of your phone. If you need to find a place, ask someone. Things will happen.
  • Use your first Nokia 3210 phone again (try not to get too nostalgic about it).
  • Become an Open Data Donor. Only give data deliberately and make sure it stays Open.
  • Connect your computer to a projector and share your screen with your neighborhood. Get used to it, that's our average privacy level.
  • Make a screenshot of the application you are currently using, and print it. Pin it to your bedroom wall.

I was interested in tenet 4 because of its implication that the interface is constantly documenting our interactions. While I assumed the manifesto meant that this is simply a critical part of  the interface, the examples frame this as a hostile occurrence. With digital interfaces encroaching more and more in our lives, we must maintain our awareness of them and their observations of us. Satirically, the assignments provided focus on maintaining control in an omnipresent expanse of data collection services. I find it interesting that they encourage maintaining control by either submitting yourself willingly to a zero privacy reality, or going completely off the grid to prevent any traces of you from existing.

Ironically, purchasing an Amazon Alexa with full acknowledgement of the data mining potential would be completely in line with these assignments. While our smartphones are already listening to us, many people are still convinced that they are still respecting our privacy, at the very least when not in use. By installing a microphone device designed to listen to you all the time, we take back some control with the voluntary sacrifice of our privacy.

vikz-CriticalInterface

All the topics within the Critical Interface Manifesto was stimulating and of valuable insight. After reading through them, I decided to focus on tenant #13: In the design of the interface, not only skills but also emotions and affects are deployed. How are emotions produced and circulated in interfaces? A couple of proposals within that tenant were "Have breakfast first, then connect. It is not necessary turn on your smartphone in the bed. Or: connect first and have no breakfast.", "Laugh out loud every time you put a smiley.", and "The means of emotion predictions are today's means of production."

The propositions under this claim I found to be particularly interesting, because of how it taps into the most complex of all complex systems -- emotions. A good amount of the propositions listed were tips typically associated in self-improvement books, such as choosing to power down all devices and go for a walk or run, or choosing to leave a mobile device at home for an entire day (which, is an ongoing trend within the YouTube community). However, some of the propositions were definitely ones that would create odd discomfort, such as choosing to either have breakfast first, and then connect on social media, or choosing to connect, and then banning oneself from having any breakfast at all. One of the ones that stuck out most with me was "the means of emotions predictions are today's means of production.", and what I took away from that, was the idea that emotions heavily play into the productivity and how we conduct each day. As a creative, I particularly feel that my self-worth is correlated with my ability and quality of the things I produce, and so I feel as though this sentence can be applied vice versa as well, in that today's means of production, many times, end up heavily influencing my means of emotions. This is a trait that, I hope to get rid of over time, and better understand to separate my work from my own self worth.

vikz-techniques

https://p5js.org/examples/simulate-spirograph.html

The Spirograph example on p5.js was one of the most particularly interesting to me because of its inherent complexity. The interlocking circles (sines), produce an interesting time system in my head, that reminds me of how our time definition works accordingly to the solar system, in that each large circle cycle could equal a year, each medium could be a day, and so on and so forth. Additionally, I found it even more mesmerizing when the underlying geometry was hidden, and instead, only the tracing remained.

https://ml5js.org/ 

One library that I found particularly interesting (as with what seems like the rest of the world is interested in now too, it seems) is the ml5.js library, or, the machine learning library. Not only was this one of the better documented and more user-friendly crafted library sites to view, it was interesting enough that it was marketed as "Friendly Machine Learning for the Web" -- and as a "neighborly approach to creating and exploring artificial intelligence in the browser", which made it not only extremely friendly, but made it feel as though machine learning would be the new ubiquitous thing.

https://glitch.com/~friendly-words

"Friendly Words" is an interesting Block on Glitch -- it randomly generates a list of "word pairs" (which I feel are common for p5js web files), predicates, objects, team synonyms, team pairs, collection synonyms, and collection pairs. I thought this would be particularly helpful when generating random auto file names that have a bit of character for programs such as p5js and glitch, and/or random anonymous user names when entering as a guest into communal platforms (such as Google Docs).

 

zapra – techniques

Looking through the p5 example library, I was fascinated by the soft body demo and its use of simple equations and curveTightness to create something organic and seemingly alive.

I got very excited about the experience library, since it's always frustrated me that something as seemingly simple as clicking a triangle is more complicated and math-heavy than I would like it to be.

On Glitch, I'd like to explore the magenta block further after seeing this lovely machine-learning sketchpad made with magenta that tries to finish your drawings for you.