giers10
/
1makk
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
Selaa lähdekoodia

release

master
Victor Giers 4 vuotta sitten
vanhempi
e0488dc127
commit
fc7e53b24c
6 muutettua tiedostoa jossa 300 lisäystä ja 103 poistoa
Jaettu näkymä Näytä diff tilastot
  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 Näytä tiedosto


BIN
data/mask.png Näytä tiedosto


BIN
data/music.mp3 Näytä tiedosto


BIN
data/music_big.mp3 Näytä tiedosto


+ 272
- 103
index.html Näytä tiedosto

@@ -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
Näytä tiedosto


Write Preview
Loading…
Peruuta
Tallenna