Advitum.de auf Google+

Regelmäßigkeit im Chaos – ein Canvas-Effekt mit Faszinations-Garantie

Regelmäßigkeit im Chaos – ein Canvas-Effekt mit Faszinations-Garantie
VN:F [1.9.22_1171]
Bewertung: 3.0/5 (2 Stimmen abgegeben)
Von am
Kategorien: Design, Inspiration, JavaScript, Programmieren, Tutorials

In meinem letzten Artikel habe ich beschrieben, wie man mit ein wenig Physik, JavaScript und dem Canvas einen interaktiven Effekt erstellen kann. In diesem Artikel möchte ich einen neuen Effekt vorstellen, der diesmal zwar nicht interaktiv, aber nicht weniger interessant ist.

Regelmäßigkeit im Chaos - ein Canvas-Effekt mit Faszinations-Garantie, 3.0 out of 5 based on 2 ratings

Zuerst das Resultat

Ein bisschen Theorie über Zykloide

Auch in diesem Effekt brauchen wir ein bisschen Theorie, jedoch nicht sehr viel. Obwohl die Bewegungen beinahe chaotisch wirken, steckt hinter ihnen ein mathematisches Muster. Punkt für Punkt wird das Muster aus der Rotation von Kreisen gegeneinander generiert. Klingt kompliziert, ist aber eigentlich ganz einfach. Gehen wir es Schritt für Schritt durch.

Als erstes denken wir uns einen Kreis in der Mitte. Dieser Kreis rotiert pro Iteration um einen bestimmten Winkel, zum Beispiel 2°.

Nun denken wir uns einen zweiten Kreis, der an dem Punkt auf dem ersten Kreis befestigt ist. Dieser Kreis ist halb so groß und rotiert doppelt so schnell, jedoch in die entgegengesetzte Richtung.

Wir können nun beliebig viele Kreise hinzufügen, so wird die entstehende Bewegung immer komplexer. So sieht die Bewegung zum Beispiel mit drei Kreisen aus.

Umsetzung I: HTML

Bevor wir den Effekt mit JavaScript umsetzen müssen, brauchen wir zunächst ein HTML-Dokument mit einem Canvas. Hier binden wir auch die JavaScript-Datei ein.

<!DOCTYPE html>
<html>

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

<body>
	<canvas></canvas>
	<script type="text/javascript" src="js/main.js"></script>
</body>

</html>

Umsetzung II: Javascript

Nun können wir mit dem Erstellen des Effekts beginnen. Als erstes definieren wir ein paar Konstanten.

var width = 600, height = 600;
var numCircles = 5;
var ratio = 1.41;
var maxRadius = 290;
var step = Math.PI / 180;

width und height stellen die Größe des Canvas dar. numCircles definiert die Anzahl der Kreise, ratio ist das Verhältnis zwischen den Größen der einzelnen Kreise. In diesem Fall ist jeder Kreis 1,41 mal so klein wie der vorherige. maxRadius ist der maximale gesamte Radius aller Kreise. So passt das Muster immer in den Canvas. step ist der Winkel, um den sich der erste Kreis jede Iteration dreht.

document.body.setAttribute('style', 'margin: 0px; padding: 0px; background: #111111; text-align: center;');

var canvas = document.getElementsByTagName('canvas')[0];

canvas.setAttribute('style', 'margin: 0px auto;');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);

var context = canvas.getContext('2d');

Nun bereiten wir den Canvas vor. Zunächst weisen wir dem Body ein paar Stile vor, danach wählen wir den Canvas aus und geben ihm auch Stile, Breite und Höhe. Zuletzt fragen wir noch den Context ab.

var smallestRadius = maxRadius;
while(smallestRadius > .01 && accumulatedRadius(smallestRadius) > maxRadius) {
	smallestRadius -= .01;
}

Als nächstes ermitteln wir den Radius des kleinsten Kreises. Insgesamt dürfen alle Radien zusammen nicht größer sein als maxRadius. Also starten wir mit maxRadius und verkleinern den Radius so lange, bis alle Radien zusammen kleiner als maxRadius sind. Mit der Funktion accumulatedRadius berechnen wir den summierten Radius aller Kreise.

function accumulatedRadius(smallestRadius) {
	var result = 0;
	for(var i = 0; i < numCircles; i++) {
		result += smallestRadius;
		smallestRadius *= ratio;
	}
	return result;
}

In der Funktion accumulatedRadius gehen wir einfach alle Kreise durch und addieren den Radius zur Summe.

Nachdem wir nun den kleinsten Radius kennen, können wir die Kreise generieren und in einem Array speichern.

var circles = [];
for(var i = 0; i < numCircles; i++) {
	circles.push({
		angle: 0,
		radius: smallestRadius * Math.pow(ratio, numCircles - i - 1)
	});
}

Für jeden Kreis speichern wir im Array circles ein Objekt, dass den Winkel und Radius dieses Kreises enthält. Der Winkel ist zu Anfang bei allen Kreisen 0. Den Radius können wir aus dem kleinsten Radius generieren, indem wir pro Kreis den Radius mit ratio multiplizieren.

context.fillStyle = '#ffffff';
window.setInterval(function() {
	var position = {
		x: width / 2,
		y: height / 2
	};
	var deltaAngle = step;
	for(var i = 0; i < numCircles; i++) {
		position.x += circles[i].radius * Math.sin(circles[i].angle);
		position.y += circles[i].radius * Math.cos(circles[i].angle);
		circles[i].angle += deltaAngle;
		deltaAngle *= -1 * ratio;
	}
	context.fillRect(position.x, position.y, 1, 1);
}, 1);

Schließlich können wir die Iteration starten. Den fillStyle setzen wir auf #ffffff.

In jeder Iteration beginnen wir im Mittelpunkt des Canvas. Diesen speichern wir im Objekt position. In der Variable deltaAngle speichern wir den Winkel, um den der erste Kreis rotieren wird. Nun gehen wir alle Kreise durch.

Mit Sinus und Cosinus verschieben wir für jeden Kreis position. So berechnen wir in jeder Iteration den Endpunkt der aktuellen Kreiswinkel. Diesen Endpunkt zeichnen wir schließlich auf unserem Canvas ein. Nach jeder Iteration werden die für die Kreise gespeicherten Winkel um deltaAngle geändert, wobei deltaAngle selbst mit jedem Kreis wieder umgekehrt und mit ratio multipliziert wird, genau wie vorhin bei unseren drei Kreisen.

So entsteht Punkt für Punkt ein komplexes Muster. Obwohl dieses Muster zufällig wirkt, zeichnen sich mit der Zeit Regelmäßigkeiten ab. So oder so ist der Effekt jedenfalls interessant.

Variationen und Spielerei

Den Effekt selbst kann man über die Anzahl der Kreise und die Größenverhältnisse variieren. Dafür habe ich hier eine interaktive Demo hochgeladen.

Mit diesem Effekt zeige ich nur stellvertretend die vielen Möglichkeiten, die uns dank Canvas, JavaScript und ein bisschen Fantasie offen stehen. Hiermit fordere ich Dich auf, ein wenig mit dem Canvas herum zu experimentieren. Im Web gibt es schon extrem viele Canvas-Experimente, aber der Kreativität sind keine Grenzen gesetzt.

Regelmäßigkeit im Chaos - ein Canvas-Effekt mit Faszinations-Garantie, 3.0 out of 5 based on 2 ratings

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

JayDee schrieb am Antworten

Hi Lars,
ich finde deine Beiträge einfach klasse die sind immer sehr verständlich und ausfühlrich erklärt.
das macht einfach Spaß diese zu lesen und auszuprobieren.

Würde mich sehr freuen, noch mehr solcher Beiträge zu lesen.
Vor allem HTML5 Und CSS3 das wäre super.

Danke.

Gruß JayDee

Diese Artikel könnten dir auch gefallen