Profile picture Über mich

sebadorn | blog

Herausfinden, ob ein Punkt in einer Ellipse liegt

Ein Artikel darüber, wie man herausfindet, ob ein Punkt (von einem Mausklick) innerhalb einer bestimmten geometrischen Form (hier: einer Ellipse) liegt, diese sich aber nicht im Koordinaten-Ursprung befinden und noch dazu rotiert wurden.

Das Ziel

Auf einer <canvas>-Fläche befinden sich mehrere Figuren. Klickt man auf die Fläche, soll die getroffene Figur ausgewählt werden. Die Figuren können sich sonstwo befinden und wurden unter Umständen auch rotiert.

Das Ellipsen-Objekt

Zum Zeichnen eines Ellipsen-Objektes werden ein paar Informationen benötigt. Dies sind meine Variablennamen und ihre Bedeutung:

x, y, width, height
Geben die Position auf dem Canvas und Breite/Höhe an.
rotate
Rotationswinkel, der angewendet werden soll. Als Einheit werden Rad verwendet (360° = 2π rad).
ctx
Der 2D-Kontext des Canvas, dessen Funktionen zum Zeichen verwendet werden.

Zeichnen der Ellipse

Der folgende Code stammt von Web Reflection: ellipse and circle for canvas 2d context.

draw: function() {
	var hB = ( this.width / 2 ) * .5522848,
		vB = ( this.height / 2 ) * .5522848,
		eX = this.x + this.width,
		eY = this.y + this.height,
		mX = this.x + this.width / 2,
		mY = this.y + this.height / 2;

	this.applyRotation();

	this.ctx.beginPath();
	this.ctx.moveTo( this.x, mY );
	this.ctx.bezierCurveTo( this.x, mY - vB, mX - hB, this.y, mX, this.y );
	this.ctx.bezierCurveTo( mX + hB, this.y, eX, mY - vB, eX, mY );
	this.ctx.bezierCurveTo( eX, mY + vB, mX + hB, eY, mX, eY );
	this.ctx.bezierCurveTo( mX - hB, eY, this.x, mY + vB, this.x, mY );
	this.ctx.closePath();

	this.ctx.fill();
}

Die Rotation wende ich in einer eigenen Funktion auf den Canvas-Kontext selbst an. Damit sich die Ellipse dabei nicht verschiebt, muss ihr Mittelpunkt zuerst in den Koordinaten­ursprung verschoben werden mit translate(x, y). Danach wird sie rotiert und wieder an ihre vorherige Position gesetzt.

applyRotation: function() {
	if( this.rotate != 0 ) {
		var xShift = this.x + parseInt( this.width / 2 ),
			yShift = this.y + parseInt( this.height / 2 );

		this.ctx.translate( xShift, yShift );
		this.ctx.rotate( this.rotate );
		this.ctx.translate( -xShift, -yShift );
	}
}

Wundert sich schon jemand, warum erst nach (xShift, yShift) und später nach (-xShit, -yShift) verschoben wird? Von der Logik her muss es natürlich andersherum sein und so geschieht es intern auch. Bei Funktionen wie translate() und rotate() werden entsprechend Matrizen multipliziert. Eine Besonderheit bei der Matrizenmultiplikation ist es, dass die Faktoren in umgekehrter Reihenfolge aufgelistet werden müssen, als sie dann Anwendung finden.

Read more

Computergrafik: Unsere OpenGL-Achterbahn

Der Kurs Computergrafik (CG) ging nur das halbe Semester über, dafür mit zwei Terminen pro Woche. Endabgabe fürs Praktikum war es, mit Python und OpenGL eine Achterbahn zu bauen. Genau sahen die abzuhakenden Punkte wie folgt aus:

  • Die Bahn der Achterbahn soll als geschlossene B-Spline-Kurve beschrieben werden. (Dazu kommt gleich noch etwas.)
  • Der Coaster der Achterbahn soll texturiert sein.
  • Die Szene soll von einer Skybox umgeben sein.
  • Mit den Tasten + und - soll die Geschwindigkeit verändert werden können.
  • Mit der Taste K soll zwischen einer Kameraposition auf dem Coaster und einer Gesamtansicht gewechselt werden können.
  • Die Orientierung der Kamera soll per Maus verändert werden können.

Sagen wir es mal so: Wir (meine 3er-Gruppe) haben fast alles irgendwie hinbekommen. Und ja, das Video zu Beginn zeigt eben jenes unseres Endprodukt. (Unter beabsichtigter Nicht-Darstellung einiger Bugs. ;) ). Aufgenommen hat es Kai.

Read more

3/7 – Analysis

:widelaugh:

Analysis lief gut. Meine Fehler in der letzten Aufgabe kenne ich bereits (werden wohl nur 2 von 12 Punkten; dumme Betragsstriche), dafür war der Rest sehr zufriedenstellend.

xkcd (Blogs I Love – Part 3)

xkcd

A webcomic of romance, sarcasm, math, and language.

Nicht direkt ein Blog, aber erwähnenswert. Ein Webcomic mit Strichmännchen. Diese Kunst hat Randall Munroe perfektioniert. Munroe besitzt übrigens ein Diplom in Physik und hat bei der NASA an Robotern gearbeitet (so steht es auf seiner About-Seite). Der Humor fällt mehr so in die Kategorie For Geeks.

xkcd hat mittlerweile Kultstatus inne. Erwähnenswert finde ich auch, dass alle seine webcomics unter einer CreativeCommons-Lizenz (Namensnennung und nichtkommerziell) veröffentlicht sind.

xkcd: xkcd.com

Wort des Tages

… kann man sich das als infinitesimal kleine Scheiben vorstellen.