|
|
@@ -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); |
|
|
|
} |
|
|
|
} |