Project Description
Overview
This project is an interactive visual representation of simple harmonic motion, inspired by the Gaussian distribution curve, using P5.js. It creates a captivating display of 3D hexagons that rotate in the XY-plane while also oscillating in the Z-axis. Each hexagon has a progressively smaller radius than the one before it and undergoes harmonic motion both in terms of its position and color, resembling the shape of a Gaussian distribution curve.
Motivation
The motivation behind this project stems from the fascination with the Gaussian distribution, also known as the normal distribution or bell curve. The Gaussian distribution is a fundamental concept in statistics and probability theory, frequently encountered in various scientific and real-world contexts. It describes the probability distribution of a continuous random variable and is characterized by its symmetric, bell-shaped curve.
This project seeks to bridge the gap between the abstract beauty of mathematical concepts and their visual representation in art and technology. By drawing inspiration from the Gaussian distribution, it aims to provide an engaging and aesthetically pleasing way to explore the principles of simple harmonic motion. The visual resemblance to the Gaussian curve adds a layer of intrigue and connection to a concept that might otherwise be considered purely mathematical.
Project Appearance
The project presents a visually stunning 3D animation that draws inspiration from the Gaussian distribution curve. Here’s what you can expect:
- Hexagons: There are 50 hexagons in total, each positioned in 3D space. The hexagons are arranged in a spiral pattern, with each hexagon having a smaller radius than the previous one, creating a visually appealing tapering effect.
- Rotation: Each hexagon continuously rotates in the XY-plane. The rotation is driven by trigonometric functions, with the
cos()function controlling the x-coordinate and thesin()function controlling the y-coordinate. This results in a circular movement for each hexagon, but with distinct positions and paces for each one. - Harmonic Motion: The project utilizes the
sin()function on the current time value to manipulate the z-coordinate of each hexagon. This creates a mesmerizing effect where each hexagon appears to rise and fall in a harmonic motion pattern along the Z-axis, resembling the peaks and troughs of a Gaussian distribution curve. - Color Transformation: The project goes one step further by applying harmonic motion to the color of each hexagon. Custom RGB colors are generated by applying
sin()andcos()functions to the time value. As a result, the colors of the hexagons smoothly transition, creating a beautiful visual representation that closely resembles the colors associated with a Gaussian distribution curve.
Demo
Link to the source code
Conclusion
In summary, this P5.js project is a captivating visualization of simple harmonic motion in 3D space, inspired by the shape of a Gaussian distribution curve. It features a mesmerizing spiral of rotating hexagons, with each hexagon undergoing harmonic motion along the Z-axis and experiencing a harmonious color transformation that evokes the colors of a Gaussian distribution. The project beautifully bridges the worlds of mathematics, art, and coding, offering a visually striking and educational representation of harmonic motion and probability distributions.