自定义斜率函数失效：为何无法实现p5.js小球斜向移动？

Let’s break down what’s going wrong with your code and fix it step by step—no jargon, just straightforward fixes:

Key Issues in Your Current Code #

• Critical Typo: In your slope function, you wrote var gg2 = y2-y2;—that should be y2 - y1! Subtracting y2 from itself always gives zero, so your slope calculation was always returning 0 (meaning the ball never moved vertically).
• Incomplete Line Formula: You weren’t using the full point-slope equation for a line. The slope alone isn’t enough—you need to account for where the line starts (your initial point) to get the correct y-value for any given x.
• Missing Parameter: When calling graphY(ggs*ex), you didn’t pass the cHI parameter it needs. Since this function is flipping the y-axis (to match p5.js’ inverted coordinate system where 0 is at the top), we need to pass the canvas height here.
• Unfinished Draw Loop: Your draw code was cut off, so we’ll add the logic to update the ball’s position each frame.

Corrected Code with Explanations #

// Flip y-coordinate to match p5.js' inverted axis (0 at top, height at bottom)
function graphY(num, cHI) {
  return cHI - num;
}

// Calculate y for a given x using two points (x1,y1) and (x2,y2)
function slope(x1, y1, x2, y2, ex) {
  // Correct slope calculation: rise over run
  const run = x2 - x1;
  const rise = y2 - y1;
  const slopeValue = rise / run;
  
  // Full point-slope formula to get the exact y for the input x (ex)
  const standardY = slopeValue * (ex - x1) + y1;
  
  // Flip the y-coordinate to fit p5.js' system
  return graphY(standardY, height);
}

let slipX = 100;
// Initial y matches the starting point's flipped coordinate
let slipY = graphY(500, 650);

function setup() {
  createCanvas(1000, 650);
}

function draw() {
  background(200); // Clear canvas each frame to avoid trail
  
  // Draw the ball
  ellipse(slipX, slipY, 20, 20);
  
  // Define your start and end points (using standard math coordinates)
  const startX = 100;
  const startY = 500;
  const endX = 900;
  const endY = 100;
  
  // Update x position (adjust the number to change speed)
  slipX += 2;
  
  // Calculate corresponding y for current x
  slipY = slope(startX, startY, endX, endY, slipX);
  
  // Stop the ball when it reaches the end point
  if (slipX >= endX) {
    slipX = endX;
    slipY = graphY(endY, height);
  }
}

What Changed? #

1. Fixed Slope Calculation: Now we properly compute the rise (difference in y-values) instead of a zero value.
2. Full Line Equation: Using y = m*(x - x1) + y1 ensures we get the exact y-value for any x along the line between your two points.
3. Proper Axis Flipping: We pass the canvas height to graphY to convert standard math coordinates (0 at bottom) to p5.js’ system (0 at top).
4. Complete Draw Loop: The ball moves right each frame, calculates its y-position using the fixed slope function, and stops when it reaches the end point.

This should make your ball move smoothly along the diagonal line you want!

内容的提问来源于stack exchange，提问作者Coding King2