​

// Uncomment `saveCanvas('magnifier-icon')` to

// download the icon as a PNG file.

​

// Uncomment background(backgroundColor) to see background

​

// Light version: set handleColor to 150

// Dark version: set handleColor to 100

​

// Canvas size is 44px by 44px, 

// the min recommended size for an icon button

​

function setup() {

  // Styles

  let padding = 7;

  let glassColor = 235;

  let handleColor = 150;

  let backgroundColor = 200;

  // Circle

  let circleWeight = 2.5;

  let circleInnerRadius = 8.5;

  let circleMidRadius = circleInnerRadius + circleWeight / 2;

  let circleOuterRadius = circleInnerRadius + circleWeight;

  let circleX =  padding + circleOuterRadius;

  let circleY = circleX;

​

  // Unit vector

  let uX = cos(QUARTER_PI);

  let uY = sin(QUARTER_PI);

  // Handle

  let handleX = circleX + circleMidRadius * uX;

  let handleY = circleY + circleMidRadius * uY;

  let handleLength = 2 * circleInnerRadius;

  // Magnifying glass with handle

  let magnifierWidth = circleOuterRadius + (circleMidRadius + handleLength) * uX;

  let magnifierHeight = circleOuterRadius + (circleMidRadius + handleLength) * uY;

​

  createCanvas(

    ceil(magnifierWidth) + 2 * padding, 

    ceil(magnifierHeight) + 2 * padding

  );

  // Log canvas width and height for testing

  // console.log(`canvas width: ${width}`);

  // console.log(`canvas height: ${height}`);

  // background(backgroundColor);

  stroke(handleColor);

  fill(glassColor);

  strokeWeight(circleWeight);

  circle(circleX, circleY, 2 * circleMidRadius);

  line(

    handleX,

    handleY,

    padding + magnifierWidth,

    padding + magnifierHeight

  );

  // Guides for testing

  // stroke('red');

  // strokeWeight(1);

  // line(padding, 0, padding, height);

  // line(width - padding, 0, width - padding, height);

  // line(0, padding, width, padding);

  // line(0, height - padding, width, height - padding);

  // saveCanvas('magnifier-icon');

}