kleiner-stern/stern.js

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