WEEK03_點線面色彩

 WEEK03

step01-1 畫出一個點

//1.點 線 面
void setup()
{
  size(500,500);//視窗的大小
}
float x=250, y=250;//點所在的位置
void draw()
{
  ellipse(x,y,5,5);//點的大小
  
}

step01-2 點向整個視窗的左下做移動

//1.點 線 面
void setup()
{
  size(500,500);//視窗的大小
}
float x=250, y=250;//點所在的位置
float dx=1, dy=1;//點從座標(250,250)的位置 向左下移動
void draw()
{
  ellipse(x,y,5,5);//點的大小
  x += dx;
  y += dy;
}


step01-3 加上背景顏色 點如果超出範圍就做反彈



//1.點 線 面
void setup()
{
  size(500,500);//視窗的大小
  dx = random(-1,+1);//dx在-1和+1中間取亂數 亂數往哪裡跑
  dy = random(-1,+1);//dy在-1和+1中間取亂數 亂數往哪裡跑
}
float x=250, y=250;//點所在的位置
float dx=1, dy=1;//點從座標(250,250)的位置 向左下移動
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;//點出出範圍 就更改位置
}

step01-4 利用迴圈 陣列 亂數 增加點的個數

//1.點 線 面
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);//dx在-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];//點出出範圍 就更改位置
  }
}
step01-5 找出點較近的其他點做相連 

//1.點 線 面
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);//dx在-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];//點出出範圍 就更改位置
  }
}
step02-1 把剛剛點陣列=20數量 用N取代 當點和點距離越近 線的顏色會越亮

//1.點 線 面
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);//dx在-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));//點和點相連的紅色線
      //if ( dist(x[i],y[i],x[k],y[k])<100 )
      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];//點出出範圍 就更改位置
  }
}

step02-2 每個頂點只要距離夠近 加一點吸引力

//1.點 線 面
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);//dx在-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));//點和點相連的紅色線
      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];//點出出範圍 就更改位置
  }
}
step03-1 利用色彩選擇器 做出背景顏色




void setup()
{  
  size(500,500);
}
void draw()
{
  background(#FA0509);
  
}

step03-2 把色彩的RGB改為HSB

void setup()
{  
  size(500,500);
  //        H:0-360度 S:0-100% B:0-100%
  colorMode(HSB, 360, 100, 100 );//把顏色從RGB->HSB
}
void draw()
{
  background(175, 97, 97);
  
}

step03-3 增加frameCount%360 做出漸變顏色


void setup()
{  
  size(500,500);
  //        H:0-360度 S:0-100% B:0-100%
  colorMode(HSB, 360, 100, 100 );//把顏色從RGB->HSB
}
void draw()
{
  background(frameCount%360, 97, 97);//顏色會漸變
  
}

step03-4 用HSB和colorMode做出彩虹

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);
  }
}

step03-5 畫出5*5的圓形 

void setup()
{
  size(300,300); 
  colorMode(HSB,360,100,100);
}
void draw()
{
  background(205,97,97);
  for( int i=0;i<5;i++ )
  {
    for(int j=0;j<5;j++ )
    {
      ellipse(30+j*60,30+i*60,60,60);
    }
  }
}

step03-6 當滑鼠按到圓形 色彩會不斷做改變

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(50,100);
  b = random(50,100);
}
void draw()
{
  background(205,97,97);
  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);//左手i 右手j 30是因為球要移到正中間
      
    }
  }
}

step03-6 當滑鼠按到顏色不同的圓形 

void setup()
{
  size(300,300); 
  colorMode(HSB,360,100,100);
  chooseColor();
}
void mousePressed()
{
  chooseColor();
}
int I,J;
float h,s,b,dh,ds,db;//ds db dh 跟h s b 很像的顏色
void chooseColor()
{
  h = random(360);
  s = random(50,100);
  b = random(50,100);
  I = int(random(5));
  J = int(random(5));
  dh = random(-10, +10);
  ds = random(-10, +10);
  db = random(-10, +10);
}
void draw()
{
  background(205,97,97);
  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);//左手i 右手j 30是因為球要移到正中間
      
    }
  }
}