So I'm trying to make this div animation a little more realistic by implementing a "physics engine" that slightly resembles how it would actually accelerate and decelerate... kinda...
<!DOCTYPE html>
<html>
<head>
<title>Gio is Fay</title>
<link rel="stylesheet" href="sliding.css"/>
</head>
<body>
<div id="button">
<h5>Click me!</h5>
<h4>HARDER!</h4>
</div>
<div id="moving"></div>
<script type="text/javascript">
var sliding = document.getElementById("moving");
var margin = sliding.style.marginTop | 100;
var speeds = [0.5, 1, 3, 6, 8, 9, 10, 10, 10, 10, 10, 10, 9, 8, 5, 3, 1];
var length = speeds.length;
sliding.onclick = move;
function move() {
window.log("Herro!");
for (i = 0; i < length; i++) {
var x = speeds[i];
margin += x * 5;
sliding.style.marginTop = margin + "px";
}
}
</script>
</body>
</html>
When I click on the div, unsurprisingly, nothing happens. I put in an alert box to tell me whether the function was being triggered, and apparently it wasn't. Or at least the alert never showed up. Not sure why. No errors in the console. Help?
I tried your code, and everything but window.log() "worked", so I'm not sure why you weren't getting any results at all.
This really isn't the best method to animate. You should use requestAnimationFrame(), which works a lot like a setTimeout() but is optimized for animation. When I got your code working, you don't see an animation at all because you have only 17 frames, and those 17 passes through the for loop happen SUPER fast. So look into requestAnimationFrame() for animating with js. Here is what your code would look like implementing that change:
var sliding = document.getElementById("moving");
var margin = sliding.style.marginTop | 10;
var speeds = [0.5, 1, 3, 6, 8, 9, 10, 10, 10, 10, 10, 10, 9, 8, 5, 3, 1];
var length = speeds.length;
var frame = 0;
sliding.onclick = function () {
frame = 0;
requestAnimationFrame(move);
}
function move() {
var x = speeds[frame];
margin += x;
sliding.style.marginTop = margin + "px";
if (frame < length)
requestAnimationFrame(move);
frame++;
}
You should also reconsider your method for changing the rate. I would use trig functions. That way you could easily change the duration and distance that the div moves. Here is an example of that, feel free to use it. You can run this snippet to see what it looks like.
var sliding = document.getElementById("moving");
var margin = sliding.style.marginTop | 10;
// a few settings for our animation
var theta = 0.0; //in radians
var distance = 100; //in pixels
var duration = 1; //in seconds
var frameRate = 60; //fps
var down = false; //a switch so we can move up and down, we are starting in the up position
sliding.onclick = function () {
if (down)
//if we need to go up, we start at 1 (cos(PI) = -1)
theta = Math.PI;
else
//otherwise we start at 0
theta = 0.0;
//flip it
down = !down;
//and away we go
requestAnimationFrame(move);
}
function move() {
//the margin is determined with cos
margin = (-1 * Math.cos(theta) + 1) * distance + 10;
//and set
sliding.style.marginTop = margin + "px";
//our theta advances
theta += (Math.PI) / frameRate / duration;
//and we continue if we are not at either end
if ((down && theta <= Math.PI) || (!down && theta <= Math.PI * 2))
requestAnimationFrame(move);
}
#moving {
margin-top: 10px;
padding: 10px;
background: #047;
color: #bbb;
border-radius: 5px;
width: 80px;
text-align: center;
}
<div id="moving">DIV</div>
And finally, jQuery has this stuff built in so you don't have to worry about reinventing the wheel, so look in to that. I hope this helps!
first of all, as mentioned. window.log isnt a function. I do get that error in the console. You will also need to set the position of your moving div to be relative to see it move.
Here is a fiddle of your code (with my modifications)
http://jsfiddle.net/404xk2fo/
when I click on the red div it will instantly disappear off the screen because it's moving quite a bit. Lower the multiplication factor, and it will stay on the screen but still instantly move. The problem is you are trying to animate in this loop without any kind of timer. Executing this code in a loop is so fast that your animation is going to happen instantly.
check out this webpage for some examples on how to do smooth animations in javascript. the key is using requestAnimationFrame
http://creativejs.com/resources/requestanimationframe/
I added a really simple example of requestAnimationFrame http://jsfiddle.net/j4x9dctq/
I'm using a little jquery to select the div. I just prefer jquery syntax. you can use native javascript if you prefer.
Related
I am making an old-RPG game on HTML, and I want to make a Function on Javascript
that makes the div of the player get lower than the obstacle, and when the top get higher than the obstacle, the z-index of the player go higher than the obstacle:
var top = parseInt($("#player").css("top"));
var hei = $("#player").height();
var total = top + hei;
var obTop = parseInt($("#obstacle").css("top"));
var obHei = $("#obstacle").height();
var obTotal = obHei + obTop;
if (total < obTotal) {
player.style.zIndex = 1;
$("#obstacle").css('z-index', 2);
} else {
player.style.zIndex = 2;
$("#obstacle").css('z-index', 1);
}
When top's player is higher than the obstacle (Fire)
When top is Lower
You need to compare the Y positions of the objects in question. In this case, When the fire y is lower then the player y, You want to have the player have a higher Z-index than the fire. And Vice Versa, Where when the fire y is higher than the player y, you want the fire to have a higher Z-index than the fire. You could do something like this like this:
//Define player y and fire y
player.style.zIndex = 1;
$("obstacle").css("z-index", 1);
if (playery > firey){
player.style.zIndex = 2;
} else {
$("obstacle").css("z-index", 2);
}
This hasnt been tested as there Is not a runnable example given.
So I have been trying endlessly to try and do something similar too what this site is doing (http://whois.domaintools.com/). I'm trying to get a webpage, so wherever the mouse moves over the webpage, that kind of effect follows it (I'm sorry I don't know what I would call the effect).
I've read how to ask questions on here, but I don't know what too look for so it's difficult for me to attempt this. So far this link (http://p5js.org/learn/demos/Hello_P5_Drawing.php) I've used the code from this and played around with it but i'm just puzzled as too how I would go about doing this.
Thanks for any help, I've been banging my head against a brick wall for a good couple of days now.
This seems to be some kind of particle system. I would start the following way: First create a class for a particle, it should have a random x and y coordinate, and it should change it's postion periodically to a random new postion. Then create a lot of instances of the particle and distribute them over the page.
http://jsfiddle.net/aggoh0s1/3/
/* each particle will move in a 100px100px square */
var gutterWidth = 100;
/* class definition */
var Particle = function(x, y) {
var t = this;
t.x = x;
t.y = y;
t.elem = $('<div class="particle" />');
t.elem.css({ left: x+"px", top: y+"px"});
$('body').append(t.elem);
/* create a new position every 500-1000 milliseconds */
var milliSecs = 500 + Math.random() * 500;
t.ptinterval = setInterval(function() {
var dx = Math.round(Math.random() * gutterWidth);
var dy = Math.round(Math.random() * gutterWidth);
t.elem.animate({left: (t.x + dx)+"px", top: (t.y + dy) + "px"}, 600);
}, milliSecs);
};
/* create a 1000px1000px area where particles are placed each 100px */
var particles = [];
var newParticle;
for(var x = 0; x < 1000; x = x + gutterWidth) {
for(var y = 0; y < 1000; y = y + gutterWidth) {
newParticle = new Particle(x,y);
particles.push(newParticle);
}
}
CSS:
.particle {
width: 2px;
height: 2px;
background-color: black;
position: absolute;
}
Using this logic, you could also use a canvas to display the particles instead of a html div like it is done on whois.domaintools.com. The next step should be to connect the particles with lines to each other, and after that some code should hide all particles that are some distance away from the mouse position.
I've developed the following solution for the effect which you are referring. This is done using jQuery using the event mousemove(). Bind this event to your body where the content is.
Method :
Create an element with the following css on your body. You can create the element onthefly using jQuery as well.
<div class='hover'></div>
CSS
.hover{
position:absolute;
width:100px;
height:100px;
background-color:#fff;
}
The add the following code to your page.
$('body').mousemove(function(event){
$('.hover').css({
'top' : event.pageY,
'left': event.pageX
})
});
The above code will bind an event to your mouse move and I change the element position according to the mouse coordinates.
This fiddle shows a running example
I've given you the basic idea of the solution! You will have to medle with the css and jquery to add the looks and feels of the effect which you refer to.
See the simple example
<img id="imgMove" src="Images/img1.jpg" height="100" width="100" style="position: absolute;" />
JQuery
$(document).ready(function () {
$(document).mousemove(function (e) {
$("#imgMove").css({ "top": e.pageY - 50, "left": e.pageX - 50 }); // e.pageX - Half of Image height, width
})
})
first of all i want to say that the following function is by chance and by this i mean that its functioning is very strange:
function x (e,s,v){ // e =element, s = desired size of an element, v = speed
var div = document.getElementById(e),
width = 0;
for(var i =0; width<s; i++){
if(i%v === 0){
width = width+1;
div.setAttribute('style', 'width:'+width+'px;');
}else{
width = width +0;
}
};
};
this function is working perfectly and doing what i want but the problem is that the width is changing at once when the working of this function is finished.
in detail
i want that the width of an element increase smoothly, increase 'one' by 'one' px. so i made this function.
there is an if statement because if i didn't put that there then the width of that element would increase at once. that if statement delay the time between the adding of two pixels
but now the problem is that it is adding pixels one by one but the width is increasing at once after the completion of the function.
for example if i write in console x('aynElement', 500, 100) then it is adding pixels one by one but the width of the element is increasing at once when the function stop functioning
you can see this yourself in console
link to JsFiddle for full code
secondly
the problem is that this is strange. you had absolutely felt weird after reading this function. please anyone explain me this weirdness.
thanks
You can use setTimeout() to do this.
function x(e, s, v) { // e =element, s = size of an element, v = speed
var div = document.getElementById(e),
width = 0;
for (var i = 0; i < (s - width); i++) {
setTimeout(function() {
div.setAttribute('style', 'width:' + width+++'px;');
}, i * (1 / (v * 0.01)));
};
};
x('d1', 400, 10)
#d1 {
width: 100px;
height: 100px;
background-color: #aaa;
}
<body>
<div id="d1" style="width:200px;"></div>
</body>
I think this would solve it better (might need the one or other adjustment, just a quick scrape):
DEMO
setInterval(function(){
grow('id',250) //set your parameters here
}, 100); //this is the speed - the lower the quicker
var width = 1;
function grow(e,s) {
document.getElementById('d1').style.width = width+"px";
width++;
};
setInterval(function(){
grow('id',500)
}, 10);
var width = 250;
function grow(e,s) {
document.getElementById('d1').style.width = width+"px";
width++;
};
#d1{
height: 100px;
background-color: #000;
}
<body>
<div id="d1" ></div>
</body>
Is there any way to improve the following html5 example, or is the browser
just to slow in handling mouse events?
Its a grid, and on the point you move the mouse to you see a red rectangle..
But this rectangle is a kind of lagging behind the mouse, so moving to slow to its position.
(if the mouse is moved pretty fast)
http://jsfiddle.net/191rmac8/
Here the code:
<body>
<canvas id="canvas" width="400" height="400">error or not supported.</canvas>
<script>
var lineSize = 10;
var rasterSize = 5;
var bx = 0;
var by = 0;
g2d = document.getElementById("canvas").getContext("2d");
g2d.setFillColor("rgb(10, 10, 10)");
g2d.fillRect(0, 0, g2d.canvas.width, g2d.canvas.height);
g2d.setStrokeColor("rgb(0, 0, 255)");
g2d.setLineWidth(lineSize);
function repaint(){
g2d.clearRect(0, 0, g2d.canvas.width, g2d.canvas.height);
g2d.beginPath();
for(i = 0; i < rasterSize + 1; i++){
g2d.moveTo(0, (lineSize / 2) + i * (g2d.canvas.height - lineSize) / (rasterSize));
g2d.lineTo(g2d.canvas.width, (lineSize / 2) + i * (g2d.canvas.height - lineSize) / (rasterSize));
g2d.moveTo((lineSize / 2) + i * (g2d.canvas.width - lineSize) / (rasterSize), 0);
g2d.lineTo((lineSize / 2) + i * (g2d.canvas.width - lineSize) / (rasterSize), g2d.canvas.height);
}
g2d.stroke();
g2d.setFillColor("red");
g2d.fillRect(bx - 5, by - 5, 11, 11);
}
repaint();
g2d.canvas.addEventListener("mousemove", function(e){
bx = e.offsetX;
by = e.offsetY;
repaint();
});
</script>
</body>
body {
margin: 0;
width: 100%;
height: 100%;
display: block;
background: black;
}
canvas {
margin: auto;
margin-top: 50px;
display: block;
}
You can separate the mouse events from the drawing to increase performance.
Create an array to hold mouse points
In mousemove, push the current mouse position into the array.
Depending on your design, you might use Aboca's idea of capping the capture rate of the points.
Create a loop using requestAnimationFrame.
In the loop, draw all points since the loop was last executed as 1 path.
The benefits are:
requestAnimationFrame is efficient at drawing.
You are drawing a polyline through a batch of points instead of 1 point at a time.
Changing context state is somewhat expensive, and this lets you change state only once.
You can cap the rate of the repaint like I did here:
http://jsfiddle.net/sh6o91g4/1/
Adjust as you see fit as it will fasten the perfomance but it will reduce the quality of the rendering too (skipping frames has it's drawbacks)
var now = new Date().getTime();
if(now - time > 10){
time = now;
bx = e.offsetX;
by = e.offsetY;
repaint();
}
I've been fooling around with JavaScript/JQuery, and decided to create a little program which would animate a ball bouncing around a rectangular boundary area. I believe that the logic of my code should make sense, but for some reason I can't get it to change directions. What is even stranger is that I put the ball's x and y positions as text on it, but it seems statically stuck (it doesn't change), but I see when I inspect the element that it's left and top css parameters are changing over time.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<style>
.ball {
width: 50px;
height: 50px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
}
.boundary {
width: 700px;
height: 500px;
background: #AAAAAA;
border-style:solid;
border-width:5px;
position: absolute;
}
</style>
<script>
$(document).ready(function(){
var b = new ball(1, 1, 10, 10);
for(i = 0; i < 1000; i++)
b.moveBall();
});
function ball(xPos, yPos, xVel, yVel)
{
this.xPos = xPos;
this.yPos = yPos;
this.xVel = xVel;
this.yVel = yVel;
this.rightBound = false
this.leftBound = false;
this.upBound = false;
this.downBound = false;
this.width = 50;
this.height = 50;
this.moveBall = moveBall;
function moveBall()
{
var h = 500;
var w = 700;
//detect if it is at x bounds
if(this.xPos + this.width + this.xVel > w)
{this.rightBound = true;}
else if(this.xPos + this.xVel < -1)
this.leftBound = true;
else
{
this.rightBound = false;
this.leftBound = false;
}
//detect if it is at y bounds
if(this.yPos + this.height + this.yVel > h)
{this.downBound = true;}
else if(this.yPos + this.yVel < -1)
this.upBound = true;
else
{
this.upBound = false;
this.downBound = false;
}
//handle velocity changes for bounds
//so you switch the x direction if x bound is met, same for y
if(this.rightBound || this.leftBound)
this.xVel *= -1;
if(this.upBound || this.downBound)
this.yVel *= -1;
//now give motion
this.xPos += xVel;
this.yPos += yVel;
//now draw
$(".ball").animate({
left:this.xPos + 'px',
top:this.yPos + 'px'
}, 150).text(this.xPos + "," + this.yPos);
}
}
</script>
</head>
<body>
<div class="boundary">
<div class="ball"></div>
</div>
</body>
</html>
The weird thing is that it seems to automatically put the end value of 10,001, 10,001 (assuming it never changes direction) as it's (x,y) coordinates from the very beginning. Anything that could point me in the right direction would be appreciated! And sorry if it's some basic error, I tried to ensure it wasn't but sometimes they slip through!
You're doing your ball.moveBall in a loop, not on a timer. So it's going as fast as computably possible. Yes, computably isn't a word. Moving on.
By calling $.animate you're saying you want jQuery to handle moving the object from one spot to another. jQuery goes way way way way way slower than the computer. Hang on, this is getting confusing. Let me put it simply.
You loop through ball.moveBall 1000 times. How long does that take? Virtually no time at all. That's why the coordinates stay stuck at 1000 the whole time. It actually gets there super super super fast. So fast, it gets there basically before jQuery has time to start moving the ball. And.... then the ball starts moving. Why? Why doesn't it actually move to position 1000,1000 right away? Well, the coordinates do get to 1000,1000. But jQuery is like, "Oh, okay, move the ball to position 1000,1000. I can do that! Really really slowly...". You're probably tired of hearing the explanation, so here's the fix:
Change $(".ball").animate to $(".ball").css. And change your loop to window.setInterval(function(){b.moveBall()},1000) or something like that. I've set up a fiddle for you here: http://jsfiddle.net/uXbwR/
You'll notice it moves really slowly. That's cause I set the interval to 1000 milliseconds, which means it only moves once every second. For a game you'll want something like 1000/60 (once every 60th of a second), but I tried that and it makes the ball move super fast. You've got the ball's speed really high. You might wanna try turning that down a bit.
That's all I've got.
Edit
Computationally. That's the word I was looking for.
You should call the next step of the animation only when the preceding has completed. You are telling animate to take 150ms, but the while loop completes almost instantly, without waiting each step.
[EDIT]
#Samuel answer is complete and already suggested you a good workaround. I guess this is going to be beyond the purposes of your application, but if you're interested in setting up a proper Javascript game mainloop these are some useful resources followed by an implementation of mine:
Fabien Sanglard, Game timers: Issues and solutions
Paul Irish, requestAnimationFrame for smart animating.
var RENDERING_FRAME_TIME = 1000/60; // ms
var PHYSICS_FRAME_TIME = 5; // ms
var currentTime = new Date().getTime();
var accumulator = 0;
(function mainloop(){
newTime = new Date().getTime();
accumulator = newTime - currentTime;
currentTime = newTime;
while (accumulator > PHYSICS_FRAME_TIME) {
integrate(PHYSICS_FRAME_TIME);
accumulator -= PHYSICS_FRAME_TIME;
}
requestAnimationFrame(mainloop);
render();
})();