var WIDTH = window.innerWidthWidth;
var HEIGHT = window.innerHeight;
var starballs = [],
ball1,
ball11,
ball12,
ball13,
ball14;
var positions = [];
var p1 ;
var p2 ;
var p3 ;
var p4 ;
var p5 ;
var p6 ;
var gametag ;
var peopleX,
peopleY;
var startarray;
//关于位置识别的定义
let video;
let poseNet;
let pose;
let npx;
let npy;
let ppx;
let ppy;
let poses = [];
let ps = [];
var listarimg;
var littles = []
var music;
//关于背景星星的定义
var stars = [], // Array that contains the stars
// FPS = 15, // Frames per second
NUM_STARS = WIDTH / 4; // Number of stars
function preload(){
ball1 = loadImage('images/ball1.png'),
ball11 = loadImage('images/ball1.png'),
ball12 = loadImage('images/ball12.png'),
ball13= loadImage('images/ball13.gif'),
ball14= loadImage('images/ball14.gif');
listarimg = loadImage('images/litstar.png')
music = loadSound("./audios/music1.mp3");
}
function setup(){
createCanvas(windowWidth,windowHeight);
//获取影像
// createCanvas(windowWidth/4,windowHeight/4);
video = createCapture(VIDEO);
video.size(width, height);
//初始化ml5.postNet
postNet = ml5.poseNet(video,modelLoaded);
//事件侦听器,当检测到姿势时返回结果并处理
postNet.on('pose',gotPoses);
// 背景星星:Push stars to array
for (var j = 0; j < NUM_STARS; j++) {
console.log("hi");
stars.push({
x: 0,
y: 0,
offset: Math.random() * 360,
// Weight orbit a little to be outside origin
orbit: (Math.random() + 0.01) * max(WIDTH, HEIGHT),
radius: Math.random() * 2,
vx: Math.floor(Math.random() * 10) - 5,
vy: Math.floor(Math.random() * 10) - 5
});
}
gametag = "wait"
p1 = createVector(260,330);
p2 = createVector(360,790);
p3 = createVector(750,400);
p4 = createVector(windowWidth-560,340);
p5 = createVector(1100,760);
p6 = createVector(windowWidth-250,690);
positions.push(p1);
positions.push(p2);
positions.push(p3);
positions.push(p4);
positions.push(p5);
positions.push(p6);
// peopleX = map(npx,0,,0,width)
// peopleY = map(npy,0, ,0,height)
for(var i = 0;i<6;i++){
let p = positions[i]
starballs.push(new STARBALL(p.x,p.y))
}
starballs[0].tag = "should"
imageMode(CENTER);
// vediosetup()
peopleX = mouseX
peopleY = mouseY
for(var i = 0;i<30;i++){
littles.push(new LITTLE(starballs[5].pos.x,starballs[5].pos.y))
}
drawBackstars()
}
function drawBackstars(){
//背景星星
// background(24, 24, 24);
push();
noFill();
colorMode(RGB, 255, 255, 255, 1);
stroke(255, 255, 255, 1);
strokeCap(ROUND);
strokeWeight(1);
for (var i = 0, x = stars.length; i < x; i++) {
var s = stars[i];
ellipse(s.x, s.y, s.radius, 0);
}
pop();
updatee();
}
function updatee() {
var originX = WIDTH / 2;
var originY = HEIGHT / 2;
for (var i = 0, x = stars.length; i < x; i++) {
var s = stars[i];
var rad = (frameCount * (1 / (s.orbit * 2 + s.offset)) + s.offset) % TAU;
s.x = (originX + cos(rad) * (s.orbit * 2));
s.y = (originY + sin(rad) * (s.orbit));
}
}
//加载postnet有关函数
function gotPoses(poses){
if (poses.length > 0){
pose = poses[0].pose;
skeleton = poses[0].skeleton;
// console.log(pose)
// console.log(skeleton)
}
}
function modelLoaded(){
console.log('postNet ready');
}
function draw(){
// console.log(peopleX,peopleY)
// console.log(mouseX,mouseY)
background(0)
// vediodraw()
if(gametag!="over"){
//给星球连线
// music.play()
for(j = 1;j<positions.length;j++){
stroke(255)
strokeWeight(2)
line(positions[j].x,positions[j].y,positions[j-1].x,positions[j-1].y)
}
noStroke()
//初始状态被踩中则游戏开始
// startarray = starballs
// if(dist(mouseX,mouseY,startarray[0].pos.x,startarray[0].pos.y)<startarray[0].size/2){
// console.log("hi")
// gametag = "start"
// }
//更新tag
// if(gametag == "start"){
// for(i=0;i<starballs.length;i++){
// if(starballs[i].tag=="grey"){
// starballs[i].tag="huxi"
// }
// }
// }
//画星球
for(i=0;i<starballs.length;i++){
// console.log(starballs[i]);
starballs[i].drawstarball()
}
//检验其他是否被踩中
// for(i=1;i<starballs.length;i++){
// if(dist(mouseX,mouseY,starballs[i].pos.x,starballs[i].pos.y)<(starballs[i].size/2)){
// starballs[i] = "shanshuo"
// }
// }
//检验第一个是否被踩中
// if(dist(mouseX,mouseY,starballs[0].pos.x,starballs[0].pos.y)<starballs[0].size/2){
// starballs[0].tag = "ok"
// // let linshi = subset(starballs,1,starballs.length-1)
// // let ss = starballs[0]
// // starballs = append(linshi,ss)
// }
//检验是否被踩中
for(i=0;i<starballs.length;i++){
if(starballs[i].tag=="should"){
if(dist(mouseX,mouseY,starballs[i].pos.x,starballs[i].pos.y)<starballs[i].size/2){
starballs[i].tag = "ok"
// music.play()
if(starballs[5].tag=="ok"){
over()
}
else{
starballs[i+1].tag="should"
}
// let linshi = subset(starballs,1,starballs.length-1)
// let ss = starballs[0]
// starballs = append(linshi,ss)
}
}
}
}
else{
for(let j = 0;j<littles.length;j++){
littles[j].display();
littles[j].update();
}
}
drawBackstars()
}
function over(){
background(0)
// ellipse(width/2,height/2,800,800)
gametag = "over"
// for(let j = 0;j<littles.length;j++){
// littles[j].display();
// littles[j].update();
// }
}
class STARBALL{
constructor(x,y){
this.pos = createVector(x,y)
this.size = random(380,420)
this.img = ball1
this.imgs = [ball11,ball12,ball13,ball14]
this.tag = "grey"
}
drawstarball(){
noStroke()
if(this.tag=="ok"){
image(this.img,this.pos.x,this.pos.y,this.size,this.size)
}
if(this.tag=="grey"){
fill(0)
ellipse(this.pos.x,this.pos.y,this.size,this.size)
image(this.imgs[1],this.pos.x,this.pos.y,this.size,this.size)
}
if(this.tag=="shanshuo"||this.tag=="should"){
fill(0)
ellipse(this.pos.x,this.pos.y,this.size,this.size)
image(this.imgs[3],this.pos.x,this.pos.y,this.size,this.size)
}
}
// //检验第一个是否被踩中
// intereact(px,py){
// if(dist(px,py,this.pos.x,this.pos.y)<this.size/2){
// this.tag = "ok"
// }
// }
}
//关于识别的自定义函数
function drawBody(){
if (pose){
//画关节
// for (let i = 0; i<pose.keypoints.length;i++){
// if(int(i)==9||int(i)==10){
// console.log('draw')
// let x = pose.keypoints[i].position.x;
// let y = pose.keypoints[i].position.y;
// fill(159, 112, 208);
// noStroke();
// ellipse(x,y,10,10)
// }
// }
//画关节间的连线
for (let j = 0; j<skeleton.length; j++){
let a = skeleton[j][0];
let b = skeleton[j][1];
stroke(color(159, 112, 208));
strokeWeight(4);
line(a.position.x, a.position.y, b.position.x, b.position.y)
}
}
}
function myposition(){
if (pose){
for (let i = 0; i<pose.keypoints.length;i++){
if(int(i)==15||int(i)==16){
console.log('draw')
let x = pose.keypoints[i].position.x;
let y = pose.keypoints[i].position.y;
ps.push(pose.keypoints[i].position);
console.log(ps)
//画一下试试
// fill(159, 112, 208);
// noStroke();
// ellipse(x,y,10,10)
npx = pose.keypoints[i].position.x;
npy = pose.keypoints[i].position.y;
if(ps.length>=2){
//这里是上一步的坐标
//画一下试试
// fill(0, 0, 208);
// noStroke();
// console.log(ps)
// ellipse(ps[ps.length-1].x,ps[ps.length-1].y,10,10)
ppx = ps[ps.length-1].x
ppy = ps[ps.length-1].y
}
}
else{
background(0)
}
}
}
}
//关于识别的
function vediosetup(){
// createCanvas(windowWidth/4,windowHeight/4);
video = createCapture(VIDEO);
video.size(width, height);
//初始化ml5.postNet
postNet = ml5.poseNet(video,modelLoaded);
//事件侦听器,当检测到姿势时返回结果并处理
postNet.on('pose',gotPoses);
// poses.push(pose);
}
function vediodraw(){
// drawCamOnCanvas();
// background(0);
// drawBody();
myposition()
}
class LITTLE{
constructor(x,y){
this.pos = createVector(x,y);
// this.vel = p5.Vector.random2D();
// this.vel.setMag(1.4,1.5);
this.velX = random()
this.velY = random()
this.vel = createVector(this.velX,this.velY)
this.vel.setMag(3,4.4)
this.size = random(90,150)
this.img = listarimg
}
update(){
this.pos.add(this.vel);
this.size*= 0.95
}
display() {
noStroke()
// fill(255,228,69,20);
// ellipse(this.pos.x, this.pos.y,this.sparkSize);
imageMode(CENTER);
image(this.img,this.pos.x+random(-60,60),this.pos.y+random(-60,60),this.size,this.size)
}
}
class SPARK{
//给定火花的大小、位置
constructor(size,posX, posY) {
this.pos = createVector(posX, posY);
this.sparkSize = size*(random(0.7,0.9))
this.vel = p5.Vector.random2D();
this.vel.setMag(1.4,1.5);
this.stateTag = "NEWBORN"
this.img = listarimg
// this.life = random()*10+20
// this.age = 0
this.alpha = 255
}
update() {
this.pos.add(this.vel);
this.sparkSize*= 0.95
// this.age+=1
// this.lifeManagement()
//改变透明度
this.img.loadPixels();
for (var y = 0; y < this.img.height; y++) {
for (var x = 0; x < this.img.width; x++) {
let index = (x + y * width) * 4;
this.img.pixels[index + 3] = this.alpha;
}
}
this.alpha-=5
}
display(x,y) {
noStroke()
// fill(255,228,69,20);
// ellipse(this.pos.x, this.pos.y,this.sparkSize);
imageMode(CENTER);
image(this.img,x+random(-60,60),y+random(-60,60),this.sparkSize,this.sparkSize)
}
// disappearUpdate(){
// img.loadPixels();
// for (y = 0; y < img.height; y++) {
// for (x = 0; x < img.width; x++) {
// let index = (x + y * width) * 4;
// image.pixels[index + 3] = this.alpha;
// }
// }
// this.alpha-=5
// }
}