Skip to content

Instantly share code, notes, and snippets.

@0x384c0

0x384c0/flakes.htm

Last active January 27, 2017 17:47
Show Gist options
  • Save 0x384c0/78813d4c5b4910a0036062ea64f32762 to your computer and use it in GitHub Desktop.
Save 0x384c0/78813d4c5b4910a0036062ea64f32762 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flakes.htm
<body>
<div id="strange"></div>
<div style="display:block; transform-origin: 50% 50%;width:100px;text-align:center;-webkit-transform: rotate(10deg) scale(1.3) translate(25px,392px)">Text</div>
<script>
var flakes=[];
var screen_ymi,screen_ym,screen_xm;
var wind_moment=0;
var last_screen_pos=-1;
var isFlakesEnabled=0;
var flakesInterval;
var flakesCount=200;
function onFlakeClick(e){
}
function bornFlakes(){
for(q=0;q<flakesCount;q++){
var f=document.createElement("DIV");
var te=document.createTextNode("8");
f.appendChild(te);
var so=f.style;
so.color="#2c7c5b";
so.position="absolute";
so.fontSize="10px";
so.textAlign="center";
//so.border="1px solid red";
so.display="block";
so.width="100px";
//so.height="100px";
//so.transformOrigin="50% 50%";
//f.style.left=f.style.top="-50px";
f.id="flake"+q;
// position,speed,size,rotation,element
flakes.push([0,0,0,0,f]);
resetFlake(q,false);
document.getElementById("strange").appendChild(f);
}
flakesInterval=setInterval(flakeAnime,50);
}
function resetFlake(i,isRespawn){
flakes[i][3].onclick=flakeClicked;
if(isRespawn){
flakes[i][0]=0;
} else {
seedFlake(i);
}
}
function seedFlake(q){
flakes[q][0]=Math.random();
flakes[q][1]=Math.random()/10;
flakes[q][2]=Math.random()*10;
flakes[q][3]=Math.floor(Math.random()*3600)/10;
}
function flakeClicked(){
onFlakeClick("/flgi/"+Math.floor(Math.random()*39)+".ogg");
resetFlake(this.id.substr(5),true);
}
function flakeAnime(){
var sw=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||100);
var sh=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||500);
screen_ymi=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop,
screen_ym=screen_ymi+sh/2;
screen_xm=(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft)+sw/2
var way=Math.sqrt(sw*sw+sh*sh);
var q,so;
for(q in flakes){
var i=flakes[q];
// position,speed,size,rotation,element
i[0]+=.01;
if(i[0]>1){resetFlake(q,1);}
//i[3]+=1;
var rot=i[3]/57.2958;
var x=Math.floor(screen_xm+Math.sin(rot)*i[0]*way);
var y=Math.floor(screen_ym+Math.cos(rot)*i[0]*way);
var val="translate("+x+"px,"+y+"px) rotate("+i[3]+"deg) scale("+(i[2])+")";
so=i[4].style;
so.transform=val;
so.WebkitTransform=val;
so.MozTransform=val;
so.OTransform=val;
so.msTransform=val;
//i[4].innerHTML=way;
/*
so.top=y
so.left=x;*/
}
}
function switchFlakes(){
if(isFlakesEnabled){
clearInterval(flakesInterval);
for(q in flakes){document.getElementById("strange").removeChild(flakes[q][3]);}
flakes=[];
} else {
bornFlakes();
}
isFlakesEnabled=1-isFlakesEnabled;
}
if(11 || isFlakesEnabled){
bornFlakes();
}
document.onmousemove=function(e){
if(last_screen_pos<0 || Math.abs(wind_moment)<.01){
last_screen_pos=e.pageX;
return;
}
wind_moment+=e.pageX-last_screen_pos;
last_screen_pos=e.pageX;
}
</script>
Raw
tree.htm
<body>
<div id="strange"></div>
<div style="display:block; transform-origin: 50% 50%;width:100px;text-align:center;-webkit-transform: rotate(10deg) scale(1.3) translate(25px,392px)">Text</div>
<script>
var flakes=[];
var screen_ymi,screen_ym,screen_xm;
var wind_moment=0;
var last_screen_pos=-1;
var isFlakesEnabled=0;
var flakesInterval;
var flakesCount=200;
function onFlakeClick(e){
}
function bornFlakes(){
for(q=0;q<flakesCount;q++){
var f=document.createElement("DIV");
var te=document.createTextNode("8");
f.appendChild(te);
var so=f.style;
so.color="#2c7c5b";
so.position="absolute";
so.fontSize="80px";
so.border="1px solid red";
so.display="block";
so.width=200;
//f.style.left=f.style.top="100px";
f.id="flake"+q;
// position,speed,size,rotation,element
flakes.push([0,0,0,0,f]);
resetFlake(q,false);
document.getElementById("strange").appendChild(f);
}
flakesInterval=setInterval(flakeAnime,50);
}
function resetFlake(i,isRespawn){
flakes[i][3].onclick=flakeClicked;
if(isRespawn){
flakes[i][0]=Math.random();
} else {
seedFlake(i);
}
}
function seedFlake(q){
flakes[q][0]=0;
flakes[q][1]=Math.random()/10;
flakes[q][2]=Math.random()*80;
flakes[q][3]=Math.floor(Math.random()*3600)/10;
}
function flakeClicked(){
onFlakeClick("/flgi/"+Math.floor(Math.random()*39)+".ogg");
resetFlake(this.id.substr(5),true);
}
function flakeAnime(){
var sh=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||500);
var sw=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||500);
screen_ymi=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop,
screen_ym=screen_ymi+sh/2;
screen_xm=document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft+sw/2
var way=Math.sqrt(sw*sw+sh*sh);
var q,so;
for(q in flakes){
var i=flakes[q];
// position,speed,size,rotation,element
i[0]=1;
//i[2]*=1.01;
var rot=i[3]/57.2958;
var x=Math.floor(Math.sin(rot)*i[0]*way);
var y=Math.floor(Math.cos(rot)*i[0]*way);
var val="rotate("+i[3]+"deg) scale("+(i[2]/100)+") translate("+x+"px,"+y+"px)";
so=i[4].style;
so.transform=val;
so.WebkitTransform=val;
so.MozTransform=val;
so.OTransform=val;
so.msTransform=val;
status=val;
i[4].innerHTML=way;
/*
so.top=y
so.left=x;*/
}
}
function switchFlakes(){
if(isFlakesEnabled){
clearInterval(flakesInterval);
for(q in flakes){document.getElementById("strange").removeChild(flakes[q][3]);}
flakes=[];
} else {
bornFlakes();
}
isFlakesEnabled=1-isFlakesEnabled;
}
if(11 || isFlakesEnabled){
bornFlakes();
}
document.onmousemove=function(e){
if(last_screen_pos<0 || Math.abs(wind_moment)<.01){
last_screen_pos=e.pageX;
return;
}
wind_moment+=e.pageX-last_screen_pos;
last_screen_pos=e.pageX;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment