Skip to main content
100%

itsAlive.js - mario

✓ Published0🌍 Public
SSladav
Last edited Jan 24, 2017
Created on Jan 16, 2017

This example demonstrates a Mario character that moves left, right, and jumps in response to arrow key input, with its position updated in real time on a grass-backgrounded page. Built with itsAlive.js and d3.v4, it uses living values and reducers to react to keydown/keyup events and a 60fps tick interval. The marioImage_ living value has side effects that update the img element’s src attribute and CSS left/bottom properties, while keypress, velocity, and position states flow through a functional pipeline.

AI-generated description

Similar vizzes

Loading thumbnail…

nyc-d3-live-code

This example demonstrates interactive SVG animations built with d3.v3. A row of circles oscillates vertically, first transitioning to a flat line, then responding to mouseover events with animated shifts in amplitude. A recursive rectangle-drawing function adds shrinking squares, and hovering over a rect triggers a d3.transition that randomly repositions it and changes its fill color. The sketch uses d3.select, d3.range, .transition(), and event listeners on SVG shapes.

11wheel
61% match
Loading thumbnail…

Effective JavaScript: Frogger

This is a complete implementation of the arcade game Frogger, rendered as an interactive animation on an HTML5 Canvas. The player controls a character with arrow keys to navigate across lanes of moving enemies, earning points by reaching the top while managing a limited number of lives. The code uses the game loop in `engine.js` with `requestAnimationFrame` for smooth updates, and custom `Enemy` and `Player` classes handle movement, collision detection, and score/life tracking. Sprites are loaded via the `Resources` utility and drawn using the Canvas `drawImage` method.

KKacieW
59% match
Loading thumbnail…

Moving Mouse

This example demonstrates a smiley face that follows the mouse cursor across an SVG canvas. As the user moves their pointer, a yellow circle with a black outline tracks the cursor’s exact position in real time. The visualization is built using React’s `useState` and `useCallback` hooks to manage and update the mouse coordinates, with the `onMouseMove` event handler updating the state. D3’s `arc` function is imported but unused, while ReactDOM renders the SVG circle whose `cx` and `cy` attributes are bound to the tracked position, creating a responsive interactive effect.

AAnupJoseph
59% match
Loading thumbnail…

Movements/Actions

This example demonstrates interactive SVG animations for exploring user-driven movements and actions. Users can click and hover over rectangular elements to trigger color changes and animated transitions, such as moving a rectangle across the canvas or modifying bar heights and positions. The visualization uses D3 v5 with transitions, event handling, and a JSON data file containing country rankings over time. The code employs `d3.transition`, `d3.easeLinear`, and D3's data-binding methods to update elements dynamically.

Kkau91
58% match
Loading thumbnail…

Fork of Clickable Circles

This visualization presents a realistic animated human figure built with D3.js v7, an SVG-based character composed of body parts defined in a JavaScript data file. The character performs a continuous walking animation with synchronized arm swings, leg motions, and a subtle bouncing gait. The scene also includes lifelike details like breathing torso movement, blinking eyes, pupil tracking, and slight head nods. The rendering leverages the D3 join method within `renderCharacter.js` to efficiently update SVG elements each animation frame, driven by an `unidirectionalDataFlow` state management loop and a `requestAnimationFrame` animation clock.

Aageelroro@gmail.com
58% match
Loading thumbnail…

Mouse follower

A smiling face rendered as an SVG follows the mouse cursor across the canvas. The example combines React's `useState` and `useCallback` with D3.js to manage interactive state and coordinate updates. As the user moves the mouse, the application updates the position of the face's center, which is drawn using D3-driven SVG elements like circles for the head, eyes, and mouth. The underlying HTML hides page overflow for a full-screen, immersive interaction.

VVBarn
58% match
Loading thumbnail…

Code Speaking

Typed characters appear in a running transcript alongside their ASCII decimal codes, while a corresponding symbol image fades in for each code. The animation proceeds character by character, with a two-second delay between steps. D3 v5 loads a CSV table that maps ASCII values to image links, and the code also uses `d3.select` to update the text area. User input comes from an HTML form and is processed via a JavaScript loop with `setTimeout` to sequence the transitions.

JJoker-tr
58% match
Loading thumbnail…

test

A continuously shuffling set of the 26 alphabet letters animates horizontally across an SVG canvas. The visualization demonstrates D3's general update pattern with a key function, showing how data joins handle enter, update, and exit selections. Each letter's x-position is recalculated based on its new index after each shuffle via `d3.shuffle`. An infinite loop triggers repeated updates, with a 750ms transition on position changes. The code primarily uses D3 v7 selections, `join()`, and `transition()` for the animation.

Aa15923647
58% match