Hover effect triangle

p5.js Libraries
1

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.

2

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

3

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() {
  // read url
  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 + '');
  }
}
4

Hi @caleidolex,

Sorry! Your code is a bit confusing to me … :slight_smile:
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();
}
5

@caleidolex,

Which editor are you using?

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

image
image953×748 72.3 KB

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.

:)