giers10/kleiner-stern
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Victor Giers
2020-09-30 02:59:16 +02:00
commit 62429aa4cf
9 changed files with 189 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
img/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
img/links.min.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

BIN
img/rechts.min.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
img/thumbnail_512.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
img/unten.min.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

74
index.htm Normal file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Victor Giers">
<meta name="date" content="2020-02-14">
<meta property="og:url" content="https://www.victorgiers.com/stern/index.htm" />
<meta property="og:type" content="animation" />
<meta property="og:title" content="Kleiner Stern" />
<meta property="og:description" content="Digitales Replikate von Walter Giers' 'Kleiner Stern' (1990)" />
<meta property="og:image" content="https://www.victorgiers.com/stern/img/thumbnail_512.jpg" />
<link rel="icon" type="image/vnd.microsoft.icon" href="img/favicon.ico">
<script language="javascript" type="text/javascript" src="p5.min.js"></script>
<script language="javascript" type="text/javascript" src="stern.js"></script>
<style>
body { background-color: #6b718d; display: flex; position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; align-items: center; justify-content: center; border:none; margin:0; padding:0; overflow:hidden; z-index:1;}
#fsb { position: absolute; right: 20px; bottom: 20px; }
#nca { position: absolute; width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="nca"></div>
<button id="fsb" onclick="toggleFullscreen();">Vollbild</button>
<script>
var elem = document.documentElement;
var fullScreen = false;
function toggleFullscreen() {
if(fullScreen){
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
} else {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
document.getElementById('fsb').style.display = "none";
document.getElementById('nca').style.cursor = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='), url(images/blank.cur), none"
}
fullscreen = !fullscreen;
}
if (document.addEventListener)
{
document.addEventListener('fullscreenchange', exitHandler, false);
document.addEventListener('mozfullscreenchange', exitHandler, false);
document.addEventListener('MSFullscreenChange', exitHandler, false);
document.addEventListener('webkitfullscreenchange', exitHandler, false);
}
function exitHandler()
{
if (document.webkitIsFullScreen === false || document.mozFullScreen === false || document.msFullscreenElement === false)
{
document.getElementById('fsb').style.display = "";
document.getElementById('nca').style.cursor = "";
}
}
</script>
</body>
</html>

3
p5.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

112
stern.js Normal file
View File

@@ -0,0 +1,112 @@
var img_unten,img_links,img_rechts,img_hinten;
let unten,links,rechts;
var rate = 1000;
var imgW, imgH;
let tempo = "medium"; //slow, medium or fast
function preload(){
img_unten = loadImage("img/unten.min.png");
img_links = loadImage("img/links.min.png");
img_rechts = loadImage("img/rechts.min.png");
img_hinten = loadImage("img/bg.jpg");
}
function setImageSize(){
imgW = windowWidth / windowHeight > img_hinten.width / img_hinten.height ? windowWidth : windowHeight/9*16;
imgH = windowWidth / windowHeight > img_hinten.width / img_hinten.height ? windowWidth/16*9: windowHeight;
}
function setup() {
createCanvas(windowWidth,windowHeight);
setImageSize();
imageMode(CENTER);
frameRate(120);
if(tempo == "medium"){
unten = new Kammer(img_unten, 7, 3, 7);
links = new Kammer(img_links, 12, 3, 15);
rechts = new Kammer(img_rechts, 17, 3, 20);
} else if (tempo == "fast"){
unten = new Kammer(img_unten, 2, 1, 3);
links = new Kammer(img_links, 3, 1, 4);
rechts = new Kammer(img_rechts, 4, 2, 5);
} else { // slow - standard - beschde
unten = new Kammer(img_unten, 15, 7, 16);
links = new Kammer(img_links, 25, 5, 30);
rechts = new Kammer(img_rechts, 35, 5, 40);
}
console.log("......................:W*...=@...-WW@...*WW+..........:#-...*WW*...*WW+...*WW+.\n" +
"....:@W@-:@W@-.......:W+...#@...-WW@....*WW+......:#WWWW-...*WW*...*WW+...*WW+.\n"+
"....WWWWWWWWW@......:W+...#@...-WW#.....*WW+..-=WWW@*.......*WW*...*WW+...*WW+.\n"+
".....=WWWWWW*......:W+...#@...-WW#......*WW+..WWW=-.........*WW*...*WW+...*WW+.\n"+
".......-@@-.......+W+...#@...:WW#.......*WW+...-=WWWW=-.....*WW*...*WW+...*WW+.\n"+
".................+W:...@@...:WW=........*WW+.......-=WWW-...*WW*...*WW+...*WW+.\n"+
"................-+-...:+....+++.........:++-...........-....-++:...:++-...:++-."
);
}
function windowResized() {
setImageSize();
resizeCanvas(windowWidth, windowHeight);
}
function draw() {
clear();
//tint(255);
image(img_hinten,windowWidth/2,windowHeight/2,imgW,imgH);
unten.do();
links.do();
rechts.do();
///
/*let fps = frameRate();///
fill(255);
stroke(0);
text("FPS: " + fps.toFixed(2), 10, height - 10);*/
}
class Kammer {
constructor(img, a, s, r) {
this.img = img;
this.attack = a * 1000;
this.sustain = s * 1000;
this.release = r * 1000;
this.direction = Math.random() < 0.5 ? -1 : 1; // -1 = wird dunkler, 1 = wird heller
this.nextBrightness = this.direction == 1 ? 1 : random(0.05,0.1);
this.lastBrightness = Math.random();
this.brightness = this.lastBrightness;
this.lastSwitchTime = millis();
}
do() {
this.brightness = constrain(this.brightness, this.nextBrightness, this.lastBrightness);
if(this.direction == 1 && millis() < this.lastSwitchTime + this.attack){
this.brightness = map(millis(), this.lastSwitchTime, this.lastSwitchTime + this.attack, this.lastBrightness, this.nextBrightness);
}
if(this.direction == 1 && millis() - this.lastSwitchTime > this.attack + this.sustain){
this.direction = -1;
this.lastBrightness = this.brightness;
this.nextBrightness = random(0.05,0.1);
this.lastSwitchTime = millis();
}
if(this.direction == -1){
this.brightness = map(millis(), this.lastSwitchTime, this.lastSwitchTime + this.release, this.lastBrightness, this.nextBrightness);
}
if(this.direction == -1 && millis() - this.lastSwitchTime > this.release){
this.direction = 1;
this.lastBrightness = this.brightness;
this.nextBrightness = 1;
this.lastSwitchTime = millis();
}
this.img.loadPixels();
for (let i = 0; i < this.img.width*this.img.height*4; i += 4) {
if(this.img.pixels[i] > 0){ //has color; not a fully transparent pixel
this.img.pixels[i + 3] = this.brightness*255;
}
}
this.img.updatePixels();
//tint(255,this.brightness*255);
image(this.img,windowWidth/2,windowHeight/2,imgW,imgH);
}
}