Change Colour on Mouse Over

In this blog post, I will explain my journey in trying to create a change colour function on mouse over.

Example by Akroll

For assignment 1, I want to add a simple function where you can hover over the text and change the colour theme. To do that, I looked for a hover button examples on google and found this example by akroll.

In the example above, the rectangle will change colour when you hover a certain area of the canvas.

My Plan for Assignment 1

Inspired by the example above, I tried to create my own code by combining the if mouse over funtion with text using custom functions.

Setting up the Text

• First I added the fonts in the preload function.

function preload () {
  aclonica = loadFont ('fonts/Aclonica-Regular.ttf')
  princessSofia = loadFont ('fonts/PrincessSofia-Regular.ttf')
}

• Then, I created a custom function for the text and add the funtion in the draw function. I positioned the text in the middle of the canvas

function textContent() {
  fill (225)
  textFont (aclonica)
  textSize (72)
  text (`RMIT`, width / 3, height / 2 - 30)

  fill (227, 229, 224)
  textFont (princessSofia)
  textSize (32)
  text (`Creative Coding`, width / 3, height / 2 + 15)
  text (`Specialisation`, width / 3 + 30, height / 2 + 50)
}

The Change Colour Function

• The changeColour() function uses an if function and need 4 coordinates to define the mouse over area. Therfore, I used a console.log to help me know the area behind the text. In the example below, the function will create a gray rectangle on a black background. And if you hover over the rectangle, the background will change into hotpink and the rectangle will change into brown.

function changeColour() {
  function changeColour() {
  if ((mouseX > 180) && (mouseX < 395) &&
  (mouseY > 70) && (mouseY < 140)) {
  background('hotpink')
  fill('brown')
  } 
  else {
  background('black')
  fill('gray')
  }
  rect(180, 70, 215, 70)
}

• Considering that I have another set of words below the RMIT word, I added another rectangle and an else if function.

function changeColour() {
 if ((mouseX > 180) && (mouseX < 395) &&
  (mouseY > 70) && (mouseY < 140)) {
  background('hotpink')
  fill('brown')
  } 
  else if ((mouseX > 180) && (mouseX < 395) &&
  (mouseY > 150) && (mouseY < 225)) {
  background('blue')
  fill('black')
  } 
  else {
  background('black')
  fill('gray')
  }
  rect(180, 70, 215, 70, 20)
  rect(180, 150, 215, 75, 20)
  }