在這一點上，您可能應該更多地關注編程基礎知識，而不是解決問題背後的數學問題。事實上，我們現在讓數學問題變得非常簡單，所以代碼不會太複雜：讓我們假裝你的模式是正方形的，而你只關心從圓心到「中心」的距離，圖案'/平方。例如橢圓（）函數只會做一件事 - 將在屏幕上繪製一個橢圓，但您需要一些東西來跟蹤您使用的橢圓的屬性（如位置和大小）。
一個保持性能的跟蹤方法是將它們存儲在一個數組：
int numEllipses = 100;
float[] ellipseXValues = new float[numEllipses];
float[] ellipseYValues = new float[numEllipses];
float[] ellipseSizeValues = new float[numEllipses];
//etc.
對於每個屬性，你會使用一個數組，因爲你有多個橢圓形「對象」。類似於模式。如果你不熟悉數組，那麼以這種方式做事是一個很好的練習。你會注意到你的代碼將會非常快速地運行，但是當你學習時代碼看起來不那麼重要：它更多的是理解和跟蹤你所做的事情（而不是「比可以咀嚼的東西更多的東西」）。
另一種方法是使用類。類很酷，因爲它們允許你封裝與你想法相關的屬性和功能。例如，您可以創建自己的Ellipse類或Pattern類，該類將保存要使用的屬性（如位置，顏色等），但也可以具有函數（如Ellipse將呈現其自身的函數（如draw（）函數）屏幕一種方式，但另一種模式）等等。 下面是一個例子：
class Circle{
float x,y,vx,vy,size;//store position(x,y), velocity(vx,vy) and size
color clr; //store color
Circle(float ax,float ay,float as,color ac){
x = ax;
y = ay;
size = as;
clr = ac;
vx = random(-.1,.1);//random velocity
vy = random(-.1,.1);
}
void update(int w,int h){
x += vx;//update position based on velocity
y += vy;
if(x < 0 || x > w) vx *= -1;//check bounds and flip velocity if there's a collision
if(y < 0 || y > h) vy *= -1;
}
void draw(){
pushStyle();//start isolating drawing commands
noStroke();
fill(clr);
ellipse(x,y,size,size);
popStyle();//stop isolating drawing commands
}
}
類就像是一個模板/藍圖 - 它可以是任何你想要的。例如，您可以有一個Vehicle類，該類有一個屬性numberOfWheels，它確定從該類創建的實例/對象的外觀如何：2個自行車，4個汽車等。同樣，您可以有一個Pattern類，它可能有與其相關的各種屬性/變量：條紋/點，數量，顏色列表等
下面是如何使用Circle類一個基本的例子：
Circle c;
void setup(){
size(400,400);
smooth();
c = new Circle(200,200,20,color(192));//create a new object from the template/class using the *new* keyword
}
void draw(){
background(255);
c.x = mouseX;//access and modify properties of the object
c.y = mouseY;
c.size = map(mouseX,0,width,20,200);
c.clr = color(map(mouseY,0,height,0,240));
c.draw();//call a function/method of the object
}
通知之間的區別定義/類和對象（用新的實例化）。 如果你不熟悉課程已經檢查出Daniel Shiffman的優秀Objects tutorial。在處理中，您可以瀏覽示例>基本信息>對象>對象。
（不那麼重要了。我使用的是map()功能可輕鬆連接鼠標位置一樣大小和顏色圓的性質）現在
，你可以創建自己的類型/類，你還可以創建這些對象的數組。 有一個基本的例子附帶處理：例子>基本>陣列> ArrayObjects
下面是我們如何使用Circle類（和一個非常類似的廣場）一起上課，在兩個不同的陣列和檢查的距離：
int maxCircles = 20;
int maxSquares = 3;
float minDist = 50;
Circle[] circles = new Circle[maxCircles];//create an array Circle objects/instances
Square[] squares = new Square[maxSquares];
void setup(){
size(400,400);
smooth();
colorMode(HSB,360,100,100);
for(int i = 0; i < maxCircles; i++) circles[i] = new Circle(random(width),random(height),random(4,10),color(0,0,100));
for(int i = 0; i < maxSquares; i++) squares[i] = new Square(random(width),random(height),random(4,10),color(240));
}
void draw(){
background(0,0,95);
for(int i = 0; i < maxCircles; i++){
circles[i].update(width,height);
for(int j = 0; j < maxSquares; j++){
squares[j].update(width,height);
//use the dist() function to compute distances
float distance = dist(circles[i].x,circles[i].y,squares[j].x,squares[j].y);
if(distance < minDist){//based on that, if within a threshold, map colours/etc.
circles[i].clr = color( 0,map(distance,0,minDist,100,0),100);
}
squares[j].draw();
}
circles[i].draw();
}
}
class Circle{
float x,y,vx,vy,size;//store position(x,y), velocity(vx,vy) and size
color clr; //store color
Circle(float ax,float ay,float as,color ac){
x = ax;
y = ay;
size = as;
clr = ac;
vx = random(-.1,.1);//random velocity
vy = random(-.1,.1);
}
void update(int w,int h){
x += vx;//update position based on velocity
y += vy;
if(x < 0 || x > w) vx *= -1;//check bounds and flip velocity if there's a collision
if(y < 0 || y > h) vy *= -1;
}
void draw(){
pushStyle();//start isolating drawing commands
noStroke();
fill(clr);
ellipse(x,y,size,size);
popStyle();//stop isolating drawing commands
}
}
class Square{
float x,y,vx,vy,size;
color clr;
Square(float ax,float ay,float as,color ac){
x = ax;
y = ay;
size = as;
clr = ac;
vx = random(-.02,.02);//random velocity
vy = random(-.02,.02);
}
void update(int w,int h){
x += vx;
y += vy;
if(x < 0 || x > w) vx *= -1;
if(y < 0 || y > h) vy *= -1;
}
void draw(){
pushStyle();
noStroke();
fill(clr);
rect(x-size/2,y-size/2,size,size);
popStyle();
}
}
正如您在註釋代碼中所看到的，在複雜的概念被簡化/封裝後，它只是循環訪問數組和檢查距離（使用dist()）。
這裏有一個快速預覽，其中小方塊「假裝」是圖紋和影響圈的顏色自己周圍：
您還可以run the code online或波紋管：
var maxCircles = 20;
var maxSquares = 3;
var minDist = 150;
var circles = new Array(maxCircles);
var squares = new Array(maxSquares);
function setup(){
createCanvas(400,400);
smooth();
colorMode(HSB,360,100,100);
for(var i = 0; i < maxCircles; i++) circles[i] = new Circle(random(width),random(height),random(4,10),color(0,0,100));
for(i = 0; i < maxSquares; i++) squares[i] = new Square(random(width),random(height),random(4,10),color(240));
}
function draw(){
background(0,0,95);
for(var i = 0; i < maxCircles; i++){
circles[i].update(width,height);
for(var j = 0; j < maxSquares; j++){
squares[j].update(width,height);
var distance = dist(circles[i].x,circles[i].y,squares[j].x,squares[j].y);
if(distance < minDist){
circles[i].clr = color( 0,map(distance,0,minDist,100,0),100);
}squares[j].draw();
}
circles[i].draw();
}
}
function Circle(ax,ay,as,ac){
this.x = ax;
this.y = ay;
this.size = as;
this.clr = ac;
this.vx = random(-.1,.1);//random velocity
this.vy = random(-.1,.1);
this.update = function(w,h){
this.x += this.vx;
this.y += this.vy;
if(this.x < 0 || this.x > this.w) this.vx *= -1;
if(this.y < 0 || this.y > this.h) this.vy *= -1;
}
this.draw = function(){
push();
noStroke();
fill(this.clr);
ellipse(this.x,this.y,this.size,this.size);
pop();
}
}
function Square(ax,ay,as,ac){
this.x = ax;
this.y = ay;
this.size = as;
this.clr = ac;
this.vx = random(-.02,.02);//random velocity
this.vy = random(-.02,.02);
this.update = function(w,h){
this.x += this.vx;
this.y += this.vy;
if(this.x < 0 || this.x > this.w) this.vx *= -1;
if(this.y < 0 || this.y > this.h) this.vy *= -1;
}
this.draw = function(){
push();
noStroke();
fill(this.clr);
rect(this.x-this.size/2,this.y-this.size/2,this.size,this.size);
pop();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/p5.min.js"></script>
希望這個解釋這是處理這個問題的一個基本方法。你發現自己熟悉的語法和一些編程的概念之後應該是一個更容易潛入稍微更多的東西：
- 你可能會發現陣列一定程度限制，因爲他們是固定的大小和可探索ArrayList
- 您可能會發現基本距離函數對於複雜圖案來說不夠精確，並且可以找到其他計算距離的方法。
古德勒克
距離如何定義？圓/橢圓的中心之間的距離或邊界之間的距離？ – Ridcully
圓圈的中心和圖案的邊框之間。 – kikkpunk
你可以發佈圖案的圖片嗎？我認爲這只是橢圓形，但再次讀你的問題，你還提到矩形和線條。 – Ridcully