Skip to content

Instantly share code, notes, and snippets.

/index.html

Created April 22, 2016 17:39
Show Gist options
  • Save anonymous/7beba2e9561598f5f388e1c36c6f9236 to your computer and use it in GitHub Desktop.
Save anonymous/7beba2e9561598f5f388e1c36c6f9236 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/kibocus/7
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"></script>
<style id="jsbin-css">
body {
margin: 0;
padding: 0;
font-family: PF DinText Pro, sans-serif;
font-weight: light;
}
div#header {
padding: 15px 10%;
border-bottom: 1px solid rgb(240,240,240);
}
div#content {
border-top: 1px solid rgb(255,255,255);
background-image: url('./back.jpg');
background-repeat: repeat-x;
background-color: rgb(250,250,250);
border-bottom: 1px solid rgb(240,240,240);
text-align:center;
}
div#canvas {
display: inline-block;
_overflow:hidden;
*zoom:1;
*display:inline;
width: 480px;
height: 430px;
/*background-color: rgb(240,240,240);*/
padding: 10px;
}
div#footer {
color:rgb(100,100,100);
padding: 20px 30px;
text-align:right;
}
</style>
</head>
<body>
<title>Модель лыжника</title>
<div id="content">
<div id="canvas"></div>
</div>
<div id="footer">
© 2011. Dmitry Khrykin, MSU
</div>
<script id="jsbin-javascript">
// Creates canvas 320 × 200 at 10, 50
var content = document.getElementById("content");
var canvas = document.getElementById("canvas");
var paper = Raphael(canvas, "100%", "100%");
var l = 90;
var leftBorder = 50;
var baseline = 350;
var r = 0.2*l;
var lFoot = 0.42*l;
var lLeg = 0.87*l;
var lHip = 0.97*l;
var lLoin = 0.33*l;
var lBody = l;
var lArm = 0.67*l;
var lFore = 0.73*l;
var lNeck = 0.5*l;
var lPole = (lBody + lLeg + lHip + lNeck + r)*0.72;
var skiLenght = (lBody + lLeg + lHip + lNeck + r)*1.1;
var skiCOG = skiLenght * 4/9;
var strokeWidth = 0.15*l;
var N = 11;
var x = new Array(N);
var y = new Array(N);
var f = new Array(N-1);
var skiPath;
var footPath;
var legPath;
var hipPath;
var loinPath;
var bodyPath;
var armPath;
var forePath;
var polePath;
for( i = 0; i<= N-1; i++) { //
f[i] = 0.785;//
}
f[4] = 1.2; //
f[8] = 0.5; //
function refreshCoords() {
x[1] = leftBorder+skiCOG;
y[1] = baseline;
x[2] = x[1] - lFoot * Math.cos(f[1]);
y[2] = y[1] - lFoot * Math.sin(f[1]);
x[3] = x[2] + lLeg * Math.cos(f[2]);
y[3] = y[2] - lLeg * Math.sin(f[2]);
x[4] = x[3] - lHip * Math.cos(f[3]);
y[4] = y[3] - lHip * Math.sin(f[3]);
x[5] = x[4] + lLoin * Math.cos(f[4]);
y[5] = y[4] - lLoin * Math.sin(f[4]);
x[6] = x[5] + lBody * Math.cos(f[5]);
y[6] = y[5] - lBody * Math.sin(f[5]);
x[7] = x[6] + lArm * Math.cos(f[6]);
y[7] = y[6] + lArm * Math.sin(f[6]);
x[8] = x[7] + lFore * Math.cos(f[7]);
y[8] = y[7] - lFore * Math.sin(f[7]);
x[9] = x[6] + lNeck * Math.cos(f[5]);
y[9] = y[6] - lNeck * Math.sin(f[5]);
x[10] = x[8] - lPole * Math.sin(f[8]);
y[10] = y[8] + lPole * Math.cos(f[8]);
skiPath = "M" + leftBorder+" "+baseline+
"L" + (leftBorder+skiLenght)+" "+baseline+
"Q" + (leftBorder+skiLenght+ 0.42*l) + " "
+ (baseline) + " "
+ (leftBorder+skiLenght+0.42*l) + " "
+ (baseline-0.13*l);
footPath = "M" + x[1] +" "+ y[1]+
"L" + x[2] +" "+ y[2];
legPath = "M" + x[2] +" "+ y[2]+
"L" + x[3] +" "+ y[3];
hipPath = "M" + x[3] +" "+ y[3]+
"L" + x[4] +" "+ y[4];
loinPath = "M" + x[4] +" "+ y[4]+
"L" + x[5] +" "+ y[5];
bodyPath = "M" + x[5] +" "+ y[5]+
"L" + x[6] +" "+ y[6];
armPath = "M" + x[6] +" "+ y[6]+
"L" + x[7] +" "+ y[7];
forePath = "M" + x[7] +" "+ y[7]+
"L" + x[8] +" "+ y[8];
polePath = "M" + x[8] +" "+ y[8]+
"L" + x[10]+" "+ y[10];
}
refreshCoords();
var ski = paper.path(skiPath);
var head = paper.circle(x[9],y[9],r);
var pole = paper.path(polePath);
var skier = paper.set();
var foot = paper.path(footPath);
var leg = paper.path(legPath);
var hip = paper.path(hipPath);
var loin = paper.path(loinPath);
var body = paper.path(bodyPath);
var arm = paper.path(armPath);
var fore = paper.path(forePath);
skier.push(
foot,
leg,
hip,
loin,
body,
arm,
fore
);
function refresh () {
refreshCoords();
foot.attr("path",footPath);
leg.attr("path",legPath);
hip.attr("path",hipPath);
loin.attr("path",loinPath);
body.attr("path",bodyPath);
arm.attr("path",armPath);
fore.attr("path",forePath);
head.attr({cx: x[9], cy: y[9]});
pole.attr("path",polePath);
}
skier.attr("stroke-width", strokeWidth);
skier.attr("stroke","#000");
skier.attr("stroke-linecap", "round");
ski.attr("stroke-width", "3");
ski.attr("stroke","rgb(165,200,35)");
ski.attr("stroke-linecap", "round");
head.attr("fill", "#000");
head.attr("stroke-width", "0");
foot.attr("stroke","rgb(50,50,50)");
pi = Math.PI;
f[6] = pi/4;
f[7] = pi/4;
f[1] = 0;
var t=0;
var A = 1;
var stop = false;
content.onclick = function () {
if(stop == true) {
stop = false;
}
else {
stop = true;
}
};
motion();
function motion() {
var w = 4;
var dt = 0.01;
var TIMEOUT = dt * 1000;
if(!stop) {
t += dt ;
content.style.cssText="background-position: "+(-150*(t + 0.2*Math.sin(2*t)))+"px 0;";
f[1] = 0.8 * A * Math.sin(Math.pow((Math.sin(w * t - 0.5)),8));
f[2] = pi/3;
f[3] = pi/3 + 0.5 * A * Math.pow((Math.sin(w * t)),2);
f[4] = pi/4 + 0.5 * A * Math.pow((Math.sin(w * t)),2);
f[5] = pi/6 + 0.6 * A * Math.pow((Math.sin(w * t)),2);
f[6] = 3 * pi/6 + 1.3 * A * (Math.sin(2 * w * t));
f[7] = -pi/6 - 2 * A * Math.sin(2 * w * t);
f[8] = A*Math.sin(2 * w* t) + pi / 4;
refresh();
}
setTimeout(motion, TIMEOUT);
}
</script>
<script id="jsbin-source-css" type="text/css">body {
margin: 0;
padding: 0;
font-family: PF DinText Pro, sans-serif;
font-weight: light;
}
div#header {
padding: 15px 10%;
border-bottom: 1px solid rgb(240,240,240);
}
div#content {
border-top: 1px solid rgb(255,255,255);
background-image: url('./back.jpg');
background-repeat: repeat-x;
background-color: rgb(250,250,250);
border-bottom: 1px solid rgb(240,240,240);
text-align:center;
}
div#canvas {
display: inline-block;
_overflow:hidden;
*zoom:1;
*display:inline;
width: 480px;
height: 430px;
/*background-color: rgb(240,240,240);*/
padding: 10px;
}
div#footer {
color:rgb(100,100,100);
padding: 20px 30px;
text-align:right;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
// Creates canvas 320 × 200 at 10, 50
var content = document.getElementById("content");
var canvas = document.getElementById("canvas");
var paper = Raphael(canvas, "100%", "100%");
var l = 90;
var leftBorder = 50;
var baseline = 350;
var r = 0.2*l;
var lFoot = 0.42*l;
var lLeg = 0.87*l;
var lHip = 0.97*l;
var lLoin = 0.33*l;
var lBody = l;
var lArm = 0.67*l;
var lFore = 0.73*l;
var lNeck = 0.5*l;
var lPole = (lBody + lLeg + lHip + lNeck + r)*0.72;
var skiLenght = (lBody + lLeg + lHip + lNeck + r)*1.1;
var skiCOG = skiLenght * 4/9;
var strokeWidth = 0.15*l;
var N = 11;
var x = new Array(N);
var y = new Array(N);
var f = new Array(N-1);
var skiPath;
var footPath;
var legPath;
var hipPath;
var loinPath;
var bodyPath;
var armPath;
var forePath;
var polePath;
for( i = 0; i<= N-1; i++) { //
f[i] = 0.785;//
}
f[4] = 1.2; //
f[8] = 0.5; //
function refreshCoords() {
x[1] = leftBorder+skiCOG;
y[1] = baseline;
x[2] = x[1] - lFoot * Math.cos(f[1]);
y[2] = y[1] - lFoot * Math.sin(f[1]);
x[3] = x[2] + lLeg * Math.cos(f[2]);
y[3] = y[2] - lLeg * Math.sin(f[2]);
x[4] = x[3] - lHip * Math.cos(f[3]);
y[4] = y[3] - lHip * Math.sin(f[3]);
x[5] = x[4] + lLoin * Math.cos(f[4]);
y[5] = y[4] - lLoin * Math.sin(f[4]);
x[6] = x[5] + lBody * Math.cos(f[5]);
y[6] = y[5] - lBody * Math.sin(f[5]);
x[7] = x[6] + lArm * Math.cos(f[6]);
y[7] = y[6] + lArm * Math.sin(f[6]);
x[8] = x[7] + lFore * Math.cos(f[7]);
y[8] = y[7] - lFore * Math.sin(f[7]);
x[9] = x[6] + lNeck * Math.cos(f[5]);
y[9] = y[6] - lNeck * Math.sin(f[5]);
x[10] = x[8] - lPole * Math.sin(f[8]);
y[10] = y[8] + lPole * Math.cos(f[8]);
skiPath = "M" + leftBorder+" "+baseline+
"L" + (leftBorder+skiLenght)+" "+baseline+
"Q" + (leftBorder+skiLenght+ 0.42*l) + " "
+ (baseline) + " "
+ (leftBorder+skiLenght+0.42*l) + " "
+ (baseline-0.13*l);
footPath = "M" + x[1] +" "+ y[1]+
"L" + x[2] +" "+ y[2];
legPath = "M" + x[2] +" "+ y[2]+
"L" + x[3] +" "+ y[3];
hipPath = "M" + x[3] +" "+ y[3]+
"L" + x[4] +" "+ y[4];
loinPath = "M" + x[4] +" "+ y[4]+
"L" + x[5] +" "+ y[5];
bodyPath = "M" + x[5] +" "+ y[5]+
"L" + x[6] +" "+ y[6];
armPath = "M" + x[6] +" "+ y[6]+
"L" + x[7] +" "+ y[7];
forePath = "M" + x[7] +" "+ y[7]+
"L" + x[8] +" "+ y[8];
polePath = "M" + x[8] +" "+ y[8]+
"L" + x[10]+" "+ y[10];
}
refreshCoords();
var ski = paper.path(skiPath);
var head = paper.circle(x[9],y[9],r);
var pole = paper.path(polePath);
var skier = paper.set();
var foot = paper.path(footPath);
var leg = paper.path(legPath);
var hip = paper.path(hipPath);
var loin = paper.path(loinPath);
var body = paper.path(bodyPath);
var arm = paper.path(armPath);
var fore = paper.path(forePath);
skier.push(
foot,
leg,
hip,
loin,
body,
arm,
fore
);
function refresh () {
refreshCoords();
foot.attr("path",footPath);
leg.attr("path",legPath);
hip.attr("path",hipPath);
loin.attr("path",loinPath);
body.attr("path",bodyPath);
arm.attr("path",armPath);
fore.attr("path",forePath);
head.attr({cx: x[9], cy: y[9]});
pole.attr("path",polePath);
}
skier.attr("stroke-width", strokeWidth);
skier.attr("stroke","#000");
skier.attr("stroke-linecap", "round");
ski.attr("stroke-width", "3");
ski.attr("stroke","rgb(165,200,35)");
ski.attr("stroke-linecap", "round");
head.attr("fill", "#000");
head.attr("stroke-width", "0");
foot.attr("stroke","rgb(50,50,50)");
pi = Math.PI;
f[6] = pi/4;
f[7] = pi/4;
f[1] = 0;
var t=0;
var A = 1;
var stop = false;
content.onclick = function () {
if(stop == true) {
stop = false;
}
else {
stop = true;
}
};
motion();
function motion() {
var w = 4;
var dt = 0.01;
var TIMEOUT = dt * 1000;
if(!stop) {
t += dt ;
content.style.cssText="background-position: "+(-150*(t + 0.2*Math.sin(2*t)))+"px 0;";
f[1] = 0.8 * A * Math.sin(Math.pow((Math.sin(w * t - 0.5)),8));
f[2] = pi/3;
f[3] = pi/3 + 0.5 * A * Math.pow((Math.sin(w * t)),2);
f[4] = pi/4 + 0.5 * A * Math.pow((Math.sin(w * t)),2);
f[5] = pi/6 + 0.6 * A * Math.pow((Math.sin(w * t)),2);
f[6] = 3 * pi/6 + 1.3 * A * (Math.sin(2 * w * t));
f[7] = -pi/6 - 2 * A * Math.sin(2 * w * t);
f[8] = A*Math.sin(2 * w* t) + pi / 4;
refresh();
}
setTimeout(motion, TIMEOUT);
}
</script></body>
</html>
Raw
jsbin.kibocus.css
body {
margin: 0;
padding: 0;
font-family: PF DinText Pro, sans-serif;
font-weight: light;
}
div#header {
padding: 15px 10%;
border-bottom: 1px solid rgb(240,240,240);
}
div#content {
border-top: 1px solid rgb(255,255,255);
background-image: url('./back.jpg');
background-repeat: repeat-x;
background-color: rgb(250,250,250);
border-bottom: 1px solid rgb(240,240,240);
text-align:center;
}
div#canvas {
display: inline-block;
_overflow:hidden;
*zoom:1;
*display:inline;
width: 480px;
height: 430px;
/*background-color: rgb(240,240,240);*/
padding: 10px;
}
div#footer {
color:rgb(100,100,100);
padding: 20px 30px;
text-align:right;
}
Raw
jsbin.kibocus.js
// Creates canvas 320 × 200 at 10, 50
var content = document.getElementById("content");
var canvas = document.getElementById("canvas");
var paper = Raphael(canvas, "100%", "100%");
var l = 90;
var leftBorder = 50;
var baseline = 350;
var r = 0.2*l;
var lFoot = 0.42*l;
var lLeg = 0.87*l;
var lHip = 0.97*l;
var lLoin = 0.33*l;
var lBody = l;
var lArm = 0.67*l;
var lFore = 0.73*l;
var lNeck = 0.5*l;
var lPole = (lBody + lLeg + lHip + lNeck + r)*0.72;
var skiLenght = (lBody + lLeg + lHip + lNeck + r)*1.1;
var skiCOG = skiLenght * 4/9;
var strokeWidth = 0.15*l;
var N = 11;
var x = new Array(N);
var y = new Array(N);
var f = new Array(N-1);
var skiPath;
var footPath;
var legPath;
var hipPath;
var loinPath;
var bodyPath;
var armPath;
var forePath;
var polePath;
for( i = 0; i<= N-1; i++) { //
f[i] = 0.785;//
}
f[4] = 1.2; //
f[8] = 0.5; //
function refreshCoords() {
x[1] = leftBorder+skiCOG;
y[1] = baseline;
x[2] = x[1] - lFoot * Math.cos(f[1]);
y[2] = y[1] - lFoot * Math.sin(f[1]);
x[3] = x[2] + lLeg * Math.cos(f[2]);
y[3] = y[2] - lLeg * Math.sin(f[2]);
x[4] = x[3] - lHip * Math.cos(f[3]);
y[4] = y[3] - lHip * Math.sin(f[3]);
x[5] = x[4] + lLoin * Math.cos(f[4]);
y[5] = y[4] - lLoin * Math.sin(f[4]);
x[6] = x[5] + lBody * Math.cos(f[5]);
y[6] = y[5] - lBody * Math.sin(f[5]);
x[7] = x[6] + lArm * Math.cos(f[6]);
y[7] = y[6] + lArm * Math.sin(f[6]);
x[8] = x[7] + lFore * Math.cos(f[7]);
y[8] = y[7] - lFore * Math.sin(f[7]);
x[9] = x[6] + lNeck * Math.cos(f[5]);
y[9] = y[6] - lNeck * Math.sin(f[5]);
x[10] = x[8] - lPole * Math.sin(f[8]);
y[10] = y[8] + lPole * Math.cos(f[8]);
skiPath = "M" + leftBorder+" "+baseline+
"L" + (leftBorder+skiLenght)+" "+baseline+
"Q" + (leftBorder+skiLenght+ 0.42*l) + " "
+ (baseline) + " "
+ (leftBorder+skiLenght+0.42*l) + " "
+ (baseline-0.13*l);
footPath = "M" + x[1] +" "+ y[1]+
"L" + x[2] +" "+ y[2];
legPath = "M" + x[2] +" "+ y[2]+
"L" + x[3] +" "+ y[3];
hipPath = "M" + x[3] +" "+ y[3]+
"L" + x[4] +" "+ y[4];
loinPath = "M" + x[4] +" "+ y[4]+
"L" + x[5] +" "+ y[5];
bodyPath = "M" + x[5] +" "+ y[5]+
"L" + x[6] +" "+ y[6];
armPath = "M" + x[6] +" "+ y[6]+
"L" + x[7] +" "+ y[7];
forePath = "M" + x[7] +" "+ y[7]+
"L" + x[8] +" "+ y[8];
polePath = "M" + x[8] +" "+ y[8]+
"L" + x[10]+" "+ y[10];
}
refreshCoords();
var ski = paper.path(skiPath);
var head = paper.circle(x[9],y[9],r);
var pole = paper.path(polePath);
var skier = paper.set();
var foot = paper.path(footPath);
var leg = paper.path(legPath);
var hip = paper.path(hipPath);
var loin = paper.path(loinPath);
var body = paper.path(bodyPath);
var arm = paper.path(armPath);
var fore = paper.path(forePath);
skier.push(
foot,
leg,
hip,
loin,
body,
arm,
fore
);
function refresh () {
refreshCoords();
foot.attr("path",footPath);
leg.attr("path",legPath);
hip.attr("path",hipPath);
loin.attr("path",loinPath);
body.attr("path",bodyPath);
arm.attr("path",armPath);
fore.attr("path",forePath);
head.attr({cx: x[9], cy: y[9]});
pole.attr("path",polePath);
}
skier.attr("stroke-width", strokeWidth);
skier.attr("stroke","#000");
skier.attr("stroke-linecap", "round");
ski.attr("stroke-width", "3");
ski.attr("stroke","rgb(165,200,35)");
ski.attr("stroke-linecap", "round");
head.attr("fill", "#000");
head.attr("stroke-width", "0");
foot.attr("stroke","rgb(50,50,50)");
pi = Math.PI;
f[6] = pi/4;
f[7] = pi/4;
f[1] = 0;
var t=0;
var A = 1;
var stop = false;
content.onclick = function () {
if(stop == true) {
stop = false;
}
else {
stop = true;
}
};
motion();
function motion() {
var w = 4;
var dt = 0.01;
var TIMEOUT = dt * 1000;
if(!stop) {
t += dt ;
content.style.cssText="background-position: "+(-150*(t + 0.2*Math.sin(2*t)))+"px 0;";
f[1] = 0.8 * A * Math.sin(Math.pow((Math.sin(w * t - 0.5)),8));
f[2] = pi/3;
f[3] = pi/3 + 0.5 * A * Math.pow((Math.sin(w * t)),2);
f[4] = pi/4 + 0.5 * A * Math.pow((Math.sin(w * t)),2);
f[5] = pi/6 + 0.6 * A * Math.pow((Math.sin(w * t)),2);
f[6] = 3 * pi/6 + 1.3 * A * (Math.sin(2 * w * t));
f[7] = -pi/6 - 2 * A * Math.sin(2 * w * t);
f[8] = A*Math.sin(2 * w* t) + pi / 4;
refresh();
}
setTimeout(motion, TIMEOUT);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment