P5里面提供了vector 这个设定
他跟class设定有点类似的设定也一并提供了function 可以交互使用
let ball
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
ball ={
p:createVector(50,50), // 定位
v:createVector(1,-1), // 动态
a:createVector(0,0.1), //重力
}
}
function draw() {
ball.p.add(ball.v) //加上ball的速度
ball.v.add(ball.a) // 加上重力
ball.v.mult(0.99) // 乘上不同的数字
ellipse(ball.p.x,ball.p.y,100);
}
回到刚刚用在细胞的设定里面 怎麽去修改呢
把原本的设定加上createVector(x,y) 制造新的物件
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(){
// 绘制细菌
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(){
let d = dist(mouseX,mouseY,this.p.x,this.p.y)
if (d<this.r){
return true
}else{
return false
}
}
}
var ball;
var balls =[] //给予阵列
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) //放入阵列
}
// print(ball);
}
function mousePressed(){
//点击下去会增加一个细菌
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)
// 制造球体
for(let ball of balls){
ball.update()
ball.draw()
// 设定滑鼠在细胞附近
if (ball.isBallInRange()){
ball.color = "#41f25e" // 设定绿色
ball.setMode("crazy") // 设定变成别的模式
}
}
}
<<: Day 21 - Robot Return to Origin
前言 这篇跟工程师其实没那麽有关,适合给新手leader定OKRs的时候看看。 演讲总结 今天要讲...
HAVING 子句是用来取代 WHERE 搭配聚合函数 (aggregate function) 进...
经过了 28 天的介绍後,今天来到了大集合的时候,昨天已经可以排程每天收盘後,去检查股票是否有符合我...
接续昨天~ 我们先在class後增加扩充的协定。 而後再建立一新的整数和变数。 建立完之後我们到生命...
其实威尔猪本来没打算写 Filter,因为总觉得在一般情形下不太常会用到,但又觉得这好像也算是 T...