Wave Grid
225 cubes rising and falling like water. Drag to look around.
# Wave Grid: 225 cubes rising and falling like water.
import math
renderer = THREE.WebGLRenderer(canvas=canvas, antialias=True)
renderer.setPixelRatio(pixel_ratio)
renderer.setSize(width, height, False)
scene = THREE.Scene()
scene.background = THREE.Color("#0b0b14")
camera = THREE.PerspectiveCamera(45, width / height, 0.1, 100)
camera.position.set(0, 12, 18)
camera.lookAt(0, 0, 0)
scene.add(THREE.HemisphereLight("white", "#334", 2.5))
n = 15
cubes = []
for row in range(n):
for col in range(n):
cube = THREE.Mesh(THREE.BoxGeometry(0.6, 0.6, 0.6),
THREE.MeshStandardMaterial(color=f"hsl({(row + col) * 12}, 80%, 55%)"))
cube.position.set(col - n / 2 + 0.5, 0, row - n / 2 + 0.5)
scene.add(cube)
cubes.append((cube, math.hypot(col - n / 2, row - n / 2)))
t = 0
def update(dt):
global t
t += dt
def draw():
for cube, distance in cubes:
cube.position.y = math.sin(distance * 0.8 - t * 3) * 0.8
renderer.render(scene, camera)
Run it yourself
pip install pyctures pyctures run wave_grid.py
Put it on your website
pyctures build wave_grid.py -o site/
Python runs in the visitor's browser, so any static host works. How · This file on GitHub