p5.js 是基於js創設的函式庫，因此也擁有了程式語言的特性可以使用，可以設變數、立條件立flag、使用迴圈來取代重複性的工作。兼天會與大家分享利用寫程式的技巧來輕鬆創作圖騰。(其實我是假設大家都會寫一點基本程式QQ，請不要砍我)

變數

我們可以使用變數來統一管理會重複出現、且影響範圍一致的數值，像下面這張範例一樣，使用 scope1 與 scope2 來管理圓圈在產生時的隨機範圍，不但是視覺上不會有太多雜七雜八的數值，改起來也方便~

條件

同樣上一張範例也可以看到我設定了條件來判斷要畫大圈圈還是小圈圈，條件是 mouseIsPressed 這個p5提供的api，意思是指說當游標按下去的時候會產生大圈圈，否則根據滑鼠位置隨機產小圈，程式的部分如下提供給大家

let scope1 = 100; //大圓圈隨機產生的位置的範圍
let scope2 = 30; //小圓圈隨機產生的位置的範圍

function setup() {
	createCanvas(windowWidth, windowHeight);
	colorMode(HSB)
	background('white');
	
}

function draw() {
	if(mouseIsPressed){
		noStroke();
		fill(random(360),70,40,random(0,1));
		circle(random(mouseX-scope1, mouseX+scope1), random(mouseY-scope1, mouseY+scope1), random(20, 48));
	}else{
		stroke('#c0c8d2')
		noFill()
		circle(random(mouseX-30, mouseX+30), random(mouseY-30, mouseY+30), random(5, 18));
	}
}

迴圈

剛開始可以利用 width, height來操作迴圈，用線段或者幾何形狀來做出具有重複性藝術美感的圖案

let margin  = 100

function setup() {
	createCanvas(800,800);
	colorMode(HSB, 360, 100, 100);
	background(100);
	noLoop()
	noFill()
}

function draw() {
	
	for(let y = margin; y <= height- margin; y+=25){
		line(margin,y,width-margin,y)
		for(let x = margin; x <= width -margin ; x+=25){
			line(x,margin,x,height-margin)
		}
	}
}

function setup() {
	createCanvas(800,800);
	colorMode(HSB, 360, 100, 100);
	background(100);
	noLoop()
	noFill()
}

function draw() {
	
		for(let y = 0; y <= height - 25; y+=25){
		for(let x = 0; x <= width-25; x+=25){
			circle(x,y,25);
			line(x,y,x,y)
		}
	}

}

小結

條件、迴圈、變數的利用在執行的時候是非常重要的方法，可以組合成千變萬化的演算法，大家可以試試看去找一些簡單的幾何形狀範例圖片模擬一下，謝謝大家今天的收看