您的问题不是关于模拟电子运动，而是更多关于在处理中有效地绘制梯度。我看到您已经从示例 > 基础 > 颜色 > RadialGradient示例开始。请注意，示例本身运行速度很慢，可能是因为重点放在如何使用颜色 (HSB) 和绘图功能上，而不是性能。
您可以做的是使用PGraphics或PImage缓存渐变，这让您更舒服。
这是一个使用 PGraphics 的示例，如果您不习惯使用像素，这可能会更简单：
PImage e;
void setup(){
size(500,500);
e = getElectronImg(30,30,0,100,100);//create a cached drawing
}
void draw(){
background(255);
translate(width * .5, height * .5);
float a = frameCount * .1;
image(e,100*cos(a), 50*sin(a));
}
PImage getElectronImg(int w,int h,int hue,int satMax,int brightness){
PGraphics electron = createGraphics(w+1,h+1);//create a PGraphics object
electron.beginDraw();//init drawing using the same Processing drawing functions
electron.colorMode(HSB,360,100,100);
electron.background(0,0);//transparent bg
electron.noStroke();
int cx = electron.width/2;
int cy = electron.height/2;
for (int r = w; r > 0; --r) {
electron.fill(hue,map(r,0,w,satMax,0),brightness);
electron.ellipse(cx, cy, r, r);
}
electron.endDraw();
return electron;
}
还值得注意的是，PGraphics 扩展了 PImage，因此可以像使用image()函数和其他 PImage 一样显示。
这是使用像素完成的相同缓存概念：
PImage e;
void setup(){
size(500,500);
e = getElectronImg(30,30,0,100,100);
}
void draw(){
background(255);
translate(width * .5, height * .5);
float a = frameCount * .1;
image(e,100*cos(a), 50*sin(a));
}
PImage getElectronImg(int w,int h,int hue,int satMax,int brightness){
pushStyle();//isolate drawing styles such as color Mode
colorMode(HSB,360,100,100);
PImage electron = createImage(w,h,ARGB);//create an image with an alpha channel
int np = w * h;//total number of pixels
int cx = electron.width/2;//center on x
int cy = electron.height/2;//center on y
for(int i = 0 ; i < np; i++){//for each pixel
int x = i%electron.width;//compute x from pixel index
int y = (int)(i/electron.width);//compute y from pixel index
float d = dist(x,y,cx,cy);//compute distance from centre to current pixel
electron.pixels[i] = color(hue,map(d,0,cx,satMax,0),brightness,map(d,0,cx,255,0));//map the saturation and transparency based on the distance to centre
}
electron.updatePixels();//finally update all the pixels
popStyle();
return electron;
}
当然，这将使使用更多电子变得容易。偏离真实电子运动的主题，这里有一些有趣的测试，通过对 draw() 进行微调：
void draw(){
background(255);
translate(width * .5, height * .5);
for(int i = 0 ; i < 200 ; i++){
float a = (frameCount * .025 + (i*.1));
image(e,(100+i)*cos(a + i), (50+i)*sin(a + i));
}
}
void draw(){
background(255);
translate(width * .5, height * .5);
for(int i = 0 ; i < 1000 ; i++){
float a = (frameCount * .025 + (i*.1));
image(e,(100+(i * .25))*cos(a + i), (50+(i * .25))*sin(a + i));
}
}
void draw(){
background(255);
translate(width * .5, height * .5);
scale(.25);
for(int i = 0 ; i < 5000 ; i++){
float a = (frameCount * .025 + (i*.1));
image(e,sin(a) * (100+(i * .5))*cos(a + i), (50+(i * .25))*sin(a + i));
}
}
玩得开心！
现在您可以在此处实际运行代码（使用键 1、2、3、4 更改演示）：
var e,demo = 2;
function setup(){
createCanvas(500,500);
e = getGradientImg(30,30,0,100,100);
}
function draw(){
background(255);
translate(width * .5, height * .5);
if(demo == 1){
var a = frameCount * .1;
image(e,100*cos(a), 50*sin(a));
}
if(demo == 2){
for(var i = 0 ; i < 200 ; i++){
var a = (frameCount * .025 + (i*.1));
image(e,(100+i)*cos(a + i), (50+i)*sin(a + i));
}
}
if(demo == 3){
for(var i = 0 ; i < 1000 ; i++){
var a = (frameCount * .025 + (i*.1));
image(e,(100+(i * .25))*cos(a + i), (50+(i * .25))*sin(a + i));
}
}
if(demo == 4){
scale(.2);
for(var i = 0 ; i < 5000 ; i++){
var a = (frameCount * .025 + (i*.1));
image(e,sin(a) * (100+(i * .5))*cos(a + i), (50+(i * .25))*sin(a + i));
}
}
}
function keyReleased(){
if(key === '1') demo = 1;
if(key === '2') demo = 2;
if(key === '3') demo = 3;
if(key === '4') demo = 4;
}
function getGradientImg(w,h,hue,satMax,brightness){
push();//isolate drawing styles such as color Mode
colorMode(HSB,360,100,100);
var gradient = createImage(w,h);//create an image with an alpha channel
var np = w * h;//total number of pixels
var np4 = np*4;
var cx = floor(gradient.width * 0.5);//center on x
var cy = floor(gradient.height * 0.5);//center on y
gradient.loadPixels();
for(var i = 0 ; i < np4; i+=4){//for each pixel
var id4 = floor(i * .25);
var x = id4%gradient.width;//compute x from pixel index
var y = floor(id4/gradient.width);//compute y from pixel index
var d = dist(x,y,cx,cy);//compute distance from centre to current pixel
//map the saturation and transparency based on the distance to centre
gradient.pixels[i] = hue;
gradient.pixels[i+1] = map(d,0,cx,satMax,0);
gradient.pixels[i+2] = brightness;
gradient.pixels[i+3] = map(d,0,cx,255,0);
}
gradient.updatePixels();//finally update all the pixels
pop();
return gradient;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/p5.min.js"></script>