# Hover effect triangle

Hey everyone,

i started arround 1 month ago with programming and loving p5js. Right now I have a problem I can’t figure out to implement into my code. I want to have a hover effect on a triangle. I did this with the collide2d library. See code here:

``````function setup(){
createCanvas(400, 400);
}
var hit = false;

function draw() {
background(255);
triangle(200, 120, 120, 290, 280, 290);

hit = collidePointTriangle(mouseX, mouseY, 200, 120, 120, 290, 280, 290);

if(hit){
triangle(200, 100, 100, 300, 300, 300);
} else {
triangle(200, 120, 120, 290, 280, 290);
}
stroke(hit ? color('red') : 0);
print('colliding?', hit);
}
``````

So far so good, but when I want to implement this into my code where I’m working with objects, it wont work.

``````var hit = false;
// Triangel
myt = {
x1: 800,
y1: 830,
x2: 1150,
y2: 165,
x3: 1550,
y3: 830
};
dt();
}

function dt() {
push();
fill(drawColor);
triangle(myt.x1, myt.y1, myt.x2, myt.y2, myt.x3, myt.y3);
pop();
}

function draw() {
background(255);
hit = collidePointTriangle(mouseX, mouseY, myt.x1, myt.y1, myt.x2, myt.y2, myt.x3, myt.y3)
if (hit) {
print('colliding?', hit);
triangle(myt.x1 + 60, myt.y1 + 60, myt.x2 + 40, myt.y2, myt.x3, myt.y3);
}
dt();
}
``````

Can anyone help me? The collision detection works, but I cant implemt the hover effect.

Hi @caleidolex,
What exactly is not working ?

if you are using a canvas of 400x400 …

the coordinates you’ve chosen for your triangle are way beyond !?

Cheers
— mnse

hey @mnse,
sorry that was probaply not clear enough. The first code was just a test to figure out how the library works. The second one is a snippet of my code where I want so have the collision in it. So when my mouse is over the trinagle it should grow. This is the part which works in the first part, but when I put it into my project, the hovering does not work. Here the hole project:

``````let firstColor = '#A1C6BE';
let secondColor = '#1F299C';
let thirdColor = '#FAB73D';
let colorParam;
let drawColor;

let myf;
let myr;

var hit = false;

function setup() {
let queryString = new URLSearchParams(window.location.search);
// set variable to read value
colorParam = queryString.get("color");

// check for values
if (colorParam == "blue") {
drawColor = firstColor;
}

if (colorParam == "dark-blue") {
drawColor = secondColor;
}

if (colorParam == "yellow") {
drawColor = thirdColor;
}
var cnv = createCanvas(windowWidth, windowHeight);
cnv.style('display', 'block');
stroke(255);

myf = {
x: width / 2,
y: 500,
eSize: 670,
};
df();

myr = {
x: width - 1150,
y: 500,
eSize: 670,
};
dr();

myt = {
x1: 800,
y1: 830,
x2: 1150,
y2: 165,
x3: 1550,
y3: 830
};
dt();
}

function dr() {
push();
fill(drawColor);
rectMode(CENTER);
square(myr.x, myr.y, myr.eSize);
pop();
}

function df() {
push();
fill(drawColor);
ellipse(myf.x, myf.y, myf.eSize);
pop();
}

function dt() {
push();
fill(drawColor);
triangle(myt.x1, myt.y1, myt.x2, myt.y2, myt.x3, myt.y3);
pop();
}

function draw() {
background(255);
hit = collidePointTriangle(mouseX, mouseY, myt.x1, myt.y1, myt.x2, myt.y2, myt.x3, myt.y3)

// Test if the cursor is over for hover effect
if (dist(mouseX, mouseY, myf.x, myf.y) < 335) {
myf.eSize = 620;

} else {
myf.eSize = 670;
}
if (dist(mouseX, mouseY, myr.x, myr.y) < 335) {
myr.eSize = 620;
} else {
myr.eSize = 670;
}
if (hit) {
print('colliding?', hit);
triangle(myt.x1 + 60, myt.y1 + 60, myt.x2 + 40, myt.y2, myt.x3, myt.y3);
}
dt();
dr();
df();
}

function mousePressed() {
if (dist(mouseX, mouseY, myf.x, myf.y) < 300 || dist(mouseX, mouseY, myr.x, myr.y) < 300 || hit) {
// use parameter for next url
location.replace('../mouse/clickGame.html?color=' + colorParam + '');
}
}
``````

Hi @caleidolex,

Sorry! Your code is a bit confusing to me …
So I’ve made a quick example myself to demonstrate one way such hover and clicked could/should work and which you can maybe see somthing usefull for you.
I’ve also used the collide2D library which you want to use for it …

Click to test

Cheers
— mnse

``````let firstColor = '#A1C6BE';
let secondColor = '#1F299C';
let thirdColor = '#FAB73D';

// example class representing a rectangle
class MyRect {
constructor(x,y,s) {
this.x = x;
this.y = y;
this.s = s;
this.hit = false;
this.clicked = false;
}

checkHit(mx, my, mc) {
this.hit = collidePointRect(mx,my,this.x,this.y,this.s,this.s);
this.clicked = mc;
}

display() {
stroke(255);
if (this.hit && this.clicked) {
fill(thirdColor);
}
else if (this.hit) {
fill(secondColor);
}
else {
fill(firstColor);
}
rect(this.x, this.y, this.s, this.s);
}
}

// example class representing a circle
class MyCircle {
constructor(x,y,s) {
this.x = x;
this.y = y;
this.s = s;
this.hit = false;
this.clicked = false;
}

checkHit(mx, my, mc) {
this.hit = collidePointEllipse(mx,my,this.x,this.y,this.s,this.s);
this.clicked = mc;
}

display() {
stroke(255);
if (this.hit && this.clicked) {
fill(thirdColor);
}
else if (this.hit) {
fill(secondColor);
}
else {
fill(firstColor);
}
ellipse(this.x, this.y, this.s, this.s);
}
}

// example class representing a triangle
class MyTriangle {
constructor(x1,y1,x2,y2,x3,y3) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.x3 = x3;
this.y3 = y3;
this.hit = false;
this.clicked = false;
}

checkHit(mx, my, mc) {
this.hit = collidePointTriangle(mx,my,this.x1,this.y1,this.x2,this.y2,this.x3,this.y3);
this.clicked = mc;
}

display() {
stroke(255);
if (this.hit && this.clicked) {
fill(thirdColor);
}
else if (this.hit) {
fill(secondColor);
}
else {
fill(firstColor);
}
triangle(this.x1, this.y1,this.x2, this.y2,this.x3, this.y3);
}
}

//MAIN SKETCH

let mycircle;
let myrect;
let mytriangle;

function setup() {
var cnv = createCanvas(600, 600);
cnv.style('display', 'block');
myrect = new MyRect(100,100,100);
mycircle = new MyCircle(300,100,100);
mytriangle = new MyTriangle(400,200,500,200,450,100);
}

function draw() {
background(128);
myrect.checkHit(mouseX,mouseY,mouseIsPressed);
myrect.display();

mycircle.checkHit(mouseX,mouseY,mouseIsPressed);
mycircle.display();

mytriangle.checkHit(mouseX,mouseY,mouseIsPressed);
mytriangle.display();
}

``````

Which editor are you using?

If you are using the p5.js editor the code here shows errors:

You declared drawColor but you did not initialize it and then tried to use it.

When I correct the error I do get a “true” in the console when I hover over the triangle.

`:)`