Embedded Files
Agenda
Real-time Audiovisual Examples (Boids + Audio Synthesis)
Git pull and get the new examples
Interaction Design (Assignment)
Data #2 - Image
Real-time Audiovisual Examples (Boids + Audio Synthesis) - Available in Assets/327_CourseMaterial
Assignment #2 - Interactive Computation
Assignment #2 - Interactive Computation
Goal:
Create a data & simulation driven interactive landscape utilizing a computational algorithm, including the Boids system as a core part of it.
Use gesture-based interaction to change the behavior of the Boids system.
You may use:
MediaPipe, MagicLeap, or etc. with camera-based hand/body tracking
XR hand tracking using Quest 2, Quest 3, or Quest 3S
The interaction can affect attraction, repulsion, alignment, cohesion, separation, velocity, density, direction, or spatial organization.
The Boids do not need to represent birds or fishes. They can represent particles, stars, neurons, organisms, data, sound agents, or other abstract systems.
Submission form: PDF including the report and github repo link (1 to 2 page)
Rubric (15 points)
(3 points) Introduction + Motivation: Design an interactive system using Boids and describe the motivation
(2) Design motivation. e.g. motivated from the swarm of birds, fishes, stars, neurons, data, theory, philosophy, story... describe how the visual and behavioral design is related to the motivation
(1) Include reference (link, image)
(3 points) Methods: Describe the system implementation
(3) Design justification with a diagram (mapping between gesture - Boids/system parameters - resulting behavior)
How does the gesture change the Boids behavior?
Why is this gesture appropriate for the interaction?
How is that aligned with the motivation?
(9 points) Demo: Create the live interactive landscape and demonstrate
(7) Demonstration
Include a working Boids simulation
Use gesture-based interaction with MediaPipe or XR hand tracking
Demonstrate meaningful changes in the Boids/system behavior
The interaction should change the computational behavior, not only work as a button or on/off control
(2) Submit the github repo including a 15 second video of your work (embedded in github Readme or provide the link)
Image
An image or picture is a visual representation. An image can be two-dimensional, such as a drawing, painting, or photograph, or three-dimensional, such as a carving or sculpture. Images can also be animated through digital or physical processes.
In the context of signal processing, an image is a distributed amplitude of color(s).
Color Space
A color space is a system that defines how colors are represented using numerical values
RGB Color Space
RGB is defined by listing how much red, green and blue is contained in a single value. It uses an additive method where the more of each colour is added, the brighter it becomes.
When you are looking at a particular colour it’s extremely difficult to arbitrarily dictate how much of each primary colour composes it.
RGB: Unity - Scripting API: Color.Color
HSV Color Space (Hue, Saturation, Value)
HSV (hue, saturation, value) is a color model that specifies colors based on the dimensions of color most intuitive to human cognition.
It is an alternative representation of the RGB color model and more closely aligns with the way human vision perceives color-making attributes.
Hue is the angle counterclockwise around the color cone, representing the actual color itself. Its value ranges from 0° to 360°, typically 0° is red, 60° yellow, 120° green, 180° cyan, 240° blue, and 300° magenta.
Saturation is the distance from the center of a circular cross-section of the cone, representing the vibrancy of the color. Its value ranges from 0.0 to 1.0, where 0.0 is a shade of grey and 1.0 is the full color.
Value is the brightness of the color. Value is the height of the cone, representing the brightness of the color. Its value ranges from 0.0 to 1.0, with 0.0 being black and 1.0 white.
HSV: Unity - Scripting API: Color.HSVToRGB
Alpha blending
In computer graphics, alpha compositing or alpha blending is the process of combining one image with a background to create the appearance of partial or full transparency.[1] It is often useful to render picture elements (pixels) in separate passes or layers and then combine the resulting 2D images into a single, final image called the composite.
Color Study: Squares with Concentric Circles - Wassily Kandinsky (1913)
Animation created using point clouds
Code update
- Please pull the latest code via github (Image scene)
Page updated
Report abuse