You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Processing中实现绿色慢速圆形的顺时针旋转(以中心为圆心、指定半径)

How to Make the Green Slow Circle Spin Clockwise Around the Center

Got it, let's tweak your code so that green slow circle spins smoothly around the canvas center at the radius you want (200 or 150). The original code moves it horizontally, but we can use basic trigonometry to get that circular motion you're after.

Key Ideas for Circular Rotation

To make an object orbit a center point, we rely on cosine and sine functions to calculate its position based on an increasing angle. Here's the core logic:

  • Track an angle that increments slowly over time (this controls how fast the circle spins)
  • Use centerX + radius * cos(angle) to get the circle's x-position
  • Use centerY + radius * sin(angle) to get the circle's y-position
  • Processing uses radians for trigonometric functions, so we just need to nudge the angle by a small value each frame

Modified Full Code

float slowAngle = 0; // Tracks rotation progress for the green circle
float slowRadius = 200; // Distance from center (swap to 150 if you prefer)
float fast_circle_x = 0; 

void setup() { 
  size(400,400); 
  noStroke(); 
} 

void draw() { 
  background(#1BB1F5); 
  float centerX = width / 2; // Canvas center x-coordinate
  float centerY = height / 2; // Canvas center y-coordinate

  // Keep your original random size logic for the slow circle
  float slow_circle_size = 50; 
  if(random(10) > 9) { 
    slow_circle_size = 60; 
  } 
  if (random(10) < 5) { 
    slow_circle_size = 30; 
  } else{ 
    slow_circle_size = 40; 
  } 

  // Calculate position for the rotating green circle
  float slow_circle_x = centerX + slowRadius * cos(slowAngle);
  float slow_circle_y = centerY + slowRadius * sin(slowAngle);

  fill(#C1FF3E); 
  ellipse(slow_circle_x, slow_circle_y, slow_circle_size, slow_circle_size); 

  // Increment angle to drive rotation (smaller value = slower spin)
  slowAngle += 0.01;

  // Keep your fast circle's horizontal movement logic
  fill(#FF4800); 
  ellipse(fast_circle_x,50, 50, 50); 
  fast_circle_x = fast_circle_x + 5; 
  if(fast_circle_x > 400) { 
    fast_circle_x = 0; 
  } 
}

Quick Breakdown of Changes

  • Added slowAngle to track rotation progress, and slowRadius to set how far the circle sits from the center (tweak this to 150 if you want a tighter orbit)
  • Replaced the green circle's horizontal movement with trigonometric position calculation
  • Removed the old horizontal reset logic for the green circle (since it now rotates infinitely without needing to reset)
  • Adjusted the green circle's y-position to orbit around the canvas center, instead of being fixed at 50
  • The slowAngle += 0.01 line controls spin speed: try 0.005 for even slower rotation, or 0.02 for a bit faster

If you ever want counter-clockwise rotation, just change the increment to a subtraction (slowAngle -= 0.01).

内容的提问来源于stack exchange,提问作者Zeynep Bozdayi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.30 03:27:29