Skip to main content
SimilarExport ZIP
100%

Antescher

✓ Published0🌍 Public
FFraserChapman
Last edited Mar 13, 2025
Created on Feb 19, 2025

A rotatable isometric map of the video game Ant Attack is rendered on an HTML canvas. The map is drawn as a grid of 3D blocks, each shaded with gray faces to simulate depth. Users can press "m" and "n" to rotate the view in 90-degree increments, left-click and drag to pan, and use the mouse wheel to zoom. The example is built with plain JavaScript, using canvas drawing and event listeners for all interactions.

AI-generated description

Rotatable Ant Attack Map

Hacked together from Ant Attack on the ZX Spectrum

Run gist here

Similar vizzes

Loading thumbnail…

Untitled

This visualization demonstrates a first-person raycasting engine rendered on an HTML canvas using the p5.js library. It shows a top-down map view alongside a player-controlled camera that casts rays to detect wall collisions, simulating a 3D perspective effect. The code uses p5.js functions like `fill`, `rect`, `circle`, and `line` for drawing, while the WebGL-accelerated canvas handles the animation loop. The scene features a grid-based maze with red player indicators and directional lines.

Rrahulram70
65% match
Loading thumbnail…

Map & Globe

This example presents two synchronized geographic visualizations side by side: an interactive Leaflet.js map and a D3-based orthographic globe rendered on HTML5 Canvas. The Chiasm framework and its layout and links plugins manage the component layout and bidirectional data binding, so panning and zooming on the map updates the globe’s rotation and viewport circle, and dragging the globe repositions the map. The globe draws landmasses and country borders from a TopoJSON world dataset, while the map uses CartoDB basemap tiles. A gray circle on the globe indicates the map’s current viewport.

PPatrick Wojda
61% match
Loading thumbnail…

Antimeridian Cutting II

This interactive visualization demonstrates antimeridian cutting with an interrupted Homolosine projection, allowing a user to rotate the globe by moving the mouse or touching the canvas. It renders land polygons from the World 110m TopoJSON dataset onto a Canvas element using d3.geoInterruptedHomolosine and d3.geoPath, with the projection’s rotation updated via scale functions mapping pixel coordinates to longitude and latitude. A clipping region outlines the sphere, and the land is filled in black over a white background.

Mmbostock
61% match
Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example shows a continuously rotating and reprojecting world map rendered onto a canvas texture inside a 3D A-Frame scene. It demonstrates how geographic data can be integrated with WebVR-style environments, drawing country polygons, graticules, and the sphere outline using D3 v4’s `d3.geoMercator` projection, `d3.geoPath`, and `d3.geoGraticule`. The animation runs via `d3.timer`, updating the projection rotation each frame and clearing/redrawing the canvas context. The map uses GeoJSON world land data loaded from `land.geojson` and displays alongside a simple A-Frame box primitive.

AAlexanderDavidson
61% match
Loading thumbnail…

todo

A simple game rendered on a Canvas element, controlled by clicking the window to launch a magenta square upward against gravity. Obstacles, rendered as green blocks, continuously scroll from right to left; the score increments every frame the player avoids them, and resets upon collision. The game loop uses a custom `d3.timer` to update physics and redraw the canvas, while a separate `div` element displays the score. The code applies basic geometry for collision detection and movement, with the D3.js library handling selection and layout conventions.

11wheel
60% match
Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example shows a world map rendered on interactive 3D objects—a plane and a sphere—inside an A-Frame virtual reality scene, with the map rotating continuously over time. The geographic data is drawn to a 2D canvas using `d3.geoEquirectangular` for the projection, `d3.geoPath` for generating paths, and `d3.geoGraticule` for the grid lines. A `d3.timer` controls the animation loop, while an A-Frame component (`draw-canvas`) updates the canvas texture on the 3D entities. The map geojson includes country polygons from a natural earth dataset.

AAlexanderDavidson
60% match
Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example demonstrates interactive zooming and rotating of a world map through a 3D scene, allowing for dynamic reprojection of the geography. The visualization combines D3.js for map rendering with A-Frame, a WebVR framework, to create a three-dimensional environment where the map can be manipulated. It uses the Datamaps library to render the world map with custom data fills and overlays like arcs and bubbles, while A-Frame's `a-scene` handles the 3D elements and camera controls. The map is rendered onto a canvas element, which is then used as a material on 3D objects within the scene.

AAlexanderDavidson
60% match
Loading thumbnail…

nyc map

This example displays three rotating three-dimensional cubes on a gray background, each spinning continuously around its x- and y-axes. Built with Three.js and rendered to a Canvas via WebGL, the scene uses a perspective camera and directional lighting to give the geometric shapes depth. The cubes are created with `THREE.BoxGeometry` and `MeshPhongMaterial`, and the animation loop uses `requestAnimationFrame` to update rotations over time.

Ssabrinamochi
60% match