![](https://images.squarespace-cdn.com/content/v1/639b081c3cda4464c10189af/bc08a51d-1932-4523-98ef-29ada0644f3f/img1-10.png)
Pixel Painting
Created with Elaine
An interactive sketch where circles leave a trail as they move. The movement appears to be affected by the brightness of background images, and the trails have a color transition effect that's controlled by mouse actions.
Code
function draw() { if (clear) { background(0, 25); // Fading effect by drawing semi-transparent background } for (var i = 0; i < total; i++) { var circle = circles[i]; circle.angle += 1 / circle.radius * circle.dir; circle.pos.x += cos(circle.angle) * circle.radius; circle.pos.y += sin(circle.angle) * circle.radius; if (brightness(img.get(round(circle.pos.x), round(circle.pos.y))) > 70 || circle.pos.x < 0 || circle.pos.x > width || circle.pos.y < 0 || circle.pos.y > height) { circle.dir *= -1; circle.radius = random(3, 15); circle.angle += PI;
function mousePressed() { clear = true; // Start the clearing process transitionProgress = 0; // } function mouseMoved() { if (clear) { clear = false; // Stop clearing the screen when the mouse moves imgIndex = (imgIndex + 1) % imgs.length; // Cycle through images img = imgs[imgIndex]; // Load the next image background(0); // Clear the background fully before drawing the next image }
preload() Function
- loadImage(): This function is called for each of the four star images. They are loaded and stored in the imgs array for later use.
setup() Function
- Sets the current img to the first image in the imgs array.
- createCanvas(): Creates a drawing canvas with the dimensions of the img.
- background(): Sets the initial canvas background to black.
- frameRate(): Sets the number of times the draw() function is called per second.
- Initializes the circles array with 500 objects, each with properties for their previous and current positions, direction, radius, and angle.
draw() Function
- background(): If clear is true, draws a semi-transparent background to create a fading effect.
- Loops over each circle to update its position and draw it
- Updates the circle's angle based on its radius and direction.
- Moves the circle's position in the direction of the angle.
- Checks if the circle is over a bright spot or outside the canvas bounds and inverts its direction if so.
- Grabs the color from the current background image at the circle's position.
- Inverts this color and interpolates between the original and inverted color based on transitionProgress.
- Sets the drawing color to this interpolated color and draws a line from the circle's previous position to its new position.
- Updates the circle's previous position to its current position.
Increments transitionProgress to change the colors over time slowly.
![img1-1.png](https://images.squarespace-cdn.com/content/v1/639b081c3cda4464c10189af/52e73f2c-2f72-41ad-bc17-b187e4ff4508/img1-1.png)
![img1-2.png](https://images.squarespace-cdn.com/content/v1/639b081c3cda4464c10189af/72c52475-145a-4296-8187-7792ea6ce3e1/img1-2.png)
![img1-9.png](https://images.squarespace-cdn.com/content/v1/639b081c3cda4464c10189af/a63295af-c7a2-4fa4-b998-af14b9716810/img1-9.png)
![img1-8.png](https://images.squarespace-cdn.com/content/v1/639b081c3cda4464c10189af/407bebf2-9d89-4715-85b8-68b54db763a1/img1-8.png)
![img1-10.png](https://images.squarespace-cdn.com/content/v1/639b081c3cda4464c10189af/e41aef3c-a515-421e-85cc-b14ac6937c34/img1-10.png)
![img1-3.png](https://images.squarespace-cdn.com/content/v1/639b081c3cda4464c10189af/cf8fc1fc-bad3-489a-8020-61aed19f4a3f/img1-3.png)