# Hide all bezier curves except the one on mouse hover

**URL:** https://discourse.processing.org/t/hide-all-bezier-curves-except-the-one-on-mouse-hover/13618
**Category:** Coding Questions
**Created:** [August 26, 2019, 2:26pm UTC](https://discourse.processing.org/t/hide-all-bezier-curves-except-the-one-on-mouse-hover/13618 "2019-08-26T14:26:57Z")
**Posts on this page:** 7
**Page:** 2

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [August 28, 2019, 6:27pm UTC](https://discourse.processing.org/t/hide-all-bezier-curves-except-the-one-on-mouse-hover/13618/22 "2019-08-28T18:27:18Z")

</div>

Thanks for the explanation, Jeremy!

---

<div class="post-metadata">

### Author: ![VMK](https://avatars.discourse-cdn.com/v4/letter/v/919ad9/32.png) [@VMK](https://discourse.processing.org/u/VMK)
#### Post date: [August 28, 2019, 6:51pm UTC](https://discourse.processing.org/t/hide-all-bezier-curves-except-the-one-on-mouse-hover/13618/23 "2019-08-28T18:51:07Z")

</div>

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

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

```auto
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?

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [August 28, 2019, 7:21pm UTC](https://discourse.processing.org/t/hide-all-bezier-curves-except-the-one-on-mouse-hover/13618/24 "2019-08-28T19:21:47Z")

</div>

> [@VMK](#):
>
> The logic left to figure out is building an object like cs in your example where if I have two arrays

What are a and b in your example?

---

<div class="post-metadata">

### Author: ![VMK](https://avatars.discourse-cdn.com/v4/letter/v/919ad9/32.png) [@VMK](https://discourse.processing.org/u/VMK)
#### Post date: [August 28, 2019, 8:40pm UTC](https://discourse.processing.org/t/hide-all-bezier-curves-except-the-one-on-mouse-hover/13618/25 "2019-08-28T20:40:33Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [August 28, 2019, 8:46pm UTC](https://discourse.processing.org/t/hide-all-bezier-curves-except-the-one-on-mouse-hover/13618/26 "2019-08-28T20:46:32Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [August 28, 2019, 9:37pm UTC](https://discourse.processing.org/t/hide-all-bezier-curves-except-the-one-on-mouse-hover/13618/27 "2019-08-28T21:37:28Z")

</div>

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].

---

<div class="post-metadata">

### Author: ![VMK](https://avatars.discourse-cdn.com/v4/letter/v/919ad9/32.png) [@VMK](https://discourse.processing.org/u/VMK)
#### Post date: [August 29, 2019, 12:08pm UTC](https://discourse.processing.org/t/hide-all-bezier-curves-except-the-one-on-mouse-hover/13618/28 "2019-08-29T12:08:24Z")

</div>

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 😛  
Cheers!

[Previous page](https://discourse.processing.org/t/hide-all-bezier-curves-except-the-one-on-mouse-hover/13618.md?page=1)
