Clickable Text

p5.js Tutorials
Tutorials
/
p5.js Tutorials
/
Input
/
Clickable Text
Previous:
Input

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.
Previous:
Input

Input Examples

Clickable Text Clickable Text

Create text that opens a link when you click it.

Mouse Ripple Mouse Ripple

Show a ripple when you click the mouse.

Grouchy Face Grouchy Face

Make your computer mad when you click the mouse.

Warmer / Colder Warmer / Colder

Play a game of warmer / colder with your computer.

Add Your Own Example Add Your Own Example

Add your own example to Happy Coding.

Comments

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!