<div id="console"/>
<img id="myImg" src="http://pic.58pic.com/58pic/13/82/74/92q58PICeSI_1024.jpg"/>
<canvas id="myCanvas" width="367" height="367"></canvas>
<div id='instruction'>Pass through</div>
xxxxxxxxxx
body{
background-color:#111;
}
#myImg {
display:none;
}
#instruction{
position: absolute;
margin: auto;
width:100%;
top:50%;
margin-top:180px;
text-align: center;
color:#c49a6c;
font-family: Helvetica, Arial, Sand-serif;
font-size: 0.8em;
}
#myCanvas {
position: absolute;
margin: auto;
width: 367px;
height: 367px;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#console{
color:#fff;
}
xxxxxxxxxx
//*
var console = function() {
return({
log: function(msg) {
consoleDiv = document.getElementById('console');
para = document.createElement('p');
text = document.createTextNode(msg);
para.appendChild(text);
consoleDiv.appendChild(para);
}
});
}();
//*/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = document.getElementById('myImg');
var myData;
var particles = [];
var pCount = 0;
var skip = 2;
var nParticles = 0;
var distRepulsion = 3000;
var cycleDist = 0;
var isDemo = true;
var rectCanvas;
var mouseX;
var mouseY;
var dirMouse = 1;
Particle = function(x,y,absPosition){
this.initX = this.currentX = this.targetX = x;
this.initY = this.currentY = this.targetY = y;
this.vx = 0;
this.vy = 0;
this.inplace = true;
this.repulse = function(cx,cy){
var dx = (cx-this.currentX);
var dy = (cy-this.currentY);
var dist = Math.pow(dx,2) + Math.pow(dy,2);
if (dist < distRepulsion){
this.vx += -dx*.02;
this.vy += -dy*.02;
}else{
this.vx += (this.initX - this.currentX)*.1;
this.vy += (this.initY - this.currentY)*.1;
}
this.vx*=.85;
this.vy*=.85;
if (Math.abs(this.vx)<.1 && Math.abs(this.yv)<.1){
this.vx = this.vy = 0;
this.currentX = this.initX;
this.currentY = this.initY;
this.inplace = true;
}else{
this.currentX = Math.round(this.currentX+this.vx);
this.currentY = Math.round(this.currentY+this.vy);
this.inplace = false;
}
}
}
window.onload = function() {
document.onmousemove = handleMouseMove;
context.drawImage(img, 0, 0 );
myData = context.getImageData(0, 0, img.width, img.height);
parseImage();
rectCanvas = canvas.getBoundingClientRect();
mouseX=0;
mouseY=0;
requestAnimationFrame(loop);
};
function handleMouseMove(event){
if (!isDemo){
mouseX = event.clientX - rectCanvas.left;
mouseY = event.clientY - rectCanvas.top;
}
}
function parseImage(){
var pix = myData.data;
var n = pix.length;
for (var i = 0 ; i < n; i += (4*skip)) {
if (pix[i+3] > 100){
var particle = new Particle(pCount%canvas.width, Math.floor(pCount/canvas.width),pCount);
particles.push(particle);
}
pCount+=skip;
}
nParticles = particles.length;
}
function loop() {
cycleDist += .1;
distRepulsion = 2500 + Math.sin(cycleDist)*1000;
var newData = context.createImageData(canvas.width, canvas.height);
var needRender = false;
if (isDemo){
mouseX += dirMouse*2;
mouseY += 2;
if (mouseX > canvas.width){
dirMouse = -1;
mouseX = canvas.width;
}
if (mouseY > canvas.height){
isDemo = false;
}
}
for (var i=0; i<nParticles; i++ ){
var p = particles[i];
p.repulse(mouseX,mouseY);
if (!p.inplace){
var pos = ((p.currentY*canvas.width)+p.currentX)*4;
newData.data[pos] += 196;
newData.data[pos+1] += 154;
newData.data[pos+2] += 108;
newData.data[pos+3] += 255;
needRender = true;
}
}
if (needRender) {
context.putImageData(newData,0,0);
}
requestAnimationFrame(loop);
};