當我們對於畫布操作

1. 保留畫布的狀態
2. 儲存特定時候
3. 累積上一次的變動，繪製下一刻的圖
4. 利用旋轉，放大，疊合可以做出螺旋狀

接下來接下畫布的一些操作作法

translate

主要是改變translate的基本位標更改 去呈現出一種動態效果

• 相對於現在的位置移動畫布 translate(往右的距離，往下的距離)
• 所以使用以下方式可以繪製出多個方形，但是與修改繪製方形位置不同，我們是直接修改畫布的位置

function draw() {
	translate(0,height/2)
	colorMode(HSB)
	noStroke()
	for(var i=0;i<20;i++){
		fill(i*10,80,100)
		ellipse(0, random(-height/2,height), random(100), 20);
		translate(120,0)
	}
}

透過translate 可以做出不一樣的移動畫布移動效果 並且也不需要太過擔ellispe的位置是否有正確

rotate()

可以利用 rotate的數字 每一次都往下設定一格的概念去做一個弧形的形狀

• 相對於現在的畫布角度，轉移 r 度 rotate(r) ，需要注意這邊的角度是弧度，不是角度喔！
• 如果要使用角度，可以先用 angleMode(DEGREES) 或是 angleMode(RADIANS) 來設定單位。註：角度的 0~360 度，對應到的是 0 ~ 2PI 喔！

function draw() {
	translate(0,height/2)
	colorMode(HSB)
	noStroke()
	for(var i=0;i<20;i++){
		fill(i*20 + random(-20,20),80,100)
		ellipse(0, random(-height/2,height/2),random(0,50),random(0,50));
		translate(60,0)
		rotate(0.1);
	}
}

也可以利用rotate的原理去製作一些很像是鞭子的效果 啖實際上只是畫布在選轉的產生的錯覺

function draw() {
	translate(0,height/2)
	colorMode(HSB)
	noStroke()
	for(var i=0;i<20;i++){
		fill(i*20 + random(-20,20),80,100)
		ellipse(0, 0,random(0,50),random(0,50));
		translate(60,0)
		rotate(map(mouseX,0,height,-0.5,0.5));
	}
}