Processing Spark Code

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

// }

}