New route prefab (routes.rhai): cars, buses, motorbikes, cyclists, people, deer or elephants move along waypoints, round a loop or there and back. Each way keeps to the left of the line (or right), corners are rounded into pieces of at most 45 degrees; there-and-back routes become loops with U-turns, so the two directions never share a strip. Engine: Prim::Travel / sprite.begin_travel / script travel(a, b, dur, windows) ... end(): the mover is drawn at a piece's start and slides to its end while it is on that piece, hidden otherwise. The renderer writes keyframes per piece (named by a hash of their content) into one <style> per view. Each piece is its own sprite with the lane strip as its sort extent (ext_reset), mitred at the corners, so movers pass in front of and behind trees, lamps and houses. Movers that look alike and never meet on a piece share one drawing. iso-travel pauses (not hides) in still, reduced-motion and ghosted views. Studio: meta shape "path" draws point by point (snapping like runs) and saves one object with pts; ending on the first point closes the loop. MCP: pts in the object schema, route guidance. Demos: streets gets traffic round the block, a bus, motorbikes, cyclists and strolling people (replacing the one-axis cars); country gets cars on the lane. Tests: Rust 79 (each mover on exactly one piece at every moment, in every rotation), Studio 125, web 99.
This commit is contained in:
1 parent
ccfd619a99
commit
5ec164a633
20 files changed
+698
-23
No files matched your search
@@ -140,10 +140,14 @@ html[data-theme=light] .iso-svg .iso-glint { display: inline; }
|
||||
.iso-svg .iso-flutter { transform-box: fill-box; transform-origin: center; animation: iso-flap .3s ease-in-out infinite alternate; }
|
||||
.iso-svg .iso-hop { animation: iso-hop 3.4s ease-out infinite; }
|
||||
.iso-svg .iso-park { display: none; }
|
||||
/* route movers: each piece's copy shows only while a mover is on it (keyframes made per piece);
|
||||
not .iso-a, so unanimated views pause them where they are instead of hiding them */
|
||||
.iso-svg .iso-travel { visibility: hidden; }
|
||||
/* paused off-screen (iso-off), when stopped (iso-still), with animation off and during pan/zoom gestures */
|
||||
.iso-off .iso-a, .iso-still .iso-a, .iso-off .iso-drive, .iso-still .iso-drive, .iso-off .iso-ledr, .iso-off .iso-ledo, .iso-still .iso-ledr, .iso-still .iso-ledo,
|
||||
.iso-anim-off .iso-a, .iso-anim-off .iso-drive, .iso-anim-off .iso-ledr, .iso-anim-off .iso-ledo,
|
||||
.iso-gesture .iso-a, .iso-gesture .iso-drive, .iso-gesture .iso-ledr, .iso-gesture .iso-ledo { animation-play-state: paused !important; }
|
||||
.iso-gesture .iso-a, .iso-gesture .iso-drive, .iso-gesture .iso-ledr, .iso-gesture .iso-ledo,
|
||||
.iso-off .iso-travel, .iso-still .iso-travel, .iso-anim-off .iso-travel, .iso-gesture .iso-travel, .iso-svg .iso-dim .iso-travel { animation-play-state: paused !important; }
|
||||
.iso-still .iso-park, .iso-anim-off .iso-park { display: inline; }
|
||||
.iso-animbtn { min-width: 30px; font-size: 13px; }
|
||||
.iso-bar [hidden] { display: none !important; }
|
||||
@@ -180,6 +184,7 @@ html[data-theme=light] .iso-svg .iso-glint { display: inline; }
|
||||
/* a system asking for less motion: still pictures, until the viewer turns animation on (iso-anim-on) */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.iso-wrap:not(.iso-anim-on) .iso-svg .iso-a, .iso-wrap:not(.iso-anim-on) .iso-svg .iso-ledr, .iso-wrap:not(.iso-anim-on) .iso-svg .iso-ledo { animation: none !important; }
|
||||
.iso-wrap:not(.iso-anim-on) .iso-svg .iso-travel { animation-play-state: paused !important; }
|
||||
.iso-wrap:not(.iso-anim-on) .iso-svg :is(.iso-puff, .iso-puff2, .iso-smoke, .iso-disc, .iso-glint, .iso-rip) { display: none; }
|
||||
.iso-wrap:not(.iso-anim-on) .iso-svg .iso-park { display: inline; }
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user