User permission not granted
Please change user permissions
Command not understood
Not a command
This is the Home Page
This is the About Page
This is the Work Page
This is the Visual Page
This is the Main Menu
No Previous Page
No Next Page
About
Visual
A
.
S
h
o
k
a
i
r
E
n
t
r
e
p
r
e
n
e
u
r,
S
o
f
t
w
a
r
e
E
n
g
i
n
e
e
r,
C
r
e
a
t
i
v
e
Work
Visuals
I have always liked to play with contradictions, whether it is in my personal, intellectual, or artistic life. The visuals of this website are supposed to reflect what I believe are contradictory aspects of my personality. The user's interaction with the platform and certain notes in the background music, composed by Ryuichi Sakamoto, create ripples in the otherwise still, black, water. If user permission allows, the microphone input, whether it is from the user's voice or sounds from the surrounding environment, also causes ripples on the liquid surface. In this way, the digital wall is broken. The division between the user, the sounds in their environment, and the website becomes blurred and the water becomes alive.
Formula
This effect was achieved through the standard Three.js WebGL Javascript library for drawing 3D graphics.
The backgroud is instantiated as a flat plane parallel to the XZ plane. The Y coordinate of each vertex is changed to create a wave simulation. This is an offset approximation, which ignores conservation of mass and other effects such as hydraulic jumps. The water molecules are able to move up and down, not horizontally, which is unrealistic physically but allows for visually appealing results.
Wave Simulation
The simulation runs by integrating the wave equation, a partial differential equation incorporating three variables, at each moment in time. The equation forms the core of the simulation and is given below:
∇² u = ∂²u / ∂t²
∇² denotes the Laplace operator. In our case, because our independent spatial variables are x and z , the Laplacian is given as follows:
∇²u = Δu = ∂²u / ∂x² + ∂²u / ∂z²
Where ∂ denotes a partial derative.
Intuitively, the wave equation implies that the vertical acceleration of a water particle is proportional to the local spatial curvature of the
wave at that point in time.
Bibliography
Alternative models to imitate the surface of water are shallow water equations or even full Navier Strokes equations. I decided not to use those but was inspired by various research made in physics and computer graphics, which can be found below:
Home
Work
Hello
Originally from Paris , my name is Abdel-Aziz Shokair. I am a full-stack software engineer and consultant with a Master's degree in Computer Science. Currently based in New York City, I lead and work with startups and corporate clients in order to help them create high-quality distributed systems and applications .