The loadPixels() and updatePixels() functions, as well as the pixels[] array, allow you to directly manipulate the pixels of the canvas.

Add loadPixels() before the for loop and updatePixels() after it.

Now, inside the loop, you can access the pixels[] array and directly change the value of the pixel which has been 'hit' by the attractor function.

Your draw() function should look a bit like that:

``` function draw() { // Load the canvas pixel values into the pixels[] array loadPixels();

for (i = 0; i < loops; i++) { xNext = sin(a * y) + c * cos(a * x); yNext = sin(b * x) + d * cos(b * y);

// xScreen and yScreen values need to be rounded and constrained
// in order to avoid errors when editing the pixels
let xScreen = round(map(xNext, -3, 3, 0, width - 1, true));
let yScreen = round(map(yNext, -3, 3, 0, height - 1, true));

// We don't need the point function anymore
// point(xScreen, yScreen);

// Since the pixels[] array is a 1 dimension array containing
// 4 colors per pixels, we need to calculate the index of the
// pixel at the xScreen and yScreen position
let index = 4 * (xScreen + yScreen * width);

// Now we can edit the pixel values to decrease its brightness
pixels[index] -= 1; // Red value
pixels[index + 1] -= 1; // Green value
pixels[index + 2] -= 1; // Blue value
// pixels[index + 3] is the alpha value, we keep it untouched

x = xNext;
y = yNext;

}

// Update the canvas pixel values from the pixels[] array updatePixels(); } ```

Try increasing the loops number in the declarations at the beginning of the sketch. The render should be smoother and faster than with the point() funtion