Category: 06-Techniques

I chose the drawing exercise from the P5 examples. It appealed to me because the lines created by clicking and dragging the mouth have the added characteristic of particles as points.

From the libraries, I looked further into the 3D library - in particular, Canvas3D. With it, we are able to create shapes and patterns in 2D and make them 3D, much like an SVG image in Maya.

The glitch block that I found most useful was the Model Viewer. Since most of my work involves 3D models, I was interested to know how I could use them in a browser.

 

Ray Casting

This was a very interesting concept, and could add a whole new depth of interactivity in fields like VR or AR. As an enthusiast in those fields, this example provided some inspiration for what I can achieve in 3D (specifically with p5.js).

 

P5.scribble

This library adds even more direct interaction with the user, and creates a friendly environment where the user can communicate with the machine, where the machine has to interpret individuality in users, forming a basis for machine learning capabilities.

 

Cesium Viewer

Has applications for large scale 3D projects and immense attention to detail, which is useful especially in VR/AR projects trying to emulate the experience of the real world.

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.

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.

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.

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).

 

Examples: Springs

Link: https://p5js.org/examples/simulate-springs.html

This example demonstrates how to use physics to give objects character and dynamism.

 

Libaries: p5.localmessage

Link: https://github.com/bmoren/p5.localmessage

This library interests me because the ability to send messages from one sketch to another allows for multi-user interaction!

Glitch: handsfree-starter

Link: https://glitch.com/~handsfree-starter

Head controlled interactive art looks fun and innovative!