Hide all bezier curves except the one on mouse hover

p5.js Coding Questions
22

Thanks for the explanation, Jeremy!

23

Thanks for clarifying, Jeremy! Understood how get() works :slight_smile:

The logic left to figure out is building an object like cs in your example where if I have two arrays like;

a = [ 1,2,3,4,5]
b = [1,2,3,4,5]

How do I create an object like this;

c =
0: Array [5]
0: 1
0: 2
0: 3
0: 4
0: 5

1: Array [5]
1: 1
1: 2
1: 3
1: 4
1: 5

Any clues anyone?

24

What are a and b in your example?

25

Thanks for asking,
They are two arrays I had to create from the JSON data where the values from the respective column (example above) had to be mapped along y axis to the height of the canvas.
Hope that made sense? Happy to elaborate.

26

When you look at lines 33,34,35 in Jeremys code you see he is filling the array cs with 8 values. Here you want to use your 2 arrays as source for the values

1 Like
27

Right. You can cs.push(anything). Your anything could be:

  • a line, [x1,y2,x2,y2]
  • a centered circle, represented only by its radius [100]
  • a bezier curve, [0,1,2,3,4,5,6,7]
  • your json data [[0,1,2,3,4],[5,6,7,8,9]]
  • an class object, like a paper doll
  • …whatever

The only thing that matters is that the data can be used

  1. by makePicker to mark the thing on the map
  2. by draw to render the thing on the canvas

…but it can be anything. No matter what it is, any ccols[3] colored pixels on the pg map refer to the cs[3] object. When you are drawing cs[3] – whatever it contains – you check the mouse location on the map (pg) for color ccols[3]. If that appears under the mouse, bam. Your mouse is over cs[3].

2 Likes
28

Hi Chrisir, the 8 values are arguments for each curve, while there are 6 curves in total.
Since I have 2 Arrays a & b with values already in them, I’m just pushing it twice.
c.push(a);
c.push(b);
I was wondering whether there was a loop that I could code but I don’t think so.

That makes total sense. Thank you for clarifying! Appreciated Jeremy.
Been testing and trying it out, the logic is pretty sharp, nice one.
Will ping back when I run into other Qs :stuck_out_tongue:
Cheers!

1 Like