I've been thinking about this all the time and thought I'd ask you. I have a grid of triangles (lots of triangles!!). It has to be exactly this grid, as my project is about Otl Aicher. I want to be able to create pictograms within this grid. The grid should be empty at first. If you move over the grid with the mouse pressed down, the triangles turn orange. If you click on the triangles again, they should disappear again so that you can delete something. But how? Give all triangles an ID and then use Javascipt? I am grateful for any suggestions! Have a look at the hype file if you like. OtlAicher_Grid.zip (245,4 KB)
It's not even a lot of JavaScript. It's similar to the answer here…
I didn't download your template, but it sounds like creating lots and lots of triangles with Hype's vector shape tool. Then, each one of those shapes could be modified with CSS. That's the trick, because targeting the SVG created by Hype is a little cumbersome.
So, I did a test. I made a three-sided polygon and tried to change its color with CSS. I'm thinking this might be what you're looking for…
.orange * {
fill: orange !important;
}
It's a bit brutal with the CSS Wildcard Selector, but the SVG in the element should be the end of the element tree. Hype doesn't have complex SVG shapes.
So, using the one line of modified code from the "clicky" template…
…or you could just draw all of your triangles with SVG and JavaScript. That seems like a bad idea though. If you're doing that, then you probably don't need Hype.
Thank you very much for your quick and detailed reply! That's definitely a step in the right direction! In your example, you have to click on one triangle after the other. That would be a bit tedious in my grid because there are so many triangles. Do you have an idea how it could work, so that you can color several triangles while moving the pressed mouse over them? I'm a Javascript beginner and a bit lost at the moment.
I already have a test that is as functional as I imagine it to be. But it has a completely different structure and doesn't work for my triangular grid. I really like your approach. Do you have any other ideas on how to rather "paint" in the grid instead of klicking on every shape?
Other than switching the actions to mouse over… they're pretty intensive solutions.
As an example, Hype has a built-in Physics engine. So, an invisible sensor element could be dragged over the triangles. If a collision is detected, then that event can be used to run JavaScript code.
That's the idea with the "Jump" template, which has jumping and wall jumping. Three sensors are used to determine if a jump is valid. In a painting scenario… one sensor could be like a marker and another sensor could be like an eraser. That's theoretical though.
A Physics engine isn't necessary. A grid could be controlled with arrays. That's what's done in the Circles With Grandma game… https://photics.com/games/circles-with-grandma/ …but that works because the circles are on a grid. It's more tricky with triangles.
If two triangles are used to make a square, and that makes up a grid, then it's just a matter of calculating if the touch/click/mouse location is in a particular square and then if the upper triangle or lower triangle is selected. Once the location is determined, that can be stored in a multidimensional array. That might have to go another level deeper to specify which triangle in a particular square.
I'm not sure if multidimensional arrays are the right way to go with this though. I thought the original answer was best. The elements themselves are used to store their state, as shown previously. A class is added or a class is removed.
That's not working for you?
Is it the mobile / no mouse problem?
First of all, thank you again for your time and the detailed answers! Unfortunately, mouse over does not work because it should also work on the iPad. Mouse over also colors the areas as soon as the mouse enters the grid. This makes it difficult to draw specific pictograms. I have also asked Chat GPT for solutions but unfortunately have not found any. Really frustrating
you can use event delegation. say group the paths and add drag- and click-listeners to the group. event.target should be the path ... really not well tested OtlAicher_Grid_event_delegate.hype.zip (233,1 KB)
That's actually a little odd; the drag event seems to work differently on iOS, even when 'Use Touch Events' in the Document Inspector is unchecked. I'll need to look into this further.
Regardless, the good news is that you can use the same drag event and just manually figure out what is under the mouse. I had ChatGPT write the code to do this, and checked that it seems reasonable. Here's the solution modify from @h_classen's document:
@jonathan Thank you very much !!!! It works on my iPad I have tested it. I really love the Hype forum! Whenever I get stuck, there is always some help.
