aparler/RosettaCodeData
1
0
Fork 0
Code Issues 12 Pull requests 3 Projects Releases Packages Wiki Activity Actions

Data commit

Browse source
This commit is contained in:
Ingy döt Net 2023-07-01 11:58:00 -04:00
parent 7387c8f97b
commit cb5bb5e222
199093 changed files with 3378972 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

58
Task/Animate-a-pendulum/JavaScript/animate-a-pendulum-1.js Normal file
View file

@ -0,0 +1,58 @@
<html><head>
<title>Pendulum</title>
</head><body style="background: gray;">
<canvas id="canvas" width="600" height="600">
<p>Sorry, your browser does not support the &lt;canvas&gt; used to display the pendulum animation.</p>
</canvas>
<script>
function PendulumSim(length_m, gravity_mps2, initialAngle_rad, timestep_ms, callback) {
var velocity = 0;
var angle = initialAngle_rad;
var k = -gravity_mps2/length_m;
var timestep_s = timestep_ms / 1000;
return setInterval(function () {
var acceleration = k * Math.sin(angle);
velocity += acceleration * timestep_s;
angle += velocity * timestep_s;
callback(angle);
}, timestep_ms);
}
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var prev=0;
var sim = PendulumSim(1, 9.80665, Math.PI*99/100, 10, function (angle) {
var rPend = Math.min(canvas.width, canvas.height) * 0.47;
var rBall = Math.min(canvas.width, canvas.height) * 0.02;
var rBar = Math.min(canvas.width, canvas.height) * 0.005;
var ballX = Math.sin(angle) * rPend;
var ballY = Math.cos(angle) * rPend;
context.fillStyle = "rgba(255,255,255,0.51)";
context.globalCompositeOperation = "destination-out";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "yellow";
context.strokeStyle = "rgba(0,0,0,"+Math.max(0,1-Math.abs(prev-angle)*10)+")";
context.globalCompositeOperation = "source-over";
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(angle);
context.beginPath();
context.rect(-rBar, -rBar, rBar*2, rPend+rBar*2);
context.fill();
context.stroke();
context.beginPath();
context.arc(0, rPend, rBall, 0, Math.PI*2, false);
context.fill();
context.stroke();
context.restore();
prev=angle;
});
</script>
</body></html>

41
Task/Animate-a-pendulum/JavaScript/animate-a-pendulum-2.js Normal file
View file

@ -0,0 +1,41 @@
<svg height="100%" width="100%" viewBox="-2 0 4 4" xmlns="http://www.w3.org/2000/svg">
<line id="string" x1="0" y1="0" x2="1" y2="0" stroke="grey" stroke-width="0.05" />
<circle id="ball" cx="0" cy="0" r="0.1" fill="black" />
<script>
/*jshint esnext: true */
function rk4(dt, x, f) {
"use strict";
let from = Array.from,
a = from(f(from(x, $ => $ )), $ => $*dt),
b = from(f(from(x, ($,i) => $ + a[i]/2)), $ => $*dt),
c = from(f(from(x, ($,i) => $ + b[i]/2)), $ => $*dt),
d = from(f(from(x, ($,i) => $ + c[i] )), $ => $*dt);
return from(x, (_,i) => (a[i] + 2*b[i] + 2*c[i] + d[i])/6);
}
function setPendulumPos($) {
const string = document.getElementById("string"),
ball = document.getElementById("ball");
let $2 = $*$,
x = 2*$/(1+$2),
y = (1-$2)/(1+$2);
string.setAttribute("x2", x);
string.setAttribute("y2", y);
ball.setAttribute("cx", x);
ball.setAttribute("cy", y);
}
var q = [1, 0];
var previousTimestamp;
(function animate(timestamp) {
if ( previousTimestamp !== undefined) {
let dq = rk4((timestamp - previousTimestamp)/1000, q, $ => [$[1], 2*$[1]*$[1]*$[0]/(1+$[0]*$[0]) - $[0]]);
q = [q[0] + dq[0], q[1] + dq[1]];
setPendulumPos(q[0]);
}
previousTimestamp = timestamp;
window.requestAnimationFrame(animate);
})()
</script>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB