Author Topic: javascript (Read 17353 times)

pfink · « **Reply #50 on:** Fri, 17 September 2010, 13:28:55 »

Quote from: chimera15;224135

I decided it's not really asking you to draw an oscilloscope, but to merely move a css object across the screen in the path of a sine wave, since javascript doesn't really have a native way to draw something like that. So similar to that other one I was having trouble with. I hope that's what it means at least. I'm having a horrible time just doing that as well. Some of these assignments are really cryptic.

This site's got an example:

http://quantblog.wordpress.com/2010/05/26/animated-sine-wave-in-javascript-html5/

chimera15 · « **Reply #51 on:** Fri, 17 September 2010, 15:32:55 »

Quote from: pfink;224204

This site's got an example:

http://quantblog.wordpress.com/2010/05/26/animated-sine-wave-in-javascript-html5/

That uses a library. I think that's beyond the scope of what this problem is asking.

chimera15 · « **Reply #52 on:** Fri, 17 September 2010, 17:54:29 »

These pages all give code that does what I think the assignment wants, but I'm having trouble actually getting them to do it.

http://arc.id.au/JsAnimation.html

In particular this one gives the math I think I need to use:
http://www.motionscript.com/mastering-expressions/simulation-basics-1.html

veloc = 40; //horizontal velocity (pixels per second)
amp = 12; //sine wave amplitude (pixels)
freq = 2.4; //oscillations per second

x = time*veloc;
y = amp*time*Math.sin(freq*time*2*Math.PI) + thisComp.height/2;
[x,y]

But I'm having trouble plugging that into my animation that I did and you helped with that first week.

chimera15 · « **Reply #53 on:** Fri, 17 September 2010, 19:17:51 »

Might have found the solution here:

http://158.132.148.166/DynamicDuo/dynduo/en/geometric-sinewave.html

Looks like that one uses some strange library too...

keyboardlover · « **Reply #54 on:** Fri, 17 September 2010, 22:15:03 »

Hi Chimera,

I'm not sure if it's a requirement that you do this in pure javascript (without a library) but if not, it would behoove you to use jquery. It will save you time and headaches.

HTH

chimera15 · « **Reply #55 on:** Fri, 17 September 2010, 22:46:41 »

I got it working sort of, but something's wrong with my formula.

Javascript animation

This works to move it, but it tends to jump around in unpredictable way, I can't define the amplitude and frequency like I should be able to, and doesn't give a smooth motion.

chimera15 · « **Reply #56 on:** Fri, 17 September 2010, 22:47:45 »

The newLocationy= amp+180*Math.sin(currentTop*freq*Math.PI/180) ; makes it go in a sine wave, but if I change the amplitude, or frequency it just kills the animation, it doesn't do what I want.

It also falls off the track that it should be on around 50pixels.

chimera15 · « **Reply #57 on:** Fri, 17 September 2010, 22:55:07 »

Alright, I think I might have got it. The pi wasn't necessary.

newLocationy= amp+Math.sin(currentTop*freq) ;

It's still falling off the track sort of.

Alright, got the amp working it appears...

newLocationy= amp+180*Math.sin(currentTop*freq) ;

Nope, that doesn't work.

newLocationy= 180*Math.sin(currentTop*Math.PI/180) ;

This gives a fairly good sin wave, but I can't alter it's amplitude or frequency, and if I try it either causes it to stop completely or do some strange movement.

chimera15 · « **Reply #58 on:** Sat, 18 September 2010, 02:37:53 »

Alright, so I finally get this program and what it is. I had to look up what offsettop does.

Offset top returns a position value from the top of the page. That means it's always going to be a positive value.

Sin returns a positive value from 1-179, and a negative value from 181-359.

So in order for this to move down and up I need it to return a positive whole value of 1 so that it can be converted to pixels, but the sin of course returns fractions of positive and negative....that's where I'm currently lost.. How do you always make that number come up +1, or -1.... Or I suppose + 2, -2 would work as well, this would increase the amplitude right?

It'd be impossible to increase the frequency without altering the x value right? So I need to work on that...

Wow this is frustrating.

So currently with the program the way it is.

With the simplest formula, with newlocationy= Math.sin( currentTop), will increase the the y value of of the object until it reaches 180, at which point it'll reverse, and go negative and start decrementing it.

However there needs to be a shift correction, because the object will go above the screen. So it needs to be newlocationy=math.sin(currentTop-???

What value would have the offset in it.... not the top, because it needs that to calculate right, and that's the absolute position....

It needs to be the top - the starting value of top...so how do I get that...

keyboardlover · « **Reply #59 on:** Sat, 18 September 2010, 07:35:22 »

Quote from: chimera15;224377

Wow this is frustrating.

That's why you should use jquery for this kind of thing.

chimera15 · « **Reply #60 on:** Sat, 18 September 2010, 08:26:33 »

What's jquery? I think that's way outside the requirements of this lesson.... It's a javascript library? I've tried to look at some of those libraries and they have me even more confused than what I'm trying right now.

keyboardlover · « **Reply #61 on:** Sat, 18 September 2010, 08:32:21 »

Quote from: chimera15;224401

What's jquery? I think that's way outside the requirements of this lesson.... It's a javascript library? I've tried to look at some of those libraries and they have me even more confused than what I'm trying right now.

It's not 'a library'...it's THE library. Very few developers code in straight javascript anymore...almost everyone uses jquery. I remember when I first started using it I did a tutorial which included pretty much the same thing you're trying to do. I think it ended up being like 5-10 lines of code.

Check out the tutorial here.

I think the animate me part would be especially helpful.

JBert · « **Reply #62 on:** Sat, 18 September 2010, 15:43:36 »

Quote from: keyboardlover;224404

It's not 'a library'...it's THE library. Very few developers code in straight javascript anymore...almost everyone uses jquery. I remember when I first started using it I did a tutorial which included pretty much the same thing you're trying to do. I think it ended up being like 5-10 lines of code.

The right answer is to use jQuery when it has the needed abstraction. So unless it has an oscilloscope() function, I wouldn't use it in this case.
Also, it would seem to me that the course is exactly to teach low-level JavaScript, so jQuery might not even be allowed.

I'll get back with some pointers about this problem in an instant.

JBert · « **Reply #63 on:** Sat, 18 September 2010, 16:05:32 »

Quote from: chimera15;224377

Wow this is frustrating.

So currently with the program the way it is.

You're trying too hard. Take a step back from that code you found and start from scratch as that code is actually quite flaky.

Start by doing the doAnimation function from scratch. Save the current "signal angle" to a global variable, then increment this variable on each run of the doAnimation function. If it hits 360, wrap it around to 0.
You can now use this value (*Math.PI / 180 to get it in radians unit) within the sine function.

Now, a sine function does indeed return a value between -1 and 1, but this isn't a problem. Simply add a "screen offset" to the sine value so that the "zero point" is shifted down onto the screen.
If you want larger y intervals than 2 (-1 to 1), multiply the sine with half the amplitude.

chimera15 · « **Reply #64 on:** Sat, 18 September 2010, 21:02:56 »

So the professor finally gave me some tips and hints and code. I don't know how I would have ever gotten this on my own. There's nothing in our book for it, and nothing on the web that comes close to this. Apparently the formula should act on the span, but I'm not having much luck making it function. I think something's screwed up with the body onload function as that's the only part he didn't give me.

style="position:absolute;
top:100;
left:0">

width=100%
style="position:absolute;
top:105">

chimera15 · « **Reply #65 on:** Sat, 18 September 2010, 21:16:27 »

Tried this too, not working...

Javascript animation

style="position:absolute;
top:100;
left:0">

width=100%
style="position:absolute;
top:105">

chimera15 · « **Reply #66 on:** Sat, 18 September 2010, 21:27:27 »

Wow I found this searching for terms within the code the professor gave me. Pretty impressive. I guess it's supposed to look something like this. If you strip out all the images of this file you're left with something similar...

http://www.easytorecall.co.uk/orrery_simulation.htm

Here's the js for that simplified, and working. I just need to apply this to mine now.

Javascript Orrery Simulation - Easytorecall Webzine

chimera15 · « **Reply #67 on:** Sat, 18 September 2010, 23:03:02 »

Ok I figured out I messed up a couple things in the professors code.
I deleted the character out that creates a diamond. I thought ♦ was a character error cause it looks like a unicode that appears when a Japanese text I have doesn't appear right. So that's what it was, unicode for a diamond. lol

It moves a diamond around now, but still not in a sine wave...

keyboardlover · « **Reply #68 on:** Sat, 18 September 2010, 23:05:34 »

I didn't realize your project was for a class...it is kind of annoying how they sort of have you re-invent the wheel. Of course, learning how to invent the wheel gives you a wealth of information. Keep at it, I'm sure you'll figure it out. Seems like you're pretty close.

chimera15 · « **Reply #69 on:** Sun, 19 September 2010, 00:22:31 »

I figured it out!! I had the variables within the function. They should have been outside. Finally got it, wow. Only took me like 3 days. lol

I don't understand why it breaks it though when I put in fixed numbers for the frequency and everything. The math.random returns a random mumber between 0 and 1, which is multiplied by a number and then floored to the lowest round number. That's still a fixed number.

Everytime I open the program now it gives a different sine wave. If I put in a fixed number for the variables it breaks the sine wave. That's got me really confused.

JBert · « **Reply #70 on:** Sun, 19 September 2010, 16:15:30 »

Just checking: did those fixed numbers exceed 20 for freq or veloc, or 100 for amp?

If the amplitude just is too large, the diamond will bounce out of view. If the freq value is too large, the signal will be so fast that your scope "can't observe it anymore." You would need a higher polling time (read: smaller timeout interval) to get it right again. And veloc, well, if that is too great the diamond will start at the zero position, then immediately bounce off to the right, get reset to zero, bounce off, ... ad finitum.

Maybe the current max limits were only rarely hit, meaning that it might sometimes go haywire.

chimera15 · « **Reply #71 on:** Thu, 23 September 2010, 08:19:17 »

Quote from: JBert;224734

Just checking: did those fixed numbers exceed 20 for freq or veloc, or 100 for amp?

If the amplitude just is too large, the diamond will bounce out of view. If the freq value is too large, the signal will be so fast that your scope "can't observe it anymore." You would need a higher polling time (read: smaller timeout interval) to get it right again. And veloc, well, if that is too great the diamond will start at the zero position, then immediately bounce off to the right, get reset to zero, bounce off, ... ad finitum.

Maybe the current max limits were only rarely hit, meaning that it might sometimes go haywire.

No,

I did the calculations of what the result would be with the numbers for the variable. The diamond just sat there. I still don't get why it needed randomizers for those variables.

This week since we also have a quiz, for the ilabs the professor just gave us the code straight up. Some pretty amazing code though. Lots of keyboard codes and stuff in most of them.

One of them is a small little javascript game you can move a tank around the screen.

News:

Author Topic: javascript (Read 17353 times)