https://en.wikipedia.org/wiki/Symbol_of_Chaos
previously:
https://lemmy.sdf.org/post/44657804
Code:
<!doctype html>
<html>
<head>
<title>The Sign of Chaos 4: Now With Arrow Keys.</title>
<script>
function main() {
let the_sign_of_chaos_image = new Image();
the_sign_of_chaos_image.src = "data:image/svg+xml;utf8," + encodeURIComponent(document.getElementById("the_sign_of_chaos").outerHTML);
const ctx = document.getElementById("canvas").getContext("2d");
let right_press = false;
let left_press = false;
let rotation_speed = 0;
document.addEventListener("keydown", function(event) {
console.debug(event);
if (event.code === "ArrowRight") {
rotation_speed += 1;
} else if (event.code === "ArrowLeft") {
rotation_speed -= 1;
};
});
function draw() {
ctx.clearRect(0, 0, 300, 300);
if (rotation_speed !== 0) {
console.debug(rotation_speed);
ctx.translate(150, 150);
ctx.rotate(rotation_speed / 100);
ctx.translate(-150, -150);
}
ctx.drawImage(the_sign_of_chaos_image, 0, 0, 300, 300);
window.requestAnimationFrame(draw);
}
the_sign_of_chaos_image.addEventListener("load", draw);
};
window.addEventListener("load", main);
</script>
</head>
<body>
<div id="canvas_div">
<canvas id="canvas" width="300" height="300"></canvas>
</div>
<div hidden>
<svg id="the_sign_of_chaos"
xmlns="http://www.w3.org/2000/svg"
width="200"
height="200"
viewBox="-15 -15 30 30"
>
<circle r="3" />
<g id="arrow">
<path d="M 0 0 L 0 11" stroke-width="2" stroke="black" />
<path d="M 0 13 l -2 -2 l 4 0 Z" stroke-width="1.9" stroke="black" />
</g>
<use href="#arrow" transform="rotate(45)" />
<use href="#arrow" transform="rotate(90)" />
<use href="#arrow" transform="rotate(135)" />
<use href="#arrow" transform="rotate(180)" />
<use href="#arrow" transform="rotate(225)" />
<use href="#arrow" transform="rotate(270)" />
<use href="#arrow" transform="rotate(315)" />
</svg>
</div>
</body>
</html>
Ok this is exactly how i imagined it! Thank you!
<3
Thank you for creating content!
No, thank Lord Arioch for His chaotic content creation.
Can you pls explain how to play it?
press right or left and it’s spinning spinning
doesnt work :(
ok it works now, sorry
maybe your input is not in focus - press on the symbol picture using your mouse and only then press right or left on the keyboard
What’s next? It’d be cool if you could click and place more black spinning suns and they’d bounce around and fight like beyblades!
This is the Black Sun and this is the Symbol of Chaos. They’re not even… are you going to make me make a game where players are battling various radially symmetric “-ism” symbols like bayblades?
I am certainly going to try. If you insist they’re not even, you should make them fight!
Radical battle symbols!
I need you or someone else to teach me how angular momentum works in collisions of the bayblade sorts.
I don’t even use computers.
|-------------------------------------------------+-------------------------------------------------------| | linear momentum | angular momentum | |-------------------------------------------------+-------------------------------------------------------| |-------------------------------------------------+-------------------------------------------------------| | linear_momentum = mass * linear_velocity | angular_momentum = angular_inertia * angular_velocity | |-------------------------------------------------+-------------------------------------------------------| | sum(linear_forces) = mass * linear_acceleration | sum(torques) = | | | angular_inertia * angular_acceleration = | | | angular_inertia * (delta(omega)/delta(time)) | |-------------------------------------------------+-------------------------------------------------------| |-------------------------------------------------+-------------------------------------------------------| | p = m * v | l = I * omega | |-------------------------------------------------+-------------------------------------------------------| | sum(F) = m * a | sum(T) = | | | I * alpha = | | | I * (delta(omega)/delta(time)) | |-------------------------------------------------+-------------------------------------------------------| |-----------------+---------------------+------------------+----------------------| | linear variable | linear meaning | angular variable | | |-----------------+---------------------+------------------+----------------------| |-----------------+---------------------+------------------+----------------------| | p | linear momentum | l | angular momentum | |-----------------+---------------------+------------------+----------------------| | m | mass | I | angular inertia | |-----------------+---------------------+------------------+----------------------| | v | linear velocity | omega | angular velocity | |-----------------+---------------------+------------------+----------------------| | F | force | T | torque | |-----------------+---------------------+------------------+----------------------| | a | linear acceleration | alpha | angular acceleration | |-----------------+---------------------+------------------+----------------------|
