2023/09/28

DNA翻轉圖

1. 點、線、面

void setup()
{
  size(500, 500);
}
float x=250, y=250;
float dx=1, dy=1;
void draw()
{
  background(0);
  ellipse(x, y, 5, 5);
  x += dx; 
  y += dy;
}

2. 改變亂數值

void setup()
{
  size(500, 500);
  dx = random(-1, +1);
  dy = random(-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;
}

3. 使用陣列迴圈

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); // dx = random(-1, +1);
    dy[i] = random(-1, +1); // dy = random(-1, +1);
  }
}

float []x = new float[20]; // float x=250, y=250;
float []y = new float[20];
float []dx = new float[20]; // float dx=1, dy=1;
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];
  }
}

4. 將兩個相近的點連線
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); // dx = random(-1, +1);
    dy[i] = random(-1, +1); // dy = random(-1, +1);
  }
}

float []x = new float[20]; // float x=250, y=250;
float []y = new float[20];
float []dx = new float[20]; // float dx=1, dy=1;
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(255, 0, 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];
  }
}



















5. 增加更多線/點
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); // dx = random(-1, +1);
    dy[i] = random(-1, +1); // dy = random(-1, +1);
  }
}
int N = 40; 
float []x = new float[N]; // float x=250, y=250;
float []y = new float[N];
float []dx = new float[N]; // float dx=1, dy=1;
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)); // 換顏色, (255)是白色, (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];
  }
}











6. 增加吸引力
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); // dx = random(-1, +1);
    dy[i] = random(-1, +1); // dy = random(-1, +1);
  }
}
int N = 50; 
float []x = new float[N]; // float x=250, y=250;
float []y = new float[N];
float []dx = new float[N]; // float dx=1, dy=1;
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)); // 換顏色, (255)是白色, (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];
  }
}

Color 做顏色

















































void setup()
{
  size(500, 500);
  colorMode(HSB, 360, 100, 100); 
  // H: 0-360%. S:0-100%, B:0-100%
  
}
void draw()
{
  background(frameCount%360, 48, 93);
}











畫彩虹
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);
  }
}

















小遊戲
建立一個5x5的圈圈, 隨機填色, 其中會有一個相近色
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(50, 100);
  b = random(50, 100); // 50以上的亮度比較亮
  dh = random(-10, +10);
  ds = random(-10, +10);
  db = random(-10, +10);
}
void draw()
{
  background(226, 69, 73); 
  for (int i=0; i<5; i++){
    for (int j=0; j<5; j++){
      fill(h, s, b); // 填色
      fill(h+dh, s+ds, b+db);
      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);  // +30修正偏差位置
    }
  }
}