Some HTML stuff
Some HTML stuff
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.
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.
Last edited by wtg62 on Mon Apr 28, 2014 7:10 pm, edited 5 times in total.
This message has been brought to you by wtg62, duh!
-
- Posts: 523
- Joined: Mon Jun 03, 2013 4:54 pm
Re: Some HTML stuff
This is cool! I also made a function plotter recently, but it can only do postfix notation:
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>.)
(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>.)
$1 = 100¢ = (10¢)^2 = ($0.10)^2 = $0.01 = 1¢ [1]
Always check your units or you will have no money!
Always check your units or you will have no money!
Re: Some HTML stuff
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.
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.
This message has been brought to you by wtg62, duh!
Re: Some HTML stuff
Postfix notation is amazing.
Anyway, this is all pretty darn nice things!
Anyway, this is all pretty darn nice things!
Convincing people that 0.9999... = 1 since 2012
Re: Some HTML stuff
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.
You can now also select different colors for your function lines.
A couple of other insignificant features were added, too.
This message has been brought to you by wtg62, duh!
- testtubegames
- Site Admin
- Posts: 1148
- Joined: Mon Nov 19, 2012 7:54 pm
Re: Some HTML stuff
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.wtg62 wrote: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'm sure there's a simple explanation, but it's kinda fun to have a non-destructive bug that makes interesting stuff happen.
Re: Some HTML stuff
I am also curious about what the ^ does. It seems to make some weird function but I have no idea what it is.
Convincing people that 0.9999... = 1 since 2012
-
- Posts: 523
- Joined: Mon Jun 03, 2013 4:54 pm
Re: Some HTML stuff
xorrobly18 wrote:I am also curious about what the ^ does. It seems to make some weird function but I have no idea what it is.
Try 5 ^ x and 7 ^ x, for example.
$1 = 100¢ = (10¢)^2 = ($0.10)^2 = $0.01 = 1¢ [1]
Always check your units or you will have no money!
Always check your units or you will have no money!
Re: Some HTML stuff
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.
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.
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.
^ 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...testtubegames wrote: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.
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.
This message has been brought to you by wtg62, duh!
- testtubegames
- Site Admin
- Posts: 1148
- Joined: Mon Nov 19, 2012 7:54 pm
Re: Some HTML stuff
Ah, sure. That makes sense. Would never have guessed it (my mind rarely jumps to binary), but I've had to use xor before.A Random Player wrote:xor
Try 5 ^ x for example.
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.