Gen-Art Interactive Canvas

This web-based Interactive canvas uses a mathematical concept known as the De Jong Attractor to generate millions of pixels across the screen. Users can alter the placement of the pixels by changing the A, B, C, and D variables while altering the colors by changing the R, G, and B variables.

Design Process

This project was created using HTML, CSS, and p5.js. HTML was used to make the foundation for the site, including all the text and containers. CSS was then used to style these elements and create the dials. JavaScript was then used to create the canvas draw the attractor points (thousands of plots per second), and then manipulate the plotting based on user interaction with the control panel. Below is a video showing the generation in real-time.

You may also like