« first day (436 days earlier)      last day (4737 days later) » 

00:03
you mean, mouse moves left, snow moves right?
yup
i'll give you the JS in a second
So every time the mouse moves, compare the position to the previous position, current time to last time, and then store the new position and time. This'll give you a vector indicating direction and distance, and a length of time - so together, you get velocity (px per ms).
You'll negate the vector, and use that to move your snow - so the faster the mouse moves, the faster the snow moves in the opposite direction.
If you don't want snow moving up, you can either dampen vertical motion pretty heavily, or just ignore the y coordinate of the cursor. You might also want to dampen the horizontal motion, if you want less "fluffy" snow.
@Shog9: so bind to $(document).mousemove(), get pageX and pageY, compare it to the previously found one (does this mean subtract them?), then negate them?
here's one that's a bit more readable
also, can you figure out why animating to bottom: 0 doesn't work?
GGG
GGG
because animating from top:a to bottom:b doesn't make sense
ahhhh, i see
because the random scrollbar is very annoying
00:17
@Purmou Yeah, that's a good start. You'll probably want to drop animate, if you plan on adjusting the movement of the snow fairly often, or perhaps write a custom step function for it and do your mouse check in that.
@Shog9: how would the custom one work? I rely heavily on jQuery for all my animations...
GGG
GGG
all jquery is doing is taking the start and end values and interpolating between them
which you can do with css3 transitions btw
yeah but then i can't really do mouse response with CSS3, can i?
or respond to every motion of the mouse
GGG
GGG
you could combine the two, and only poll the mouse every 100 ms or so
i'm trying to replicate this
GGG
GGG
00:28
ah
that's a little differnt
it's just tracking the position of the mouse
not velocity
why can't i just do that? :P
GGG
GGG
you can
00:39
i hate to ask people to do things for me, but can you point me in the right direction with my code?
i can't figure it out. I'm afraid to drop animate cause I don't know how to animate it otherwise :P
woah...this was a surprisingly difficult bug to detect...
Zirak
can you help me out bro
Apparently, I forgot that arr.forEach doesn't do nice things when you mess with the array inside the function call
With animation? Animation belongs to GUI, and my expertise in GUI ends in macaroni art during kindergarten
GGG
GGG
you should use my ArrayIterator. It has a remove method :D
I just used a regular while loop. I only wanted to loop n times, so it fit
00:45
what's a decent FPS rate for the web?
GGG
GGG
35
so what i'd need to do is get the random number between 15000 and 20000 milliseconds then divide it by 35 to find my step rate?
for each step of my animation?
because i need some faster than others
I can offer some elementary-school math help. You know startTime and duration and how many changes you want in a second
GGG
GGG
basically what you want to do is every n milliseconds, calculate the position of everything and put it there
okay, if it randomly selected 15000
and i wanted to know my interval for each step
i divide 15000 by 35
00:49
So, each second you want Math.abs( startingCondition - endCondition ) / framesPerSecond
steps per second is the framerate?
owait, my math is wrong
endcondition - startcondition, right? :P
GGG
GGG
look at it this way... if you do something every 100 ms, it will be 10 fps
No, that's fine. You just need to factor more stuff in.
00:50
makes sense
And that's why I had Math.abs. You sometimes want decreasing values, not just increasing values.
GGG
GGG
but the thing is, this interpolation can be done with css
Actually, it's easy. You know the duration, so duration / FPS
that's what i was saying earlier
15000/35
that gave me 482
i'm not gonna set the interval at 482 xD
Why?
GGG
GGG
00:52
why what
If you want the animation over 15000 seconds, that sounds fair
milliseconds
it's only 15 seconds
15-20
it randomly picks between those two values
so each snowflake falls at a different speed
Frames per SECOND, not frames per MILLISECOND
...
facepalm
(15000 / 100) / 35
GGG
GGG
00:54
lol
or 15000/35/10
482/10, 48.2
so 48 milliseconds
amirite?
How is it 15000/35/10? Where's the extra 0?
GGG
GGG
what are you guys even trying to figure out
i am lost now
Unless I'm wrong, there're 100 milliseconds in a second, not 10
there's 1000 ;)
GGG
GGG
00:55
yeah 100
1000
...
@GGG Given duration and FPS, find how many steps you want to take each second
LOL
oh right...woops
i'm looking for the interval of my animation
to use with setinterval
i want to achieve 35 FPS
GGG
GGG
00:56
why are we worried about fps
and i want to find out what my interval has to be for that
because i want a nice animation
@Purmou your setinterval is for generating snowflakes per second, not frames
no no no, i want to animate it on my own too
i'm talking about a second setinterval to handle the animation of each snowflake
hmm
how would i apply a single set interval to each individual snowflake? 0.o
Loop over all snowflakes in each call
GGG
GGG
Wouldn't that just be animating it every 35 ms? Or am i retarded?
00:58
Yeah, you don't want hundres of intervals running
dennis got me
i think i'm stuck with animate() here
GGG
GGG
no way
@GGG animating every 35ms gives you 25 FPS
1000/35
GGG
GGG
oh right
so i want to animate every 28 milliseconds
that gives me 35 5/7
which is close enough
but why am i still thinking about this?
i've abandoned this custom animation
i'd have to be running a separate setinterval for each snowflake
which wouldn't be ideal at all
GGG
GGG
01:02
no that's what i'm saying
just set a timer for like 30 ms or whatever
and calculate the position of every snowflake
and put it where it goes
and reset the timer.
GGG
GGG
BUT
you could insted set it for like 300 ms
and let css interpolate
setInterval(function(){
    // go through each snowflake and set their positions by random generation, using their current positions as guides
}, 30);
i could also do Math.floor(Math.random() * 5) to get a random number up to 4 and increment each snowflake's top position by that much at each interval
GGG
GGG
yeah basically but i'm sure everyone will tell you all the shortcomings of setinterval ina minute here
which will replicate their falling at different speeds
GGG
GGG
01:06
store a velocity for each snowflake
as an x,y vector
use that to determine its position
how would i do that and where would i store it?
i can't calculate their current velocity because they haven't been animated yet
could i push those values to an array and then use a for loop in the setinterval to grab the values at each interval?
You can generate it randomly, though
Initial is random, everything else based on that
@Zirak i'd much rather do that, honestly
Represent each snowflake as an object
That's GGG's advice, really
GGG
GGG
yeah give them each an initial velocity. represent each as object or cheat and reuse the dom node, stick velocity in data- attributes
01:08
eeek
sounds like too much work
GGG
GGG
but it sounds like rewarding work
okay, @GGG, if i do CSS3 animations
if i alter the css with jQuery, will it still animate since I have the transitions set
GGG
GGG
get this working first and then add those
you could swap out this jquery animate with css transitions right now, yes
"sounds like too much work" is an excuse for not looking at an SQL query the size of yo mamma, not for being too lazy to make the right design choice
but if i alter CSS with jQuery, CSS still handles the animation, correct?
GGG
GGG
01:10
yep.
@Zirak lol, you just made my day
try {
    zirak.makeDayOf( world.chooseNearestPerson() );
}
catch ( e ) {
    zirak.cry();
}
GGG
GGG
calculating the position like 1/10 as often and letting css interpolate might be jerky but i think it would actually work well for snow. Curious to see that
XD
@GGG I'll try both...let me try it with setinterval and data attributes right now
Anyone wanna see if I screwed shit badly again?
/new me
01:18
@Zirak /new
that looks bad enough
@Zirak new
woah, I'm an idiot. Forgot to change the output function
Go
@Zirak /new
  +---+
  |   |
  |
  |
  |
__+__

----
01:19
@Zirak a
You're kidding me
LOL
grumble grumble
okay
why am i having so much trouble with this
i want it to generate a larger number when the duration is lower
Why am I having so much trouble with this ~_~
01:21
i'm trying to find a number i can divide the duration by at any time
15000/x > 20000/x
is this even possible
a fraction times a fraction makes a smaller fraction
how can i use that to my advantage...
GGG
GGG
i think you should throw the old script out and make a new one
you don't need duration if you use velocity
This is so stupid it might just work
/new me
@Zirak /new
  +---+
  |   |
  |
  |
  |
__+__

------
@Zirak m
01:32
GGGAAAAHHHH
That's it. I'm throwing a console.log every other line
GGG
GGG
hahah
i need a better name for it :/
In BHD.include, frame is implicit-global
GGG
GGG
ooh good catch, thanks
Now fix my mistake ~_~
okay, I've arsenaled console.log calls, /new and then guess please
setInterval(function() {
    $(".snowflake").each(function() {
        var inc = $(this).attr("data-inc");
        $(this).css("top", "+=" + inc);
    });
}, 20);
CODE
Y U NO WORK
01:42
@Zirak new
Why didn't I think of this before?
@Zirak /new
  +---+
  |   |
  |
  |
  |
__+__

-------
@Zirak e
@Zirak a
lol
aha! Now I know the source of the problem. It treats it as non-valid
owait
It goes all the way to game.handleGuess
NOW I know the problem!
@GGG: do you know why that setinerval isn't working?
i'm storing the increments in data-inc
and retrieving them, but they're not moving at all
GGG
GGG
idk, is this supposed to work: .css("top", "+=" + inc)
i'm sure of it
in any case i'll try doing a map
oh wait
can css() set top, left, bottom, and right values?
GGG
GGG
01:49
i have no idea
one sec
yes it should work
@Zirak /new
  +---+
  |   |
  |
  |
  |
__+__

-------
@Zirak e
  +---+
  |   |
  |   O
  |
  |
__+__
e
-------
marginTop works better
Good news is it accepts input now...bad news is it doesn't stop sending output
but it's getting FRIGGIN SLOW
GGG
GGG
01:54
@Zirak r
i have to remove the elements when they get to the bottom
facepalm I forgot to flip a boolean
@Zirak /new
  +---+
  |   |
  |
  |
  |
__+__

----
@Zirak e
  +---+
  |   |
  |   O
  |
  |
__+__
e
----
Bitchin
@Zirak m
  +---+
  |   |
  |   O
  |   |
  |
__+__
e,m
----
GGG
GGG
@Zirak f
01:56
  +---+
  |   |
  |   O/
  |   |
  |
__+__
e,m,t
----
GGG
GGG
@Zirak f
  +---+
  |   |
  |  \O/
  |   |
  |
__+__
e,m,t,f
----
GGG
GGG
@Zirak u
  +---+
  |   |
  |  \O/
  |   |
  |  /
__+__
e,m,t,f,u
----
GGG
GGG
@Zirak c
01:57
You people suck. The phrase was wood  +---+
  |   |
  |  \O/
  |   |
  |  / \
__+__
e,m,t,f,u,c
----
GGG
GGG
@Zirak k
@GGG Game finished or didn't start. Ping me with /new to start
GGG
GGG
@Zirak /new
  +---+
  |   |
  |
  |
  |
__+__

----
GGG
GGG
@Zirak a
01:57
  +---+
  |   |
  |   O
  |
  |
__+__
a
----
GGG
GGG
@Zirak i
  +---+
  |   |
  |   O
  |
  |
__+__
a,i
--i-
@Zirak m
  +---+
  |   |
  |   O
  |
  |
__+__
a,i,m
--im
GGG
GGG
@Zirak r
01:58
  +---+
  |   |
  |   O
  |
  |
__+__
a,i,m,r
-rim
GGG
GGG
oh that could be aything ffs
@Zirak t
Correct! The phrase is trim. Congrats to @Purmou  +---+
  |   |
  |   O
  |
  |
__+__
a,i,m,r,t
trim
@Zirak grim
@Dennis Game finished or didn't start. Ping me with /new to start
01:59
@Zirak /new
  +---+
  |   |
  |
  |
  |
__+__

-----
@Zirak a
  +---+
  |   |
  |   O
  |
  |
__+__
a
-----
GGG
GGG
@Zirak asdf
  +---+
  |   |
  |   O
  |   |
  |
__+__
a,asdf
-----
01:59
XD
GGG
GGG
@Zirak hahahahaha
  +---+
  |   |
  |   O/
  |   |
  |
__+__
a,asdf,hahahahaha
-----
GGG
GGG
@Zirak /new
  +---+
  |   |
  |
  |
  |
__+__

----------
GGG
GGG
@Zirak e
02:00
  +---+
  |   |
  |   O
  |
  |
__+__
e
----------
GGG
GGG
@Zirak r
  +---+
  |   |
  |   O
  |
  |
__+__
e,r
--r-------
GGG
GGG
@Zirak t
  +---+
  |   |
  |   O
  |
  |
__+__
e,r,t
--r--t----
GGG
GGG
@Zirak s
02:01
  +---+
  |   |
  |   O
  |
  |
__+__
e,r,t,s
--r--t---s
GGG
GGG
@Zirak a
  +---+
  |   |
  |   O
  |
  |
__+__
e,r,t,s,a
-ar-at---s
GGG
GGG
@Zirak at
  +---+
  |   |
  |   O
  |
  |
__+__
e,r,t,s,a,at
-ar-at---s
GGG
GGG
@Zirak ar
02:01
  +---+
  |   |
  |   O
  |
  |
__+__
e,r,t,s,a,at,ar
-ar-at---s
GGG
GGG
interesting
what' s the answer, i want to try something
variations
GGG
GGG
@Zirak var
  +---+
  |   |
  |   O
  |
  |
__+__
e,r,t,s,a,at,ar,var
var-at---s
GGG
GGG
@Zirak variations
02:03
Correct! The phrase is variations. Congrats to @GGG  +---+
  |   |
  |   O
  |
  |
__+__
e,r,t,s,a,at,ar,var,variations
variations
GGG
GGG
neat
Zirak, why not just use substr?
to clip everything but the first letter?
it works fine at first
and then it LAGS LIKE A MO'FO
@Purmou Instead of?
my guess is cause all the marginTops are changing
can i ping you or will it start?
I turned it off
GGG
GGG
02:04
@Purmou do you ever get rid of them after they hit the ground?
yes
if you notice i have that whole if there
if element's bottom offset is greater than widnow width, remove it
GGG
GGG
i had to close it lol
heh
i even subtracted 20 from the window's height to see if it's actually getting removed
GGG
GGG
no i can't leave that open
and chrome developer toolbar agrees
GGG
GGG
02:05
this computer can't take it
yeah it's bad
is it cause of the marginTops changing?
GGG
GGG
pastebin the code or something so we can look at it
any guess?
anybody?
anyone?
bueller?
If it runs slow, first thing I'd do is remove all jQuery dependencies. .css calls are easy to replace
indeed, and all right
GGG
GGG
02:15
ok i really don't know enough about jQuery to help
@Zirak lol you beat me to it
get rid of all that jQuery stuff and i'll help all you want
It'd probably also be better to update the position directly
what do you mean directly?
@Purmou You intrigued me, so I wrote a jQuery-free snow script. No promises on code quality, but it is one way of doing it
Instead of goofing around with marginTop, just change the left/right values
GGG
GGG
i feel like it's 1998 lol
everyone making snow scripts
02:17
@Zirak i tried using top, didn't work
no idea why
@GGG That was my reaction when Google did it and everyone made a huge deal about it
GGG
GGG
here's something else that may speed it up, use big dots (.) instead of border radius
But now I'm guilty of it
GGG
GGG
hahah i'm tempted to do it myself
yay i'm an inspiration! XD
GGG
GGG
02:19
but i have a feeling something isn't getting cleaned up. Maybe re-use the same pieces of snow, put them back at the top after they hit the bottom?
tried everything you guys said
moved them back to the top when they hit the bottom
using bullet points instead of background and border radius
i didn't actually replace the css calls, i'll try that now
but i'm sure that's not it
and it's still slow...
grrrrr
TIME FOR CSS#!
CSS3!*
but
i wanted cross browser =/
@Dennis yours slows down too after a bit
i don't see what you're trying to get across with this :P
this is all Javascript and randomly generated elements
HOW IS IT NOT SLOW
xD
Just do stuff with top, no need for messing around with marginTop
i did it with top
it was still hella slow
looks like this
is my best option
02:32
@Purmou I haven't noticed much of a slowdown on mine
yours gets much slower when the window gets bigger
because you are using pixels instead of percents
oh, it was choppy to begin with
?
why are pixels slower than percents?
Not necessarily slower, but it just means the speed will depend on the size of the window
huh?
percents depend on the size of the window, not pixels
If your flake travels 5%/second, it will take the same amount of time no matter what
ohhhh i see
02:35
If it travels 5px/second then it will take longer to fall if you have a larger window and you will keep creating new flake at the same rate
As soon as I opened the console, the frame shrunk, it got rid of a bunch of flakes because they had exceeded the height and it sped up
hmmm
let me try percents then
well, like you said, it's not faster
02:50
grrr
well, i give up
@GGG I tried CSS3 transitions too, couldn't figure it out
GGG
GGG
i am creating one now too =/
for the love of
how's it going? XD
It's a fun exercise, at the very least

« first day (436 days earlier)      last day (4737 days later) »