[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
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
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
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]
