首先先創造一個點(這裡用圓圈，讓點看起來比較大)。
程式碼 :
//創造一個點
void setup()
{
size(500, 500);
}
float x=250, y=250;
void draw()
{
ellipse(x, y, 5, 5);
}
---------------------------------------------------------------------------
讓點會移動。但這時點只會往右下角跑。
程式碼 : //創造一個點
void setup()
{
size(500, 500);
}
float x=250, y=250; //位置
float dx=1, dy=1;
void draw()
{
ellipse(x, y, 5, 5);
x += dx; //移動
y += dy;
}
---------------------------------------------------------------------------加上變數(random)。這的時點會隨機移動。
程式碼：
//創造一個點
void setup()
{
size(500, 500);
dx = random(-1, +1); //在-1和+1之間取一個亂數，讓點移動
dy = random(-1, +1); //在-1和+1之間取一個亂數，讓點移動
}
float x=250, y=250; //位置
float dx=1, dy=1;
void draw()
{
background(0); //背景黑色
ellipse(x, y, 5, 5);
x += dx; //移動
y += dy;
}
---------------------------------------------------------------------------設定邊界，讓點碰到邊界會反彈。程式碼：//創造一個點void setup(){size(500, 500);dx = random(-1, +1); //在-1和+1之間取一個亂數，讓點移動dy = random(-1, +1); //在-1和+1之間取一個亂數，讓點移動}float x=250, y=250; //位置float dx=1, dy=1;void draw(){background(0); //背景黑色ellipse(x, y, 5, 5);x += dx; //移動y += dy;if(x<0 || x>500) dx = -dx;if(y<0 || y>500) dy = -dy;}---------------------------------------------------------------------------讓多個點同時一起移動和反彈。程式碼：void setup() { size(500, 500); for(int i=0; i<20; i++) { x[i] = random(500); y[i] = random(500); dx[i] = random(-1, +1); //在-1和+1之間取一個亂數，讓點移動 dy[i] = random(-1, +1); //在-1和+1之間取一個亂數，讓點移動 } } float [] x = new float[20]; float [] y = new float[20]; float [] dx = new float[20]; float [] dy = new float[20]; void draw() { background(0); //背景黑色 for(int i=0; i<20; i++) { ellipse(x[i], y[i], 5, 5); x[i] += dx[i]; //移動 y[i] += dy[i]; if(x[i]<0 || x[i]>500) dx[i] = -dx[i]; if(y[i]<0 || y[i]>500) dy[i] = -dy[i]; } }
---------------------------------------------------------------------------讓靠近的點之間連線。
程式碼：
//創造一個點
void setup()
{
size(500, 500);
for(int i=0; i<20; i++)
{
x[i] = random(500);
y[i] = random(500);
dx[i] = random(-1, +1); //在-1和+1之間取一個亂數，讓點移動
dy[i] = random(-1, +1); //在-1和+1之間取一個亂數，讓點移動
}
}
float [] x = new float[20];
float [] y = new float[20];
float [] dx = new float[20];
float [] dy = new float[20];
void draw()
{
background(0); //背景黑色
for(int i=0; i<20; i++)
{
ellipse(x[i], y[i], 5, 5);
for(int k=0; k<20; k++)
{
stroke(60, 60, 0); //線的顏色
if(dist(x[i],y[i], x[k], y[k])<100)
line(x[i],y[i], x[k], y[k]);
}
x[i] += dx[i]; //移動
y[i] += dy[i];
if(x[i]<0 || x[i]>500) dx[i] = -dx[i];
if(y[i]<0 || y[i]>500) dy[i] = -dy[i];
}
}
---------------------------------------------------------------------------讓點和點之間的線改變亮度，越靠近越亮，越遠越暗。
程式碼：
void setup()
{
size(500, 500);
for(int i=0; i<N; i++)
{
x[i] = random(500);
y[i] = random(500);
dx[i] = random(-1, +1); //在-1和+1之間取一個亂數，讓點移動
dy[i] = random(-1, +1); //在-1和+1之間取一個亂數，讓點移動
}
}
int N = 35;
float [] x = new float[N];
float [] y = new float[N];
float [] dx = new float[N];
float [] dy = new float[N];
void draw()
{
background(0); //背景黑色
for(int i=0; i<N; i++)
{
ellipse(x[i], y[i], 5, 5);
for(int k=0; k<N; k++)
{
float d = dist(x[i],y[i], x[k], y[k]);
stroke(2.55*(100-d)); //線的顏色
if(d<100)
line(x[i],y[i], x[k], y[k]);
}
x[i] += dx[i]; //移動
y[i] += dy[i];
if(x[i]<0 || x[i]>500) dx[i] = -dx[i];
if(y[i]<0 || y[i]>500) dy[i] = -dy[i];
}
}
---------------------------------------------------------------------------讓點和點之間有吸引力，讓畫面比較有層次感。
void setup()
{
size(500, 500);
for(int i=0; i<N; i++)
{
x[i] = random(500);
y[i] = random(500);
dx[i] = random(-1, +1); //在-1和+1之間取一個亂數，讓點移動(速度)
dy[i] = random(-1, +1); //在-1和+1之間取一個亂數，讓點移動(速度)
}
}
int N = 35;
float [] x = new float[N];
float [] y = new float[N];
float [] dx = new float[N];
float [] dy = new float[N];
void draw()
{
background(0); //背景黑色
for(int i=0; i<N; i++)
{
ellipse(x[i], y[i], 5, 5);
for(int k=0; k<N; k++)
{
float d = dist(x[i],y[i], x[k], y[k]);
stroke(2.55*(100-d)); //線的顏色
if(d<100)
{
line(x[i],y[i], x[k], y[k]);
dx[i] += (x[k]-x[i])*0.00001;
dy[i] += (y[k]-y[i])*0.00001;
}
}
x[i] += dx[i]; //移動
y[i] += dy[i];
if(x[i]<0 || x[i]>500) dx[i] = -dx[i];
if(y[i]<0 || y[i]>500) dy[i] = -dy[i];
}
}
---------------------------------------------------------------------------人類的顏色系統 HSB
正常的顏色選取都是用RGB，但RGB是電腦的色彩系統。
---------------------------------------------------------------------------但人類的色彩系統都是用HSB。
所以把色彩模式改成HSB。
---------------------------------------------------------------------------加入frameCount，讓顏色持續變化。
程式碼：
void setup()
{
size(500, 500);
colorMode(HSB, 360, 100, 100); //H:360度, S:0~100%, B:0~100%
}
void draw()
{
background(frameCount%360, 54, 99);
//以這個為基準，依序變成不同色調。
}
---------------------------------------------------------------------------
使用範例的程式改成彩虹的顏色。
程式碼：
size(400, 400);
colorMode(HSB, 400);
for(int i=0; i<400; i++)
{
for(int j=0; j<400; j++)
{
stroke(i, 400, 400);
point(i, j);
}
}
---------------------------------------------------------------------------老師放了一個有關挑不同顏色的遊戲。
先放很多圈圈。
程式碼：
void setup()
{
size(300, 300);
colorMode(HSB, 360, 100, 100);
}
void draw()
{
background(220, 38 ,99);
for(int i=0; i<5; i++)
{
for(int j=0; j<5; j++)
{
ellipse(30+j*60, 30+i*60, 60 ,60);
}
}
}
---------------------------------------------------------------------------
加上隨機選顏色的函式。
程式碼：
void setup()
{
size(300, 300);
colorMode(HSB, 360, 100, 100);
}
void draw()
{
background(220, 38 ,99);
for(int i=0; i<5; i++)
{
for(int j=0; j<5; j++)
{
ellipse(30+j*60, 30+i*60, 60 ,60);
}
}
}
---------------------------------------------------------------------------加上滑鼠點擊然後變色的程式碼。
程式碼：
void setup()
{
size(300, 300);
colorMode(HSB, 360, 100, 100);
chooseColor();
}
void mousePressed()
{
chooseColor();
}
float h, s, b;
void chooseColor()
{
h = random(360);
s = random(38);
b = random(99);
}
void draw()
{
background(220, 38 ,99);
for(int i=0; i<5; i++)
{
for(int j=0; j<5; j++)
{
fill(h, s, b);
ellipse(30+j*60, 30+i*60, 60 ,60);
}
}
}
---------------------------------------------------------------------------
把隨機一個球加上特別不一樣的顏色。
程式碼：
void setup()
{
size(300, 300);
colorMode(HSB, 360, 100, 100);
chooseColor();
}
void mousePressed()
{
chooseColor();
}
int I, J;
float h, s, b, dh, ds, db;
void chooseColor()
{
h = random(360);
s = random(38);
b = random(99);
I = int(random(5));
J = int(random(5));
dh = random(-10, +10);
ds = random(-10, +10);
db = random(-10, +10);
}
void draw()
{
background(220, 38 ,99);
for(int i=0; i<5; i++)
{
for(int j=0; j<5; j++)
{
if(i==I && j==J) fill (h+dh, s+ds, b+db);
else fill(h, s, b);
ellipse(30+j*60, 30+i*60, 60 ,60);
}
}
}
沒有留言:
張貼留言