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.


lubar – techniques

Arduino sensor data via WebJack:

Serial Port Connecction:

I was not aware that it was possible to connect/read data from an arduino to p5Js.


I have not worked with maps before in a programming environment but have been interested in doing so, I now have a solid starting point.

Particle JS API:

I'm interested in being able to create a simulation on a screen that can be translated into a physical computing environment.


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



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.



p5.geolocation looks like a really cool and useful library for many projects; given how much / reliant one's location is these days, I can imagine a handful of projects where I would want to be able to use a library like this to further my capabilities with them.


I really liked the soft body example shown on p5.js because it offers a lot of different ways to be able to transition from one thing to another in a very smooth and in an aesthetic pattern that I feel like I may want to use.


The square-connect app looks like a very useful thing to have as the company square becomes more and more popular for sellers to have in their back pocket. It also have a very simple application to use, and I think more people can take advantage of it.


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


I'm interested in this library because it seems very powerful for physical computing projects, which I would like to explore. 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.


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. 

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.

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


Examples: Springs


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


Libaries: 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


Head controlled interactive art looks fun and innovative!