lol
This commit is contained in:
Victor Giers
17
README.md
17
README.md
@@ -1,10 +1,9 @@
|
||||
# 1makk
|
||||
### "Du kommsch hier net rein" Teil 2
|
||||
# deaths
|
||||
|
||||
2D video game based on "citizen" in which the player has to keep other citizen out of the group of his/her citizen
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Visualization and comparison of real humans and virtual humans death rate
|
||||
Embed using the following code (change width and height to your needs):
|
||||
|
||||
```
|
||||
<iframe src="https://editor.p5js.org/giers10/embed/Yz_FAMvxo" width="700" height="400"></iframe>
|
||||
|
||||
```
|
||||
BIN
data/center.png
Normal file
BIN
data/center.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 669 KiB |
BIN
data/mask.png
Normal file
BIN
data/mask.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
data/ring.png
Normal file
BIN
data/ring.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 428 KiB |
143
index.html
Normal file
143
index.html
Normal file
@@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!--<meta name="description" content="">
|
||||
<meta name="keywords" content="">-->
|
||||
<meta name="author" content="Victor Giers">
|
||||
<meta name="date" content="2019-06-25" scheme="YYYY-MM-DD">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>1makk</title>
|
||||
<style>
|
||||
body{padding: 0; margin: 0; background-color: gray; position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;}
|
||||
canvas {display: block; overflow: hidden;}
|
||||
</style>
|
||||
<script src="p5.min.js"></script>
|
||||
<script>
|
||||
"use strict";
|
||||
var width, height;
|
||||
|
||||
var rate = 16.667;
|
||||
var tickMS = rate;
|
||||
var previous;
|
||||
var time = 0;
|
||||
|
||||
var maxEdge;
|
||||
var minEdge;
|
||||
|
||||
var citizen = [];
|
||||
var angle = 0;
|
||||
|
||||
let center, ring, ringBuffer, mask, rotatedMask;
|
||||
|
||||
const FOLDER = 'data/';
|
||||
|
||||
function setup() {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
maxEdge = max(width, height);
|
||||
minEdge = min(width,height);
|
||||
|
||||
createCanvas(width,height);
|
||||
rotatedMask.imageMode(CENTER);
|
||||
imageMode(CENTER);
|
||||
textAlign(CENTER);
|
||||
|
||||
|
||||
previous = millis();
|
||||
}
|
||||
|
||||
|
||||
function preload(){
|
||||
center = loadImage(FOLDER + 'center.png');
|
||||
|
||||
ring = loadImage(FOLDER + 'ring.png', img => {
|
||||
ringBuffer = img.get();
|
||||
ringBuffer.loadPixels();
|
||||
img.loadPixels();
|
||||
});
|
||||
|
||||
mask = loadImage(FOLDER + 'mask.png', img => {
|
||||
rotatedMask = createGraphics(img.width, img.height);
|
||||
rotatedMask.image(img, 0, 0);
|
||||
});
|
||||
|
||||
}
|
||||
function draw() {
|
||||
clear();
|
||||
maxEdge = max(width,height);
|
||||
minEdge = min(width,height);
|
||||
angle = atan2(-width/2 + mouseX, -height/2 + mouseY);
|
||||
rotatedMask.clear();
|
||||
rotatedMask.resetMatrix();
|
||||
rotatedMask.translate(ringBuffer.width/2,ringBuffer.height/2);
|
||||
rotatedMask.rotate(map(angle, -PI, PI, PI, -PI));
|
||||
rotatedMask.image(mask, 0, 0);
|
||||
ring.pixels.set(ringBuffer.pixels);
|
||||
ring.updatePixels();
|
||||
ring.mask(rotatedMask);
|
||||
|
||||
//translate(width/2,height/2);
|
||||
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++){
|
||||
citizen[i].update();
|
||||
citizen[i].display();
|
||||
}
|
||||
fill(255,255,255);
|
||||
text(nf(angle, 0, 2), width/2,height/2, 40);
|
||||
}
|
||||
|
||||
|
||||
class Citizen{
|
||||
constructor(x, y, color){
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
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(){
|
||||
this.angle = atan2(width/2 - this.x, height/2 - this.y);
|
||||
if(this.angle + 0.4 > PI || this.angle - 0.4 < -PI){
|
||||
fill(0,255,0);
|
||||
text("problem!", this.x,this.y-50, 40);
|
||||
}
|
||||
if(dist(this.x, this.y, width/2, height/2) < minEdge/4 && dist(this.x, this.y, width/2, height/2) > minEdge/6){
|
||||
if(angle + 0.4 > this.angle && angle - 0.4 < this.angle){
|
||||
fill(0,255,0);
|
||||
text("JUHU", this.x,this.y-30, 40);
|
||||
} else {
|
||||
fill(255,0,0);
|
||||
text("AUA", this.x,this.y-30, 40);
|
||||
}
|
||||
}
|
||||
if(dist(this.x, this.y, width/2, height/2) > minEdge/6){
|
||||
this.x += this.speedX;
|
||||
this.y += this.speedY;
|
||||
}
|
||||
}
|
||||
display(){
|
||||
fill(255,255,255);
|
||||
ellipse(this.x, this.y, minEdge/40);
|
||||
fill(0);
|
||||
text(nf(this.angle, 0, 2), this.x,this.y-20, 40)
|
||||
}
|
||||
}
|
||||
|
||||
function mouseClicked(){
|
||||
citizen.push(new Citizen(mouseX, mouseY));
|
||||
}
|
||||
|
||||
window.onresize = function() {
|
||||
var w = window.innerWidth;
|
||||
var h = window.innerHeight;
|
||||
width = w;
|
||||
height = h;
|
||||
resizeCanvas(width,height);
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user