Skip to main content
100%

circulo cromatico (p5.js)

✓ Published0🌍 Public
Aaaizemberg
Last edited Jun 8, 2020
Created on Jun 8, 2020

Circulo cromatico is an interactive color wheel built with p5.js. It shows a single circular arc divided into a dynamic number of colored slices, each rendered with the HSB color mode. The number of slices and the arc’s diameter change with the mouse position: horizontal movement alters the portion count (from 3 up to 32), while vertical movement adjusts the arc’s size. The sketch uses p5.js’s `createCanvas`, `arc`, and `colorMode` functions, redrawing the background to black each frame. The data source is the mouse coordinates, directly driving the visual parameters.

AI-generated description

Similar vizzes

Loading thumbnail…

p5JS

In this interactive visualization, users draw freehand with the mouse, and their drawing is recreated as an animated series of rotating epicycles. The application uses the p5.js library to handle canvas rendering, mouse input, and animation. After the drawing is complete, the code computes its Discrete Fourier Transform to decompose the path into a set of frequency components, then sorts them by amplitude and reconstructs the shape using circular motion. The output shows both the tracing circles and the resulting magenta path being redrawn over time.

TTanmay Bishnoi
73% match
Loading thumbnail…

First P5 Assignment

A single circle in the center of the canvas, rendered with the Processing.js library (p5.js), changes color upon mouse click. The visualization shows a static composition of three concentric ellipses, all sharing the same randomly selected RGB color with a semi-transparent fill. The program, written in JavaScript, uses the p5.js `setup()`, `draw()`, and `mousePressed()` functions. When the mouse is pressed within the largest ellipse, new random values for red, green, and blue are assigned, altering the stroke and fill of all shapes. The rendering occurs on a 720x400 pixel canvas.

AAlark Joshi
72% match
Loading thumbnail…

P5_Test

A visualization built with p5.js renders a set of three concentric circles against a dark background. The sketch creates a 1000 by 500 pixel canvas and uses the `createCanvas` and `circle` functions to draw each circle at the same horizontal center with increasing radius and vertical offset. The `noLoop` function stops continuous redrawing, leaving a static composition of purple shapes on a light gray field.

CChandana Srinivas
72% match
Loading thumbnail…

Fork of React + D3 Viz Starter

A circular color wheel displays all 148 CSS named colors as equal-width arcs emanating from the center. The visualization loads its data from a CSV file listing named colors and their RGB hex values, then renders each arc using the d3.arc() function within a React component. As the user moves the mouse, the entire group of arcs rotates by an offset calculated from the cursor's x-position, creating an interactive feel. The code uses React hooks like useEffect and useMemo to manage data loading and arc generation.

OOssianL
71% match
Loading thumbnail…

Color Wheel with React

This color wheel visualizes all CSS named colors as a single burst of pie slices radiating from the center. Each slice represents one color from the CSS color data loaded via `d3.csv`. The React app uses `useState` and `useEffect` to fetch the data, then renders SVG paths computed with `d3.pie` and `d3.arc`. The `fill` property of each path is set to the color’s hex value from the dataset, creating a full-spectrum circular arrangement.

Iikerson
70% match
Loading thumbnail…

30.000 círculos

A canvas displays 30,000 randomly placed circles, each with a random position, radius up to 10 pixels, and a semi-transparent random color. The example uses the HTML5 Canvas API, specifically `getContext("2d")`, `beginPath`, `arc`, and `fill`, to draw every circle individually in a single loop. Each circle’s fill style is set to an `rgba()` string with random red, green, and blue values from a custom `rc()` function and a fixed alpha of 0.5. The data is generated procedurally with `Math.random()`, producing an overlapping, colorful field with no external dataset.

Aaaizemberg
70% match
Loading thumbnail…

visualising css colour data with D3

This example visualizes CSS named color data as a circular radial burst, with each slice representing one color from the dataset. The code loads the data using `d3.csv` from a GitHub gist, then renders the visualization as SVG paths using React. D3’s `pie` generator assigns equal angles to each entry, while `arc` with an inner radius of zero and outer radius spanning the width produces the filled wedge shapes. Each path is colored by the hexadecimal value from the corresponding data row, creating a full spectrum wheel.

HHollyClarke19
70% match
Loading thumbnail…

Rotating Disks

This example shows a cluster of rotating color wheels built from CSS named colors loaded via d3.csv from a GitHub gist. Each wheel is composed of four concentric rings, rendered as SVG pie arcs using d3.arc and d3.pie, with React components creating the ring structure. The rotation is driven by d3.timer, updating a rotation state that applies different rotation speeds and directions to each ring via transform attributes. Twelve ring components are arranged in a triangular grid around a central point, creating a dynamic, layered visual pattern.

Yyuzhang21
69% match