[FRAGE] Gimmicks

mikdoe · 13. Mai 2014

Ich dachte eher an ein rundes Tablett, was im selben 3D Effekt erscheint wie die Kerzen.
Und nochmal die Frage: Wenn man die Images verzögert einstellt, stellt der Browser dann die Kerzenflammen zufällig dar oder sind die dann auch alle gleich?

kkapsner · 13. Mai 2014

Wie gesagt - entweder du machst das mit einem Bild, wenn du wirklich ein schönes Tablett haben willst, oder so:

Code:

<!DOCTYPE html>

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Geburtstag</title>
</head>
<body>

<style type="text/css">
.cake {
	position: relative;
	background-color: black;
	border-radius: 100%;
	margin: 200px 100px 0px;
	height: 150px;
	width: 700px;
}
.candlePlace {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 20px;
	bottom: 20px;
}
.candle{
	width: 28px;
	margin-left: -14px;
	height: 156px;
	margin-top: -145px;
	position: absolute;
	cursor: pointer;
	background-image: url('http://mikdoe.host-ed.me/geburtstag/geburtstagskerze.gif');
	background-position: 50% 100%;
}
.candle.off {
	margin-top: -121px;
	height: 132px;
	cursor: initial;
}
</style>

<script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js?modules=random"></script>
<script type="text/javascript">
(function(){
	var age = 41;
	var remaining = age;
	var message = "Alles Gute zum Geburtstag";
	
	
	angles = [];
	for (var i = 0; i < age; i += 1){
		angles.push(i * 2 * Math.PI / age);
	}
	kkjs.random.array.shuffle(angles);
	
	var cake = kkjs.node.create({
		tag: "div",
		className: "cake",
		parentNode: document.body
	});
	var candlePlace = kkjs.node.create({
		tag: "div",
		className: "candlePlace",
		parentNode: cake
	});
	
	angles.forEach(function(angle, i){
		var candle = kkjs.node.create({
			tag: "div",
			className: "candle off",
			parentNode: candlePlace,
			events: {
				click: function(){
					this.className += " off";
					remaining -= 1;
					if (remaining === 0){
						alert(message);
					}
				}
			},
			style: {
				top: 50 * (1 + Math.sin(angle)) + "%",
				left: 50 * (1 + Math.cos(angle)) + "%",
				zIndex: Math.round(50 + 50 * (1 + Math.sin(angle)))
			}
		});
		window.setTimeout(
			function(){
				kkjs.css.className.remove(candle, "off");
			},
			i * 100
		);
	});
}());
</script>


</body>
</html>

- ist dann hald einfach nur eine schwarze Scheibe.

Das GIF wird nur einmal gerendert und dann an allen Stellen angezeigt. Es macht also keinen Unterschied, ob du die gleichzeitig oder versetzt erstellst:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js"></script>
<script type="text/javascript">
window.setInterval(function(){
	kkjs.node.create({
		tag: "img",
		src: "http://mikdoe.host-ed.me/geburtstag/geburtstagskerze.gif",
		parentNode: document.body
	});
}, 1234);
</script>
<style type="text/css"></style>
</head>
<body>
inhalt
</body>
</html>

nur wenn der Browser denkt, dass es unterschiedliche Bilder sind, werden die auch gesondert gerendert:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js"></script>
<script type="text/javascript">
window.setInterval(function(){
	kkjs.node.create({
		tag: "img",
		src: "http://mikdoe.host-ed.me/geburtstag/geburtstagskerze.gif?" + Math.random(),
		parentNode: document.body
	});
}, 1234);
</script>
<style type="text/css"></style>
</head>
<body>
inhalt
</body>
</html>

- hatte ich schon versucht einzubauen, hat aber irgendwie nicht funktioniert.

- - - Aktualisiert - - -

Code:

<!DOCTYPE html>

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Geburtstag</title>
</head>
<body>

<style type="text/css">
.cake {
	position: relative;
	background-color: black;
	border-radius: 100%;
	margin: 200px 100px 0px;
	height: 150px;
	width: 700px;
}
.candlePlace {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 20px;
	bottom: 20px;
}
.candle{
	width: 28px;
	margin-left: -14px;
	height: 156px;
	margin-top: -145px;
	position: absolute;
	cursor: pointer;
	background-image: url('http://mikdoe.host-ed.me/geburtstag/geburtstagskerze.gif');
	background-position: 50% 100%;
}
.candle.off {
	margin-top: -121px;
	height: 132px;
	cursor: initial;
}
</style>

<script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js?modules=random"></script>
<script type="text/javascript">
(function(){
	var age = 41;
	var remaining = age;
	var message = "Alles Gute zum Geburtstag";
	
	
	angles = [];
	for (var i = 0; i < age; i += 1){
		angles.push((i + 0.3) * 2 * Math.PI / age);
	}
	kkjs.random.array.shuffle(angles);
	
	var cake = kkjs.node.create({
		tag: "div",
		className: "cake",
		parentNode: document.body
	});
	var candlePlace = kkjs.node.create({
		tag: "div",
		className: "candlePlace",
		parentNode: cake
	});
	
	angles.forEach(function(angle, i){
		var candle = kkjs.node.create({
			tag: "div",
			className: "candle off",
			parentNode: candlePlace,
			events: {
				click: function(){
					this.className += " off";
					remaining -= 1;
					if (remaining === 0){
						alert(message);
					}
				}
			},
			style: {
				top: 50 * (1 + Math.sin(angle)) + "%",
				left: 50 * (1 + Math.cos(angle)) + "%",
				zIndex: Math.round(50 + 50 * (1 + Math.sin(angle)))
			}
		});
		window.setTimeout(
			function(){
				var img = new Image();
				img.onload = function(){
					kkjs.css.set(candle, "backgroundImage", "url('" + img.src + "')");
					kkjs.css.className.remove(candle, "off");
				};
				img.src = kkjs.css.get(candle, "backgroundImage").replace(/^\s*url\((["']?)(.+)\1\)\s*$/, "$2").replace(/(\.[^.]+)$/, "$1?" + Math.random());
			},
			i * 100
		);
	});
}());
</script>


</body>
</html>

mikdoe · 14. Mai 2014

Geil! Danke Korbinian!! Das nehm ich erstmal.

kkapsner · 14. Mai 2014

Hab' noch einen kleinen Fehler gefunden:

Code:

<!DOCTYPE html>

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Geburtstag</title>
</head>
<body>

<style type="text/css">
.cake {
	position: relative;
	background-color: black;
	border-radius: 100%;
	margin: 200px 100px 0px;
	height: 150px;
	width: 700px;
}
.candlePlace {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 20px;
	bottom: 20px;
}
.candle{
	width: 28px;
	margin-left: -14px;
	height: 156px;
	margin-top: -145px;
	position: absolute;
	cursor: pointer;
	background-image: url('http://mikdoe.host-ed.me/geburtstag/geburtstagskerze.gif');
	background-position: 50% 100%;
}
.candle.off {
	margin-top: -121px;
	height: 132px;
	cursor: initial;
}
</style>

<script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js?modules=random"></script>
<script type="text/javascript">
(function(){
	var age = 41;
	var remaining = age;
	var message = "Alles Gute zum Geburtstag";
	
	
	angles = [];
	for (var i = 0; i < age; i += 1){
		angles.push((i + 0.3) * 2 * Math.PI / age);
	}
	kkjs.random.array.shuffle(angles);
	
	var cake = kkjs.node.create({
		tag: "div",
		className: "cake",
		parentNode: document.body
	});
	var candlePlace = kkjs.node.create({
		tag: "div",
		className: "candlePlace",
		parentNode: cake
	});
	
	angles.forEach(function(angle, i){
		var counted = true;
		var candle = kkjs.node.create({
			tag: "div",
			className: "candle off",
			parentNode: candlePlace,
			events: {
				click: function(){
					if (!counted){
						counted = true;
						this.className += " off";
						remaining -= 1;
						if (remaining === 0){
							alert(message);
						}
					}
				}
			},
			style: {
				top: 50 * (1 + Math.sin(angle)) + "%",
				left: 50 * (1 + Math.cos(angle)) + "%",
				zIndex: Math.round(50 + 50 * (1 + Math.sin(angle)))
			}
		});
		window.setTimeout(
			function(){
				var img = new Image();
				img.onload = function(){
					kkjs.css.set(candle, "backgroundImage", "url('" + img.src + "')");
					kkjs.css.className.remove(candle, "off");
				};
				img.src = kkjs.css.get(candle, "backgroundImage").replace(/^\s*url\((["']?)(.+)\1\)\s*$/, "$2").replace(/(\.[^.]+)$/, "$1?" + Math.random());
				counted = false;
			},
			i * 100
		);
	});
}());
</script>


</body>
</html>

mikdoe · 15. Mai 2014

Hab das Ganze mal in pures JS übersetzt.
Aber bei einem weiß ich nicht, wie ich es übersetzen soll: kkjs.random.array.shuffle(angles);
Im Quellcode von http://kkjs.kkapsner.de/modules/kkjs.load.js?modules=random finde ich dazu nichts.

HTML:

<!DOCTYPE html>

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Geburtstag</title>
</head>
<body>

<style type="text/css">
.cake {
	position: relative;
	background-color: black;
	border-radius: 100%;
	margin: 150px 30px 0px;
	height: 150px;
	width: 700px;
}
.candlePlace {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 20px;
	bottom: 20px;
}
.candle{
	width: 28px;
	margin-left: -14px;
	height: 156px;
	margin-top: -145px;
	position: absolute;
	cursor: pointer;
	background-image: url('http://mikdoe.host-ed.me/geburtstag/geburtstagskerze.gif');
	background-position: 50% 100%;
}
.candle.off {
	margin-top: -121px;
	height: 132px;
	cursor: initial;
}
#geburtstag {
	border:1px solid red;
	width: 760px;
	height: 330px;
	top: 200px;
	left: 500px;
	position: absolute;
}
</style>

<div id="geburtstag">
</div>

<script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js?modules=random"></script>
<script type="text/javascript">
(function(){
	var age = 10;
	var remaining = age;
	var message = "Alles Gute zum Geburtstag";
	
	
	angles = [];
	for (var i = 0; i < age; i += 1){
		angles.push((i + 0.3) * 2 * Math.PI / age);
	}
	kkjs.random.array.shuffle(angles);
	
//	var cake = kkjs.node.create({
//		tag: "div",
//		className: "cake",
//		parentNode: geburtstag
//	});
	var cake = document.createElement('div');
	cake.className = 'cake';
	document.getElementById('geburtstag').appendChild(cake);
//	var candlePlace = kkjs.node.create({
//		tag: "div",
//		className: "candlePlace",
//		parentNode: cake
//	});
	var candlePlace = document.createElement('div');
	candlePlace.className = 'candlePlace';
	cake.appendChild(candlePlace);
	
	angles.forEach(function(angle, i){
		var counted = true;
//		var candle = kkjs.node.create({
//			tag: "div",
//			className: "candle off",
//			parentNode: candlePlace,
//			events: {
//				click: function(){
//					if (!counted){
//						counted = true;
//						this.className += " off";
//						remaining -= 1;
//						if (remaining === 0){
//							alert(message);
//						}
//					}
//				}
//			},
//			style: {
//				top: 50 * (1 + Math.sin(angle)) + "%",
//				left: 50 * (1 + Math.cos(angle)) + "%",
//				zIndex: Math.round(50 + 50 * (1 + Math.sin(angle)))
//			}
//		});
		var candle = document.createElement('div');
		candle.className = 'candle off';
		candle.onclick = function() {
			if (!counted){
				counted = true;
				this.className += " off";
				remaining -= 1;
				if (remaining === 0){
					alert(message);
				}
			}
		};
		candle.style.top = 50 * (1 + Math.sin(angle)) + "%";
		candle.style.left = 50 * (1 + Math.cos(angle)) + "%";
		candle.style.zIndex = Math.round(50 + 50 * (1 + Math.sin(angle)));
		candlePlace.appendChild(candle);

		window.setTimeout(
			function(){
				var img = new Image();
				img.onload = function(){
//					kkjs.css.set(candle, "backgroundImage", "url('" + img.src + "')");
					candle.style.backgroundImage = "url('" + img.src + "')";
//					kkjs.css.className.remove(candle, "off");
					candle.classList.remove("off");
				};
//				img.src = kkjs.css.get(candle, "backgroundImage").replace(/^\s*url\((["']?)(.+)\1\)\s*$/, "$2").replace(/(\.[^.]+)$/, "$1?" + Math.random());
				img.src = (window.getComputedStyle(candle).getPropertyValue("background-image")).replace(/^\s*url\((["']?)(.+)\1\)\s*$/, "$2").replace(/(\.[^.]+)$/, "$1?" + Math.random());
				counted = false;
			},
			i * 100
		);
	});
}());
</script>

</body>
</html>

kkapsner · 15. Mai 2014

Die kkjs.load.js ist nur der Einstiegspunkt, der dann die anderen Module nachläd'. Der Code zum shuffle ist in kkjs.random.js:

Code:

(function(){
"use strict";

/**
 * Object random
 * @name: random
 * @author: Korbinian Kapsner
 * @description: provides advanced random functionality
 */

var rand = Math.random;
var random = {
	inRange: function randomInRange(lower, upper){
		/**
		 * Function random.inRange
		 * @name: random.inRange
		 * @author: Korbinian Kapsner
		 * @version: 1.0
		 * @description: returns a number between lower (including) and upper (excluding)
		 * @parameter:
		 *	lower:
		 *	upper:
		 */
		
		return lower + rand()*(upper - lower);
	},
	
	gauss: function randomGauss(mu, sigma2){
		/**
		 * Function random.gauss
		 * @name: random.inRange
		 * @author: Korbinian Kapsner
		 * @version: 1.0
		 * @description: returns random numbers according to a normal distribution. The polar method is used.
		 * @parameter:
		 *	mu: mean of the distribution
		 *	sigma2: variance of the 
		 */
		
		var u1, u2, p, q;
		do {
			u1 = random.inRange(-1, 1);
			u2 = random.inRange(-1, 1);
			q = u1 * u1 + u2 * u2;
		} while (q > 1);
		p = Math.sqrt(-2* Math.log(q)/q);
		return sigma2 * u1 * p + mu;
	},
	
	/**
	 * Object random.integer
	 * @name: random.integer
	 * @author: Korbinian Kapsner
	 * @description: integers only
	 */
	integer: {
		inRange: function randomIntInRange(lower, upper){
			/**
			 * Function random.integer.inRange
			 * @name: random.integer.inRange
			 * @author: Korbinian Kapsner
			 * @version: 1.0
			 * @description: returns an int between lower and upper (including both)
			 * @parameter:
			 *	lower:
			 *	upper:
			 */
			
			return Math.floor(random.inRange(lower, upper + 1));
		}
	},
	
	/**
	 * Object random.array
	 * @name: random.array
	 * @author: Korbinian Kapsner
	 * @description: integers only
	 */
	array: {
		shuffle: function shuffleArray(arr){
			/**
			 * Function random.array.shuffle
			 * @name: random.array.shuffle
			 * @author: Korbinian Kapsner
			 * @version: 1.0
			 * @description: shuffles the provided array
			 * @parameter:
			 *	array:
			 */
			
			for (var i = arr.length; i--;){
				var sIndex = random.integer.inRange(0, i);
				var h = arr[i];
				arr[i] = arr[sIndex];
				arr[sIndex] = h;
			}
			return arr;
		}
	}
};

if (typeof exports !== "undefined"){
	for (var i in random){
		if (random.hasOwnProperty(i)){
			exports[i] = random[i];
		}
	}
}
else if (typeof kkjs !== "undefined"){
	kkjs.random = random;
}

})();

mikdoe · 15. Mai 2014

Danke dir! Dann wäre das jetzt die fertige pur JS Version: Geburtstag
Sehr geil.

kkapsner · 15. Mai 2014

Bitte - gern geschehen.

[FRAGE] Gimmicks

mikdoe

Moderator

kkapsner

Super Moderator

mikdoe

Moderator

kkapsner

Super Moderator

mikdoe

Moderator

kkapsner

Super Moderator

mikdoe

Moderator

kkapsner

Super Moderator