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
About
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 background is created as a flat surface parallel to the XZ plane. The Y coordinate of each vertex is continuously modified to generate a wave-like illusion. It is an approximate calculation, which does not take into account conservation of mass and other factors such as hydraulic jumps. The water molecules can move vertically but not horizontally, which enables for satisfactory results visually.
Wave Simulation
The model leverages a partial differential equation (PDE), defined as a function between various partial derivatives of a multivariable function, called the wave equation, which incorporates three distinct variables at every moment in time. This equation constitutes the core of the visual displayed and can be found below:
∇² u = ∂²u / ∂t²
∇² symbolizes the Laplace operator, a second-order differential operator in the n-dimensional Euclidean space. In this case, because the unique spatial variables used are x and z , the Laplacian is reflected through the equation below:
∇²u = Δu = ∂²u / ∂x² + ∂²u / ∂z²
Where ∂ symbolizes a partial derative.
Bibliography
Models to imitate the surface of water are shallow water equations or even full Navier Strokes equations can be found below.
- Pool of water rendered with reflection, refraction, caustics, and ambient occlusion.
- Water Simulation on WebGL and Three.js
- Shallow Water Equations, Wikipedia
General visual, font, and typographic structure inspired from the acclaimed ultranoir website.
Home
Visuals
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 work with startups and corporate clients to help them create high-quality distributed systems and applications .