Day 11 - 画布操作与编织复杂图形

当我们对於画布操作

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));
	}
}