CREATIVE CODINGProgramming ✧ Coding ✧ Javascript
𓆏
p5_min.js ✳ protocol2 ( );
p5_min.js ✳ protocol3 ( );
This project explores 4 protocols coded in p5.js, working with a predefined image bank of cutouts, sketches, and unused photos.
Each protocol enables interaction through mouse movements, clicks, or keyboard inputs to engage with the visuals.
November 2024
img ✳ function preload ( );
As my first coding project, the objective was to develop protocols in p5.js (JavaScript) to gain a better understanding of how coding works. Our class then collaboratively developed an image bank containing failed photos, erasures, glitched scans, and other similar materials.
p5_min.js ✳ protocol1 ( );
This protocol creates a 3D composition with interactive textures applied to cubes arranged around a sphere, using p5.js' orbitControl function.
♯Texture Loading:
Photo: Press "w".
Erasure: Press "1".
Typography: Press "2".
Mixed: Press "3" for random textures from all categories.
♯3D Display:
Cubes are arranged in a spherical structure.
Each cube is textured based on the selected category.
♯Camera Control:
Zoom with the mouse wheel.
Rotate the camera by clicking and dragging.
Hold "Shift" while dragging to move the camera sideways or vertically.
The fourth protocol overlays a fluid, moving image onto a selected background, with interactions controlled by the mouse and keyboard.
♯Image Loading:
Scans: Full-screen backgrounds.
Typography: Semi-transparent images that move fluidly with mouse x/y positions using an easing effect.
♯User Interaction:
Press "1" to select a random background from the scans.
Press "2" to select a random transparent image from the typography set.
p5_min.js ✳ protocol4 ( );
