Lines are drawn dynamically between moveable dots

[k_office]

lines_between_moveable_dots.hype.zip (15.5 KB)

https://forums.tumult.com/t/re-use-functions/13571
Using this article as a reference,I made a scene that displays a triangle using "lines drawn between movable points". This is used as a material for elementary school mathematics learning.

As a next step, is it possible to fill the inside of the triangle with some color?

As another request, is it possible to display a colored sector at one of the angles in a triangle?
In either case, when the dots move freely, will the colored parts be redrawn accordingly?

I'm not a javascript professional, so I can't come up with any ideas.
Please suggest for good teaching materials.

[Photics]

@k_office

I'm not a javascript professional, so I can't come up with any ideas.
Please suggest for good teaching materials.

Maybe you'll like this...

Free Template Tuesday #5 – Tumult Hype “Pythagorean”

...basically, you could create three Hype elements, like the gray circles in your example, that could be moved around with an "on drag" event. Then JavaScript / SVG could be used to draw the lines — based on the center-points of those circles.

It's essentially a triangle, which is a polygon, so that shape could be filled with a background color. Highlighting the angle, whew, that would be tricky.

[h_classen (Hans-Gerd Claßen)]

I'd use svg.js ...

within svg.js:

• use the polygon-element to create a triangle
• use the plot-method to update the edgepoints of the triangle on drag of the circles which could easily be Hypeelements to get the dragposition
• use the fill method to fill the triangle

for the edgeselector:

• use a circle-element
• move the circle accordingly to thepolygonpoint
• use a svg mask (which could be a second instance of the polygone ... kind of shadowelement) on the circle

absolutely no complecated math using this approach

[k_office]

Thank you for your quick response and suggestions.

I will try these ideas.
But it's a difficult theme for me.

[MaxZieb (Loves Hype)]

Based on the experiments with Canvas:

Canvas Trail Effect (experiment)

[20190823-4g3r0] Was playing around with canvas and Hype AnimationFrame. Here is a canvas trail effects. Duo to some rounding errors in browsers there is a ghosting effect when fading. There are workarounds that mostly do a full flush and element repaint of the canvas but that’s overkill for this little experiment and certainly not “fun”. Demo: HypeAnimationFrame_CanvasFun.html Download: HypeAnimationFrame_CanvasFun.hype.zip

Here a solution using a canvas (retina):

Has the benefit that anybody interested in Vector Math should be able to draw additional lines and gimmicks into the canvas based on a cartesian coordinate system using pixels.

HypeAnimationFrame_CanvasFun_with_Lines.hype.zip (15,9 KB)

[MaxZieb (Loves Hype)]

Small tweak that also supports polygons

HypeAnimationFrame_CanvasFun_with_Lines_and_Polygons.hype.zip (16,3 KB)

Canvas is a bit more involved than SVG but fun because it's hands on. @h_classen is right with the SVG approach as it leverages a library and the vector nature of the format! In the case of SVG you need to set up nodes via JS or in an imported file and then manage them to move in sync. The upside redrawing is done by the browser when you manipulate the SVG structure. In case of canvas you don't have to worry about SVG structure as your basically just painting with "crayons" onto a whiteboard and in the next animation frame whipping it clean to start over again.

[k_office]

Thanks for the great ideas and helpful samples.
I will learn more with this sample.

[MaxZieb (Loves Hype)]

Had another go at it …

HypeAnimationFrame_CanvasFun_with_Lines_and_Polygons_Corners.hype.zip (17,2 KB)

[h_classen (Hans-Gerd Claßen)]

very, very nice

[MaxZieb (Loves Hype)]

Specially when you comment/disable the "whiteboard" wipe (clear)

[MarkHunte]

This just reminded me of

Is it possible to create tappable areas that create points?

This is just a proof of concept. It probably would need working on to fit you full needs. But it is to show a way of adding plots at the mouse click point. This example uses javascript and cloning. Some notes: When we clone within Hype. Hype is not aware of the cloned elements. Which means there can be some adverse results. I have hopefully countered two of these in this example. 1, You must always remove any Hype class names inherited from a cloned Hype element. If you do not the Hype j…

I forgot all about it.. even though I said I would not....!!.

Be nice to be able to do the plot and the drag stuff.. ( combine )

[MaxZieb (Loves Hype)]

@MarkHunte That is based on one of the original extension you wrote… cloneNodes, right?

[MarkHunte]

I think so not able to check that latest version just yet but most likely.

Actually not seeing any relation to the extension in the page , It may actually be the precursor to it.. will know more when I can get to the file.

[k_office]

I was able to make some teaching materials using cool samples.
Thank you. I was helped by this forum.

Calculate the area of the colored area.
moveable_dots_and_fill_triangle.hype.zip (26.1 KB)

Let's make an isosceles triangle.
moveable_dots_and_sector_corner.hype.zip (28.0 KB)

[MaxZieb (Loves Hype)]

Nice, happy it helped! And if you don't want to fill that one angle just remove the fill command.