February 11, 2021, 12:43am
lines_between_moveable_dots.hype.zip (15.5 KB)
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?
Please suggest for good teaching materials.
February 11, 2021, 1:55am
Maybe you'll like this...
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.
February 11, 2021, 7:42am
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
February 11, 2021, 11:28am
Thank you for your quick response and suggestions.
I will try these ideas.
But it's a difficult theme for me.
February 11, 2021, 1:02pm
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)
February 11, 2021, 1:28pm
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.
February 11, 2021, 1:46pm
Thanks for the great ideas and helpful samples.
I will learn more with this sample.
February 11, 2021, 4:49pm
February 11, 2021, 5:47pm
Specially when you comment/disable the "whiteboard" wipe (
February 11, 2021, 5:51pm
This just reminded me of
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.
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 )
February 11, 2021, 6:23pm
@MarkHunte That is based on one of the original extension you wrote… cloneNodes, right?
February 11, 2021, 6:30pm
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.
February 12, 2021, 10:17pm
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.
Let's make an isosceles triangle.
February 13, 2021, 12:54am
Nice, happy it helped! And if you don't want to fill that one angle just remove the fill command.