【簡単】ソートを使うプログラミングアート

文字よりも、図などの方がわかりやすいと思われる方は少なくありません

今回は

プログラミングで描いた作品を元に

プログラミングについて学んでみよう

そんな回です

それでは

ここで起こっていることとは？
ソートとは
プログラムへ
作品として
まとめ

ここで起こっていることとは？

はい、

今回見ていく作品はこちらです！

どうでしょうか

なんとなく規則的な雰囲気はしていると思います

パッと見ただけでわかるのはすごいです

まあ、タイトルに書いてあるんですけど。。。

この作品

画面上部分と下部分が大きく異なっていますよね

他にも

正方形が斜めに流れていく。。。

ある高さから変化しなくなる。。。

あなたにはどう見えましたか？

あなたから、どう見えて、何を感じたかを大切にしたいです

よろしければTwitterなどで意見お聞かせください　→　Twitter

さて、ここで何が起こったのか

結論からいうと、

ソート

という処理をしています

詳しくは

次の章にて見ていきましょう！

ソートとは

並び替えです！

すごく簡単にいうとです。。。

ソート (英: sort) は、データの集合を一定の規則に従って並べること。日本語では整列（せいれつ）と訳される^[要出典]。以前^[いつ?]はその原義から分類という訳語が充てられていた^[1]。
Wikipedia

順位だとかを昇順、降順したりするって感じですね

1 , 10 , 3 , 5 , 8

左から右へ、小さいものから大きいものとなるように並び替える

すると

1 , 3 , 5 , 8 , 10

となりますよね

ここでソートが行われているんです

それを利用して

この作品ができています

色の要素はプログラミングの場合いくつか書き方はありますが

Processingにてrgb()表記で書いているのでRGBとして考えます

ここあたりは別記事にて書いてあるのでよければどうぞ

RGBはそれぞれが0~255となっています

つまり、数値なんです！

ということは

最初はランダムで置いているけど

ソートすることによって

順番にすることができるんです

それを実際に行ったのが今回の作品なんです

プログラムへ

自分のプログラム内ではこのような処理を行っています

void colsort(int[] r,int[] g, int[] b){
      for(int j = i + 1; j < r.length; j++){
      
     //r要素をソートする 
     if(r[j] < r[j-1]){
      int t = r[j];
      r[j] = r[j-1];
      r[j-1] = t;
     }
     //g要素をソートする
     if(g[j] < g[j-1]){
      int t = g[j];
      g[j] = g[j-1];
      g[j-1] = t;
     }
     //b要素をソートする
     if(b[j] < b[j-1]){
      int t = b[j];
      b[j] = b[j-1];
      b[j-1] = t;
     }
    }
}

実は、もう一つ大きなfor文が必要なのですが

Processingの性質などから入れていません

なので、

より簡単にすると、こうなります

int[] arr = {1,10,3,5,8};

for(int i = 0; i < arr.length ; i++)
{
 for(int j = i + 1; j < arr.length; j++)
 {
  if(arr[i] > arr[j])
  {
   int  t = arr[i];
   arr[i] = arr[j];
   arr[j] = t;
  }
 }
}

まずは、コピペしてどう動くのか試してみるといいですね

最小の数を探して左に移動する

これを意識してみてください

流れを軽く説明します

①　　１　１０　３　５　８

1と10を比べて10の方が大きいのでそのまま

（一番左の数が最小になったので、1が確定）

②　　１　３　１０　５　８

10と3を比べて10の方が大きいので場所を入れ替え

（左から二番目が二番目に小さい3で確定）

③　　１　３　５　１０　８

10と5を比べて10の方が大きいので場所を入れ替え