소스 검색

release

master
Victor Giers 4 년 전
부모
커밋
fc7e53b24c
6개의 변경된 파일300개의 추가작업 그리고 103개의 파일을 삭제
  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 파일 보기


BIN
data/mask.png 파일 보기


BIN
data/music.mp3 파일 보기


BIN
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
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


Loading…
취소
저장