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

JARs zu einem Dynamic Web Project in Eclipse hinzufügen

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

:(

Read more

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

Bachelor-Thesis-Konzept

Read more

Laughter Song – Piano-Cover

Pinkie Pie

Nach mehreren Tagen Proben und einige Versuche später habe ich endlich eine Aufnahme, die ich gut genug finde. Yep, ist auch wieder ein wenig leise. Ich bekomme das schon noch raus. OGG-Direktlink (2,1 MB).

In chronologischer Reihenfolge:

  1. Daniel Ingram komponiert den Laughter Song für MLP:FiM.
  2. David Larsen schreibt eine reine Piano-Variante: Pinkie Pie’s No fear Song.
  3. Dessen MIDI wandelt sociomaladaptivist zu Klaviernoten.

Die Grafik ist ein Wallpaper von MegaSweet.

10-Bit-Videos unter Ubuntu abspielen (Ich will doch nur Anime schauen!)

10-Bit mit Artifakten

Eine neue Ära bricht in der Fansub-Szene an. Videos werden nun mit 10-Bit Farbtiefe en­kodiert im Gegen­satz zu den sonst üblichen 8-Bit. Dies führt zu dem Vorteil, dass die Dateien kleiner werden, bei gleich­bleibender – oder gar besserer, hört man munkeln – Qualität. Dafür wird es nicht von jeder Hardware unterstützt. Was PCs betrifft, sollte in den allermeisten Fällen ein Update der Codecs reichen. Windowsler können sich den aktuellen CCCP aufspielen und Linuxer … da sollte der Support in den verschiedenen Programmen auch vorhanden sein.

Leider war es dann doch nicht so simpel. Zwar ließen sich die MKVs abspielen, aber waren durchzogen von Artefakten und falschen Farben. Okay, die falschen Farben sahen teilweise recht hübsch aus, wie Minecrafts neues Belichtungsmodell, wo jetzt alles so schönes ambient­es Licht wirft. Dennoch! So konnte es nicht bleiben! Die Lösungssuche führte mich auf einen Weg aus einer kuriosen Mischung aus Frustation und Spaß.

Read more