function drewps()
{
this.locate = function(c,t)
{
if(c.tagName == "CANVAS")
{
this.mainframe = c;
this.ctx = this.mainframe.getContext("2d");
this.pts = [];
t = this;
c.onmouseenter = function(e){t.initX = e.offsetX;t.initY = e.offsetY;t.origins=[];for(var i=0; i<t.pts.length; i++){t.origins.push({"x":t.pts[i].x,"y":t.pts[i].y,"c":t.rn(1,50)});}}
c.onmousemove = function(e){if(t.floater && !t.moving)
{
var disY = t.initY - e.offsetY;
var disX = t.initX - e.offsetX;
for(var i=0; i<t.pts.length; i++)
{
t.pts[i].x = t.origins[i].x + disX/t.origins[i].c;
t.pts[i].y = t.origins[i].y + disY/t.origins[i].c;
}
t.set();
}
else{t.mx = e.offsetX;t.my = e.offsetY;}}
c.onmouseout = function(e){delete t.mx;delete t.my;}
}
},
this.getgradient = function(x,y,s,o)
{
var gradient = this.ctx.createRadialGradient(x,y,0,x,y,s);
gradient.addColorStop(0,"white");
gradient.addColorStop(0.4,"white");
gradient.addColorStop(0.4,o);
gradient.addColorStop(1,"black");
return gradient;
},
this.point = function(s,x,y,o,c)
{
c.ctx.beginPath();
c.ctx.arc(x,y,s,0,2*Math.PI);
c.ctx.fillStyle = (c.dblur) ? c.getgradient(x,y,s,o) : o;
c.ctx.fill();
this.size = s;
this.color = o;
this.x = x;
this.y = y;
this.lr = c.r();
this.tb = c.r();
return this;
},
this.move = function(b,l,c,f,o)
{
o = this;
this.autoline = l;
this.linecolor = c;
this.moving = true;
this.rng = (b == "random");
this.callback = f;
for(var i=0; i<o.pts.length; i++){o.pts[i].speed = (b == "random") ? o.rn(0,3) : b;}
o.movemem = setInterval(function rd()
{
for(var i=0; i<o.pts.length; i++)
{
var co = o.pts[i].size/2;
if((o.pts[i].x < co) && !o.pts[i].lr){o.pts[i].lr = o.inv(o.pts[i].lr);}
if((o.pts[i].x > o.mainframe.width-co) && o.pts[i].lr){o.pts[i].lr = o.inv(o.pts[i].lr);}
if((o.pts[i].y > o.mainframe.height-co) && o.pts[i].tb){o.pts[i].tb = o.inv(o.pts[i].tb);}
if(o.pts[i].y < co && !o.pts[i].tb){o.pts[i].tb = o.inv(o.pts[i].tb);}
o.pts[i].x += ((o.pts[i].lr) ? o.pts[i].speed : -o.pts[i].speed);
o.pts[i].y += ((o.pts[i].tb) ? o.pts[i].speed : -o.pts[i].speed);
}
if(f && typeof f == "function"){f(o.pts);};
o.set();
o.liner();
},1);
},
this.add = function(c,s,o)
{
this.ctx.fillStyle = (this.backgroundcolor === undefined) ? "black" : this.backgroundcolor;
this.ctx.fillRect(0,0,this.mainframe.width,this.mainframe.height);
for(var i=0; i<c; i++)
{
this.pts.push(new this.point(s,Math.random()*this.mainframe.width,Math.random()*this.mainframe.height,o,this));
}
this.set();
if(this.moving)
{
clearInterval(this.movemem);
var lastpoint = this.pts[this.pts.length-1-c];
this.move(((this.rng) ? "random" : lastpoint.speed),this.autoline,this.linecolor,this.callback);
}
return this.pts;
},
this.set = function()
{
this.ctx.globalCompositeOperation = "source-over";
if(this.dblur)
this.ctx.fillStyle = this.h2rgba(((this.backgroundcolor === undefined) ? "#000000" : this.backgroundcolor),0.3);
else
this.ctx.fillStyle = ((this.backgroundcolor === undefined) ? "black" : this.backgroundcolor);
this.ctx.fillRect(0,0,this.mainframe.width,this.mainframe.height);
if(this.dblur){this.ctx.globalCompositeOperation = "lighter";}
for(var i=0; i<this.pts.length; i++)
{
this.point(this.pts[i].size, this.pts[i].x, this.pts[i].y, this.pts[i].color, this);
}
},
this.liner = function()
{
if((typeof this.mx === "undefined" && this.autoline == "m-line") || this.autoline == "no-line"){return;}
for(var i=0; i<this.pts.length; i++)
{
if(this.autoline == "m-line")
{
var dst = this.ld({"x":this.pts[i].x,"y":this.pts[i].y},{"x":this.mx,"y":this.my});
var coe = this.sense/dst*0.4;
if(coe >= 0.5){coe=0.5;}
if(coe < 0.1*0.1){continue;}
this.ctx.beginPath();
this.ctx.strokeStyle = this.linecolor;
this.ctx.lineWidth = coe;
this.ctx.moveTo(this.mx,this.my);
this.ctx.lineTo(this.pts[i].x,this.pts[i].y);
this.ctx.stroke();
}
else if(this.autoline == "a-line")
{
for(var q=0; q<this.pts.length; q++)
{
var dst = this.ld({"x":this.pts[i].x,"y":this.pts[i].y},{"x":this.pts[q].x,"y":this.pts[q].y});
var coe = this.sense/dst*0.4;
if(coe >= 0.5){coe=0.5;}
if(coe < 0.1*0.1){continue;}
this.ctx.beginPath();
this.ctx.strokeStyle = this.linecolor;
this.ctx.lineWidth = coe;
this.ctx.moveTo(this.pts[i].x,this.pts[i].y);
this.ctx.lineTo(this.pts[q].x,this.pts[q].y);
this.ctx.stroke();
}
}
}},
this.sniff = function()
{
var elements = document.querySelectorAll("*");
var frames = [];
var useless = 0;
var dummy = document.createElement("canvas");
for(var i=0; i<elements.length; i++)
{
if(elements[i].tagName == "CANVAS")
{
dummy.width = elements[i].width;
dummy.height = elements[i].height;
if(dummy.toDataURL() == elements[i].toDataURL())
{
frames.push(elements[i]);
}
else useless++;
}
}
console.log("I sniffed "+frames.length+" useable frame(s)!");
console.warn(useless + " frame(s) were probably already in use.");
return frames;
},
// Support logic functions.
this.r = function(){return Math.random() >= 0.5;},
this.inv = function(b){return !b;},
this.rn = function(mi, ma){var min=mi,max=ma;return Math.random()*(max - min)+min;},
this.ld = function(point1,point2){var xs=0;varys=0;xs=point2.x-point1.x;xs=xs*xs;ys=point2.y-point1.y;ys=ys*ys;return Math.sqrt(xs+ys);},
this.h2rgba = function(hex, alpha){var r=parseInt(hex.slice(1,3),16),g=parseInt(hex.slice(3,5),16),b=parseInt(hex.slice(5,7),16);return "rgba("+r+", "+g+", "+b+", "+alpha+")";}
this.sense = 20,
this.moving = false,
this.floater = false,
this.dblur = false,
this.rng = false,
this.callback = null
}
Comments