Pitch Detector

100%

Pitch Detector

✓ Published0🌍 Public

Last edited Jan 25, 2015

Created on Jan 25, 2015

The Pitch Detector maps live audio input to an animated Torque visualization of car GPS tracks over the Nürburgring. Using the Web Audio API’s `AnalyserNode` and `ScriptProcessor`, it computes the average frequency amplitude from the microphone and dynamically resizes and recolors torque markers via `setCartoCSS`, with larger markers and brighter colors for louder pitches. The map, rendered with CartoDB.js on a canvas, pauses when volume drops and resumes when it rises again, creating a real-time audio-reactive display.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 7942740a263d3aa26e8c77adad206372

This visualization is an interactive canvas-based musical instrument that maps a two-dimensional grid of colored, circular nodes to specific musical notes. It shows how different spatial regions correspond to different tones, with the size and color of each node likely encoding additional sonic parameters such as pitch or octave. The application uses a custom `PitchDetector` algorithm and a `Player` class to translate node interactions into audio output, while the rendering relies on Canvas drawing operations. The code references the `notes_midi_freq.csv` dataset to map note names and MIDI numbers to their corresponding frequencies, enabling the generation of accurate musical tones.

MMAKIO135

67% match

Loading thumbnail…

PitchMapping

The visualization maps a soccer pitch using an SVG overlay on a fixed background image of a field, loaded from an external URL via CSS. The code renders a single text element that prompts editing, positioned at the top of the 600-by-392-pixel canvas. It relies on D3 v4’s `d3.select` and `append` methods to construct the SVG structure. The pitch background is applied through SVG CSS properties, while the text uses monospace styling. The example demonstrates a static, annotated field diagram rather than dynamic data, with the source being the background image itself.

TTollyCoburn

65% match

Loading thumbnail…

Gist d7a736227751a4a49072

This example demonstrates Torque, a CartoCSS compiler that renders animated point data directly on HTML canvas in the browser, bypassing server-side Mapnik processing for responsive visualizations. The code shows how CartoCSS rules are translated into canvas drawing instructions, with markers rendered efficiently using Sprites generated at runtime. It includes static torque maps, animated bubble maps that change size over time, and a non-map visualization, all leveraging the Torque library’s shader and cartocss_reference.js APIs. The approach keeps data client-side, enabling fast, interactive rendering of temporal geospatial data.

Aandrewxhill

64% match

Loading thumbnail…

Gist b7e664bfb668a567497d

An interactive audio visualization displays frequency data from a podcast episode as scattered points and a waveform on a black canvas. D3.js drives the animation loop, while the Web Audio API’s `AnalyserNode` captures frequency bins in real time. Two layered canvas contexts render fading frequency bars and a moving line, with colors shifting based on overall audio intensity. Clicking a button starts playback of the Serial podcast audio file, synchronizing the visualization with the sound.

11wheel

64% match

Loading thumbnail…

Torque runtime example | CartoDB.js

This example shows animated air quality data for Beijing, with circles varying in size and color according to hourly nitrogen dioxide (NO₂) values. The map uses a Torque layer from CartoDB.js to render time-series points over a Stamen Toner basemap, with cumulative aggregation over a single frame. The CartoCSS template defines the visual scaling and color thresholds, while the Leaflet map API centers the view and handles tile loading.

Aandrewxhill

63% match

Loading thumbnail…

Web tuner

This interactive web tuner visualizes the entire audible frequency range (A-1 at 13.75Hz to G#9 at 26578.5Hz) as a continuous circular scale, with the current note highlighted and animated as the user navigates. Built with D3.js for SVG rendering and Timbre.js for audio synthesis, it uses canvas for real-time sound visualization. Users explore the chromatic scale using arrow keys — Up/Down for adjacent semitones, Left/Right for octave jumps — while pressing S or Space toggles the generated sound on and off, linking visual position to auditory frequency.

Aandresin87

63% match

Loading thumbnail…

Torque runtime example | CartoDB.js

This example displays a Torque animated map of Twitter data from the table `twitter_wowfakta`, showing cumulative point aggregation over time. It uses CartoDB.js with the Leaflet map API, initializing a map centered on Java with a Stamen toner basemap. The Torque layer is created via `cartodb.createLayer` with a custom CartoCSS template that sets cumulative aggregation, a marker width of 4 pixels, and a red fill color. The animation runs through the Torque runtime, which processes the data client-side to render temporal patterns.

Aandrewxhill

63% match

Loading thumbnail…

Web Audio Theremin & Oscilloscope

A Web Audio Theremin lets a user control pitch and volume by moving the mouse vertically and horizontally, with a circular cursor tracking the pointer. An oscilloscope displays the live waveform, while a frequency ticker records recent pitch history as a filled area. The code uses D3 v4 for SVG rendering, transitions, and scales, alongside the Web Audio API's `OscillatorNode`, `GainNode`, and `AnalyserNode` to generate and visualize sound.

Aalexmacy

63% match