Delayed Mouse Tracking (ProcessingJS)
HTML
<script type="application/processing">
/*
PROCESSINGJS.COM - BASIC EXAMPLE
Delayed Mouse Tracking
MIT License - Hyper-Metrix.com/F1LT3R
Native Processing compatible
*/
// Global variables
float radius = 30.0;
int X, Y;
int nX, nY;
int delay = 16;
// Setup the Processing Canvas
void setup(){
size( 400, 400 );
strokeWeight( 10 );
frameRate( 15 );
X = width / 2;
Y = width / 2;
nX = X;
nY = Y;
}
//Major WIP
//http://matthias-mueller-fischer.ch/publications/FTLHairFur.pdf
stroke(0,0,0);
strokeWeight(5);
var x;
var i;
var lined=function(x,y,slope,length){
var x2=(x+length)/slope;
var y2=(y+length)*slope;
line(x,y,x2,y2);
};
frameCount=0;
var fc=0;
var neg=function(x){return x>0?x*1:x*-1;};
var neg2=function(x){return x>0?1:-1;};
var draw2= function() {
this[["KAInfiniteLoopCount"]] = -100;
var fc=frameCount;
background(255);
line(0,40,width,80);
for(i=40;i<80;i+=0.5){
for(x=0;x<width;x+=5){
var mem=max(abs(cos(x/3+fc*4)*20),1);
var mem2=max(abs(sin(x/3+fc*4)*20),1);
strokeWeight(2);
if(red(get(x,i))<2){
var t=x|0;
var q=i|0;
if(abs(x-mouseX)<20){
x+=neg2(mouseX-x);
}
if(abs(i-mouseY)<20){
i+=neg2(mouseY-i);
}
beginShape();
curveVertex(t,i);
curveVertex(t,i);
curveVertex(x-neg(mem),i+(x*i)/800+80);
curveVertex(x+neg(mem2),i+(x*i)/800+100);
endShape();
i=q+0.5;
x=t;
}
}
}
};
draw= draw2;
// y/x
var draw3= function() {
fc=frameCount;
stroke(0);
line(0,40,width,80);
stroke(255, 0, 0);
lined(0,40,40/width,dist(0,40,width,80));
};
</script>
<canvas width="500px" height="500px"></canvas>
JavaScript
var scripts=document.getElementsByTagName("script");
for(var i=0;i<scripts.length;i++) {
if(scripts[i].type=="application/processing"){
var src=scripts[i].src,canvas=scripts[i].nextSibling;
if(src&&src.indexOf("#")){
canvas=document.getElementById(src.substr(src.indexOf("#")+1));
}else{
while(canvas&&canvas.nodeName.toUpperCase()!="CANVAS")
canvas=canvas.nextSibling;
}
if(canvas){
new Processing(canvas,scripts[i].text);
}
}
}