今天我們要來小總結一下有提過的函數，並且來試試看組合變化，我們已經用過幾何形狀、定位系統、顏色函數與隨機模式，納今天我們就來試試看產出一個小波普藝術吧

題目

下面這張來自pinterest的設計圖，我們擷取一小部分作為題目
黃色圈起來的地方

解析

拿到題目我們先不用緊張，首先我們可以來觀察一下。主要可以分三個部分，逐一突破就行了

• 底圖
• 色塊
• 白點

顏色可以用google tool 吸顏色

底圖，色塊顏色準備好了以後
我們先來把基本設定準備好，不需要動畫，也不要邊框

function setup() {
	noLoop()
	createCanvas(windowWidth, windowHeight);
	noStroke()
	
}

接下來背景上色

background(251,146,251);

色塊的部分是一個三角形一個矩形，分別定位在右邊及下方

fill(244,166,175)
triangle(width,height/5,width,height, 0,height)

fill(243,139,170)
rect(0, height/4*3, width, height/4);

我們就得到了完整的背景了~

在白色點點得部分可以使用迴圈來操作，先產出重複的規則白色塊

for (let v = 0; v < height; v+=100) {
  for (let k = 0; k < width; k+=30) {
			for(let i = 0; i< width ; i+=10) {
				rect( k , height /2 +i , 20,5) //下半部
				rect( k, height /2 -i , 20,5) //上半部
			}
		}
	}

再利用for迴圈中的變化值給予變化條件，就可以完成了~~~

for (let v = 0; v < height; v+=100) {
  nn = 0
  for (let k = 0; k < width; k+=30) {
			bb = 0
			for(let i = 0; i< width ; i+=10) {
				bb += i/10;
				nn = ((k*i)/(height)) * (map(height, 0, width, 2, 4))
				rect( k , height /2 +i +bb + nn , 20,5) //下半部
				rect( k, height /2 -i -bb  - nn, 20,5) //上半部
			}
		}
	}

完整的程式碼如下

let nn = 0;

let bb  = 0

function setup() {
	noLoop()
	createCanvas(windowWidth, windowHeight);
	noStroke()
	
}

function draw() {
	background(251,146,251);
	fill(244,166,175)
	triangle(width,height/5,width,height, 0,height)
	
	fill(243,139,170)
	rect(0, height/4*3, width, height/4);
	
	fill('white')
	for (let v = 0; v < height; v+=100) {
  nn = 0
  for (let k = 0; k < width; k+=30) {
			bb = 0
			for(let i = 0; i< width ; i+=10) {
				bb += i/10;
				nn = ((k*i)/(height)) * (map(height, 0, width, 2, 4))
				rect( k , height /2 +i +bb + nn , 20,5) //下半部
				rect( k, height /2 -i -bb  - nn, 20,5) //上半部
			}
		}
	}
	
}

小結

下一段我們就會進入加入隨機值的操作了喔~!謝謝大家今天的觀看