Lines are drawn dynamically between moveable dots

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.

Maybe you'll like this...

https://photics.com/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.

1 Like

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

1 Like

Thank you for your quick response and suggestions.

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

Based on the experiments with Canvas:

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)

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.

2 Likes

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

1 Like

Had another go at it …

HypeAnimationFrame_CanvasFun_with_Lines_and_Polygons_Corners.hype.zip (17,2 KB)

3 Likes

very, very nice :slight_smile:

1 Like

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

1 Like

This just reminded me of

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 )

1 Like

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

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.

1 Like

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


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)

4 Likes

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

1 Like