diff --git a/script.js b/script.js index c0aced2..976e925 100644 --- a/script.js +++ b/script.js @@ -177,6 +177,12 @@ maxSpeedSlider.addEventListener('input', (e) => { maxSpeedOutput.textContent = parseFloat(e.target.value).toFixed(1); }); + + +/* +* BEGIN ANIMATION CODE +*/ + // Get the canvas and context as constants const canvas = document.getElementById('swerve-canvas'); const ctx = canvas.getContext('2d'); @@ -204,6 +210,7 @@ function drawGrid(ctx, sideLength, gridSquareSize) { function drawModule(ctx, module) { const x = module.position.x; const y = module.position.y; + const arrowLength = Math.max(module.speed * 1.5, 5); ctx.save(); ctx.translate(x, y); @@ -217,6 +224,22 @@ function drawModule(ctx, module) { ctx.lineWidth = 4; ctx.stroke(); + // Draw velocity arrow if module is moving + if (module.speed > 0.01) { + ctx.strokeStyle = rootStyles.getPropertyValue('--swerve-arrow-color'); + ctx.fillStyle = rootStyles.getPropertyValue('--swerve-arrow-color'); + ctx.lineWidth = 4; + + const endX = arrowLength * Math.cos(module.angle); + const endY = arrowLength * Math.sin(module.angle); + + // Arrow line + ctx.beginPath(); + ctx.moveTo(0, 0); + ctx.lineTo(endX, endY); + ctx.stroke(); + } + ctx.restore(); } @@ -240,9 +263,40 @@ function drawRobot(ctx, robot) { modules.forEach(module => drawModule(ctx, module)); } -const robot = new SwerveDrive(PresetConfigs.eightWheel(200)); -robot.drive(100, 0, 1, 500); +let robot = new SwerveDrive(PresetConfigs.eightWheel(200)); +let xSpeed = -100; +let xDir = 1; +let ySpeed = -100; +let yDir = 0.8; +robot.drive(xSpeed, ySpeed, 0, 500); -ctx.translate(canvas.width / 2, canvas.height / 2); -drawGrid(ctx, 600, 50); -drawRobot(ctx, robot); \ No newline at end of file +function animate(timestamp) { + // Clear and set up canvas + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.save(); + ctx.translate(canvas.width / 2, canvas.height / 2); + + // Draw the robot and it's movement + drawGrid(ctx, 600, 50); + drawRobot(ctx, robot); + + // Animation for testing + xSpeed = xSpeed + xDir; + ySpeed = ySpeed + yDir; + if (xSpeed > 100) + xDir = -1; + else if (xSpeed < -100) + xDir = 1; + + if (ySpeed > 100) + yDir = -0.8; + else if (ySpeed < -100) + yDir = 0.8; + robot.drive(xSpeed, ySpeed, 0, 500); + + // Do it all over again + requestAnimationFrame(animate); + ctx.restore(); +} + +animate(); \ No newline at end of file