martes, 9 de noviembre de 2021

P5JS Cosquillas - tickle

 P5JS Cosquillas - tickle

https://p5js.org/es/examples/interaction-tickle.html

let message = 'tickle',

  font,

  bounds, // almacena  la posición, ancho y alto de la caja contenedora del texto

  fontsize = 60,

  x,

  y; // coordenadas x e y del texto


function preload() {

  font = loadFont('assets/SourceSansPro-Regular.otf');

}


function setup() {

  createCanvas(710, 400);


  // definir la fuente del texto

  textFont(font);

  textSize(fontsize);


  // obtener ancho y alto del texto para centrarlo inicialmente

  bounds = font.textBounds(message, 0, 0, fontsize);

  x = width / 2 - bounds.w / 2;

  y = height / 2 - bounds.h / 2;

}


function draw() {

  background(204, 120);


  // escribir el texto con negro y obtener su caja contenedora

  fill(0);

  text(message, x, y);

  bounds = font.textBounds(message, x, y, fontsize);


  // revisar si el ratón está dentro de la caja contenedora y moverse si es así

  if (

    mouseX >= bounds.x &&

    mouseX <= bounds.x + bounds.w &&

    mouseY >= bounds.y &&

    mouseY <= bounds.y + bounds.h

  ) {

    x += random(-5, 5);

    y += random(-5, 5);

  }

}


No hay comentarios:

Publicar un comentario