圓圓圈圈：利用迴圈呈現重覆的美

在進入正題之前，先請大家觀察下方的圖片。花磚雖然不是台灣傳統建築的「專屬記憶」，但飄洋過海以後落地生根，逐漸在這裡發展出自己的特色。在單一磚片上設計出花紋，透過大量且重複地排列，形成獨特的空間氛圍，也連結成我們小時候的回憶。

「重複」──在藝術表現或日常中很常見的概念，或存在於大自然的晶體結構中、或存在於阿嬤家的廁所廚房內。以音樂而言，在同一首曲子中常可聽到反覆出現的旋律；以文學而言，詩歌中也常出現反覆的句子或單字等；以視覺而言，經由單一的圖案或形體，上下左右不斷的重複予人單純、規律的感受。

在Creative Coding的領域內重複更是大量被使用的表現手法，像是改變物件大小、方向、時間、頻率，或是重複粒子、文字、符號、紋理、以及動作等，善用重複可以讓畫面看起來有整體感。今天就要跟大家分享如何在程式創作內加入重複的概念，以及如何用利用「迴圈」快速製造相同的物件。

目標介紹

1. 瞭解程式中達成重複的「for 迴圈」概念與常見的應用方式
2. 瞭解如何在重複中套用規則與創造變化
3. 嘗試不同的重複概念應用與變化
4. 結合變數、使用者操作創作重複的作品

迴圈可以重複執行同一組程式碼，幫我們處理不斷重複的事情。 for 迴圈 – 需要以程式碼執行次數作為迴圈的條件。

// for 的基本語法結構
for(計數變數的起始狀態; 結束條件; 每次結束後變數如何變化)
  {
    概念相同，需要重複執行的事件
  }

// 舉例
for(var i=0 ; i < 3 ; i++){
  console.log(i)
}

根據上面的概念，如果我們要在畫布上每 100px水平間隔畫一個圓且重複三次，可以有下面兩種寫法：

// 寫法一：手動複製貼上＝人工迴圈
ellipse(0,100,30,30)
  ellipse(100,100,30,30) // 相較於上面，右移動了 100 px
  ellipse(200,100,30,30) // 相較於上面，又右移動了 100 px

// 寫法二：使用程式語言的 for 迴圈
for(var i=0; i<3 ; i++){
  ellipse(100*i, 100, 30, 30)  // 計數變數 i 只要小於 3 時都會做這件事，直到不滿足條件則停下並跳出該程式區塊
}

俗話說的好，能交給別人做的事就不要自己做，善用迴圈可以幫助我們快速處理類似的事件。除了單層的for迴圈以外還有巢狀個for迴圈結構：

for(var i=0; i<2; i++){
  for(var j=0; j<2; j++){    // 在每一個 i 中，都會這層迴圈完再跳往下一個 i
    ellipse(50*i, 50*j, 40)  // 分別於 (50*i, 0) 和 (50*i, 50) 畫圓，畫完之後再往下一個 i 繼續重複
  }
}

在上述的例子中，可以把巢狀迴圈想像成時鐘的分針跟秒針，秒針要跑完一圈，分針才會前進一格。同樣地，外層迴圈i要等內層迴圈j全部跑完才會再+1，所以當j是0和1的時候，分別在(50i, 0) 和 (50i, 50) 的地方畫圓，接著j又會從0開始印，直到外層迴圈結束。（延伸閱讀：[JS] 迴圈筆記）

以上了解迴圈的概念後，我們試著用迴圈來創作屬於自己的作品吧。由於Ju編最近去了一個有趣的音樂表演活動Rangeselector，由台灣另類電子搖滾樂團眠腦主演，串連影像、空間動態感測技術所編製的新型態live session，除了隨著節奏跳動的幾何粒子等動態畫面外，觀眾也可以透過移動位置來和展場的視覺產生互動。聽完這場很不一樣的live現場後，覺得或許也可以將自己喜歡的音樂當成主題，來進行Creative Coding的創作。

這次的靈感來源為台灣樂團The Fur. – Friday Love，復古的曲風配上輕快活潑的歌詞，行版的節奏讓人忍不住想跳起舞來，就像一顆又一顆的彩球。藉著這首甜蜜的歌曲，來個類專輯封面的創作吧！

首先我們挑選一組具有復古感的色票，這邊選用的以粉色、紅色系為主，配上米白和橘咖等輔色。既然是專輯封面，那歌名是一大重點，為了凸顯歌名我們試試看在Illustrator製作標準字並輸出，所以在規劃作品草稿時可分為靜態的標準字圖片和動態生成的彩球兩個部分。

如何在OpenProcessing導入圖片呢？我們可以把圖片上傳到第三方平台Imgur，然後把圖片當作背景來使用。

接著來準備下方空白處的彩球，定義一個陣列colors把挑選好的色票放進去，再準備一個circles的空陣列。我們要做一組4*4共16顆的彩球，這邊定義5個變數x, y, d, num, col，分別代表彩球在x軸和y軸的產生位置、彩球的大小、個數和顏色，利用巢狀迴圈的結構產生共16顆：

function setup() {
  createCanvas(600,600);
    let seg = 4;
    let w = width / seg;
    for (let i = 0; i < seg; i++) {
      for (let j = 0; j < seg; j++) {
        let x = i * w + w / 2; //x軸產生位置
        let y = j * w + w / 2; //y軸產生位置
        let d = random(0.5, 1) * w; //彩球大小
        let num = int(random(1, 4)); //彩球個數
        let col = random(colors); //彩球顏色
        for (let k = 0; k < num; k++) {
          circles.push({
          x: x,
          y: y,
          d: d * 0.7,
          c: col
        });
        movers.push(new Mover(x, y, d * 0.5));
      }
    }
  }
}

把準備好的彩球畫出來，注意圖層的順序必須畫在background上方，為了避免跟畫面上的其他元素重疊，位置和大小也要稍微調整一下。

function draw() {
  background(img);
  translate(width / 2, height / 2); // 定位在畫布中間
  scale(0.5); //範圍大小
  translate(-width / 2, -height / 4); // 定位在畫布偏下

  for (let c of circles) {
    fill(c.c); // 用變數c的顏色來填充
    circle(c.x, c.y, c.d); // 畫在變數x,y的位置、變數d的大小
  }
  noStroke();
}

現在我們有一顆又一顆的基本彩球了，看起來是不是很像糖果呢？為了替畫面增加一些動態性，我們在彩球旁邊增加幾顆移動的小彩球，這邊需要分為三種function：定義小彩球參數的constructor、畫小彩球的show、移動小彩球的move。在OpenProcessing的語法庫中，有一些常見的數學常數可以做使用，比如下方用到的PI，可以很快速地引入使用。

let movers = [];

class Mover {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.cs = this.r * 0.4; //第一種大小 
    this.cs0 = this.r * 0.4; //第二種大小
    this.t = random(100);
    this.off = 0;
    this.tStep = random(0.01, 0.05);
    this.ang = random(PI); 
    this.aStep = random(-1, 1) * 0.01;
    this.col1 = random(colors); //第一種顏色
    this.col2 = random(colors); //第二種顏色
    while (this.col1 == this.col2) {
      this.col1 = random(colors);
    }
  }

  show() {
    push();
    translate(this.x, this.y);
    rotate(this.ang); //旋轉的角度
    stroke(255); //加上白色邊框以凸顯小球
    fill(this.col1); //
    if (this.cs0 * 0.15 < this.cs) {
      fill(this.col2); 
      circle(this.off, 0, this.cs);
    } //錯開大球和小球的顏色
    pop();
  }

  move() {
    this.off = map(sin(this.t), -1, 1, -1, 1) * this.r; //彩球正面的角度
    this.cs = map(cos(this.t), -1, 1, this.cs0, 0); //彩球背面的角度
    this.t += this.tStep; //彩球的速度 
    this.ang += this.aStep; //彩球的圓周速率
  }
}

記得在 setup 的地方把 movers 推入 Mover，這樣我們就有移動的小彩球囉！

movers.push(new Mover(x, y, d * 0.5));

這樣就完成啦，希望大家喜歡這次的分享唷，一起試試看如何利用迴圈創作吧！

成品請往這邊走 👉🏻 https://openprocessing.org/sketch/1560267

歡迎加入互動藝術程式創作入門(Creative Coding)線上課程，課程中你可以認識程式與互動藝術產業應用，開啟對工程跟設計的想像，學會使用 p5.js 開發互動介面，整合繪圖、音訊、視訊、文字、3D、互動與機器創作完整的作品，並將創作輸出應用在個人品牌或網站、主視覺或海報，甚至互動裝置、遊戲與教材製作等場景，讓你對進修的資源與路線更有方向。

有興趣的朋友歡迎加入我們的臉書社團，第一時間接收活動報名消息，希望不久的將來，就能看到你跟大家分享你的生成式藝術創作囉！

此篇文章由 Jeudi Kuo 撰寫