l

点の数は多いほど周囲との間隔は狭くなり、面としてはっきり知覚されるようになってくる。

void setup() {
size(500, 500);
background(255);
fill(0);
translate(width/2, height/2);
rotate(radians(-18));
smooth();
for(int i=0; i<5; i++) {
float x = cos(radians(72*i))*150;
float y = sin(radians(72*i))*150;
ellipse(x, y, 80, 80);
}
saveFrame("1-3-5.jpg");
}


上図と同位置に大きさを変えた点が存在しているが、視線の移動順序がはっきりしているので、正5角形ではなく星形に感じやすい。

void setup() {
size(500, 500);
background(255);
fill(0);
translate(width/2, height/2);
rotate(-HALF_PI);
smooth();
int[] size = {100, 60, 20, 80, 40};
float[] x = new float[5];
float[] y = new float[5];
float[] ps1 = new float[2];
float[] ps2 = new float[2];
for(int i=0; i<5; i++) {
x[i] = cos(radians(72*i))*150;
y[i] = sin(radians(72*i))*150;
ellipse(x[i], y[i], size[i], size[i]);
}
for(int i=0; i<5; i++) {
int src = i;
int dst = src+3;
if(dst>4) {
dst -= 5;
}
ps1 = arrowPoint(x[src], y[src], x[dst], y[dst], size[src]*0.5);
ps2 = arrowPoint(x[dst], y[dst], x[src], y[src], size[dst]*0.5);
if(i==2) {
stroke(100);
drawArrow(ps1[0], ps1[1], ps2[0], ps2[1], 210);
} else {
stroke(0);
drawArrow(ps1[0], ps1[1], ps2[0], ps2[1], 260-size[dst]);
}
}
saveFrame("1-3-6.jpg");
}
float[] arrowPoint(float fromX, float fromY, float toX, float toY, float d) {
float[] pos = new float[2];
float dx = toX - fromX;
float dy = toY - fromY;
float angle = atan2(dy, dx);
pos[0] = fromX + cos(angle) * d;
pos[1] = fromY + sin(angle) * d;
return pos;
}
void drawArrow(float fromX, float fromY, float toX, float toY, int len) {
float dx = toX - fromX;
float dy = toY - fromY;
float angle = atan2(dy, dx);
pushMatrix();
translate(fromX, fromY);
rotate(angle);
line(0, 0, len, 0);
line(len, 0, len-10, 5);
line(len, 0, len-10, -5);
popMatrix();
}



use strict;
use warnings;
my $str = $ARGV[0];
my $search = "cat";
if(index($str, $search) != -1) {
print "$str contains $search";
}

index関数は文字列が含まれていればその位置を、含まれていなければ-1を返す。
引数の受け取りはmy $str = shift;やmy ($str) = @ARGV;とも書ける。

shiftは配列の一番若い要素を取り出す。 ARRAYを省略すると、 メインプログラムでは @ARGVをshiftし、 サブルーチンでは@_ をshiftする。

void limit(float max) {
if(mag() > max) {
normalize();
mult(max);
}
}

PVectorクラス内の、ベクトルの絶対値を制限するメソッド。mag()で絶対値がfloatで返ってくるのでmaxと比較し、超えていたらnormalize()で単位ベクトルにした後maxをかける。

大きさが等しくない2点では、視線はまず大きな点に集まり次に小さな点に移動する。3次元的であるが、感覚的な方向性は常に大→小、遠→近とは限らない。

void setup() {
size(500, 500);
background(255);
smooth();
fill(0);
ellipse(130, 250, 80, 80);
ellipse(350, 250, 40, 40);
drawArrow(200, 240, 300, 240, 100);
stroke(100);
drawArrow(300, 260, 200, 260, 100);
saveFrame("1-3-3.jpg");
}
void drawArrow(float fromX, float fromY, float toX, float toY, int len) {
float dx = toX - fromX;
float dy = toY - fromY;
float angle = atan2(dy, dx);
pushMatrix();
translate(fromX, fromY);
rotate(angle);
line(0, 0, len, 0);
line(len, 0, len-10, 5);
line(len, 0, len-10, -5);
popMatrix();
}


3点以上になると、面として感じる場合が多くなる。(虚面)

void setup() {
size(500, 500);
background(255);
smooth();
fill(0);
ellipse(250, 120, 80, 80);
ellipse(120, 320, 80, 80);
ellipse(380, 320, 80, 80);
float[] p1 = new float[2];
float[] p2 = new float[2];
p1 = arrowPoint(120, 320, 250, 120, 60);
p2 = arrowPoint(250, 120, 120, 320, 60);
drawBidirectionalArrow(p1[0], p1[1], p2[0], p2[1], 120);
p1 = arrowPoint(380, 320, 250, 120, 60);
p2 = arrowPoint(250, 120, 380, 320, 60);
drawBidirectionalArrow(p1[0], p1[1], p2[0], p2[1], 120);
p1 = arrowPoint(120, 320, 380, 320, 60);
p2 = arrowPoint(380, 320, 120, 320, 60);
drawBidirectionalArrow(p1[0], p1[1], p2[0], p2[1], 140);
saveFrame("1-3-4.jpg");
}
float[] arrowPoint(float fromX, float fromY, float toX, float toY, int d) {
float[] pos = new float[2];
float dx = toX - fromX;
float dy = toY - fromY;
float angle = atan2(dy, dx);
pos[0] = fromX + cos(angle) * d;
pos[1] = fromY + sin(angle) * d;
return pos;
}
void drawBidirectionalArrow(float fromX, float fromY, float toX, float toY, int len) {
float dx = toX - fromX;
float dy = toY - fromY;
float angle = atan2(dy, dx);
pushMatrix();
translate(fromX, fromY);
rotate(angle);
line(0, 0, 10, 5);
line(0, 0, 10, -5);
line(0, 0, len, 0);
line(len, 0, len-10, 5);
line(len, 0, len-10, -5);
popMatrix();
}


点のもつ緊張感は求心的であり、1つの点のみのときは視線はそこに集中する。

//1-3-1
void setup() {
size(500, 500);
background(255);
smooth();
fill(0);
ellipse(width/2, height/2, 100, 100);
for(int i=0; i<8; i++) {
float angle = TWO_PI/8 * i;
float fromX = width/2 + cos(angle) * 180;
float fromY = height/2 + sin(angle) * 180;
drawArrow(fromX, fromY, width/2, height/2, 100);
}
saveFrame("1-3-1.jpg");
}
void drawArrow(float fromX, float fromY, float toX, float toY, int len) {
float dx = toX - fromX;
float dy = toY - fromY;
float angle = atan2(dy, dx);
pushMatrix();
translate(fromX, fromY);
rotate(angle);
line(0, 0, len, 0);
line(len, 0, len-10, 5);
line(len, 0, len-10, -5);
popMatrix();
}


視覚的に等しい力をもつ点が２つ存在すると、視線は2点間の往復をくり返し線を感じさせる。(虚線)

//1-3-2
void setup() {
size(500, 500);
background(255);
smooth();
fill(0);
ellipse(130, 150, 80, 80);
ellipse(370, 150, 80, 80);
bomb(130, 350, 50);
bomb(370, 350, 50);
drawArrow(200, 140, 300, 140, 100);
drawArrow(300, 160, 200, 160, 100);
drawArrow(200, 340, 300, 340, 100);
drawArrow(300, 360, 200, 360, 100);
saveFrame("1-3-2.jpg");
}
void bomb(int x, int y, int size) {
PVector[] vertices = new PVector[16];
for(int i=0; i<vertices.length; i++) {
float bx;
float by;
if(i%2==0) {
bx = x + cos((TWO_PI/vertices.length)*i)*size;
by = y + sin((TWO_PI/vertices.length)*i)*size;
} else {
bx = x + cos((TWO_PI/vertices.length)*i)*size*0.6;
by = y + sin((TWO_PI/vertices.length)*i)*size*0.6;
}
vertices[i] = new PVector(bx, by);
}
beginShape();
vertex(vertices[0].x, vertices[0].y);
for(int i=0; i<vertices.length; i++) {
vertex(vertices[i].x, vertices[i].y);
}
vertex(vertices[vertices.length-1].x, vertices[vertices.length-1].y);
endShape();
}
void drawArrow(float fromX, float fromY, float toX, float toY, int len) {
float dx = toX - fromX;
float dy = toY - fromY;
float angle = atan2(dy, dx);
pushMatrix();
translate(fromX, fromY);
rotate(angle);
line(0, 0, len, 0);
line(len, 0, len-10, 5);
line(len, 0, len-10, -5);
popMatrix();
}

形態に関しては非常に多種の形が考えられるが、点である以上当然大きさに限界があるので、点の範囲での複雑な形態の変化における視覚的効果を求めるのは無理がある。上図は形態はそれぞれ異なるが、それぞれが点として知覚される。


//1-2-2-1
void setup() {
size(500, 500);
background(255);
smooth();
noStroke();
fill(0);
for(int j=0; j<5; j++) {
for(int i=0; i<5; i++) {
drawDot(i*100+50, j*100+50);
}
}
saveFrame("1-2-2-1.jpg");
}
void drawDot(int x, int y) {
PVector[] vertices = new PVector[int(random(3,10))];
for(int i=0; i<vertices.length; i++) {
vertices[i] = new PVector(x+random(-5, 5), y+random(-5, 5));
}
beginShape();
curveVertex(vertices[0].x, vertices[0].y);
for(int i=0; i<vertices.length;i++) {
curveVertex(vertices[i].x, vertices[i].y);
}
curveVertex(vertices[vertices.length-1].x, vertices[vertices.length-1].y);
endShape();
}


造形的要素としての点には大きさも形態もある。大きさに関しては、同形態では無論小さい方が点として知覚され易いであろうが、だからといって他方が点以外に必ず感じられるとはいえない。上図は大小に相当の差があるが、すべて点として知覚される。


//1-2-1-1
size(500, 500);
background(255);
smooth();
noStroke();
fill(0);
int[] sizes = {10, 20, 30, 40, 50, 60};
for(int j=0; j<5; j++) {
for(int i=0; i<5; i++) {
float diameter = sizes[(int)random(sizes.length)];
ellipse(i*100+50, j*100+50, diameter, diameter);
}
}
saveFrame("1-2-1-1.jpg");


上図中央の形態は点として知覚されている。下図中央の形態もまったく同じ形態であるが点としては認めにくい。これは、より点として抵抗なく知覚される形態(この場合は正方形)の中に置かれたためである。


//1-1-1-6
size(500, 500);
background(255);
noStroke();
fill(0);
for(int j=0; j<3; j++) {
for(int i=0; i<3; i++) {
if(i==1 && j==1) {
rect((i+1)*80+i*60+10, (j+1)*110+j*20, 40, 20);
} else {
rect((i+1)*80+i*60, (j+1)*110+j*20, 60, 20);
}
}
}
saveFrame("1-1-1-6.jpg");


//1-1-1-7
size(500, 500);
background(255);
noStroke();
fill(0);
for(int j=0; j<3; j++) {
for(int i=0; i<3; i++) {
if(i==1 && j==1) {
rect((i+1)*80+i*60+10, (j+1)*110+j*20, 40, 20);
} else {
rect((i+1)*110+i*20, (j+1)*110+j*20, 20, 20);
}
}
}
saveFrame("1-1-1-7.jpg");


周囲とまったく同じ形態であるために、多少視覚的に抵抗があっても点として知覚されていた上図中央の形態が、下図のように造形的環境が変化すると、太い線が矩形として感じられる。しかし、周囲にある多数の形態は、いぜん点として感じられやすい。


//1-1-1-4
size(500, 500);
background(255);
noStroke();
fill(0);
for(int j=0; j<3; j++) {
for(int i=0; i<3; i++) {
rect((i+1)*95+i*40, (j+1)*110+j*20, 40, 20);
}
}
saveFrame("1-1-1-4.jpg");


//1-1-1-5
size(500, 500);
background(255);
noStroke();
fill(0);
for(int j=0; j<3; j++) {
for(int i=0; i<3; i++) {
if(i==1 && j==1) {
rect((i+1)*95+i*40+10, (j+1)*110+j*20-10, 20, 40);
} else {
rect((i+1)*95+i*40, (j+1)*110+j*20, 40, 20);
}
}
}
saveFrame("1-1-1-5.jpg");

点として知覚されていたものが、その形態内に他の造形要素が加わると、面として知覚されやすくなる。(この例の場合は、形態をマイナスしたとも考えられるが、明暗や色彩が存在するときには逆の明度関係になることもある)


//1-1-1-3
PFont font;
font = createFont("", 48);
size(500, 500);
background(255);
smooth();
fill(0);
stroke(0);
ellipse(width/2, height/2, 100, 100);
fill(255);
textFont(font, 48);
textAlign(CENTER, CENTER);
text("1", width/2, height/2-5);
saveFrame("1-1-1-3.jpg");