Day 16 - 函数与物件互动3

接下来我们就可以制作一个myflower的object 去制作一个绽放花点的设定

Learp 使用 与物件搭配

留下前面的drawFlower 设定 里面的 位子 size 跟颜色 使用learp去呈现你想要的慢慢展开的效果

就可以呈现出一个你想做出来的一个花朵绽放的效果

var myFlower = {
	x:300,
	y:200,
	size:2,
	color:'#bce784'
}

function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	background(0)
	push()
	translate(myFlower.x,myFlower.y);
	drawFlower(myFlower.color,myFlower.size)
	pop();
	if(dist(mouseX,mouseY,myFlower.x,myFlower.y) < 200){ //利用mouseX,Y 去判定myFlowerX,y 的间隔
		myFlower.size = lerp(myFlower.size,2,0.05); // 使用lerp 提供一格一格的数字让花看起来慢慢打开

	}else{
		myFlower.size =lerp(myFlower.size,0,0.1);;
	}

}

接下来就是把元件拆两部分 花本身的开花 跟 花放置的位置

先制作个别花的物件

// 制作花物件
function generateRandomFlower(x,y){
	return{
		x:x || random(0,width),
		y:y|| random(0,height),
		size:random(0,2),
		clr:random(colorList)
	}
}

在随机产生出二十几个不同的样式

for(var i=0; i<20;i++){
	let flower = generateRandomFlower();
	print(flower);
	flowers.push(flower);		
}

就可以产生出不同的设定位置跟花的位置

接下来我们要来做蜜蜂

var bee= {} //每一个bee是一个object 
var bees = []; // bees是一个array

//设定一个绘制蜜蜂的function 
function drawBee(bee){
	push();
		translate(bee.x,bee.y);
		fill('#ffde23');
		ellipse(0,0,50,20);
		
		stroke('#a56a12');
		strokeWeight(5);
		line(-10,-10,-10,10);
		line(0,-10,0,10);
	line(10,-10,10,10);
	pop();
}
// 放入多个蜜蜂
function setup() {
	for(var i=0;i<5;i++){
			bees.push({x:random(width),y:random(height),speed:random(1)})
	}
}

// draw那边去判定每只蜜蜂有没有靠近花朵
function draw() {
	background(0)
	for(let i=0; i < flowers.length; i++){
			drawFlower(flowers[i])
			let hasBee = false
			for(let o=0;o<bees.length;o++){
				let bee = bees[o];
				if(dist(bee.x,bee.y,flowers[i].x,flowers[i].y) < 200){
					hasBee = true
					
				}
			}
			if(hasBee){ //利用mouseX,Y 去判定flowers[i]X,y 的间隔
				flowers[i].size = lerp(flowers[i].size,2,0.05); // 使用lerp 提供一格一格的数字让花看起来慢慢打开

			}else{
				flowers[i].size =lerp(flowers[i].size,0,0.1);;
			}
	}
	
	for(let o=0;o<bees.length;o++){
			let bee = bees[o]
			bee.x = lerp(bee.x,mouseX,bee.speed); //每只蜜蜂有专属的x跟 moouseX的间隔
			bee.y = lerp(bee.y,mouseY,bee.speed);
			drawBee(bee);
	}

}

reference

https://openprocessing.org/sketch/1259947