Skip to content

Instantly share code, notes, and snippets.

@angus-c

angus-c/index.html

Created October 26, 2014 03:15
Show Gist options
  • Save angus-c/f5779a9e30a585ab0836 to your computer and use it in GitHub Desktop.
Save angus-c/f5779a9e30a585ab0836 to your computer and use it in GitHub Desktop.
Download ZIP
bouncer // source http://jsbin.com/vodep
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<title>bouncer</title>
</head>
<body>
<svg id="box" style="border: 1px solid; width: 200px; height: 200px" height="100%"></svg>
<script id="jsbin-javascript">
var svgNS = "http://www.w3.org/2000/svg";
var size = 200;
var ballCount = 5;
var ballSize = 10;
var delay = 10;
var interval;
// var colors = ['black', 'blue', 'fuschia', 'green', 'coral', 'gray', 'navy', 'purple', 'olive', 'red'];
var map;
var collisionCount = 0;
// window.onload = function() {
// document.getElementById('delay').addEventListener(
// 'change',
// function(e) {
// clearInterval(interval);
// interval = setInterval(renderBalls, e.target.value);
// }
// );
// }
var Ball = function (xSpeed, ySpeed, magic, id, color) {
this.x = size*Math.random();
this.y = size*Math.random();
this.xSpeed = xSpeed;
this.ySpeed = ySpeed;
this.magic = magic;
this.id = id;
this.color = color;
this.movesSinceCollision = 0;
};
function circle(id, x, y, radius, color) {
var c = document.createElementNS(svgNS, "circle");
c.setAttribute('id', id);
//c.setAttributeNS(null, "id", "circle1");
c.setAttributeNS(null, "cx", x);
c.setAttributeNS(null, "cy", y);
c.setAttributeNS(null, "r", radius);
c.setAttributeNS(null, "fill", color || "blue");
//myCircle.setAttributeNS(null, "stroke", "none");
document.getElementById("box").appendChild(c);
}
Ball.prototype.draw = function () {
circle(this.id, this.x, this.y, ballSize, this.color);
};
var balls = [];
for (var i = 1; i <= ballCount; i++) {
console.log(i);
balls[i] = new Ball(
1 - 2*Math.random(),
1 - 2*Math.random(),
i == 0,
i,
'#' + ('00' + Math.floor(i*255/(ballCount-1)).toString(16)).slice(-2) + '00' + ('00'+i).slice(-2) //set blue to id
);
balls[i].draw();
}
interval = setInterval(moveAll, delay);
function moveAll() {
for (var i = 1; i <= ballCount; i++) {
balls[i].checkCollision();
balls[i].move();
}
}
Ball.prototype.move = function () {
this.x += this.xSpeed;
this.y += this.ySpeed;
this.movesSinceCollision++;
$('#' + this.id)[0].setAttributeNS(null, "cx", this.x);
$('#' + this.id)[0].setAttributeNS(null, "cy", this.y);
};
Ball.prototype.checkCollision = function () {
var xE = this.x + ballSize + 4;
var xxE = this.x + Math.pow((ballSize*ballSize/2), 0.5);
var xW = this.x - ballSize - 4;
var xxW = this.x - Math.pow((ballSize*ballSize/2), 0.5);
var yN = this.y - ballSize - 4;
var yyN = this.y - Math.pow((ballSize*ballSize/2), 0.5);
var yS = this.y + ballSize + 4;
var yyS = this.y + Math.pow((ballSize*ballSize/2), 0.5);
var collidingBallIndex;
var probe = {
e: {
x: xE,
y: this.y
},
w: {
x: xW,
y: this.y
},
n: {
x: this.x,
y: yN
},
s: {
x: this.x,
y: this.yS
},
ne: {
x: xxE + 2,
y: yyN - 2
},
se: {
x: xxE + 2,
y: yyS + 2
},
nw: {
x: xxW - 2,
y: yyN - 2
},
sw: {
x: xxW - 2,
y: yyS + 2
}
};
console.log(idAt(probe.e.x, probe.e.y));
if (idAt(probe.e.x, probe.e.y) != 'box') {
debugger;
this.xSpeed = -Math.abs(this.xSpeed);
//this.afterCollision(probe.e);
} else if (idAt(probe.w.x, probe.w.y) != 'box') {
this.xSpeed = Math.abs(this.xSpeed);
//this.afterCollision(probe.w);
} else if (idAt(probe.n.x, probe.n.y) != 'box') {
this.ySpeed = Math.abs(this.ySpeed);
//this.afterCollision(probe.n);
} else if (idAt(probe.s.x, probe.s.y) != 'box') {
this.ySpeed = -Math.abs(this.ySpeed);
//this.afterCollision(probe.s);
} /* else if (getOpacityAt(probe.ne.x, probe.ne.y)) {
this.xSpeed = -Math.abs(this.xSpeed);
this.ySpeed = Math.abs(this.ySpeed);
this.afterCollision(probe.ne);
} else if (getOpacityAt(probe.se.x, probe.se.y)) {
this.xSpeed = -Math.abs(this.xSpeed);
this.ySpeed = -Math.abs(this.ySpeed);
this.afterCollision(probe.se);
} else if (getOpacityAt(probe.nw.x, probe.nw.y)) {
this.xSpeed = Math.abs(this.xSpeed);
this.ySpeed = Math.abs(this.ySpeed);
this.afterCollision(probe.nw);
} else if (getOpacityAt(probe.sw.x, probe.sw.y)) {
this.xSpeed = Math.abs(this.xSpeed);
this.ySpeed = -Math.abs(this.ySpeed);
this.afterCollision(probe.sw);
} */
// ctx.fillStyle="red";
// ctx.fillRect(xE, this.y, 1, 1);
// ctx.fillRect(xW, this.y, 1, 1);
// ctx.fillRect(this.x, yN, 1, 1);
// ctx.fillRect(this.x, yS, 1, 1);
// ctx.fillRect(xxE+1, yyN-1, 1, 1);
// ctx.fillRect(xxE+1, yyS+1, 1, 1);
// ctx.fillRect(xxW-1, yyN-1, 1, 1);
// ctx.fillRect(xxW-1, yyS+1, 1, 1);
};
function idAt(x, y) {
return document.elementFromPoint(x, y) && document.elementFromPoint(x, y).getAttribute('id');
}
function getOpacityAt(x, y) {
//return map[(Math.round(x) + Math.round(y)*300)*4 - 1];
}
function getBlueAt(x, y) {
//return map[(Math.round(x) + Math.round(y)*300)*4 - 2];
}
Ball.prototype.afterCollision = function(probe) {
// blue value is the id
collidingBallIndex = getBlueAt(probe.x, probe.y);
if (balls[collidingBallIndex]) {
balls[collidingBallIndex].color = "#ff" + balls[collidingBallIndex].color.slice(-4);
}
if (!this.movesSinceCollision) {
console.log('pos:', this.x, this.y);
console.log(
Object.keys(probe).filter(
function(k) {return Number(probe[k])}
)
);
}
if (this.magic) {
// console.log(Object.keys(probe).filter(
// function(k) {return Number(probe[k])}
// ));
// console.log('sX', this.xSpeed, 'sY', this.ySpeed);
}
this.movesSinceCollision = 0;
};
// var canvas = document.getElementById("canvas");
// var ctx = canvas.getContext("2d");
// var size = canvas.width;
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<script src="//code.jquery.com/jquery-git2.js"><\/script>
<title>bouncer</title>
</head>
<body>
<svg id="box" style="border: 1px solid; width: 200px; height: 200px" height="100%"></svg>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var svgNS = "http://www.w3.org/2000/svg";
var size = 200;
var ballCount = 5;
var ballSize = 10;
var delay = 10;
var interval;
// var colors = ['black', 'blue', 'fuschia', 'green', 'coral', 'gray', 'navy', 'purple', 'olive', 'red'];
var map;
var collisionCount = 0;
// window.onload = function() {
// document.getElementById('delay').addEventListener(
// 'change',
// function(e) {
// clearInterval(interval);
// interval = setInterval(renderBalls, e.target.value);
// }
// );
// }
var Ball = function (xSpeed, ySpeed, magic, id, color) {
this.x = size*Math.random();
this.y = size*Math.random();
this.xSpeed = xSpeed;
this.ySpeed = ySpeed;
this.magic = magic;
this.id = id;
this.color = color;
this.movesSinceCollision = 0;
};
function circle(id, x, y, radius, color) {
var c = document.createElementNS(svgNS, "circle");
c.setAttribute('id', id);
//c.setAttributeNS(null, "id", "circle1");
c.setAttributeNS(null, "cx", x);
c.setAttributeNS(null, "cy", y);
c.setAttributeNS(null, "r", radius);
c.setAttributeNS(null, "fill", color || "blue");
//myCircle.setAttributeNS(null, "stroke", "none");
document.getElementById("box").appendChild(c);
}
Ball.prototype.draw = function () {
circle(this.id, this.x, this.y, ballSize, this.color);
};
var balls = [];
for (var i = 1; i <= ballCount; i++) {
console.log(i);
balls[i] = new Ball(
1 - 2*Math.random(),
1 - 2*Math.random(),
i == 0,
i,
'#' + ('00' + Math.floor(i*255/(ballCount-1)).toString(16)).slice(-2) + '00' + ('00'+i).slice(-2) //set blue to id
);
balls[i].draw();
}
interval = setInterval(moveAll, delay);
function moveAll() {
for (var i = 1; i <= ballCount; i++) {
balls[i].checkCollision();
balls[i].move();
}
}
Ball.prototype.move = function () {
this.x += this.xSpeed;
this.y += this.ySpeed;
this.movesSinceCollision++;
$('#' + this.id)[0].setAttributeNS(null, "cx", this.x);
$('#' + this.id)[0].setAttributeNS(null, "cy", this.y);
};
Ball.prototype.checkCollision = function () {
var xE = this.x + ballSize + 4;
var xxE = this.x + Math.pow((ballSize*ballSize/2), 0.5);
var xW = this.x - ballSize - 4;
var xxW = this.x - Math.pow((ballSize*ballSize/2), 0.5);
var yN = this.y - ballSize - 4;
var yyN = this.y - Math.pow((ballSize*ballSize/2), 0.5);
var yS = this.y + ballSize + 4;
var yyS = this.y + Math.pow((ballSize*ballSize/2), 0.5);
var collidingBallIndex;
var probe = {
e: {
x: xE,
y: this.y
},
w: {
x: xW,
y: this.y
},
n: {
x: this.x,
y: yN
},
s: {
x: this.x,
y: this.yS
},
ne: {
x: xxE + 2,
y: yyN - 2
},
se: {
x: xxE + 2,
y: yyS + 2
},
nw: {
x: xxW - 2,
y: yyN - 2
},
sw: {
x: xxW - 2,
y: yyS + 2
}
};
console.log(idAt(probe.e.x, probe.e.y));
if (idAt(probe.e.x, probe.e.y) != 'box') {
debugger;
this.xSpeed = -Math.abs(this.xSpeed);
//this.afterCollision(probe.e);
} else if (idAt(probe.w.x, probe.w.y) != 'box') {
this.xSpeed = Math.abs(this.xSpeed);
//this.afterCollision(probe.w);
} else if (idAt(probe.n.x, probe.n.y) != 'box') {
this.ySpeed = Math.abs(this.ySpeed);
//this.afterCollision(probe.n);
} else if (idAt(probe.s.x, probe.s.y) != 'box') {
this.ySpeed = -Math.abs(this.ySpeed);
//this.afterCollision(probe.s);
} /* else if (getOpacityAt(probe.ne.x, probe.ne.y)) {
this.xSpeed = -Math.abs(this.xSpeed);
this.ySpeed = Math.abs(this.ySpeed);
this.afterCollision(probe.ne);
} else if (getOpacityAt(probe.se.x, probe.se.y)) {
this.xSpeed = -Math.abs(this.xSpeed);
this.ySpeed = -Math.abs(this.ySpeed);
this.afterCollision(probe.se);
} else if (getOpacityAt(probe.nw.x, probe.nw.y)) {
this.xSpeed = Math.abs(this.xSpeed);
this.ySpeed = Math.abs(this.ySpeed);
this.afterCollision(probe.nw);
} else if (getOpacityAt(probe.sw.x, probe.sw.y)) {
this.xSpeed = Math.abs(this.xSpeed);
this.ySpeed = -Math.abs(this.ySpeed);
this.afterCollision(probe.sw);
} */
// ctx.fillStyle="red";
// ctx.fillRect(xE, this.y, 1, 1);
// ctx.fillRect(xW, this.y, 1, 1);
// ctx.fillRect(this.x, yN, 1, 1);
// ctx.fillRect(this.x, yS, 1, 1);
// ctx.fillRect(xxE+1, yyN-1, 1, 1);
// ctx.fillRect(xxE+1, yyS+1, 1, 1);
// ctx.fillRect(xxW-1, yyN-1, 1, 1);
// ctx.fillRect(xxW-1, yyS+1, 1, 1);
};
function idAt(x, y) {
return document.elementFromPoint(x, y) && document.elementFromPoint(x, y).getAttribute('id');
}
function getOpacityAt(x, y) {
//return map[(Math.round(x) + Math.round(y)*300)*4 - 1];
}
function getBlueAt(x, y) {
//return map[(Math.round(x) + Math.round(y)*300)*4 - 2];
}
Ball.prototype.afterCollision = function(probe) {
// blue value is the id
collidingBallIndex = getBlueAt(probe.x, probe.y);
if (balls[collidingBallIndex]) {
balls[collidingBallIndex].color = "#ff" + balls[collidingBallIndex].color.slice(-4);
}
if (!this.movesSinceCollision) {
console.log('pos:', this.x, this.y);
console.log(
Object.keys(probe).filter(
function(k) {return Number(probe[k])}
)
);
}
if (this.magic) {
// console.log(Object.keys(probe).filter(
// function(k) {return Number(probe[k])}
// ));
// console.log('sX', this.xSpeed, 'sY', this.ySpeed);
}
this.movesSinceCollision = 0;
};
// var canvas = document.getElementById("canvas");
// var ctx = canvas.getContext("2d");
// var size = canvas.width;
</script></body>
</html>
Raw
jsbin.vodep.js
var svgNS = "http://www.w3.org/2000/svg";
var size = 200;
var ballCount = 5;
var ballSize = 10;
var delay = 10;
var interval;
// var colors = ['black', 'blue', 'fuschia', 'green', 'coral', 'gray', 'navy', 'purple', 'olive', 'red'];
var map;
var collisionCount = 0;
// window.onload = function() {
// document.getElementById('delay').addEventListener(
// 'change',
// function(e) {
// clearInterval(interval);
// interval = setInterval(renderBalls, e.target.value);
// }
// );
// }
var Ball = function (xSpeed, ySpeed, magic, id, color) {
this.x = size*Math.random();
this.y = size*Math.random();
this.xSpeed = xSpeed;
this.ySpeed = ySpeed;
this.magic = magic;
this.id = id;
this.color = color;
this.movesSinceCollision = 0;
};
function circle(id, x, y, radius, color) {
var c = document.createElementNS(svgNS, "circle");
c.setAttribute('id', id);
//c.setAttributeNS(null, "id", "circle1");
c.setAttributeNS(null, "cx", x);
c.setAttributeNS(null, "cy", y);
c.setAttributeNS(null, "r", radius);
c.setAttributeNS(null, "fill", color || "blue");
//myCircle.setAttributeNS(null, "stroke", "none");
document.getElementById("box").appendChild(c);
}
Ball.prototype.draw = function () {
circle(this.id, this.x, this.y, ballSize, this.color);
};
var balls = [];
for (var i = 1; i <= ballCount; i++) {
console.log(i);
balls[i] = new Ball(
1 - 2*Math.random(),
1 - 2*Math.random(),
i == 0,
i,
'#' + ('00' + Math.floor(i*255/(ballCount-1)).toString(16)).slice(-2) + '00' + ('00'+i).slice(-2) //set blue to id
);
balls[i].draw();
}
interval = setInterval(moveAll, delay);
function moveAll() {
for (var i = 1; i <= ballCount; i++) {
balls[i].checkCollision();
balls[i].move();
}
}
Ball.prototype.move = function () {
this.x += this.xSpeed;
this.y += this.ySpeed;
this.movesSinceCollision++;
$('#' + this.id)[0].setAttributeNS(null, "cx", this.x);
$('#' + this.id)[0].setAttributeNS(null, "cy", this.y);
};
Ball.prototype.checkCollision = function () {
var xE = this.x + ballSize + 4;
var xxE = this.x + Math.pow((ballSize*ballSize/2), 0.5);
var xW = this.x - ballSize - 4;
var xxW = this.x - Math.pow((ballSize*ballSize/2), 0.5);
var yN = this.y - ballSize - 4;
var yyN = this.y - Math.pow((ballSize*ballSize/2), 0.5);
var yS = this.y + ballSize + 4;
var yyS = this.y + Math.pow((ballSize*ballSize/2), 0.5);
var collidingBallIndex;
var probe = {
e: {
x: xE,
y: this.y
},
w: {
x: xW,
y: this.y
},
n: {
x: this.x,
y: yN
},
s: {
x: this.x,
y: this.yS
},
ne: {
x: xxE + 2,
y: yyN - 2
},
se: {
x: xxE + 2,
y: yyS + 2
},
nw: {
x: xxW - 2,
y: yyN - 2
},
sw: {
x: xxW - 2,
y: yyS + 2
}
};
console.log(idAt(probe.e.x, probe.e.y));
if (idAt(probe.e.x, probe.e.y) != 'box') {
debugger;
this.xSpeed = -Math.abs(this.xSpeed);
//this.afterCollision(probe.e);
} else if (idAt(probe.w.x, probe.w.y) != 'box') {
this.xSpeed = Math.abs(this.xSpeed);
//this.afterCollision(probe.w);
} else if (idAt(probe.n.x, probe.n.y) != 'box') {
this.ySpeed = Math.abs(this.ySpeed);
//this.afterCollision(probe.n);
} else if (idAt(probe.s.x, probe.s.y) != 'box') {
this.ySpeed = -Math.abs(this.ySpeed);
//this.afterCollision(probe.s);
} /* else if (getOpacityAt(probe.ne.x, probe.ne.y)) {
this.xSpeed = -Math.abs(this.xSpeed);
this.ySpeed = Math.abs(this.ySpeed);
this.afterCollision(probe.ne);
} else if (getOpacityAt(probe.se.x, probe.se.y)) {
this.xSpeed = -Math.abs(this.xSpeed);
this.ySpeed = -Math.abs(this.ySpeed);
this.afterCollision(probe.se);
} else if (getOpacityAt(probe.nw.x, probe.nw.y)) {
this.xSpeed = Math.abs(this.xSpeed);
this.ySpeed = Math.abs(this.ySpeed);
this.afterCollision(probe.nw);
} else if (getOpacityAt(probe.sw.x, probe.sw.y)) {
this.xSpeed = Math.abs(this.xSpeed);
this.ySpeed = -Math.abs(this.ySpeed);
this.afterCollision(probe.sw);
} */
// ctx.fillStyle="red";
// ctx.fillRect(xE, this.y, 1, 1);
// ctx.fillRect(xW, this.y, 1, 1);
// ctx.fillRect(this.x, yN, 1, 1);
// ctx.fillRect(this.x, yS, 1, 1);
// ctx.fillRect(xxE+1, yyN-1, 1, 1);
// ctx.fillRect(xxE+1, yyS+1, 1, 1);
// ctx.fillRect(xxW-1, yyN-1, 1, 1);
// ctx.fillRect(xxW-1, yyS+1, 1, 1);
};
function idAt(x, y) {
return document.elementFromPoint(x, y) && document.elementFromPoint(x, y).getAttribute('id');
}
function getOpacityAt(x, y) {
//return map[(Math.round(x) + Math.round(y)*300)*4 - 1];
}
function getBlueAt(x, y) {
//return map[(Math.round(x) + Math.round(y)*300)*4 - 2];
}
Ball.prototype.afterCollision = function(probe) {
// blue value is the id
collidingBallIndex = getBlueAt(probe.x, probe.y);
if (balls[collidingBallIndex]) {
balls[collidingBallIndex].color = "#ff" + balls[collidingBallIndex].color.slice(-4);
}
if (!this.movesSinceCollision) {
console.log('pos:', this.x, this.y);
console.log(
Object.keys(probe).filter(
function(k) {return Number(probe[k])}
)
);
}
if (this.magic) {
// console.log(Object.keys(probe).filter(
// function(k) {return Number(probe[k])}
// ));
// console.log('sX', this.xSpeed, 'sY', this.ySpeed);
}
this.movesSinceCollision = 0;
};
// var canvas = document.getElementById("canvas");
// var ctx = canvas.getContext("2d");
// var size = canvas.width;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment