Browse Source

release

master
Victor Giers 3 years ago
parent
commit
fc7e53b24c
6 changed files with 300 additions and 103 deletions
  1. BIN
      data/Juhani Junkala - Epic Boss Battle [Seamlessly Looping].wav
  2. BIN
      data/mask.png
  3. BIN
      data/music.mp3
  4. BIN
      data/music_big.mp3
  5. 272
    103
      index.html
  6. 28
    0
      p5.sound.min.js

BIN
data/Juhani Junkala - Epic Boss Battle [Seamlessly Looping].wav View File


BIN
data/mask.png View File


BIN
data/music.mp3 View File


BIN
data/music_big.mp3 View File


+ 272
- 103
index.html View File

@@ -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
File diff suppressed because it is too large
View File


Loading…
Cancel
Save