Clickable Text

Clickable Text

January 6, 2021

example p5.js javascript input

This sketch creates text that opens a link when you click it. The textWidth(), textAscent(), and textDescent() give you the width and height of a string, which you can use to calculate the bounding box of the text. Then you can check whether the mouse is inside that box, which is what the isMouseInsideText() function does.

Black Lives Matter

Remix Ideas

  • Show the bounding box around the text.
  • Try different fonts and styles.
  • Add a link to your portfolio page in your sketches.

Input Examples


Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!