Group assignment:
1. Processing
1.1 🌀 What is Processing?
Processing is an open-source programming language and environment based on Java, mainly used in visual arts, interaction design, and creative coding. It's beginner-friendly and ideal for graphics, animations, and interaction with hardware like Arduino.
- Official site: https://processing.org
- Features:
- Simple and clean syntax
- Built-in support for graphics, interaction, and sound
- Easy integration with serial ports, cameras, microphones, and more
1.2 🎓 Project Example
Using a button on a microcontroller as input, we created an interactive sketch in Processing to display randomly generated shapes and colors on the canvas.
1.2.1 📦 Tools Used
- Processing – for visual programming
- Arduino/microcontroller
- Serial communication
- Button as input trigger
1.2.2 🔁 Workflow
- User presses the button on the microcontroller
- Signal (e.g.,
"1\n") is sent via serial port - Processing receives and checks the signal
- A new shape appears on canvas with:
- Random type: circle, triangle, square, or polygon
- Random size and color
1.3 🧠 Skills Learned
- Learned how to use Processing for graphics and interaction
- Gained basic knowledge of serial communication
- Understood the data flow between hardware and software
- Created visual feedback based on physical inputs
- Learned geometry basics for drawing polygons
2. p5.js
2.1 🎨 Introduction to p5.js
p5.js is a creative coding library based on JavaScript, designed to make coding fun and accessible, especially for art, design, education, and beginners. It is the JavaScript version of Processing, led by Lauren McCarthy.
2.1.2 ✳️ Key Features
| Feature | Description |
|---|---|
| 🎯 Beginner-Friendly | Syntax similar to Processing, great for coding newbies |
| 🧠 Creativity-Focused | Perfect for visual arts, interaction design, data visualization, and sound |
| 🌐 Web-Based | Runs in browsers, no installation needed, easy sharing |
| 📦 Extensive Libraries | Supports images, sound, hardware (like Arduino), and 3D |
| 💬 Active Community | Plenty of open-source examples and learning resources |
2.2 🎓 Project Examples
Created and embedded multiple p5.js sketches in a single page via the p5.js Web Editor.
- 2.1 Particle Simulation: mimicking water molecule motion
- 2.2 Bouncing Box: simple motion interaction
- 2.3 Tech-style portrait glitch effect
- 2.4 Lines fluctuate and are sorted by color
- 2.5 Simulate the motion of points based on a sine function
3. 🌐 Web and HTML5 Canvas
3.1 Introduction to HTML5 Canvas and WebGL
The Web is one of the most widely used platforms today. To support rich interactivity and visuals, the W3C has standardized technologies such as HTML5, CSS, and JavaScript.
HTML5 Canvas and WebGL are core graphics APIs:
- Canvas allows drawing 2D graphics and animations using JavaScript
- WebGL is a JavaScript API based on OpenGL, enabling high-performance 3D rendering inside Canvas
These APIs form the foundation of advanced frameworks like p5.js, offering both low-level control and creative flexibility.
3.2 🎓 Project Examples
3.2.1 Rotating Stars Around Earth
A WebGL-based animation that shows stars rotating around a 3D Earth. Includes adjustable sliders.
- 3D Earth and star rendering
- Rotation animation centered on Earth
3.2.2 Stars Orbiting the Sun
Another WebGL animation where stars orbit a 3D Sun. Includes sliders for scale, speed, star size, and Z-depth.
- Realistic 3D rendering of Sun and stars
- Interactive controls for dynamic visualization
