Wir wünschen allen Kindern und denen, die ihr inneres Kind erfolgreich bewahren, alles Liebe zum heutigen Kindertag!
Wusstest du, das heute alles möglich ist? Die Kleinen werden groß, Graues wird bunt und mit ein bisschen Farbe und geheimer Geheimzutat wird Gemaltes lebendig!
Glaubst du nicht? Dann probiere es doch mal aus!
//Liste der Img Urls
var fishImgSrc = new Array(
'https://www.kulturlokalmachen.de/s/wp-content/uploads/2021/05/Suse-Aal.png' ,
'https://www.kulturlokalmachen.de/s/wp-content/uploads/2021/05/test1.png' ,
'https://www.kulturlokalmachen.de/s/wp-content/uploads/2021/05/Lias.png',
'https://www.kulturlokalmachen.de/s/wp-content/uploads/2021/05/Suse.png',
'https://www.kulturlokalmachen.de/s/wp-content/uploads/2021/06/KATHLEENkulturlokalmachen_aquarium-fisch-burg-removebg-preview.png',
'https://www.kulturlokalmachen.de/s/wp-content/uploads/2021/06/Sandy_B._1-removebg-preview.png',
'https://www.kulturlokalmachen.de/s/wp-content/uploads/2021/06/sandy_b._2-removebg-preview.png',
'https://www.kulturlokalmachen.de/s/wp-content/uploads/2021/06/RegineBunt.png',
'https://www.kulturlokalmachen.de/s/wp-content/uploads/2021/06/RegineLeuchtturm.png',
'https://www.kulturlokalmachen.de/s/wp-content/uploads/2021/06/RegineSeepferdchen.png'
);
var pngGesamtbreite = 700;
var pngGesamthoehe = 600;
var platzhalterGroesse = 1260;
var fischGroesse = 100;
//Properties
var SINGLE_CYCLE = 16.7;
var INTRODUCTION_DELAY = 400;
var water, fishBowl;
var drawInterval;
var sceneLeft, sceneTop, sceneWidth, sceneHeight;
var marginTop = 0, marginBottom = 0, marginLeft = 0, marginRight = 0;
var fishBowlWidth = 0, fishBowlHeight = 0;
var imgFish = new Array();
var imgFishIndex = 0;
var resourcesLoaded = 0;
var resourceLoadCompleted = false;
//Startfunktion
(function() {
Initialize();
document.getElementsByClassName( 'entry-content')[0].style.height = platzhalterGroesse + 'px';
})();
//Laden und Initialisieren
function Initialize() {
for(var i = 0; i 0) ? fishBowl.lowerHOffsets[Math.round(10 * (((this.y) + this.height + this.verticalSpeed) / fishBowl.fishBowlMaxY))] * fishBowl.fishBowlMaxX : fishBowl.upperHOffsets[Math.round(10 * ((this.y - this.height - this.verticalSpeed) / -fishBowl.fishBowlMaxY))] * fishBowl.fishBowlMaxX;
if (this.horizontalDirection == 1) {
this.x += this.horizontalSpeed * fishBowl.fishBowlSpeed;
var maxX = fishBowl.fishBowlMaxX - this.width;//- hOffset
if (this.x > maxX) {
this.x = maxX;
this.flipping = true;
}
}
else {
this.x -= this.horizontalSpeed * fishBowl.fishBowlSpeed;
var maxX = -fishBowl.fishBowlMaxX + this.width; //+ hOffset
if (this.x 0) ? fishBowl.lowerVOffsets[Math.round(10 * ((Math.abs(this.x) + this.width) / fishBowl.fishBowlMaxX))] * fishBowl.fishBowlMaxX : fishBowl.upperVOffsets[Math.round(10 * ((Math.abs(this.x) + this.width) / fishBowl.fishBowlMaxX))] * fishBowl.fishBowlMaxX;
if (this.verticalDirection == 1) {
this.y += this.verticalSpeed * fishBowl.fishBowlSpeed;
var maxY = fishBowl.fishBowlMaxY - this.height; //- vOffset
if (this.y > maxY) {
if (this.y > fishBowl.fishBowlMaxY * 0.95) {
this.verticalDirection = -1;
this.ChangeSpeed();
this.bottomBounces = 0;
}
else {
this.y -= this.verticalSpeed * 0.99;
this.bottomBounces++;
}
if (this.bottomBounces > this.MAX_BOTTOM_BOUNCES) {
this.verticalDirection = -1;
this.ChangeSpeed();
this.bottomBounces = 0;
}
}
}
else {
this.y -= this.verticalSpeed * fishBowl.fishBowlSpeed;
var maxY = -fishBowl.fishBowlMaxY + this.height; //+ vOffset
if (this.y < maxY) {
this.verticalDirection = 1;
this.ChangeSpeed();
}
}
if (this.flipping == false) {
if ((Math.random() * (pngGesamtbreite * fishBowl.fishBowlSpeed)) < 1) {
this.flipping = true;
}
if ((Math.random() * 220) < 1) {
this.ChangeSpeed();
}
}
this.horizontalSpeed += (this.targetHorizontalSpeed - this.horizontalSpeed) * 0.04491 * fishBowl.fishBowlSpeed;
this.verticalSpeed += (this.targetVerticalSpeed - this.verticalSpeed) * 0.9874 * fishBowl.fishBowlSpeed;
if (this.verticalDirection == 1 && this.rotation this.targetRotation) {
this.rotation -= (this.rotation - this.targetRotation) * 0.08516147 * fishBowl.fishBowlSpeed;
}
// Draw Fish
fishBowl.context.save();
fishBowl.context.translate(fishBowl.centerX + this.x, fishBowl.centerY + this.y);
fishBowl.context.scale(this.horizontalDirection, 1);
fishBowl.context.rotate(this.rotation);
fishBowl.context.globalAlpha = 1;//(this.width / (this.MAX_SIZE * 1.90174851));
fishBowl.context.drawImage(img, 0, 0, pngGesamtbreite, pngGesamthoehe, -this.width, -this.height, this.width * 2, this.height * 2); // * this.flutterIndex
fishBowl.context.restore();
}
};
this.ChangeSpeed = function () {
this.targetHorizontalSpeed = (Math.random() * 2) + Math.random();
this.targetVerticalSpeed = (Math.random() * 2) + Math.random();
this.targetRotation = this.CalculateTargetRotation();
}
Fish.prototype.InitializeFixed = function () {
this.x = 0;
this.y = 0;
this.width = 50;
this.height = 50;
this.horizontalDirection = 1;
this.verticalDirection = 1;
this.flutterDirection = 1;
this.flutterIndex = 0;
this.horizontalSpeed = 6;
this.targetHorizontalSpeed = 6;
this.verticalSpeed = 0.6;
this.targetVerticalSpeed = 0.6;
this.falling = false;
this.decelerating = false;
this.bottomBounces = 0;
this.rotation = 0;
this.targetRotation = this.CalculateTargetRotation();
};
Fish.prototype.InitializeRandom = function () {
this.x = (Math.random() * fishBowl.fishBowlMaxX * this.MAX_ENTRY_DIAMETER) - (fishBowl.fishBowlMaxX * this.MAX_ENTRY_DIAMETER * 0.5);
this.y = (Math.random() * fishBowl.fishBowlMaxY * this.MAX_ENTRY_DIAMETER) - (fishBowl.fishBowlMaxY * this.MAX_ENTRY_DIAMETER * 0.5);
this.width = this.MAX_SIZE;//(Math.random() * this.MAX_SIZE) + this.MIN_SIZE;
this.height = this.width;// - (Math.random() * 3);
this.horizontalDirection = (Math.round(Math.random()) > 0.5) ? 1 : -1;
this.verticalDirection = (Math.round(Math.random()) > 0.5) ? 1 : -1;
this.flutterDirection = 1;
this.flutterIndex = Math.round(Math.random() * 8);
this.horizontalSpeed = (Math.random() * 8) + Math.random();
this.targetHorizontalSpeed = this.horizontalSpeed;
this.verticalSpeed = (Math.random() * 2) + Math.random();
this.targetVerticalSpeed = this.verticalSpeed;
this.falling = false;
this.decelerating = false;
this.bottomBounces = 0;
this.rotation = 0;
this.targetRotation = 0.5;
this.targetRotation = this.CalculateTargetRotation();
};
Fish.prototype.CalculateTargetRotation = function () {
var factor = this.verticalSpeed / this.horizontalSpeed;
if (this.verticalDirection == 1) {
return (Math.min((factor * 0.24), 0.35));
}
else {
return (Math.max((factor * -0.28), -0.5));
}
};
}
function FishBowl() {
this.canvas;
this.context;
this.displayFish = true;
this.displayBowlMask = true;
this.displayBowlBack = true;
this.displayBowlFront = true;
this.displayBowlShine = true;
this.displayBowlShadow = true;
this.displayEdges = false;
this.fishBowlWidth = 0;
this.fishBowlHeight = 0;
this.fishBowlScale = 1;
this.fishBowlSpeed = 1;
this.fishBowlMaxX;
this.fishBowlMaxY;
this.centerX = 100;
this.centerY = 100;
this.shadowHeight = 0;
this.autoMode = true;
this.checkFrameCount = 0;
this.checkFrequency = 4;
this.numberToAdjust = 3;
this.upperHOffsets = new Array(0.02, 0.015, 0.012, 0.02, 0.028, 0.041, 0.068, 0.096, 0.135, 0.18, 0.25);
this.lowerHOffsets = new Array(0.02, 0.05, 0.07, 0.10, 0.144, 0.18, 0.24, 0.32, 0.40, 0.51, 0.63, 0.63);
this.upperVOffsets = new Array(0.00, 0.002, 0.0031, 0.0035, 0.0038, 0.0041, 0.0044, 0.0048, 0.021, 0.041, 0.085);
this.lowerVOffsets = new Array(0.006, 0.006, 0.006, 0.006, 0.024, 0.08, 0.18, 0.30, 0.43, 0.66, 0.999, 1);
this.fish = new Array();
this.Resize = function () {
this.fishBowlWidth = sceneWidth - marginLeft - marginRight;
this.fishBowlHeight = sceneHeight - marginTop - marginBottom;
this.shadowHeight = this.fishBowlHeight * (150 / 1800);
//this.canvas.style.top = marginTop + "px";
//this.canvas.style.left = marginLeft + "px";
this.canvas.setAttribute("width", this.fishBowlWidth);
this.canvas.setAttribute("height", this.fishBowlHeight);
this.centerX = (this.fishBowlWidth / 2);
this.centerY = (this.fishBowlHeight / 2) + (this.fishBowlHeight * 0.062);
this.fishBowlMaxX = (this.fishBowlWidth / 2) * 1;
this.fishBowlMaxY = this.fishBowlHeight * 1 / 2;
this.fishBowlScale = this.fishBowlWidth / 800;
}
this.Draw = function () {
this.context.clearRect(0, 0, this.fishBowlWidth, this.fishBowlHeight);
if (this.displayFish === true) {
var fish = null;
for (var i = 0; fish = this.fish[i]; i++) {
fish.Draw();
}
}
if (this.displayEdges) {
this.DrawEdges();
}
}
this.DrawEdges = function () {
this.context.globalAlpha = 1;
this.context.fillStyle = "rgb(0,0,0)";
this.context.fillRect(this.centerX - 2, this.centerY - 4, 8, 8);
this.context.fillStyle = "rgb(255,255,0)";
for (var i = 0; i < this.lowerHOffsets.length; i++) {
this.context.fillRect(((1 - this.lowerHOffsets[i]) * this.fishBowlMaxX) + this.centerX, (this.fishBowlMaxY * i / 10) + this.centerY, 2, 2);
this.context.fillRect(this.centerX - ((1 - this.lowerHOffsets[i]) * this.fishBowlMaxX), (this.fishBowlMaxY * i / 10) + this.centerY, 2, 2);
this.context.fillRect(((1 - this.upperHOffsets[i]) * this.fishBowlMaxX) + this.centerX, this.centerY - (this.fishBowlMaxY * i / 10), 2, 2);
this.context.fillRect(this.centerX - ((1 - this.upperHOffsets[i]) * this.fishBowlMaxX), this.centerY - (this.fishBowlMaxY * i / 10), 2, 2);
}
this.context.fillStyle = "rgb(255,0,0)";
for (var i = 0; i < this.lowerVOffsets.length; i++) {
this.context.fillRect((this.fishBowlMaxX * i / 10) + this.centerX, this.centerY + ((1 - this.lowerVOffsets[i]) * this.fishBowlMaxY), 2, 2);
this.context.fillRect(this.centerX - (this.fishBowlMaxX * i / 10), this.centerY + ((1 - this.lowerVOffsets[i]) * this.fishBowlMaxY), 2, 2);
this.context.fillRect((this.fishBowlMaxX * i / 10) + this.centerX, this.centerY - ((1 - this.upperVOffsets[i]) * this.fishBowlMaxY), 2, 2);
this.context.fillRect(this.centerX - (this.fishBowlMaxX * i / 10), this.centerY - ((1 - this.upperVOffsets[i]) * this.fishBowlMaxY), 2, 2);
}
}
FishBowl.prototype.Initialize = function () {
this.canvas = document.getElementById("FishBowlCanvas");
this.context = this.canvas.getContext("2d");
// jweberTBD document.getElementById("FishCount").value = "10";
};
this.Initialize();
FishBowl.prototype.AddFish = function (fishImg) {
//console.log("addFish " + fishImg);
var f = new Fish(fishImg);
f.InitializeRandom();
this.fish.push(f);
};
FishBowl.prototype.SetFish = function (fishes) {
this.fish = new Array();
this.checkFrequency = 4;
this.numberToAdjust = 3;
for (i = 0; i < fishes.length; i++) {
this.AddFish(fishes[i]);
}
};
}
function Water() {
this.waterVideo;
this.playAudio = true;
this.playVideo = true;
this.Initialize = function () {
this.waterVideo = document.getElementById("WaterVideo");
}
this.Initialize();
this.Resize = function () {
}
}
