Maths functions, mostly from Processing.js

100%

Maths functions, mostly from Processing.js

✓ Published0🌍 Public

Last edited Dec 28, 2014

Created on Dec 28, 2014

This example demonstrates a collection of mathematical visualization techniques implemented in JavaScript, primarily relying on custom pseudo-random number generation and Perlin noise algorithms. The code implements Marsaglia's random number generator and a full Perlin noise implementation with 1D, 2D, and 3D variants, which can be used to create organic, procedural textures and patterns. The visualization likely renders these noise functions as visual output, showcasing how deterministic noise algorithms can produce complex, natural-looking variations. The code is based on Processing.js conventions, with a Math2 class providing random and noise functions similar to those found in the Processing API, allowing for generative art and data-driven graphics.

AI-generated description

Similar vizzes

Loading thumbnail…

05_Mathematical Graphic Patterns

This animated canvas visualization generates shifting mathematical graphic patterns from a procedural grid of circles. Based on tutorial code from MIT, it uses raw Canvas 2D API calls like `getContext('2d')`, `fillRect`, and `arc` to render the motion. A `requestAnimationFrame` loop updates time parameters, causing sinusoidal positions, radii, and RGB color values to oscillate continuously, creating a dynamic, kaleidoscopic effect. The embedded dataset of angular and value pairs influences the pattern’s underlying structure, though the visual output is entirely algorithmic rather than data-driven.

AAbdul Salam Almadani

70% match

Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization generates evolving, abstract geometric patterns from mathematical formulas. White dots are drawn programmatically based on sine and cosine functions, with positions and speeds influenced by a continuously incrementing time variable. The rendering uses the HTML5 Canvas API’s `getContext('2d')`, `fillRect` for semi-transparent fading trails, and `arc` to draw each circle, creating a complex, shifting web of points that resembles a modern-day screensaver.

CConvert-Jade

69% match

Loading thumbnail…

Polymaps / Procedural Perlin

This example displays a procedurally generated Perlin noise pattern rendered as a map using Polymaps. A web worker computes the noise values for each tile, writing RGB pixel data into an array, which is then posted back and displayed as a colorful texture. The code implements Ken Perlin’s classic noise algorithm from scratch, including fade, lerp, and gradient functions, and uses the `postMessage` API to communicate tile data asynchronously. The visualization demonstrates how noise can be generated on demand for arbitrary zoom levels and map coordinates.

Mmbostock

69% match

Loading thumbnail…

Mathematical Graphic Patterns

Mathematical Graphic Patterns is an animated canvas screensaver that generates a shifting grid of colorful circles. The code uses the Canvas 2D API via `canvas.getContext('2d')` and relies on `requestAnimationFrame` for continuous motion. Each circle’s position, size, and RGB color are computed from sine and cosine functions of its grid coordinates and a slowly incrementing `time` variable, creating a flowing, kaleidoscopic effect. A partially transparent black overlay fades older frames, leaving trails that enhance the visual complexity.

CConvert-Jade

68% match

Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization generates evolving geometric patterns from a grid of circles. Each frame, the code computes positions and radii using trigonometric functions of time and grid coordinates, creating swirling, morphing shapes with shifting colors. The animation runs continuously via `requestAnimationFrame`, with a semi-transparent black overlay (Canvas `fillRect`) producing trailing motion blur effects. The canvas resizes dynamically to fit the window, and all rendering uses the native Canvas 2D API, including `arc` and `fill` for circle drawing. No external libraries are used; the math-driven design follows the original MIT tutorial’s approach.

CConvert-Jade

67% match

Loading thumbnail…

Mathematical Graphic Patterns

This example creates an animated, abstract visualization of mathematical graphic patterns. A grid of 900 points is repositioned and resized over time, with each point’s radius and color changing continuously, producing a shimmering, organic composition on a canvas. The animation is built using the Canvas API, with a recursive `requestAnimationFrame` loop driving the updates. The code defines a custom `rgb()` helper and uses trigonometric functions to compute positions and radii, while a faint black overlay creates a fading trail effect. The visualization adapts to the browser window’s dimensions by resizing the canvas dynamically.

CCurran Kelleher

67% match

Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization displays a grid of circles that ripple outward in concentric, rotating patterns resembling a living mathematical kaleidoscope. The code, written by hotdoujiang, generates each circle’s position and radius using trigonometric functions of a continuously incrementing `time` variable, while colors shift through an RGB spectrum based on grid coordinates. The rendering uses the raw Canvas 2D API with `fillRect` to create a fading trail effect and `arc` calls to draw individual circles. The pattern adapts to the window size, recalculating dimensions and offsets as the browser resizes.

Hhotdoujiang

66% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

The visualization displays an animated, generative pattern of colorful circles arranged in a grid. It simulates a modern-day screensaver with dynamic motion, where each circle's position, size, and color shift over time. The piece uses Canvas API calls for drawing, including `beginPath`, `arc`, and `fill`, and relies on `requestAnimationFrame` to drive the continuous animation. The effect is created through mathematical functions, such as sine and cosine, that calculate coordinates and radii based on grid indices and a time variable.

RRSSBDAE

66% match