ソースを参照

release

master
Victor Giers 4年前
コミット
fc7e53b24c
6個のファイルの変更300行の追加103行の削除
  1. バイナリ
      data/Juhani Junkala - Epic Boss Battle [Seamlessly Looping].wav
  2. バイナリ
      data/mask.png
  3. バイナリ
      data/music.mp3
  4. バイナリ
      data/music_big.mp3
  5. 272
    103
      index.html
  6. 28
    0
      p5.sound.min.js

バイナリ
data/Juhani Junkala - Epic Boss Battle [Seamlessly Looping].wav ファイルの表示


バイナリ
data/mask.png ファイルの表示


バイナリ
data/music.mp3 ファイルの表示


バイナリ
data/music_big.mp3 ファイルの表示


+ 272
- 103
index.html ファイルの表示

@@ -13,65 +13,159 @@
canvas {display: block; overflow: hidden;}
</style>
<script src="p5.min.js"></script>
<script src="p5.sound.min.js"></script>
<script>
"use strict";

//p5.disableFriendlyErrors = true;

var width, height;

var rate = 200;
var rate = 15;
var tickMS = rate;
var previous;
var time = 0;

var maxEdge;
var purity = 100;
var purityColor;
var centralCitizen = [];

var minEdge;

var citizen = [];
var citizenID = 0;
var angle = 0;

let center, ring, ringBuffer, mask, rotatedMask;

const FOLDER = 'data/';
let song;
let soundReady = false;

function setup() {
width = window.innerWidth;
height = window.innerHeight;
maxEdge = max(width, height);
minEdge = min(width,height);
var timeS = 99;

createCanvas(width,height);
rotatedMask.imageMode(CENTER);
imageMode(CENTER);
textAlign(CENTER);
var startUp = true;
var hoverButton = 0;

previous = millis();
const FOLDER = 'data/';

for(var i = 0; i < 20; i ++){
citizen.push(new Citizen(random(width/2 - minEdge/16, width/2 + minEdge/16), random(height/2-minEdge/4, height/2+minEdge/4), color(255,255,255)));
function mouseClicked(){
if(hoverButton == 1){
start();
}
if(gameOver){
location.reload();
}

}


function preload(){
center = loadImage(FOLDER + 'center.png');
/*
ring = loadImage(FOLDER + 'ring.png', img => {
ringBuffer = img.get();
ringBuffer.loadPixels();
img.loadPixels();
});
ringBuffer = img.get();
ringBuffer.loadPixels();
img.loadPixels();
});

mask = loadImage(FOLDER + 'mask.png', img => {
rotatedMask = createGraphics(img.width, img.height);
rotatedMask.image(img, 0, 0);
});*/
ring = loadImage(FOLDER + 'ring.png');
}

function setup() {
width = window.innerWidth;
height = window.innerHeight;
minEdge = min(width,height);

createCanvas(width,height);
//rotatedMask.imageMode(CENTER);
imageMode(CENTER);
rectMode(CENTER);
textAlign(CENTER);
textFont('Helvetica')

mask = loadImage(FOLDER + 'mask.png', img => {
rotatedMask = createGraphics(img.width, img.height);
rotatedMask.image(img, 0, 0);
});
song = loadSound(FOLDER + 'music.mp3', readySound);
song.setVolume(0.0);


for(var i = 0; i < 50; i ++){
citizen.push(new Citizen(color(255,255,255),"macabree"));
}
function draw() {
clear();
maxEdge = max(width,height);
minEdge = min(width,height);

}

function readySound(){
soundReady = true;
}

function start(){
if(startUp){
song.setVolume(1.0);
song.loop();
previous = millis();
interval = setInterval(clock, 1000);
strokeWeight(1);
startUp = false;
}
}

function clock(){
timeS--;
if(timeS == 0){
clearInterval(interval);
end();
}
}

gameOver = false;
function end(){
gameOver = true;
song.setVolume(0.2);
for(var i = citizen.length-1; i > 0; i--){
if(citizen[i].inCenter == false){
citizen[i].radius = minEdge/80;
}
}
}

function draw() {
clear();
//text(nf(frameRate(),0,2), 100, 50);
//maxEdge = max(width,height);



if(startUp){
image(ring, width/2,height/2, minEdge/2, minEdge/2);
image(center, width/2,height/2, minEdge/2, minEdge/2);
fill(255);
stroke(0);
strokeWeight(3);
textSize(minEdge/40);
textStyle(BOLD);
text("1 Macc, 1:12-15\n''10 [...] there emerged from Israel a set of renegades who led many people astray.\n'Come,' they said, 'let us ally ourselves with the gentiles surrounding us,\nfor since we separated ourselves from them many misfortunes have overtaken us.\n12 This proposal proved acceptable,\n13 and a number of the people eagerly approached the king,\nwho authorised them to practise the gentiles' observances.\n14 So they built a gymnasium in Jerusalem, such as the gentiles have,\n15 disguised their circumcision, and abandoned the holy covenant,\nsubmitting to gentile rule as willing slaves of impiety.''\n\nPROTECT YOUR LAND FROM THE WICKED STRANGERS AT ALL COST!\nDON'T LET ANYONE IN!", width/2,height/2-minEdge/5);

if(soundReady){
fill(255,200+(55*hoverButton));
rect(width/2,height/2+minEdge/4,minEdge/7,minEdge/12,minEdge/30);
if(mouseX > width/2-(minEdge/4)/2 && mouseX < width/2+(minEdge/4)/2 && mouseY > height/2+minEdge/4-(minEdge/12)/2 && mouseY < height/2+minEdge/4+(minEdge/12)/2){
hoverButton = 1;
} else {
hoverButton = 0;
}
fill(0);
textSize(minEdge/25);
noStroke();
text("GO!", width/2,height/2+minEdge/3.84);
} else {
text("Loading...", width/2,height/2+minEdge/3.84);

}

} else {
angle = atan2(-width/2 + mouseX, -height/2 + mouseY);

/* nice way to move masks, unfortunately very performance heavy
rotatedMask.clear();
rotatedMask.resetMatrix();
rotatedMask.translate(ringBuffer.width/2,ringBuffer.height/2);
@@ -80,100 +174,175 @@
ring.pixels.set(ringBuffer.pixels);
ring.updatePixels();
ring.mask(rotatedMask);
*/


image(center, width/2,height/2, minEdge/2, minEdge/2);
image(ring, width/2,height/2, minEdge/2, minEdge/2);
for(var i = 0; i < citizen.length; i++){ // go with -- here
noStroke();
fill(window.getComputedStyle( document.body ,null).getPropertyValue('background-color'));
arc(width/2, height/2, minEdge/2, minEdge/2, map(angle, -PI, PI, PI, -PI)-0.4-PI/2, map(angle, -PI, PI, PI, -PI)+0.4-PI/2);
stroke(0);
image(center, width/2,height/2, minEdge/2, minEdge/2);

strokeWeight(1);
for(var i = citizen.length-1; i > 0; i--){
citizen[i].update();
}

var current = millis();
var elapsed = current - previous;
previous = current;
time += elapsed;
while (time >= tickMS){
time -= tickMS;
var side = int(random(0,4));
var randcolor = color(random(0,255), random(0,255), random(0,255));
switch (side){
case(0): citizen.push(new Citizen(random(0,width), -30, randcolor));
break;
case(1): citizen.push(new Citizen(random(0,width), height+30, randcolor));
break;
case(2): citizen.push(new Citizen(-30, random(0,height), randcolor));
break;
case(3): citizen.push(new Citizen(width+30, random(0,height), randcolor));
break;
var avgR = 0;
var avgG = 0;
var avgB = 0;
var mult = 0;
for(var i = 0; i < centralCitizen.length; i++){
for(var j = 0; j < citizen.length; j++){
if(citizen[j].id == centralCitizen[i]){
avgR += red(citizen[j].color);
avgG += green(citizen[j].color);
avgB += blue(citizen[j].color);
mult++;
}
}
tickMS = random(rate/100,2*rate-(rate/100));
}
avgR = avgR / mult;
avgG = avgG / mult;
avgB = avgB / mult;
purity = (avgR + avgG + avgB) / (3 * 255) * 100;
fill(avgR,avgG,avgB);
//filter( BLUR, 6 );
textStyle(BOLD);
textSize(minEdge/20);
strokeWeight(2);
text("Purity: " + nf(purity,0,2) + "%", width/2, minEdge/6);
if(gameOver){
textSize(minEdge/15);
strokeWeight(12);
text("Game Over", width/2, height/2);
textSize(minEdge/20);
text("Play Again", width/2, height/2+minEdge/10);
strokeWeight(1);
} else {
var current = millis();
var elapsed = current - previous;
previous = current;
time += elapsed;
while (time >= tickMS){
time -= tickMS;
var side = Math.floor(Math.random() * Math.floor(4));
var randcolor = color(Math.random()*255, Math.random()*255, Math.random()*255);
switch (side){
case(0): citizen.push(new Citizen(randcolor, Math.random()*width, -30));
break;
case(1): citizen.push(new Citizen(randcolor, Math.random()*width, height+30));
break;
case(2): citizen.push(new Citizen(randcolor, -30, Math.random()*height));
break;
case(3): citizen.push(new Citizen(randcolor, width+30, Math.random()*height));
break;
}

for(var i = citizen.length-1; i > 0; i--){
citizen[i].move();
}
//tickMS = random(rate/100,2*rate-(rate/100));
}
}

fill(255);
text("Time left: "+nf(timeS,2),width/2,minEdge/20);
}

}

class Citizen{
constructor(x, y, color, id){
this.x = x;
this.y = y;
this.color = color;
this.id = citizen.length;
this.speedX = ((this.x-width/2)*-1)/dist(this.x, this.y, width/2, height/2);
this.speedY = ((this.y-height/2)*-1)/dist(this.x, this.y, width/2, height/2);

class Citizen{
constructor(arg0, arg1, arg2){
this.color = arg0;
this.id = citizenID;
this.radius = minEdge/40;
citizenID++;
if(typeof arg1 === "string"){
this.x = width/2+random(-minEdge/10,minEdge/10);
this.y = height/2+random(-minEdge/10,minEdge/10);
//this.invincible = true;
} else {
this.x = arg1;
this.y = arg2;
this.setSpeed();
this.angle = atan2(width/2 - this.x, height/2 - this.y);
this.range = random(2,minEdge/5.33);
if(this.angle + 0.4 > PI || this.angle - 0.4 < -PI){
this.invalid = true;
this.despawn();
}
this.target = Math.random()*minEdge/5.33;
this.inCenter = false;
//if(this.angle + 0.4 > PI || this.angle - 0.4 < -PI){
// this.invalid = true;
// this.despawn();
//}
}
update(){
if(this.invalid) this.despawn();
if(dist(this.x, this.y, width/2, height/2) < minEdge/4 && dist(this.x, this.y, width/2, height/2) > minEdge/5.33){
if(angle + 0.4 > this.angle && angle - 0.4 < this.angle){
//fill(0,255,0);
//text("JUHU", this.x,this.y-30, 40);
} else {
this.despawn();
}
}
if(dist(this.x, this.y, width/2, height/2) > this.range){
this.x += this.speedX;
this.y += this.speedY;
}
fill(this.color);
ellipse(this.x, this.y, minEdge/40);
}

setSpeed(){
this.speedX = ((this.x-width/2)*-1)/dist(this.x, this.y, width/2, height/2);
this.speedY = ((this.y-height/2)*-1)/dist(this.x, this.y, width/2, height/2);
}

update(){
//if(this.invalid) this.despawn();
if(!this.inCenter && dist(this.x, this.y, width/2, height/2) <= minEdge/5.33){
this.inCenter = true;
centralCitizen.push(this.id);
}
despawn(){
citizen.splice(this.id,1);
for(var i = this.id; i < citizen.length; i++){
citizen[i].id--;

if(dist(this.x, this.y, width/2, height/2) < minEdge/4 && !this.inCenter){
if(!(angle + 0.4 > this.angle && angle - 0.4 < this.angle)){
this.despawn();
}
}
}

function mouseClicked(){
//citizen.push(new Citizen(mouseX, mouseY, color(255,255,255), citizen.length));
fill(this.color);
ellipse(this.x, this.y, this.radius);
}

window.onresize = function() {
var w = window.innerWidth;
var h = window.innerHeight;
width = w;
height = h;
resizeCanvas(width,height);
for(var i = 0; i < 20; i ++){
citizen.push(new Citizen(random(width/2 - minEdge/16, width/2 + minEdge/16), random(height/2-minEdge/4, height/2+minEdge/4), color(255,255,255)));
move(){
if(dist(this.x, this.y, width/2, height/2) > this.target){
this.x += this.speedX;
this.y += this.speedY;
}
}

despawn(){
for(var i = 0; i < citizen.length; i++){
citizen[i].speedX = ((citizen[i].x-width/2)*-1)/dist(citizen[i].x, citizen[i].y, width/2, height/2);
citizen[i].speedY = ((this.y-height/2)*-1)/dist(citizen[i].x, citizen[i].y, width/2, height/2);
citizen[i].angle = atan2(width/2 - citizen[i].x, height/2 - citizen[i].y);
citizen[i].range = random(2,minEdge/5.33);
if(citizen[i].id == this.id) citizen.splice(i,1);
}
};
</script>
}
}

window.onresize = function() {
var oldwidth = width;
var oldheight = height;
var w = window.innerWidth;
var h = window.innerHeight;
width = w;
height = h;
resizeCanvas(width,height);
minEdge = min(width,height);
for(var i = citizen.length-1; i > 0; i--){
citizen[i].x = map(citizen[i].x, 0, oldwidth, 0, width);
citizen[i].y = map(citizen[i].y, 0, oldheight, 0, height);
citizen[i].setSpeed();
citizen[i].radius = minEdge/40;
}
// for(var i = 0; i < 20; i ++){
// citizen.push(new Citizen(random(width/2 - minEdge/16, width/2 + minEdge/16), random(height/2-minEdge/4, height/2+minEdge/4), color(255,255,255)));
// }

// for(var i = 0; i < citizen.length; i++){
// citizen[i].speedX = ((citizen[i].x-width/2)*-1)/dist(citizen[i].x, citizen[i].y, width/2, height/2);
// citizen[i].speedY = ((this.y-height/2)*-1)/dist(citizen[i].x, citizen[i].y, width/2, height/2);
// citizen[i].angle = atan2(width/2 - citizen[i].x, height/2 - citizen[i].y);
// citizen[i].target = random(2,minEdge/5.33);
// }
};
</script>
</head>
<body>

<!--<img src="data/center.png" style="z-index:-1;position:absolute;display:block;top:50%;left:50%;"></img>-->
</body>
</html>

+ 28
- 0
p5.sound.min.js
ファイル差分が大きすぎるため省略します
ファイルの表示


読み込み中…
キャンセル
保存