Skip to content

Instantly share code, notes, and snippets.

@RH2

RH2/gist:ecf0536fd726f8a5481c

Created December 7, 2014 08:55
Show Gist options
  • Save RH2/ecf0536fd726f8a5481c to your computer and use it in GitHub Desktop.
Save RH2/ecf0536fd726f8a5481c to your computer and use it in GitHub Desktop.
Download ZIP
vertical bouncing lines in boundary : FICTIONAL UI GLYPH
Raw
gistfile1.txt
<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>
<h1>hello</h1>
<script type="text/javascript">
var c = document.createElement("canvas")
var ctx = c.getContext("2d")
document.body.appendChild(c)
c.width = window.innerWidth
c.height = window.innerHeight
ctx.fillStyle = "hsl(0,0%,10%)"
ctx.fillRect(0,0,c.width,c.height)
//////////////////////////////////
//////////////////////////////////
var bounds = []
bounds.push(createReflector(649,169,595,123))
bounds.push(createReflector(595,123,111,125))
bounds.push(createReflector(111,125,65,179))
bounds.push(createReflector(65,179,68,662))
bounds.push(createReflector(68,662,122,708))
bounds.push(createReflector(122,708,605,706))
bounds.push(createReflector(605,706,651,652))
bounds.push(createReflector(651,652,649,169))
/*
bounds.push(createReflector(158,316,296,316))
bounds.push(createReflector(296,316,296,362))
bounds.push(createReflector(296,362,264,395))
bounds.push(createReflector(264,395,296,495))
bounds.push(createReflector(296,495,272,495))
bounds.push(createReflector(272,495,223,435))
bounds.push(createReflector(223,435,158,495))
bounds.push(createReflector(158,495,158,452))
bounds.push(createReflector(158,452,248,362))
bounds.push(createReflector(248,362,158,362))
bounds.push(createReflector(158,362,158,316))
bounds.push(createReflector(304,496,304,316))
bounds.push(createReflector(304,316,349,316))
bounds.push(createReflector(349,316,349,384))
bounds.push(createReflector(349,384,394,384))
bounds.push(createReflector(394,384,394,316))
bounds.push(createReflector(394,316,439,316))
bounds.push(createReflector(439,316,439,496))
bounds.push(createReflector(439,496,394,496))
bounds.push(createReflector(394,496,394,406))
bounds.push(createReflector(394,406,349,406))
bounds.push(createReflector(349,406,349,496))
bounds.push(createReflector(349,496,304,496))
bounds.push(createReflector(574,496,449,496))
bounds.push(createReflector(449,496,449,470))
bounds.push(createReflector(449,470,494,424))
bounds.push(createReflector(494,424,520,396))
bounds.push(createReflector(520,396,528,382))
bounds.push(createReflector(528,382,531,368))
bounds.push(createReflector(531,368,525,352))
bounds.push(createReflector(525,352,509,347))
bounds.push(createReflector(509,347,489,351))
bounds.push(createReflector(489,351,469,365))
bounds.push(createReflector(469,365,449,341))
bounds.push(createReflector(449,341,470,325))
bounds.push(createReflector(470,325,489,318))
bounds.push(createReflector(489,318,512,315))
bounds.push(createReflector(512,315,542,321))
bounds.push(createReflector(542,321,561,338))
bounds.push(createReflector(561,338,569,363))
bounds.push(createReflector(569,363,564,387))
bounds.push(createReflector(564,387,551,409))
bounds.push(createReflector(551,409,519,441))
bounds.push(createReflector(519,441,496,462))
bounds.push(createReflector(496,462,496,464))
bounds.push(createReflector(496,464,574,464))
bounds.push(createReflector(574,464,574,496))
*/
//bounds.push(createReflector(400,400,400,400))
var raycount = 20
var rays = []
for (var i=0;i<raycount;i++){
rays.push(createRay(
369/*c.width/2*/,
246/*c.height/2*/,
/* ((2*(i/raycount-.5))*Math.PI/30)*/ /*+Math.PI/4*/
Math.random()*Math.PI*2
)
)
rays[i].setColor( (i/raycount)*20 ,100)
}
var raygroupB = 20
for (var i=0;i<raygroupB;i++){
rays.push(createRay(
369/*c.width/2*/,
600/*c.height/2*/,
/* ((2*(i/raycount-.5))*Math.PI/30)*/ /*+Math.PI/4*/
Math.random()*Math.PI*2
)
)
rays[i+raycount].setColor( (i/raycount)*10 +40 ,10)
}
raycount+=raygroupB
requestAnimationFrame(function tick(){
ctx.fillStyle = "hsla(0,100%,01%,.03)"
//ctx.fillStyle = "hsl(0,0%,0%,)"
ctx.fillRect(0,0,c.width,c.height)
//ctx.save()
ctx.moveTo(0,0);
//next frame:
for(var i=0;i<bounds.length;i++){
bounds[i].render(ctx)
}
for(var i=0;i<raycount;i++){
//console.log("the bounds are accessable: "+bounds[i].ax)
rays[i].rotate(0,bounds)
rays[i].render(ctx)
}
//ctx.restore()
//////////////////////////////
/*
for (var bound in bounds){
bound.render(ctx)
//console.log(bound.getX())
}
*/
//setTimeout(tick, 10)
requestAnimationFrame(tick)
})
function createRay(x,y,r){
return{
x:x||0,
y:y||0,
vx:0,
vy:0,
r:r||0,
hue:120,
sat:100,
rotate:function(r,walls){
a360 = Math.PI*2
a180 = Math.PI
this.r = this.r % (Math.PI*2)
var speed=10
this.vx=speed*Math.cos(this.r)
this.vy=speed*Math.sin(this.r)
var collided=false
for(var i = 0;i<walls.length;i++){
//walls[i].toConsole()
var collision = segseg(this.x, this.y, (this.x + this.vx), (this.y + this.vy), walls[i].ax, walls[i].ay, walls[i].sx, walls[i].sy)
//console.log(collision)
if (Array.isArray(collision)){
//LOGIC TO FIND REFLECTION ANGLE///////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
collided = true
var boundAngle = Math.atan2(walls[i].ax-walls[i].sx,walls[i].ay-walls[i].sy)
var boundNormal = (boundAngle - Math.PI/2)
var deltaAngle = boundAngle - this.r
var normalDelta = boundAngle - this.r
this.r = this.r + (1*normalDelta)
//this.r= normalDelta
this.x = collision[0] + (this.vx*-1.1)
this.y = collision[1] + (this.vy*-1.1)
}
}
if(collided==true){
this.vx=0*Math.cos(this.r)
this.vy=0*Math.sin(this.r)
}
},
setColor:function(h,s){
this.hue=h
this.sat=s
},
render:function(ctx){
ctx.save()
ctx.beginPath();
ctx.lineWidth=1
this.x += this.vx
this.y += this.vy
if(Math.random()>0.9){
ctx.font = "8px Arial"
ctx.fillStyle="hsla("+(((this.hue-30)%360)).toString()+","+this.sat.toString()+"%,70%,0.5)"
var text = " "+(Math.floor((((this.r%(Math.PI*2))/(Math.PI*2))*360) * 10) / 10).toString()
ctx.fillText(text,this.x,this.y)
}
ctx.fillStyle="hsla("+((((Math.random()-0.5)*20)+this.hue)%360).toString()+","+this.sat.toString()+"%,70%,0.5)"
ctx.translate(this.x,this.y)
ctx.rotate(this.r)
ctx.beginPath();
ctx.moveTo(-10,0)
ctx.lineTo(0,0)
ctx.strokeStyle = ctx.fillStyle
ctx.stroke()
ctx.restore()
}
}
}
function createReflector(ax,ay,sx,sy){
return{
ax:ax||0,
ay:ay||0,
sx:sx||0,
sy:sy||0,
hue:60,
sat:100,
onCollide:0,
getX:function(){
return this.ax;
},
setColor:function(h,s){
this.hue=h
this.sat=s
},
toConsole:function(){
console.log(this.ax + " / "+this.ay + "///"+this.sx+" / "+this.sy)
},
render:function(ctx){
ctx.save()
ctx.beginPath();
ctx.fillStyle="hsl("+(this.hue).toString()+","+this.sat.toString()+"%,68%)"
ctx.lineWidth=2
ctx.moveTo(this.ax,this.ay)
ctx.lineTo(this.sx,this.sy)
ctx.strokeStyle = ctx.fillStyle
ctx.stroke()
ctx.restore()
}
}
}
function segseg(x1, y1, x2, y2, x3, y3, x4, y4) {
if (arguments.length === 4) {
var p1 = x1;
var p2 = y1;
var p3 = x2;
var p4 = y2;
// assume array [x, y]
if (p1.length && p1.length === 2) {
x1 = p1[0];
y1 = p1[1];
x2 = p2[0];
y2 = p2[1];
x3 = p3[0];
y3 = p3[1];
x4 = p4[0];
y4 = p4[1];
// assume object with obj.x and obj.y
} else {
x1 = p1.x;
y1 = p1.y;
x2 = p2.x;
y2 = p2.y;
x3 = p3.x;
y3 = p3.y;
x4 = p4.x;
y4 = p4.y;
}
}
var a1, a2, b1, b2, c1, c2; // Coefficients of line eqns.
var r1, r2, r3, r4; // 'Sign' values
var denom, offset; // Intermediate values
var x, y; // Intermediate return values
// Compute a1, b1, c1, where line joining points 1 and 2
// is "a1 x + b1 y + c1 = 0".
a1 = y2 - y1;
b1 = x1 - x2;
c1 = x2 * y1 - x1 * y2;
// Compute r3 and r4.
r3 = a1 * x3 + b1 * y3 + c1;
r4 = a1 * x4 + b1 * y4 + c1;
// Check signs of r3 and r4. If both point 3 and point 4 lie on
// same side of line 1, the line segments do not intersect.
if ( r3 !== 0 && r4 !== 0 && ((r3 >= 0 && r4 >= 0) || (r3 < 0 && r4 < 0))) {
return; // no intersection
}
// Compute a2, b2, c2
a2 = y4 - y3;
b2 = x3 - x4;
c2 = x4 * y3 - x3 * y4;
// Compute r1 and r2
r1 = a2 * x1 + b2 * y1 + c2;
r2 = a2 * x2 + b2 * y2 + c2;
// Check signs of r1 and r2. If both point 1 and point 2 lie
// on same side of second line segment, the line segments do
// not intersect.
if (r1 !== 0 && r2 !== 0 && ((r1 >= 0 && r2 >= 0) || (r1 < 0 && r2 < 0))) {
return; // no intersections
}
// Line segments intersect: compute intersection point.
denom = a1 * b2 - a2 * b1;
if ( denom === 0 ) {
return true;
}
offset = denom < 0 ? - denom / 2 : denom / 2;
x = b1 * c2 - b2 * c1;
y = a2 * c1 - a1 * c2;
return [
( x < 0 ? x : x ) / denom,
( y < 0 ? y : y ) / denom,
];
};
if (typeof module !== 'undefined' && module.exports) {
module.exports = segseg;
}
if (typeof window !== 'undefined') {
window.segseg = window.segseg || segseg;
}
function isArray(obj){
return toString.call(obj) === "[object Array]";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment