let pink1 = ['#F7D5E2']

let pink2 = ['#FBBAD6']

let pink3 = ['#FF69B4']

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

//This is the base ellipse, which will be hidden by a cover up until the cursor moves closer to the center.

function draw() {

  background(255);

  fill(pink1);

  stroke(pink2);

  strokeWeight(5);

  ellipse(windowWidth/2, windowHeight/2, windowWidth/4);

​

// I found the radial gradient function here: https://editor.p5js.org/owenmcateer/sketches/H1L08HrdQ It creates the two pink ellipses. I understand the parameters fairly well, but can't seem to find a way to make the outer color just be transparent. 

  let outer = color(0);

  outer.setAlpha(0);

  let inner = color(pink3);

  radialGradient(windowWidth*0.435, windowHeight/1.9, windowWidth/12, windowWidth/16, inner, outer);

  radialGradient(windowWidth*0.565, windowHeight/1.9, windowWidth/12, windowWidth/16, inner, outer);

// Since I couldn't figure out how to edit the transparency of the radial gradients themselves, I set up a "cover up" ellipse on top and tried to follow the same logic as the radial gradient function. More on that later.

  coverUpStroke(windowWidth/2, windowHeight/2, (windowWidth/4)+5);

  coverUp(windowWidth/2, windowHeight/2, (windowWidth/4)-5);

}

​

​

function radialGradient(x, y, w, h, inner, outer) {

  noStroke();

  for (let i = Math.max(w, h); i > 0; i--) {

    let step = i / Math.max(w, h);

    let color = lerpColor(inner, outer, step);

    fill(color);

    ellipse(x, y, step * w, step * h);

  }

}

​

// I found the setAlpha and distance functions in the p5js reference and paired the two so that the cover up fades as the cursor moves towards the center. The 1.2 dividing it at the end allows the fade to start a little before you actually hover over the ellipse — as if it's blushing in anticipation.

function coverUp(x, y, w, h) {

  coverUpColor = color(240);

  coverUpColor.setAlpha(dist(windowWidth/2, windowHeight/2, mouseX, mouseY)/1.2);

  fill(coverUpColor);

  ellipse(x, y, w, h);  

}

// I wanted the stroke to also change transparency, but couldn't achieve that using strokes themselves. So I made a bigger ellipse to mimick a stroke of the same weight.

function coverUpStroke(x, y, w, h) {

  coverUpStrokeColor = color(220);

  coverUpStrokeColor.setAlpha(dist(windowWidth/2, windowHeight/2, mouseX, mouseY)/1.2);

  fill(coverUpStrokeColor);

  ellipse(x, y, w, h);

}

​

​