|
JavaScript - Radian Angle - Sine Cos Higher Magnitude..
Similar TutorialsI have created an animation API, which has an option for the 'effect' or animation type. Now i'm trying to produce a slow, fast slow effect using a sine wave but seem to be having some trouble! The code below is supposed to get the steps to calculate each frame by diving the usable part of the sine wave into the total frames. The code should then go on to calculate insert the relevant values into the frame variables, after which multiply them all so that they are the correct scale so that when the animation is running it simply looks up the value and applies it, no need for any processing. With an animation from 0 to 740 (px in this case) the function returns: 115, 228, 335, 434, 523, 598, 659, 703, 730, 740 Oh and just a quick addition the variable "end" will equal 740 in the case above, or whatever the end value is. Code: case "SFS":
var step = 90 / totalFrames;
var pi = Math.PI;
var raid = 0;
for (var i = 1; i <= totalFrames; i++){
raid = (i*step)*(pi/180);
queueFrameValue[topOfQueue][i] = Math.sin(raid);
}
var multiplier = end / queueFrameValue[topOfQueue][totalFrames];
for (var i = 1; i <= totalFrames; i++){
queueFrameValue[topOfQueue][i] = queueFrameValue[topOfQueue][i] * multiplier;
}
break;
Thanks! Hi all, I am currently working on a boids related project which involves a few fishes swimming around.(decided to start on only 1 fish 1st) Now I just want to make the fish image change accordingly to the angle that it is swimming towards by calculating the angle, assigning a position to it, and load its corresponding image. But its just not working. The fish just move up and down instead of what I programme to move all around. The image doesnt change either. Please help! Thanks! Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Moving fish, in class 2012-02-08</title>
<!-- include the Sprites library -->
<script src="Sprites3.js"></script>
<script>
var left = 40, top = 40, w = 400, h =300;//the frame
var tick = 10; //ms between redraws
//position and velocity of moving ball
var x = 40; //x position of ball
var y = 40; //y position of ball
var vx = 1; //x component of velocity
var vy = 2; //y component of velocity
var dt = 1; //simulation time step
var anglePosition=1;
//the moving image
var d = 30; //diameter of ball [w and h of sprite]
var fish = new Sprite("goldfish/fish" + anglePosition + ".png", d, d);
function moveOneStep(){
x = x + vx*dt; //new x position
y = y + vy*dt; //new y position
if (x < 0) {//hit left rail
x = -x;
vx = -vx;
}
if (y < 0){//hit bot rail
y = -y;
vy = -vy;
}
if (x > (w-d)){//hit right rail
x = 2*(w-d) - x;
vx = - vx;
}
if (y > (h-d)){//hit top rail
y = 2*(h-d) - y;
vy = - vy;
}
calculateAngle(vx,vy);
fish.redraw("goldfish/fish" + anglePosition + ".png", x, y);
}//moveOneStep
//cal angle
function calculateAngle(vx,vy)
{
var s = Math.sqrt(vx*vx + vy*vy);
var angle = Math.asin(vy/s) * (180/Math.PI);
if(vx > 0)
{
angle = 90 - (angle);
}
else
{
angle = 270 + (angle);
}
anglePosition = Math.round((((angle/360)*16)*1)/1); //16 positions
return anglePosition;
}//end of function
function init(){
initFrame(left, top, w, h, "#ccc");
fish.draw(x, y);
window.setInterval("moveOneStep()", tick);
}//init
</script>
</head>
<body onload="init()">
</body>
</html>
I'm trying to make a higher or lower game but I can't seem to get the higher and lower buttons to work. I have my deck set up in an array such as Code:
var deck = [
{pictu "images/AceHearts.png", facevalue: 1 },
{pictu "images/2Hearts.png", facevalue: 2 },
etc.
]
<!-- Then the rest of my code is as follows>
function rnd()
{
return Math.random()-0.5;
}
function hidemessage(){
document.getElementById("winningmessage").style.display = "none";
}
hand1 = new Array();
deck.sort(rnd);
<!-- This function randomly picks a card and takes its value and returns it --!>
function getHandHTML(hand)
{
html= "";
total = 0;
for (i=0; i<hand.length; i++)
{
html+= "<img src = \""+ hand[i].picture +"\"> ";
total= hand[i].facevalue;
}
return html;
}
<!-- This function takes a card from the deck --!>
function nextcard()
{
for (i=0; i< 1; i++)
{
card = deck.shift();
hand1.push(card);
}
document.getElementById('hand1').innerHTML = getHandHTML(hand1);
document.getElementById("winningmessage").style.display = "none";
}
<!-- This function adds takes the next card from the deck and places it on the screen --!>
<!--It also disables the buttons after 6 cards have been drawn --!>
function addCardToHand()
{
card = deck.shift();
if (card == null) { return;}
hand1.push(card);
document.getElementById('hand1').innerHTML = getHandHTML(hand1);
if(i==6){
document.getElementById("higher").disabled = true;
document.getElementById("lower").disabled = true;
document.getElementById("winningmessage").style.display = "block";
}
}
window.onload = nextcard;
function higher(){
if (hand1[index].facevalue() > hand1[index-1].facevalue())
{
alert("higher");
}
else
{
alert("wrong")
}
}
</script>
<body>
<style>
.hand {margin: 20px; padding: 20px;}
</style>
<input type = button value = "higher" onclick = "addCardToHand();higher()" id = higher>
<input type = button value = "lower" onclick = "addCardToHand()" id = lower>
<div class = hand id = hand1></div>
<div id = "winningmessage">
You Win
</div>
</body>
</html>
I've highlighted the area where I've attempted to make an alert box pop up saying if the higher button was right or wrong. Any suggestions would be much appreciated All, I have a script that runs some jQuery and appends it to a <div>. I only want this script executed if a user is using IE7 or higher since jQuery doesn't work with IE6. How can I do that? Also, if they aren't using IE7 or higher I don't wnat to display the <div> that the results go into. How would I go about doing this? Thanks! Lets say I have a MySQL value of 4... and I have a HTML INPUT field.. Is there a way to make it so that if a client tries to submit a value higher than 4, then they will be returned a message? Something like: Code: <SCRIPT type="text/javascript">
function validateForm() {
if (document.forms["form"]["quantity"].value== (+$row['quantity']) {
alert ("Cannot submit because the quantity specified is not available.");
return false;
}
}
</SCRIPT>
<INPUT name="quantity" onsubmit="return validateForm()>
|
|||||||