diff --git a/script.js b/script.js index 976e925..a663720 100644 --- a/script.js +++ b/script.js @@ -190,21 +190,36 @@ const ctx = canvas.getContext('2d'); // Get CSS variables for use in canvas const rootStyles = getComputedStyle(document.documentElement); -function drawGrid(ctx, sideLength, gridSquareSize) { +function drawGrid(ctx, sideLength, gridSquareSize, xOffset, yOffset, rotation) { + ctx.save(); + + // Apply rotation transform + ctx.rotate(-rotation); + ctx.strokeStyle = rootStyles.getPropertyValue('--grid-color'); ctx.lineWidth = 1; + const startX = (-sideLength / 2) - xOffset; + const endX = (sideLength / 2) - xOffset; + const startY = (-sideLength / 2) - yOffset; + const endY = (sideLength / 2) - yOffset; - for (let i = -sideLength / 2; i <= sideLength / 2; i += gridSquareSize) { + // Draw vertical lines + for (let i = startX; i <= endX; i += gridSquareSize) { ctx.beginPath(); ctx.moveTo(i, -sideLength / 2); ctx.lineTo(i, sideLength / 2); ctx.stroke(); + } + // Draw horizontal lines + for (let i = startY; i <= endY; i += gridSquareSize) { ctx.beginPath(); ctx.moveTo(-sideLength / 2, i); ctx.lineTo(sideLength / 2, i); ctx.stroke(); } + + ctx.restore(); } function drawModule(ctx, module) { @@ -266,23 +281,29 @@ function drawRobot(ctx, robot) { let robot = new SwerveDrive(PresetConfigs.eightWheel(200)); let xSpeed = -100; let xDir = 1; + let ySpeed = -100; let yDir = 0.8; + +let turnSpeed = -1; +let turnDir = 0.01; +let robotRotation = 0; // Track cumulative robot rotation for grid display + +let gridSquareSize = 25; +let xGridOffset = 0; +let yGridOffset = 0; robot.drive(xSpeed, ySpeed, 0, 500); -function animate(timestamp) { +function animate() { // 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; + xSpeed += xDir; + ySpeed += yDir; + turnSpeed += turnDir; if (xSpeed > 100) xDir = -1; else if (xSpeed < -100) @@ -292,11 +313,32 @@ function animate(timestamp) { yDir = -0.8; else if (ySpeed < -100) yDir = 0.8; - robot.drive(xSpeed, ySpeed, 0, 500); + + if (turnSpeed > 1) + turnDir = -0.01; + else if (turnSpeed < -1) + turnDir = 0.01; + + + // Animate the grid with robot movement + let offsetSpeedDivisor = (100 - gridSquareSize <= 0 ? 1 : 100 - gridSquareSize); + console.log(offsetSpeedDivisor); + xGridOffset = (xGridOffset + (xSpeed / offsetSpeedDivisor) % gridSquareSize); + yGridOffset = (yGridOffset + (ySpeed / offsetSpeedDivisor) % gridSquareSize); + + // Accumulate robot rotation based on turn speed (convert to radians) + robotRotation += turnSpeed * 0.01; // Scale factor for reasonable rotation speed + + // Draw the robot and it's movement. Grid should be oversized so movement + // doesn't find the edge of the grid + drawGrid(ctx, canvas.width * 2, gridSquareSize, xGridOffset, yGridOffset, robotRotation); + drawRobot(ctx, robot); + + robot.drive(xSpeed, ySpeed, turnSpeed, 500); // Do it all over again - requestAnimationFrame(animate); ctx.restore(); + requestAnimationFrame(animate); } animate(); \ No newline at end of file diff --git a/styles.css b/styles.css index 85c2416..cdecc50 100644 --- a/styles.css +++ b/styles.css @@ -23,7 +23,7 @@ --shadow: 0 4px 6px rgba(0, 0, 0, 0.3); - --grid-color: #e4e4e733; + --grid-color: #e4e4e78c; --robot-frame-color: #1e81bf; --robot-fill-color: #5f9ec4; --swerve-module-color: #1e81bf;