About

Music

Voice Control

Hover here

A.Shokair

A

.

S

h

o

k

a

i

r

The website visuals are responsive to sounds in the user's environment


For a full experience, hover on the circle in the bottom left and click on Voice Control

Tap screen to enter

Click

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 might be 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 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 and a Bachelor's in Economics and Political Science from New York University. Currently based in New York City, I lead and consult with both startups and corporate clients in order to help them create high-quality distributed systems and applications .

Directions

Say any of these commands in order to navigate the platform:


Main Menu

Home Page

About Page

Work Page

Visual Page

Next Page

Previous Page

Show Directions

Hide Directions

Deactivate Voice Control

Scroll Up

Scroll Down