Skip to content

Instantly share code, notes, and snippets.

@victusfate

victusfate/gist:7f29d2ca7176b476d82c

Forked from RH2/gist:1aa0cf3427ec099059d1
Last active August 29, 2015 14:10
Show Gist options
  • Save victusfate/7f29d2ca7176b476d82c to your computer and use it in GitHub Desktop.
Save victusfate/7f29d2ca7176b476d82c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.js
<html>
<head>
<title></title>
<style type="text/css">
body,html{
background-color: hsl(0,0%,10%);
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
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)
requestAnimationFrame(function tick(){
//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++){
things[i].rotate((Math.random()*2-1) * (Math.PI/8))
//things[i].rotate(0)
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,
phil:"hsl("+((Math.random()*10)+0).toString()+",100%,63%)",
////////////////////
rotate:function(r){
speed=10
var a360 = Math.PI*2
var a180 = Math.PI
this.r += r
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 newAngle = Math.atan2(this.y-cy,this.x-cx)+a180
var newAngleContinuous = (newAngle <= 0) ? newAngle + Math.PI*2 : newAngle;
var MinimumAngle = Math.min(Math.abs(newAngleContinuous-this.r),Math.abs(newAngleContinuous-this.r+a360))
//this.r=lerp( this.r, MinimumAngle, dist/(Math.sqrt(Math.pow(cx,2)+Math.pow(cy,2))))
this.r += MinimumAngle*.1
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.phil = "hsl("+ ((newAngle/(Math.PI*2))*60+20).toString() +",100%,63%)"
//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.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