Some HTML stuff

[wtg62]

Since I love making stuff with HTML/JS/CSS, I thought I'd share some of the stuff I've made.
So far I've only gotten two things that I'd like to share publicly done, but, the list will grow.
Maybe I'll do what ARP did with the GSim save code generators.

Lookey here!

Function plotter
A neat little function plotter I work on in my free-time. Displays [the] function(s) via HTML5 canvas.
Could be useful in GSim for seeing how much pull you receive at a specific distance when you have your diabolical force law in effect.
Added lots of functions, including rounding functions, trig, hyperbolic trig, exponentiation, logarithms, and several others.

Orbital parameters calculator
Made this a long time ago. Sorta buggy in some ways, but hey, it gets me what I want.
Useful for KSP players.

Feel free to comment on my work.

[A Random Player]

This is cool! I also made a function plotter recently, but it can only do postfix notation:

Potential Energy example.png

(will make a topic later)
I assume you used shunting yard, like Andy? Or a recursive parser?

For your orbital parameters, if you use other formulas or extend functions to negative numbers, you can calculate hyperbolic orbits. For example, by using Apo=-1000 and Peri=100 I got an SMA of -900, which means a hyperbolic orbit of some size (not sure exactly how it works). Also have you tried an orbit visualizer? Would require some HTML5 magic though.
And I like your colors/styles! (Better than what I do, I just know <h1> and <marquee>.)

[wtg62]

Thanks for the comment!
I'm exponentially getting better at HTML/JS/CSS.

As for the function parser, I simply used eval(). I have no clue how to make my own parser, although I'd certainly be willing to learn how to. (Because I really wanna have people be able to use '^' instead of 'pow(x,exponent)')

As for an 'orbit visualizer', that'll come when I decide to make a much better version of orbit_calc.
I understand how to use the HTML5 canvas, so I believe I could do it.

Just fixed the function plotter so that it could use trunc() in Google Chrome, and added a selector that makes it plot your function normally, negatively, and both positive and negatively. That way you can have, ±sqrt(x), for example.

[robly18]

Postfix notation is amazing.

Anyway, this is all pretty darn nice things!

[wtg62]

So after some epic JS powers, I made the function plotter able to graph up to 10 functions at once, and fixed a couple of bugs.
You can now also select different colors for your function lines.

A couple of other insignificant features were added, too.

[testtubegames]

So after some epic JS powers, I made the function plotter able to graph up to 10 functions at once, and fixed a couple of bugs.
You can now also select different colors for your function lines.

A couple of other insignificant features were added, too.

I like the plotter quite a bit. Clean and easy to use, well done! I must say, though, even after reading what you wrote about the parsing, I completely forgot it and plotted "2^(5*x)"... just randomly typing what could be an interesting function. It made a really weird step-ish function. I realized then that I needed to use Pow(a,b) instead. Now I'm curious what the caret does... since it clearly does something weird.

I'm sure there's a simple explanation, but it's kinda fun to have a non-destructive bug that makes interesting stuff happen.

[robly18]

I am also curious about what the ^ does. It seems to make some weird function but I have no idea what it is.

[A Random Player]

I am also curious about what the ^ does. It seems to make some weird function but I have no idea what it is.

xor
Try 5 ^ x and 7 ^ x, for example.

[wtg62]

To make it more clear about what these operators do, I decided to put a list of ALL the operators in the "What you can use" section.
Basically, you're typing a snippet of JS code into the equation box.
So stuff like "if(isFinite(acoth(x)) == true) y = 5/x; if(isFinite(y) == false) y = 0;" can be plotted. Do try that function, by the way.

Now I'm curious what the caret does... since it clearly does something weird.

I'm sure there's a simple explanation, but it's kinda fun to have a non-destructive bug that makes interesting stuff happen.

^ is a bitwise operator in JS, and as ARP said, it is XOR. I have no clue what it's actually doing with what is being operated on, but it works...
Regardless, the non-destructive bug you are talking about Andy, is not a bug, per se
You can try some other interesting operators like >>, <<, >>>, and ~ for example.

Eventually in that little "auto-correct" feature I recently added, I'll start adding some things to auto-correct besides X being lower-case, or arcsin(x) being changed to asin(x). By things, I mean changing x^2 to square(x) or pow(x,2) and such. It will be toggle-able in-case you actually do happen to want to use the XOR operator.

If somebody would be willing to teach me how to do proper equation parsing, I'd be really happy.
eval() has so many vulnerabilities, as it allows the user to run any JS code they want.

Also, added some asymptote plotting features. It is a WIP, but hopefully it should make vertical asymptotes appear where they should.
That means the arc-cotangent of x plots correctly now. (Not sure if I have the inverse hyperbolic functions right in the first place, though...)

Also: Be sure to try the "Random Function" button! It has some pretty neat stuff in there! I'll add to it as well... maybe you could also tell me about a few neat equations.

[testtubegames]

xor
Try 5 ^ x for example.

Ah, sure. That makes sense. Would never have guessed it (my mind rarely jumps to binary), but I've had to use xor before.

And as for what it is operating on, wtg, for 5^3, say, it breaks the two numbers into binary... 101 and 011. Then it combines them with the xor ruleset, digit by digit (output digit is 1 if and only if the two incoming digits are different). So for the first place 1 and 0 --> 1. Second place: 0 and 1 --> 1. Third place: 1 and 1 --> 0. So on the graph, it'll plot the point x=3, y=110... err... y=6.

I do enjoy your 'random' functions, by the way. They are *very* different from one another in cool, distinctive ways.

Equation parsing isn't as bad as I feared it was (when I added it to the gsim), but then again, it's a lot more involved than using eval(). I made a tree, where all the leaves were numbers, and all the connections were simple operations. Happy to chat about it, but it might be overkill for your plotter... especially seeing as you have something that works already.