iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Modern Web

前端藝術 - 用P5.js做藝術系列 第 22

Day 22 - 物件導向與向量3 - class + mouseInpress 設定

  • 分享至 

  • xImage
  •  

接下來設定一些基本的設定需求 分別拆成 bullet 跟 ball(細胞)兩個class的寫法

class Ball{
	//製造一個class
	constructor(args){
		this.r = args.r || 100,//大小
		this.p = args.p || createVector(width/2,height/2) //位置
		this.a = args.a || createVector(0,0),// 重心
		this.v = args.v ||p5.Vector.random2D().mult(5) , //動態 
		// random2D 是 vector 預設參數限制只有一個方向 
		this.color = random(['#b90c09','#642c0c','#e4e7e6','#b3ada2'])
		this.mode = random(["happy","sad"])
		this.rId = random(10000)
	}
	//把 draw 
	draw(){
		// 繪製細菌
		if(this.dead){
			return // 判定如果已經死了要消失
		}
			push()
			translate(this.p.x,this.p.y)
			fill(this.color)
			noStroke()
			ellipse(0,0,this.r)
			if (this.mode=="happy"){
				fill(255)
				ellipse(0,0,this.r/2,this.r/2)
				fill(0)
				ellipse(0,0,this.r/3,this.r/3)
			}else{
				fill(255)
				arc(0,0,this.r/2,this.r/2,0,PI)
				fill(0)
				arc(0,0,this.r/3,this.r/3,0,PI)
				
			}
			stroke(this.color)
			strokeWeight(6)
			noFill()
			for(var o=0;o<8;o++){
				rotate(PI/4)
				beginShape() // 開始畫起始點
				for(var i=0;i<30;i+=4){
					vertex(this.r/2+i*2,sin(i/5 +-frameCount/5 +this.rId)*10 ) //製作觸手
				}
				endShape() // 終點
			}
		pop()
	}
	update(){
		this.p.add(this.v) // 座標+動態
		this.v.add(this.a) // 動態+地心引力
		// let mouseV = createVector(mouseX,mouseY)
		// let delta = mouseV.sub(this.p).limit(2) //加上sub(this.p) 會馬上對應到滑鼠所在座標 所以加上 limit() 可以讓object 不會馬上移動到滑鼠
		// this.p.add(delta)
		if (this.mode=="happy"){
			this.p.y+=sin(frameCount/(10+this.rId/100))*5
		}
		if (this.mode=="crazy"){
			this.v.x+=random(-5,5) // 如果變成crazy的 x,y
			this.v.y+=random(-5,5)
		}
		
		this.v.x*=0.99
		this.v.y*=0.99
		
		if (this.p.y>height){
			this.v.y = - abs(	this.v.y)
		}
	}
	escape(){
		this.v.x = random(-10,10)
	}
	setHappy(){
		this.mode = 'happy'
	}
	setMode(mode){
		this.mode=mode
	}
	isBallInRange(x,y){
		let d = dist(x,y,this.p.x,this.p.y)
		if (d<this.r){
			return true
		}else{
			return false
		}
	}
}

判定子彈的class

class Bullet{
	//製造一個class
	constructor(args){
		this.r = args.r || 10,//大小
		this.p = args.p ||shipP.copy(), //子彈位置
		this.a = args.a || createVector(0,0),// 重心
		this.v = args.v || createVector(mouseX-width/2,mouseY-height/2).setMag(5), //動態 
		this.color = 'white'
		// random2D 是 vector 預設參數限制只有一個方向 
	}
	//把 draw 
	draw(){
		// 繪製子彈
		if(this.dead){
			return
		}
			push()
			translate(this.p.x,this.p.y)
			fill(this.color)
			noStroke()
			ellipse(0,0,this.r)
			pop()
	}
	update(){
		this.p.add(this.v) // 座標+動態
		this.v.add(this.a) // 動態+地心引力
		// this.v.x*=0.99
		// this.v.y*=0.99
		
		// if (this.p.y>height){
		// 	this.v.y = - abs(	this.v.y)
		// }
	}
}

判定雙方的合作標準

var ball;
var balls =[] //給予陣列
var bullets =[] // 子彈
let shipP
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	for(var i=0;i<10;i++){
		let ball = new Ball({
			r:random(100),
			p: createVector(random(width),random(height))
		}); //設定新的ball
		balls.push(ball) //放入陣列
	}
	shipP = createVector(width/2,height/2);
	// print(ball);
}
function mousePressed(){
	let bullet = new Bullet({}); // 要給空物件不然會報錯  新增子彈
	bullets.push(bullet)
	//點擊下去會增加一個細菌
// 	let ball = new Ball({
// 		r: random(100),
// 		p: {x:mouseX, y:  mouseY}
// 	})
// 	balls.push(ball)
	
// 	for(let ball of balls){
// 		ball.setHappy() // 設定眼睛開心模式
// 		ball.escape() //逃走設定
// 	}
}
function draw() {
	background(0)
	if(keyIsPressed){
		if(key =='ArrowLeft'){
			shipP.x -=5;
		}else if(key =='ArrowRight'){
			shipP.x +=5;
		}else if(key =='ArrowDown'){
			shipP.y +=5;
		}else{
			shipP.y -=5;
		}
	}
	// 製造球體
	for(let ball of balls){
		
		ball.update()
		ball.draw()
		// 設定滑鼠在細胞附近
// 		if (ball.isBallInRange()){
			
// 			ball.color = "#41f25e" // 設定綠色
// 			ball.setMode("crazy") // 設定變成別的模式
// 		}
		
		for(let bullet of bullets){
			if(!ball.dead && !bullet.dead){
				let hitResult = ball.isBallInRange(bullet.p.x,bullet.p.y);
				if(hitResult){
					ball.color='green'
					ball.dead = true
					bullet.dead = true
				}
			}
		}
	}
		for(let bullet of bullets){
			bullet.update();
			bullet.draw();
		}
		//增加一個方框
		rectMode(CENTER)
		fill('#ffc03a');
		rect(shipP.x,shipP.y,50)
	}

function keyPressed(){
	print(key);  
	// 按空白鍵
	if(key === ' '){
		let bullet = new Bullet({}); // 要給空物件不然會報錯  新增子彈
		bullets.push(bullet)
	}
}

上一篇
Day 21 - 物件導向與向量2 - vector
下一篇
Day 23 - p5的WebGL應用 3D 設定
系列文
前端藝術 - 用P5.js做藝術30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言