この時点で、問題を解決するための数学よりも、プログラミングの基礎を習得することの方が心配になるはずです。実際、ここでは数学の問題を非常に単純にして、コードが複雑になりすぎないようにしましょう。パターンが正方形で、円の中心から中心までの距離だけに関心があるとしましょう。パターン」/正方形。
たとえば、ellipse() 関数は 1 つのことしか行いません。画面上に楕円を描画しますが、使用する楕円のプロパティ (位置やサイズなど) を追跡するために何かが必要になります。
プロパティを追跡する 1 つの方法は、それらを配列に格納することです。
int numEllipses = 100;
float[] ellipseXValues = new float[numEllipses];
float[] ellipseYValues = new float[numEllipses];
float[] ellipseSizeValues = new float[numEllipses];
//etc.
複数の楕円「オブジェクト」があるため、プロパティごとに配列を使用します。パターンについても同様です。配列にまだ慣れていない場合は、この方法で作業することをお勧めします。コードが非常に速く長くなることに気付くでしょうが、学ぶときはコードがどのように見えるかはそれほど重要ではありません。
これを行う別の方法は、クラスを使用することです。クラスが優れているのは、思いついたアイデアに関連するプロパティと機能をカプセル化できるからです。たとえば、独自のEllipse
クラス、またはPattern
使用するプロパティ (位置、色など) を保持するクラスを作成できますが、関数 (楕円が画面 1 にレンダリングされる 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
するプロパティを持つクラスを持つことができます: 2 人用のバイク、4 人用の車など。同様に、クラスを持つことができ、さまざまなプロパティを持つことができます。 /それに関連する変数: ストライプ/ドットの数、色のリストなどnumberOfWheels
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
}
定義/クラスとオブジェクト ( newでインスタンス化) の違いに注意してください。クラスにまだ慣れていない場合は、Daniel Shiffmanの優れたオブジェクト チュートリアルを参照してください。Processing では、 Examples > Basics > Objects > Objectsを調べることができます。
(あまり重要ではありません: map()関数を使用して、マウスの位置をサイズや色などの円のプロパティに簡単にリンクしています。)
独自のタイプ/クラスを作成できるようになったので、そのようなオブジェクトの配列を作成することもできます。Processing に同梱されている基本的な例があります: Examples > Basics > Arrays > ArrayObjects
Circle クラス (および非常によく似た Square) クラスを 2 つの別個の配列で一緒に使用し、距離をチェックする方法は次のとおりです。
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()を使用)。
これは簡単なプレビューです。小さな四角形がパターンのように「ふり」、周囲の円の色に影響を与えます。

コードをオンラインまたは以下で実行することもできます。
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>
うまくいけば、これは問題に対処するための基本的な方法の 1 つを説明します。構文といくつかのプログラミングの概念に慣れてきたら、もう少し多くのことに飛び込むのがはるかに簡単になるはずです。
- 配列は固定サイズであり、 ArrayListを調べることができるため、配列が多少制限される場合があります。
- 基本的な距離関数は複雑なパターンに対して十分に正確ではないことがわかり、距離を計算する他の方法を見つけることができます。
幸運を