Tickle.

Tickle.

The word “tickle” jitters when the cursor hovers over. Sometimes, it can be tickled off the screen.


String message = "tickle";
float x, y; // X and Y coordinates of text
float hr, vr;  // horizontal and vertical radius of the text

void setup() {
  size(640, 360);
  
  // Create the font
  textFont(createFont("SourceCodePro-Regular.ttf", 36));
  textAlign(CENTER, CENTER);
  
  hr = textWidth(message) / 2;
  vr = (textAscent() + textDescent()) / 2;
  noStroke();
  x = width / 2;
  y = height / 2;
}

void draw() {
  // Instead of clearing the background, fade it by drawing
  // a semi-transparent rectangle on top
  fill(204, 120);
  rect(0, 0, width, height);
  
  // If the cursor is over the text, change the position
  if (abs(mouseX - x) < hr &&
      abs(mouseY - y) < vr) {
    x += random(-5, 5);
    y += random(-5, 5);
  }
  fill(0);
  text("tickle", x, y);
}

Functions Used

fill()

Sets the color used to fill shapes

Learn More
textWidth()

Calculates and returns the width of any character or text string

Learn More
size()

Defines the dimension of the display window width and height in units of pixels

Learn More
abs()

Calculates the absolute value (magnitude) of a number

Learn More
textAlign()

Sets the current alignment for drawing text

Learn More
setup()

The setup() function is run once, when the program starts

Learn More
rect()

Draws a rectangle to the screen

Learn More
random()

Generates random numbers

Learn More
text()

Draws text to the screen

Learn More
textFont()

Sets the current font that will be drawn with the text() function

Learn More
textAscent()

Returns ascent of the current font at its current size

Learn More
draw()

Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called

Learn More
noStroke()

Disables drawing the stroke (outline)

Learn More
textDescent()

Returns descent of the current font at its current size

Learn More