Skip to content

Instantly share code, notes, and snippets.

@RH2

RH2/gist:1aa0cf3427ec099059d1

Last active August 29, 2015 14:10
Show Gist options
  • Save RH2/1aa0cf3427ec099059d1 to your computer and use it in GitHub Desktop.
Save RH2/1aa0cf3427ec099059d1 to your computer and use it in GitHub Desktop.
Download ZIP
tmpvar & rh2 javascript particles (update 557PM)
Raw
gistfile1.js
<html>
<head>
<title></title>
<style type="text/css">
body,html{
background-color: hsl(0,0%,50%);
margin:0px;
padding: 0px;
}
canvas{
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<script type="text/javascript">
var c = document.createElement("canvas")
var ctx = c.getContext("2d")
c.width = window.innerWidth
c.height = window.innerHeight
var time=0
ctx.fillStyle = "#ababab"
document.body.appendChild(c)
var x = 0
var delta = 1
var totalThings = 2000
var thing = createThing(30,30)
var things=[]
for(var i=0;i<totalThings;i++){
things.push(createThing(
Math.random()*c.width,
Math.random()*c.height,
Math.random()*Math.PI*1
).setColor())
//things[i].rotate((Math.random()*(Math.PI*2)))
}
ctx.fillStyle = "hsl(0,0%,10%)"
ctx.fillRect(0,0,c.width,c.height)
////////////////////////////////////////////////////REQUEST TICK
requestAnimationFrame(function tick(time){
//c.width = window.innerWidth
//c.height = window.innerHeight
ctx.fillStyle = "hsla(0,0%,10%,0.015)"
ctx.fillRect(0,0,c.width,c.height)
x+=delta
if(x>500){
delta = -delta
}
else if(x<0){
deta = -delta
}
ctx.save()
ctx.translate(x,0)
ctx.fillStyle = "#ababab"
//ctx.fillRect(0,0,111,100)
ctx.restore()
ctx.lineWidth=2
ctx.lineCap="round"
for(var i=0;i<totalThings;i++){
time+=0.001
//time=time%(Math.PI*2000000)
//things[i].rotate(((Math.random()*2)-1) * (Math.PI/15), time)
things[i].rotate(0,time)
things[i].render(ctx)
}
requestAnimationFrame(tick)
})
function createThing(x,y,r){
return{
x:x||0,
y:y||0,
vx:0,
vy:0,
r:r||0,
color:[
0,
100,
70,
],
text:"0",
phil:"hsl("+((Math.random()*10)+0).toString()+",100%,63%)",
////////////////////
rotate:function(r){
var speed= 1000
var a360 = Math.PI*2
var a180 = Math.PI
this.r = (this.r)%a360
var cx = c.width/2
var cy = c.height/2
var dx = this.x-cx
var dy = this.y-cy
var dist = Math.sqrt(Math.pow(dx,2)+Math.pow(dy,2))
var distNormalized = dist/(Math.sqrt(Math.pow(cx,2)+Math.pow(cy,2)))
var orbitX=0
var orbitY=0
var m = Date.now();
var m = m + Math.random()*5
//var speed = 50 * Math.sin(millis) +speed
//var rRadius = (millis%5)+300
//var rAangle = (millis%5)*50
var rRadius=1000
var rAangle=0
var mod = 50
speed = speed + Math.sin(m/10000)*500
var offset = (m/10000)%360 +Math.sin(m/100000)*60 + 30
rAangle=((offset+0)/360)*a360
if(m%mod > mod-(mod*(1/3))){
rAangle=((offset+120)/360)*a360
}
else if(m%mod > mod-(mod*(2/3))){
rAangle=((offset+240)/360)*a360
}
var orbitX = rRadius*Math.cos(rAangle) +cx
var orbitY = rRadius*Math.sin(rAangle) +cy
var newAngle = Math.atan2(this.y-orbitY,this.x-orbitX)+a180
//var newAngle = Math.atan2(this.y-cy,this.x-cx)+a180
var newAngleContinuous = (newAngle <= 0) ? newAngle + Math.PI*2 : newAngle;
var MinimumAngle = 0
//var MinimumAngle = Math.min(Math.abs(newAngleContinuous-this.r),Math.abs(newAngleContinuous-this.r+a360))
if(Math.abs(newAngleContinuous-this.r)<=Math.abs(newAngleContinuous-this.r+a360)){
MinimumAngle=(newAngleContinuous - this.r)%a360
var hue = lerp(this.color[0],100,0.5)%360
this.phil = "hsl("+ hue.toString() +",100%,70%)"
}
else{
MinimumAngle=((newAngleContinuous - this.r)+a360)
var hue = lerp(this.color[0],80,0.5)%360
this.phil = "hsl("+ hue.toString() +",100%,70%)"
}
//if(Math.random()<0.005){ this.r = r + this.r + MinimumAngle}
//else{ this.r = r + this.r + (MinimumAngle * distNormalized)/2 }
this.r = r + this.r + (MinimumAngle)
//if(dist/(Math.sqrt(Math.pow(cx,2)+Math.pow(cy,2)))>0.25){this.r=this.r+MinimumAngle}else{this.r=this.r}
this.text= " "+(Math.floor(((MinimumAngle/a360)*360) * 100) / 100).toString()
this.vx=speed*Math.cos(this.r)
this.vy=speed*Math.sin(this.r)
},
setColor:function(ctx){
var cx = c.width/2
var cy = c.height/2
var newAngle = Math.atan2(this.y-cy,this.x-cx)
newAngle = (newAngle < 0) ? newAngle + Math.PI*2 : newAngle;
this.color[0]=((newAngle/(Math.PI*2))*360).toString()
this.phil = "hsl("+ this.color[0].toString() +",100%,70%)"
//this.phil="rgb("+ ((this.x/c.width)*200).toString() +","+ ((this.y/c.height)*200).toString() +","+ "0" +")"
//this.phil="#ffff00"
return this;
},
render:function(ctx){
ctx.save()
//var pxc = ctx.getImageData(this.x+this.vx*ctx.lineWidth,this.y+this.vy*ctx.lineWidth,1,1).data
//var pxcv=pxc[0]+pxc[1]+pxc[2]
//this.rotate(pxcv/5000);
this.x+=this.vx
this.y+=this.vy
ctx.fillStyle=this.phil
ctx.font="8px Arial"
ctx.fillText(this.text,this.x,this.y)
ctx.translate(this.x,this.y)
ctx.rotate(this.r)
ctx.beginPath()
//ctx.arc(0,0,5,-Math.PI/4,Math.PI/4,false) //locx,locy,radius,startAngle,endAngle,direction
ctx.moveTo(-10,0)
ctx.lineTo(0,0)
ctx.strokeStyle= this.phil
ctx.stroke()
//ctx.fillStyle=this.phil
//ctx.fill()
ctx.restore()
}
}
}
lerp = function(a, b, u) {
return (1 - u) * a + u * b;
}
clamp = function(min,max,value){
return Math.min(Math.max(value,min),max);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment