* A third painting app created entirely by Chat GPT4 using chat.bing.com on Jan 26, 2024

 *

 * The prompt:

 *

 * "But that just turns everything blue. Can you use the HSV color space and change hue based on mouse speed?"

 *

 * See the other painting apps here:

 * 

 * - Version 1 (basic app): https://editor.p5js.org/jonfroehlich/sketches/jnliJsIwb

 * - Version 2 (added translucency): https://editor.p5js.org/jonfroehlich/sketches/EjBgSYhBE

 * - This version (added color): https://editor.p5js.org/jonfroehlich/sketches/Ajylq5-Fe

 * - Version 4 (added erase brush): 

 * 

 * By Professor Jon E. Froehlich

 * https://jonfroehlich.github.io/

 * https://makeabilitylab.github.io/p5js/

 * http://makeabilitylab.cs.washington.edu

 **/

​

// Here is Chat GPT4's description of the code

// In this code:

//

//

// * The colorMode function is used in setup to switch to the HSV color space.

// * The draw function calculates the speed of the mouse as the distance it has traveled since the last frame.

//   It then maps this speed to a range of hue values to get a color.

// * The fill function sets this color with an alpha value of 0.5 for partial transparency.

//

// The rest of the code is the same as before.

// You can run this code in the p5.js web editor or in any HTML file where the p5.js library is included. 

// To paint, simply click and drag the mouse across the canvas. The color of the brush will change depending on the 

// speed of your mouse. To clear the canvas, press any key. Enjoy painting! 🎨

​

let px, py;

​

function setup() {

  createCanvas(800, 600);

  background(255);

  colorMode(HSB, 360, 100, 100, 1);

  px = mouseX;

  py = mouseY;

}

​

function draw() {

  if (mouseIsPressed) {

    let speed = dist(px, py, mouseX, mouseY);

    let h = map(speed, 0, 50, 0, 360);

    fill(h, 100, 100, 0.5);

    noStroke();

    ellipse(mouseX, mouseY, 20, 20);

  }

  px = mouseX;

  py = mouseY;

}

​

function keyPressed() {

  background(255);

}

​

​

​

​