Victor Giers před 4 roky
rodič
revize
fc7e53b24c
6 změnil soubory, kde provedl 300 přidání a 103 odebrání
  1. binární
      data/Juhani Junkala - Epic Boss Battle [Seamlessly Looping].wav
  2. binární
      data/mask.png
  3. binární
      data/music.mp3
  4. binární
      data/music_big.mp3
  5. 272
    103
      index.html
  6. 28
    0
      p5.sound.min.js

binární
data/Juhani Junkala - Epic Boss Battle [Seamlessly Looping].wav Zobrazit soubor


binární
data/mask.png Zobrazit soubor


binární
data/music.mp3 Zobrazit soubor


binární
data/music_big.mp3 Zobrazit soubor


+ 272
- 103
index.html Zobrazit soubor

@@ -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
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


Načítá se…
Zrušit
Uložit