CREATIVE CODING
A collection of interactive sketches created with the intent of exploring the abstraction of typography and shapes within a three-dimensional space. Users can stop, play, and save stills of the experience to make posters.
A collection of interactive sketches created with the intent of exploring the abstraction of typography and shapes within a three-dimensional space. Users can stop, play, and save stills of the experience to make posters.
I wanted to explore different ways I could play around with typography by using the WebGL feature in p5.js, a JavaScript library for creative coding. WebGL allowed me to expand the scope of my work by giving me the capability to render interactive 2D and 3D graphics. My primary goal was to create an abstraction of type & form within a 3D space while also being able to capture images of these compositions in order to make a collection of 2D posters.
My initial idea for this concept was to create a series of 2D rotating planes in a 3D space that had the word "GLITCH" shining on either side, but after seeing that I could make a cube instead, that's the shape I stuck with. I played around with movement speed, lighting, and randomization in order to give the cube a "glitchy" effect as it moves on the screen. In the end I was left with three different versions of the same idea.
NAVY - Navy blue background and light blue text. Due to randomization, the movement is very chaotic.
CUBE - A mesmerizing white cube spinning in a white space, surrounded by a random array of energetic blue lines. The user can move the cube back and forth in space to leave after effects of the cubes outline and movements.
WHITE - This has the same after effect as "CUBE" but the only outlines that are left behind are that of the cyan colored dots that make up the word "GLITCH" and the light outline of this cube. Everything else is white.
Click on any of the main headings on this page to check these out yourself!
For this portion, I knew I wanted there to be rotating cylinders to be spinning around on the page at random intervals, so I used a Class() function in order to randomize several different aspects of the project: the number of sides, the speed and scale of each cylinder, and the angles of rotation along the X, Y, and Z-axes. Every time the sketch is refreshed, it will always be different from the last run. I also made it so that anyone can toggle the drawing mode when you press the letter "D" or the "Enter/Return" keys. In this state, every frame is captured and left on the screen and this creates a cool pattern of letters to look at.
For revolve, I immediately thought of a planet spinning on its axis. That became the focal point for this sketch, as a globe of pink and yellow hues moves back and forth across the screen and the world revolve spins around it. The user can also press the "D" or "Enter/Return" keys here to toggle the draw function on/off as well. One state allows you to control the view of the piece and the other allows you to simply be a spectator.
Here are a collection of static posters I created in photoshop by using stills from the project. I combined different textures and colors with the images to create something new, and you can do the same if you want too!
