sebadorn

Herausfinden, ob ein Punkt in einer Ellipse liegt

Informatik von Seba

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.

weiterlesen

Mal wieder etwas zum Thema Anime

Anime & Manga von Seba

Fate/zero

Fate/zero hat mich nicht enttäuscht und zählt derweil zu meinen Favoriten. Irgendetwas an der Optik wirkt allerdings leicht ungewohnt und ich meine, den Faktor dafür gefunden zu haben – die Hintergründe wirken meist recht statisch. Oh, sie sind wunderbar gezeichnet und verdienen Lob, aber es sieht doch ein klein wenig danach aus, als stünden unsere Charaktere auf einer Bühne in einem der beeindruckendsten Theater der Welt. Doch auch das beste Bühnenbild kann aus seiner Natur heraus nicht anders als flach wirken.

Ein wenig irritierend sind Szenen umgesetzt, die, um das schwache Zuschauerherz zu schonen, von Grässlichkeiten wegschauen. Es müssen wirklich keine zerfledderten Kinder­leichen gezeigt werden, das soll hier nicht die Kritik sein. Aber was anstatt gezeigt wird; zum Beispiel eine Hintergrundsäule, eine nahezu statische Aufnahme. Warum nicht die Kamera auf dem Charakter selbst belassen und weiterhin dessen Reaktion zeigen? So entsteht der Eindruck, dass gewollt etwas ausgelassen wurde – was dann später auf der Bluray-Fassung zu sehen sein wird? Wobei das eher der Fall ist bei Mosaikfiltern und günstig – oder je nach Zuschauerinteresse auch ungüstig – einfallenden Lichtstrahlen, wie man es aus manch anderer Serie kennt.

Apropos Charaktere: Waver ist das gelebte Vorführmodell des Underdog-Phänomens. Als er das erste Mal in der Serie auftaucht, wird er als rangniedrig und gewissermaßen wertlos von seinem Magie-Lehrer heruntergeputzt. Er selbst gesteht sich ein, nichts Besonderes zu sein, aber beweist dennoch Willen, Wissen und Geschick. Er demonstriert viel Wachstumspotenzial und mit seinem Servant Rider als Vaterfigur sind die beiden ein ziemlich symphatisches Zweier-Gespann.

weiterlesen

23

Unkategorisiert von Seba

Pants-on-Head Retarded

In Anlehnung an das Bild von letztem Jahr.


Grafik von komppu.deviantart.com.

JARs zu einem Dynamic Web Project in Eclipse hinzufügen

Informatik Studentendasein von Seba

Für die Kommunikation zwischen dem Tomcat- und dem APE-Server in meiner Bachelor-Thesis brauche ich auf der Java-Seite JSON-Fähigkeiten. Meine Wahl fiel auf Jackson, den es bequemerweise sogar in den Ubuntu-Repositories gibt.

sudo apt-get install libjackson-json-java

Update 2011-12-18: Die Lösung ist bedeutend einfacher als das, was nach diesem Abschnitt kommt. Die JARs gehören in das WEB-INF/lib-Verzeichnis des Projektes. Fertig.

Alte Lösung:
In den Projekt-Eigenschaften unter „Java Build Path“ – Tab „Libraries“ habe ich dann die externen JARs hinzugefügt. Diese waren unter /usr/share/java/ zu finden.

Zum Projekt hinzugefügte externe JARs.

An diesem Punkt dachte ich, es wäre alles geritzt. Ich konnte die neuen Klassen im Code importieren und verwenden. Eclipse hat mir nichts angestrichen und auch die Auto-Vervoll­ständigung hat funktioniert. Dann mal den Server starten …

SCHWERWIEGEND: Allocate exception for servlet [meinServlet]
java.lang.ClassNotFoundException: org.codehaus.jackson.JsonParseException
    at org.apache.catalina.loader.WebappClassLoader.loadClass

:(

weiterlesen

REDLINE DAY

Anime & Manga Musik von Seba

Ein unglaublich schönes Lied, ein schneller, starker Anime und dann ist da noch dieses perfekte Cover:

Klaviernoten gibt es von Animenz auf seinem Blog. Leider übersteigen sie bisher meine Fähigkeiten.

Darum geht es bei meiner Bachelor-Thesis, also schematisch ungefähr

Informatik Studentendasein von Seba
[](/lyrauhh)