Day 14 - 函数与物件互动 - 制作蜜蜂靠近花朵

function 函数

为什麽要用函数：函数可以把需要重复执行的行为打包，在需要使用的时候直接使用函数就不需要再一次一步一步的执行每个步骤了。像是大家熟悉的 setup() 与 draw() 都是函数喔！其他函数的优点：
- 解决重复的程序
- 分拆抽象概念
- 提高程序可读性
函数的结构

function nameOfFunction(param1, param2 ...){ //里面的参数 params 不是必要
    ...
    // 要重复做的事情，这边可以使用上面传入的参数，如 param1,param2... 等
    ...
    return dataToReturn // 要回传的资料，非必要
}

假设我们要做一朵花

function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	fill(255,210,33)
	translate(width/2,height/2);
	push(); // 回到这里
	ellipse(0,0,50)
	ellipseMode(CORNER); //设定排列模式
	fill(255,90,61)
	for(let i=0;i<16;i++){
			ellipse(30,-20,120,40); // 增加花瓣
			line(30,0,150,-10) //花瓣线
			
			rotate(PI/8);
	}
	pop(); //推到push 
}

接下来push 跟 pop要重复出来

但我们也可以把flower就是拉出来使用

function drawFlower(){
	push(); // 回到这里
	fill(255,210,33)
	ellipse(0,0,50)
	ellipseMode(CORNER); //设定排列模式
	fill(255,90,61)
	for(let i=0;i<16;i++){
			ellipse(30,-20,120,40); // 增加花瓣
			line(30,0,150,-10) //花瓣线
			
			rotate(PI/8);
	}
	pop(); //推到push 
}

function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	push() //利用push pop分开两者的差异
	translate(width/2,height/2);
	drawFlower();
	pop();
	push();
	translate(mouseX,mouseY);
	drawFlower();
	pop();

}

参数

藉由参数的设定，可以调整一下花瓣的颜色效果

function drawFlower(clr){
	push(); // 回到这里
	fill(255,210,33)
	ellipse(0,0,50)
	ellipseMode(CORNER); //设定排列模式
	fill(255,90,61) // 变成预设颜色
	if(clr){
	fill(clr);} //如果有别的颜色就可以放在这
	
	for(let i=0;i<16;i++){
			ellipse(30,-20,120,40); // 增加花瓣
			line(30,0,150,-10) //花瓣线
			
			rotate(PI/8);
	}
	pop(); //推到push 
}

function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	push() //利用push pop分开两者的差异
	translate(width/2,height/2);
	drawFlower();
	pop();
	push();
	translate(width/2-200,height/2);
	drawFlower('#fff'); //增加参数
	pop();

}

接下来我们要控制他的花瓣大小

function drawFlower(clr,size=1){
	push(); // 回到这里
	fill(255,210,33)
	ellipse(0,0,50)
	ellipseMode(CORNER); //设定排列模式
	fill(255,90,61) // 变成预设颜色
	if(clr){
	fill(clr);} //如果有别的颜色就可以放在这
	
	for(let i=0;i<16;i++){
			ellipse(30,-20,120*size,40); // 增加花瓣
			line(30,0,150*size,-10) //花瓣线
			
			rotate(PI/8);
	}
	pop(); //推到push 
}

function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	background(0)
	push() //利用push pop分开两者的差异
	translate(width/2,height/2);
	drawFlower();
	pop();
	push();
	translate(width/2-200,height/2);
	drawFlower('#fff',map(mouseX,0,width,0,1)); //增加参数
	pop();

}