[realcontent]

[canvas id=”myCanvas” style=”width:600px; height: 200px;” width=”600″ height=”200″]
[/canvas]
[script]

function getPI(){
var ret = “05649814654676354891643576849144534649145413546841912925239268591414”+
“149846357631691354612923555555512845694672985439654345614912314364516”;

return ret;
}

var comic = {
groundLevel: 25,
humanSize: 100,
lineWidth: 1,
paperColor: “#FFFFFF”,
tempCanvas: false,
canvas: [],
canvasCount: 1,
activeCanvas: false,
ctx: false,
pi: getPI(),
setCanvas: function (i){
this.createTempCanvas();
i = i % this.canvasCount;
this.activeCanvas = i;
for (var c =0; c 0)){
var p = this.polar2cartesian(joints.headSize, this.deg2rad(a));
ctx.moveTo(cx+p.x, cy+p.y);
ctx.lineTo(cx+p.x, cy+joints.headSize/0.6+Math.random()*5);
ctx.stroke();
if (breton > 0){
var p = this.polar2cartesian(joints.headSize, this.deg2rad(a-m1*45));
ctx.moveTo(cx+m1*joints.headSize/2, cy);
ctx.lineTo(cx+p.x, cy+p.y);
ctx.stroke();
}
a+= adder;
max–;
}
if (breton == 0){
var that = this;
var opening = [50, 70];
[245, 245+65].forEach(function (origin, i){
for (a = 0; a < opening[i]; a += 3){ var p = that.polar2cartesian(joints.headSize, that.deg2rad(origin+a)); ctx.moveTo(cx+p.x, cy+p.y); var p = that.polar2cartesian(joints.headSize, that.deg2rad(origin-a)); ctx.lineTo(cx+p.x, cy+p.y); ctx.stroke(); } }); } } return this; }, getStandingMan: function (o){ var g = this.height - this.groundLevel; var lout = 8; var hout = 7; //console.log("g", g); var ret = { leftAnkle: { x: o.x+this.humanSize / lout, y: g }, leftKnee: { x: o.x+this.humanSize / (lout*2), y: g-this.humanSize / 5 }, rightAnkle: { x: o.x-this.humanSize / lout, y: g }, rightKnee: { x: o.x-this.humanSize / (lout*2), y: g-this.humanSize / 5 }, hip: { x: o.x, y: g - 0.42 * this.humanSize }, neck: { x: o.x, y: g - 0.75 * this.humanSize }, leftElbow: { x: o.x + this.humanSize / (hout*2), y: g - 0.58 * this.humanSize }, leftHand: { x: o.x + this.humanSize / hout, y: g - 0.40 * this.humanSize }, rightElbow: { x: o.x - this.humanSize / (hout*2), y: g - 0.58 * this.humanSize }, rightHand: { x: o.x - this.humanSize / hout, y: g - 0.40 * this.humanSize }, }; o = o || {}; if (o.direction == "right"){ if (o.longHair == 1){ ret.longHair = "left"; } } if (o.direction == "left"){ if (o.longHair == 1){ ret.longHair = "right"; } } if (o.direction == "front"){ if (o.longHair == 1){ ret.longHair = "back"; } } if (o.direction == "back"){ if (o.longHair == 1){ ret.longHair = "front"; } } return ret; }, cartesian2Polar: function (x, y){ distance = Math.sqrt(x*x + y*y) radians = Math.atan2(y,x) //This takes y first polarCoor = { distance:distance, radians:radians } return polarCoor }, polar2cartesian: function (R, theta) { return { x: R * Math.cos(theta), y: R * Math.sin(theta) }; }, rotate: function (stix, origin, targets, angle){ if (typeof targets == "string"){ targets = [ targets ]; } var that = this; targets.forEach(function (target){ var oxy = {x: stix[origin].x, y: stix[origin].y}; var axy = {x: stix[target].x, y: stix[target].y}; var adr = that.cartesian2Polar(axy.x - oxy.x, axy.y - oxy.y); stix[target].x = oxy.x + Math.cos(angle + adr.radians)*adr.distance; stix[target].y = oxy.y + Math.sin(angle + adr.radians)*adr.distance; }); }, deg2rad: function (deg){ while (deg >= 360){
deg = deg – 360;
}
while (deg < 0){ deg = deg + 360; } return deg * 2 * Math.PI / 360; }, rotateLowerArm: function (stix, lr, angle){ this.rotate(stix, lr+"Elbow", lr+"Hand", angle); }, rotateArm: function (stix, lr, angle){ this.rotate(stix, "neck", [lr+"Elbow", lr+"Hand"], angle); }, rotateFoot: function (stix, lr, angle){ this.rotate(stix, lr+"Knee", lr+"Ankle", angle); }, rotateLeg: function (stix, lr, angle){ this.rotate(stix, "hip", [lr+"Knee", lr+"Ankle"], angle); }, rotateTorso: function (stix, angle){ this.rotate(stix, "hip", ["rightElbow", "rightHand", "leftElbow", "leftHand", "neck"], angle); }, fallenStepCount : 5, getFallenMan: function (o){ var ret = this.getStandingMan(o); o = o || {}; if (o.longHair == 1){ if (o.direction == "left"){ ret.longHair = "right"; }else{ ret.longHair = "left"; } }; var f = 15; var a = 200; var m1 = (o.direction == "right") ? -1 : 1; this.rotateLeg(ret, "left", this.deg2rad(f)); this.rotateLeg(ret, "right", this.deg2rad(-f)); this.rotateArm(ret, "right", this.deg2rad(-a)); this.rotateArm(ret, "left", this.deg2rad(a)); o.frame = o.frame || 0; var frame = /* this.fallenStepCount - /* */ ((o.frame) % (this.fallenStepCount+1)); if (o.direction == "left"){ var angle = this.deg2rad(-90/this.fallenStepCount * frame); this.rotate(ret, "rightAnkle", [ "rightKnee", "hip", "neck", "rightElbow", "rightHand", "leftElbow", "leftHand", "leftKnee", "leftAnkle" ], angle ); ret.headAngleDeg = -90/this.fallenStepCount * frame; }; if (o.direction == "right"){ var angle = this.deg2rad(90/this.fallenStepCount * frame); this.rotate(ret, "leftAnkle", [ "rightKnee", "hip", "neck", "rightElbow", "rightHand", "leftElbow", "leftHand", "leftKnee", "rightAnkle" ], angle ); ret.headAngleDeg = 90/this.fallenStepCount*frame; }; return ret; }, translate: function (ret, t){ t.x = t.x || 0; t.y = t.y || 0; Object.keys(ret).forEach(function (key){ if (typeof ret[key].x != "undefined"){ ret[key].x = ret[key].x+t.x; } if (typeof ret[key].y != "undefined"){ ret[key].y = ret[key].y+t.y; } }); return ret; }, getDoggyMan: function (o){ o = o || {}; var ret = this.getStandingMan(o); if (o.longHair == 1){ if (o.direction == "left"){ ret.longHair = "right"; }else{ ret.longHair = "left"; } }; var torsoAngle = -90; var m1 = 1; var h80 = 0; var delta = 0; if (o.direction == "left"){ torsoAngle = -torsoAngle; m1 = -m1; h80 = 180; delta = 20; } this.translate(ret, {x: m1*this.humanSize/3, y: this.humanSize/5}); this.rotateTorso(ret, this.deg2rad(-torsoAngle*0.9)); this.rotateArm(ret, "left", this.deg2rad(-1*m1*75+delta)); this.rotateLowerArm(ret, "left", this.deg2rad(-1*m1*50)); this.rotateArm(ret, "right", this.deg2rad(-1*m1*95-delta)); this.rotateLowerArm(ret, "right", this.deg2rad(-1*m1*55)); this.rotateFoot(ret, "left", this.deg2rad(h80-m1*torsoAngle*1.2)); this.rotateFoot(ret, "right", this.deg2rad(h80-m1*torsoAngle*0.8)); ret.headAngleDeg = -torsoAngle/2; return ret; }, getWalkingMan: function (o){ o.ffdiv = o.ffdiv || 10; o.torsoRot = o.torsoRot || 0; o.longHair = o.longHair || 0; o.elbowAngle = o.elbowAngle || -15; var ret = this.getStandingMan(o); if (o.longHair == 1){ if (o.direction == "left"){ ret.longHair = "right"; }else{ ret.longHair = "left"; } } var u = this.humanSize / 20; var f = 17; var a = 10; var m1 = (o.direction == "right") ? -1 : 1; this.rotateLeg(ret, "left", this.deg2rad(f)); this.rotateLeg(ret, "right", this.deg2rad(-f)); this.rotateArm(ret, "right", this.deg2rad(-a)); this.rotateArm(ret, "right", this.deg2rad(a)); var modulo2 = 4; var handframe = o.frame % (modulo2 * 4); if (handframe >= modulo2 *2 ){
handframe = modulo2*4 – handframe;
};
var d = -1 * handframe/modulo2;
d = d/3;
this.rotateLowerArm(ret, “right”, -1*m1*this.deg2rad(o.elbowAngle));
this.rotateArm(ret, “right”, d);

this.rotateLowerArm(ret, “left”, -1*m1*this.deg2rad(o.elbowAngle));
this.rotateArm(ret, “left”, -d);

var footmodulo = modulo2*2;
var footframe = o.frame % footmodulo;
if (footframe >= footmodulo/2){
footframe = footmodulo – footframe;
}
this.rotateTorso(ret, this.deg2rad(-1* m1 * o.torsoRot));
var d = -1 * footframe/o.ffdiv;
var dd = 2;
if (d < 0){ if (m1 < 0){ this.rotateLeg(ret, "left", d); this.rotateLeg(ret, "right", -d/2); this.rotateFoot(ret, "right", -1*m1*-d/dd); this.rotateFoot(ret, "left", -1*m1*-d); }else{ this.rotateLeg(ret, "left", -d); this.rotateLeg(ret, "right", d/2); this.rotateFoot(ret, "right", -1*m1*-d/dd); this.rotateFoot(ret, "left", -1*m1*-d); } }else{ //this.rotateLeg(ret, "left", d/2); //this.rotateLeg(ret, "right", -d); //this.rotateFoot(ret, "right", -d); } return ret; }, getRunningMan: function (o){ o = o || {}; o.elbowAngle = o.elbowAngle || -115; o.ffdiv = o.ffdiv || 5; o.torsoRot = o.torsoRot || 12; o.longHair = o.longHair || 0; o.direction = o.direction || "left"; var r = this.getWalkingMan(o); r.headAngleDeg = 25; if (o.direction == "left"){ r.headAngleDeg = -r.headAngleDeg; }; return r; }, whiteOut: function (){ this.ctx.clearRect(0, 0, comic.canvas.width, comic.canvas.height); this.switchCanvas(); this.ctx.clearRect(0, 0, comic.canvas.width, comic.canvas.height); this.ctx.fillStyle=this.paperColor; this.ctx.fillRect(0, 0, this.width, this.height); return this; }, leftGround: function (frame){ frame = Math.round(frame) % this.pi.length; this.lastLeftGround = frame; var g = this.height - this.groundLevel; var w = this.width; var y = 0; var x = 0; var xfuzzy = 0; var yfuzzy = 0; this.ctx.moveTo(x,g); for (x=0; x= 0.66*w){
y++;
yfuzzy = 0;
xfuzzy = this.pi[(x+frame) % this.pi.length];
}
this.ctx.lineTo(Math.min(x, 0.66*w)+parseInt(xfuzzy), g+y+parseInt(yfuzzy));
}
this.ctx.stroke();
},
advanceLeftGround: function (amount){
this.leftGround((this.lastLeftGround || 0) + Math.round(amount));
},
advanceRightGround: function (amount){
this.rightGround((this.lastRightGround || 0) + Math.round(amount));
},
rightGround: function (frame){
frame = Math.round(frame) % this.pi.length;
this.lastRightGround = frame;
frame = this.pi.length – frame;
var g = this.height – this.groundLevel;
var w = this.width;
var y = w*0.66;
var x = 0;
var xfuzzy = 0;
var yfuzzy = 0;
this.ctx.moveTo(0.66*w,g+y);
for (x=0; x= 0.66*w){
y = 0;
xfuzzy = 0;
yfuzzy = this.pi[(x+frame) % this.pi.length];
}else{
y–;
xfuzzy = this.pi[(x+frame) % this.pi.length];
}
var vy = Math.min(g+y, this.height) +parseInt(yfuzzy);
var xy = [Math.max(x, Math.round(0.66*w))+parseInt(xfuzzy), vy];
if ((xy[0] < this.width)&&(xy[1] < this.height)){ this.ctx.lineTo(xy[0], xy[1]); this.ctx.stroke(); }; } }, drawBoy: function (o){ var p = this.width / 6; o.x = (this.boyLastX || (p*1)) + o.x; this.boyLastX = o.x; o.longHair = 0; o.direction = "right"; this.drawStickMan( this["get"+o.posture+"Man"](o) ); }, drawGirl: function (o){ var p = this.width / 6; o.x = (this.girlLastX || ( p*5 )) + o.x; this.girlLastX = o.x; o.longHair = 1; o.direction = "left"; this.drawStickMan( this["get"+o.posture+"Man"](o) ); }, busyWork: function (){ this.realCtx.drawImage(this.tempCanvas, 0, 0); }, }; comic.bindTo("#myCanvas"); var frame = 0; var radvance = 2; var ladvance = 10; function firstScene(){ var cyclos = 20; var c = setInterval(function (){ comic.whiteOut(); comic.advanceLeftGround(0); comic.advanceRightGround(0); comic.drawGirl({x:0, posture:"Standing", frame: frame}); comic.drawBoy({x:0, posture:"Standing", frame: frame}); comic.busyWork(); cyclos--; if (cyclos < 0){ clearInterval(c); secondScene(); } }, 100); } function secondScene(){ var cyclos = 50; var a = comic.humanSize / 25; var x = setInterval(function (){ comic.whiteOut(); comic.advanceLeftGround(0); comic.advanceRightGround(0); comic.drawBoy({x:a, posture:"Walking", frame: cyclos}); if (cyclos < 40){ comic.drawGirl({x:-a/2, posture:"Walking", frame: cyclos}); }else{ comic.drawGirl({x:0, posture:"Standing", frame: cyclos}); } comic.busyWork(); cyclos--; if (cyclos == 0){ clearInterval(x); thirdScene(); } }, 100); }; function thirdScene(){ var cyclos = 20; var fallen = 0; var translated = 0; var i = setInterval(function (){ var a = comic.humanSize/6.666; comic.whiteOut(); comic.advanceLeftGround(a); comic.advanceRightGround(a/3); comic.drawGirl({x:a/3, posture:"Standing"}); if (cyclos > 10){
fallen = Math.min(comic.fallenStepCount, fallen);
comic.drawBoy({x:-a, posture:”Fallen”, frame: fallen });
fallen++;
}else{
if (translated == 0){
a = a+comic.humanSize/3;
}
comic.drawBoy({x:-a, posture:”Doggy”});
}
comic.busyWork();

cyclos–;
if (cyclos < 0){ clearInterval(i); fourthScene(); } }, 150); } function fourthScene(){ var cyclos = 500; var fallen = 0; var translated = 0; var frame = 0; var wf = 0; var rf = 0; var dg = 0; var a = comic.humanSize / 5; var i = setInterval(function (){ if (cyclos % 35 == 0){ a = a*1.1; } if (cyclos % 300 == 0){ comic.humanSize = comic.humanSize*0.9; } comic.whiteOut(); comic.advanceLeftGround(a); comic.advanceRightGround(a/3); if (cyclos % 40 == 0){ dg = Math.round(Math.random()+0.3) % 2; } if (cyclos % 10 < 5){ comic.drawGirl({x:-a/5, posture:"Walking", frame: wf}); wf++; }else{ comic.drawGirl({x:a/5, posture:"Standing"}); } comic.boyLastX = Math.max(comic.boyLastX, -comic.humanSize*2); comic.boyLastX = Math.min(comic.boyLastX, 0.66*comic.width - a*3); if ((cyclos % 20) < 10){ if (comic.boyLastX < (0.66*comic.width)){ comic.drawBoy({x:a*2, posture:"Running", frame: rf}); }else{ comic.drawBoy({x:0, posture:"Running", frame: rf}); } rf++; }else{ if (dg == 0){ comic.drawBoy({x:-a*(1+Math.random()*0.1), posture:"Doggy", frame: rf}); }else{ comic.drawBoy({x:-a, posture:"Fallen", frame: rf}); rf++; if (rf%6 == 0){ dg = 0; } } } comic.busyWork(); cyclos--; if (cyclos < 0){ clearInterval(i); fifthScene(); } }, 150); } function fifthScene(){ //not implemented cause how the fuck am i supposed to know } firstScene(); [/script]

facebooktwittergoogle_plusredditpinterestlinkedinmail