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