this project draws an interactive eye using text characters on an html canvas. the eye follows the pointer, blinks, and closes while the page is scrolled.
the page is divided into a grid. every grid cell can hold one character.
- each cell is 9 pixels wide and 15 pixels tall
- the code checks every cell to decide whether it belongs to the eye
- cells inside important parts of the eye receive a higher density
- density is turned into a character, color, and brightness
this means the eye is not a stored image. it is rebuilt from math every frame.
the number of columns and rows depends on the browser size:
columns = screen width / cell width
rows = screen height / cell height
both results are rounded up so the grid covers the entire screen. the center of the grid becomes the center of the eye. the vertical center is moved slightly upward so the eye feels better positioned.
for every cell, the code measures its horizontal and vertical distance from the center:
dx = column - center x
dy = row - center y
because text cells are taller than they are wide, dy is corrected using the ratio between cell height and cell width. without this correction, circles would look stretched.
those distances are then normalized by the eye width and height:
nx = dx / eye width
ny = dy / eye height
normalized values make the same eye formula work on screens of different sizes.
the curved opening of the eye uses this simple parabola:
lid = 1 - nx²
near the center, nx is close to 0, so the lid opening is large. near either side, nx approaches -1 or 1, so the opening becomes small.
a cell is inside the eye when:
absolute ny < lid
and
absolute nx < 1
this creates the pointed oval shape of the eyelids.
the iris uses distance from its center:
iris distance = √(x distance² + y distance²)
this is the standard distance formula.
sizes are kept proportional:
iris radius = eye width × 0.30
pupil radius = iris radius × 0.42
technically it should be consistent across all browsers
use, modification, and sharing are allowed only with credit to c4ist and a link to https://github.com/c4ist. see the license for the complete terms.
made for fun - credit if used :)