alan.becker

EdmundC

Sep 22nd, 2024 (edited)

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

HTML 5 4.54 KB | None | 0 0

raw download clone embed print report

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Character with Joints and Physics</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Draw your character (click to set joints or drag to draw bones):</h2>
<canvas id="characterCanvas" width="500" height="500"></canvas>
<br />
<label>Gravity Strength: </label><input type="range" id="gravity" min="0" max="1" step="0.1" value="0.5">
<button id="startMovement">Start Movement</button>
<br />
<input type="file" id="itemUpload" accept="image/*">
<script>
const canvas = document.getElementById('characterCanvas');
const ctx = canvas.getContext('2d');
let joints = []; // Store joint positions
let bones = []; // Store bones (lines between joints)
let gravity = 0.5; // Gravity strength
let drawing = false; // Track whether a line is being drawn
let startX, startY; // Starting point of the line
// Joint properties
const jointRadius = 5; // Size of the joints (visible dots)
document.getElementById('gravity').addEventListener('input', function(event) {
gravity = parseFloat(event.target.value);
});
// Start drawing a line when mouse is pressed
canvas.addEventListener('mousedown', function(event) {
const rect = canvas.getBoundingClientRect();
startX = event.clientX - rect.left;
startY = event.clientY - rect.top;
drawing = true;
// Log start position to check if coordinates are correct
console.log(`Starting position: (${startX}, ${startY})`);
});
// Draw a line as the mouse is moved while dragging
canvas.addEventListener('mousemove', function(event) {
if (!drawing) return;
const rect = canvas.getBoundingClientRect();
const endX = event.clientX - rect.left;
const endY = event.clientY - rect.top;
// Log current position while moving
console.log(`Current position: (${endX}, ${endY})`);
// Clear the canvas and redraw everything
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawCharacter(); // Redraw existing character structure
// Draw the line being dragged
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.stroke();
});
// Finish the line and add a bone when mouse is released
canvas.addEventListener('mouseup', function(event) {
if (!drawing) return;
const rect = canvas.getBoundingClientRect();
const endX = event.clientX - rect.left;
const endY = event.clientY - rect.top;
drawing = false;
// Log end position to ensure correct coordinates
console.log(`Ending position: (${endX}, ${endY})`);
// Add the joint if it doesn't exist yet
if (joints.length === 0 || (startX !== joints[joints.length - 1].x || startY !== joints[joints.length - 1].y)) {
joints.push({ x: startX, y: startY });
}
// Add the new joint (end of the line)
joints.push({ x: endX, y: endY });
// Add a bone (line) between the two joints
bones.push({
start: { x: startX, y: startY },
end: { x: endX, y: endY },
length: Math.hypot(endX - startX, endY - startY)
});
// Redraw everything, including the new joint and bone
drawCharacter();
});
// Draw the character with joints and bones
function drawCharacter() {
// Draw bones (lines)
ctx.strokeStyle = 'black';
bones.forEach(bone => {
ctx.beginPath();
ctx.moveTo(bone.start.x, bone.start.y);
ctx.lineTo(bone.end.x, bone.end.y);
ctx.stroke();
});
// Draw joints as circles with defined radius
ctx.fillStyle = 'black';
joints.forEach(joint => {
ctx.beginPath();
ctx.arc(joint.x, joint.y, jointRadius, 0, Math.PI * 2);
ctx.fill();
});
}
</script>
</body>
</html>

Add Comment

Please, Sign In to add comment