# How to make parabola animation?

I would not know how to work out a parabola function even if a brick hit me in the head using it.

But I just showed how to make a circle line drawing.

You could do a similar thing.

Since you will know what parabolas you want to show on each slide.

Just put a graph as the background.

Example:

1, Put a Circle on top of the background.

2, Shape you circle to the so the top half meets the three points you want.

3, In the Metrics inspector,
set the x angle to 180

4, Covert the circle to a vector shape.

5, In the Vector Editor on the circle . Choose open path

6, Select and remove the bottom point.

( you may need to Hit done and move the element back up into position again)

7, In Vector edit mode, set the line draw to 0 and as in the post I mention above,

Hit the record button, set the keyframe to the duration you want, change the line draw to 100.

Hit done.

You can play with the rotation angles to get which ever directions you want..

Also you can re shape the element as needed using the drag handles ( not in vector edit mode)
Note because we change the angle, the element will flip about when you try and change the shape and size. Just keep going it will correct itself.
And you can also adjust the points in vector edit mode if needed.

You can make the animation stop and start where needed using the normal method of keyframe actions and mouse click actions.

And add other elements like text and element shapes.

3 Likes

Don’t undersell yourself @MarkHunte … it is rather trivial, but the means to draw arbitrary lines are not part of the Hype API. Using regular HTML5 and canvas you can draw lines really easily. What you need to do is increase the x variable as requested by the OG from -20 to +20 and the resulting y variable is dependent on the provided formula

The line is drawn from the last value of x,y to the current value of x,y. That’s all it is.

Grapher does a great job displaying such things. Doing it in Hype would require a little programming if it should be accurate. I am currently not on a computer. Using a line animation can be a good approximation to demonstrate certain features, though.

3 Likes

Ta,
I was probably taught it in school but in my real world never had to use it.
Seems to make sense to me.

1 Like

thank you for the tips.
Although it's not exactly parabola, it's very informative for me as I'm new to hype and didn't know how to handle lines of SVG .

By the way, I can see you have "Vector Shape" tab on your hype UI. Is that including in paid APP ? 'cause I'm now using free trial version. I' going to purchase Professional (Full) soon at any rate.

I'm pleased to know that this forum is so active, which I can get res soon.

Can you post an image of what is and what you want to show.

Yes it is in the Pro version & Standard , the standard has some limitations on them I think.

thanks. Woukd you take a look at this pic ?
It is not same formula as one in my original query.
But what I want is like such line.
Giving up animation, I want to draw such kind of static lines of any formulas at least.

Simple template here:

3 Likes

Thank you. I was like "Wao" when I downloaded this file and checked it.It's really great sample for me. 'cause what I need to learn first was extracted and the content was concise.

2 Likes

In case you're not aware, Desmos is a free and amazing online graphing calculator students can use to explore mathematical ideas for themselves, with your guidance. It's a web app as well as an iOS and Android app. Students love it, for good reason.

There's a classroom activity they've created about parabolas here.
You could also just set up a parabola for them to play with, like here, and share the link.
Or if you just want a static figure, use Desmos to create the graph you want, and then take a screenshot. (Students may miss out on a lot with only a static figure, though!)

We embed a lot of Desmos calculators in Hype docs so we can include explanatory text and such and focus students' attention on a particular aspect. This gets a little more complicated, since we're using JavaScript on the backend to change things as we work our way through the doc, but if you're curious to explore the possibility I'm attaching a sample doc with an embedded calculator. (You're free to use their API to embed like this; their instructions are here.) You'll only see a blank box in Hype, but when you preview in a browser the fully functional calculator will appear.

If you don't want students to see (and hence be able to change) the Expressions list on the left, then in in the Hype doc go to the tab labeled 'loadCalc' and change line 7 from
`expressions: true`
to
`expressions: false`

Desmos-in-Hype.zip (96.3 KB)

4 Likes

BruceB
You're free to use their API to embed like this

thank you for giving me another way for my wish! What a great API this is ! And it doesn't look too difficult to embed just simple quadratic function(not so about complicated ones, of curse) I try this too.

1 Like

MaxZieb
Simple template here:

In that hype document, there were input text box, slider, canvas, number type input.
How can I add them to hype doc?
thanks.

thank you for these interesting samples.
I think I should work on them to bost my skill, too.

Inner HTML editing is done like this:

1 Like

oh HTML itself.
thank you very much.
You’ve been a big help

BruceB
their instructions are here

Now I start to dig into the sample that you shared with me.
And I want to change the range of slider for "b".
According to the explanation for Desmos API, I should implement the following.

``````calculator.setExpression({
id: '3',
sliderBounds: { min: -50, max: 50, step: 1 }
});
``````

Then I think I have to put this in the Hype document function "init( )".
and
the appropriate place to put it seemes to be here ...
b = [ { name: 'loadCalc', source: '[ here ]' }

But it didn't work.
if possible, I want you to help me do this.

Maybe you can post a zip of your work-in-progress? It could be a number of things so the actual code within the context of the .hype document would be useful to see what is happening and help. Thanks!

Ah, I apologize: I'd meant to upload the actual Hype file in my earlier post so you could see the code, but now see I only zipped the exported files. Oops! The Hype doc is attached to this post, and in this one I've changed the slider bounds as you requested, which you can see if you look in the "loadCalc()" function tab (lines 42-48).

Typically I find it easiest to set up a calculator pretty much the way I want it on the Desmos website, and then open the browser's console and enter

``````copy(Calc.getState());
``````

which copies the settings from that calculator. (You may see `undefined` in response. Just ignore that; the settings are actually on your clipboard.) Then paste that code into this part of the loadCalc() function:

``````calculator.setState(
[PASTE HERE]
);
``````

which would mean replacing lines 9 - 64 in this Hype document. Even the Desmos folks say this process is the easiest way to get everything mostly set the way you want it, including letting the site handle writing the equations (via LaTeX) correctly; just much easier than trying to work purely via the API from scratch.

Happy to help you make more progress here, especially if you post your in-progress .hype file as @jonathan suggested.

Desmos-in-Hype.hype.zip (15.3 KB)

2 Likes

jonathanJonathan DeutschTeam Tumult
you can post a zip of your work-in-progress

Thank you. here is my file.
But I was treating exported JavaScript inadvertently and it made my case very complicated.

Thank you again for kind suport.
I was handling the exported JavaScript, which was very complicated
and taught me how hype treats our user code in exporting process.

Now I got the picture!
-> vist Demo Site
-> make what you want
-> do "copy(Calc.getState())" in console
-> paste in setState method

nice idea !

2 Likes

Did someone mention drawing curves(especially Sinusoidal ones)!
doublecurvature.github.io/HRSC

1 Like