p5js @ntsutae birds noise sin cos

100%

p5js @ntsutae birds noise sin cos

✓ Published0🌍 Public

Last edited Dec 30, 2019

Created on Dec 30, 2019

A monochrome generative sketch draws 480 vertical strands that shift horizontally based on Perlin noise, creating a flowing, wave-like field. Each strand renders two short line segments whose angles alternate between sine-derived values, producing subtle branching or flicker effects. The canvas scales progressively and fades stroke brightness from white to dark gray along the vertical axis. Built with p5.js, the piece uses `noise()`, `sin()`, `cos()`, and `map()` in a single `draw()` loop, adapting a code snippet originally shared on Twitter.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist aad210d07e4d4699b07d41be7364a0a2

This example explores a particle-generation idea using the HTML5 Canvas API and the `random.noise2D` function from the `noisejs` library. It shows a system that seeds a set of particles and then propagates their positions by passing starting coordinates through 2D Perlin noise to obtain an angle value. The next location for each particle is calculated using basic trigonometry, `Math.cos` and `Math.sin`, based on that noise-derived angle. The visualization then draws line segments between consecutive points with canvas `moveTo` and `lineTo` methods, creating organic, flow-like paths.

SStephen

67% match

Loading thumbnail…

p5 L-Systems

This generative sketch implements a Lindenmayer system to draw an intricate, plant-like fractal pattern. An animated "turtle" traverses a precomputed string of symbols, interpreting each character as a drawing command—moving forward, turning, or placing decorative dots. The p5.js `setup()` and `draw()` functions handle the animation loop, while custom functions `lindenmayer()` and `drawIt()` manage rule substitution and rendering. Random color values and Gaussian-distributed dot sizes create a lively, organic texture over the thin black lines.

PPhilippe Rivière

66% match

Loading thumbnail…

P5.js 64 x 128

This example renders a responsive grid of 64 columns by 128 rows of circles, colored by Perlin noise on an HSB palette. It uses the p5.js library with `createCanvas`, `noise`, `fill`, and `ellipse` to draw the visualization. The sketch also integrates `p5.AudioIn` to capture microphone volume, which dynamically adjusts the noise animation speed. The code demonstrates a custom hot-reloading setup for VizHub, extracting p5 functions and binding them to the sketch instance.

EEJ Fox

65% match

Loading thumbnail…

TestOpenProcessing

This generative sketch uses p5.js to draw a rotating, recursive tree-like structure. Eight branches radiate from the canvas center, each one splitting into three smaller branches with angles controlled by a continuously incrementing theta variable. The line weight thins with each recursion level, and all lines are rendered in a bright cyan color against a black background, creating a hypnotic, organic pattern. The animation runs indefinitely, with the branch angles evolving smoothly over time.

YYannael

65% match

Loading thumbnail…

Fork of Hello HTML

A simple natural scene rendered with p5.js depicts two cats, two dogs, three birds, four butterflies, two trees, and five flowers moving across a light-gray canvas. Animals drift in random directions using the p5.js `cos()` and `sin()` functions, wrapping around screen edges. Plants remain stationary, with trees drawn as brown rectangles and green triangles, while flowers use randomly colored ellipses via the `random()` method. Static elements are displayed before animated ones in the `draw()` loop.

NNanditha Reddy

65% match

Loading thumbnail…

p5-starter

This example demonstrates a simple animated pattern of five pink rectangles, each with a random width, stacked vertically on a gray background. The sketch runs at five frames per second, causing the rectangle widths to change with every frame. It uses the p5.js library, specifically the `createCanvas`, `background`, `fill`, `rect`, and `random` functions within the `setup` and `draw` loop. The code does not load any external data; it generates all visual variation procedurally.

AAlark Joshi

64% match

Loading thumbnail…

TestOpenProcessing

A generative fractal tree animation renders eight branching structures radiating from the center of a 650×650 canvas. Each branch recursively draws cyan line segments whose angles and lengths are modulated by a continuously incrementing `theta` value, creating a slowly rotating, symmetric pattern. The sketch uses the p5.js library’s `createCanvas`, `translate`, `rotate`, `push`/`pop`, and recursive `branch` function, with `strokeWeight` tapering as recursion depth increases. No external data is loaded; the visual emerges purely from procedural geometry and time-based animation.

YYannael

64% match

Loading thumbnail…

#10print

A circular grid of slash marks continuously regenerates inside a black, round SVG canvas, its patterns and opacity driven by 3D Simplex noise. Each cell's rotation flips between slash and backslash, while opacity varies with the noise value, producing an organic, flickering maze. The animation runs via `d3.interval`, updating per-cell values and applying transitions with `attrTween`-like direct attributes. It uses D3 v4, the `simplex-noise.js` library, and draws SVG paths for the line characters.

KKcnarf

64% match