taralino

Strichzeichnungen

In diesem Abschnitt zeigen wir, was mit der Dimensionsreduktion von Strichzeichnungen tatsächlich erreicht wurde. Zur Erinnerung: Jeder Punkt der Punktwolke zuvor entspricht einem Objekt des ursprünglichen Datensatzes und damit einer Strichzeichnung einer Pizza. Wenn wir nun an den Koordinaten der Punkte der Punktwolke die zugehörigen Strichzeichnungen (Pizza) darstellen, dann erhalten wir etwa folgende Abbildung. (Hinweis: Um Überschneidungen zu vermeiden, wird nur eine Auswahl der 1000 Strichzeichnungen veranschaulicht.)

Strichzeichnungen, die ein ähnliches Erscheinungsbild aufweisen, werden in der Abbildung offenbar in der Nähe gezeichnet. Bezogen auf die Punktwolke bedeutet dies:

Ähnliche Objekte eines Datensatzes weisen auch nach der Dimensionsreduktion unter Verwendung einer Hauptkomponentenanalyse Ähnlichkeiten auf.

Da es so schön aussieht, hier noch ein zweites Beispiel mit Blumen:

Ohne den Quellcode zur Erzeugung der Darstellung im Detail verstehen zu müssen, kannst du anhand des folgenden Beispiels selbst Erfahrungen damit sammeln.

Beispiel

Dimensionsreduktion unter Verwendung einer Hauptkomponentenanalyse.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
  <script src="Scribble.js"></script>
</head>
<body>
<script>

// Parameter zum Scribble-Datensatz
var item = "pizza";
var size = 12;
var count = 1000;

// Datensatz erzeugen / auslesen
var X = Scribble.get(item, {size:size, count:count});

// Dimensionsreduktion durchfuehren
var T = DimensionReduction.pca(X, 2);


/*
Funktionen, damit nur Zeichnung dargestellt werden, die
genuegend Abstand zueinander haben und sich somit
nicht ueberlagern.
*/

function distance(x, y, a, b) {
  return Math.sqrt((x-a)*(x-a) + (y-b)*(y-b));
};

function nearest(D, x, y) {
  var h = 1e8;
  for (var i = 0; i < D.length; i++) {
    h = Math.min(h, distance(x,y,D[i][0],D[i][1]));
  };
  return h;
};


/*
Bestimmung des einschliessenden Rechtecks zur Skalierung
der Zeichenflaeche.
*/

var xmin = T[0][0];
var xmax = T[0][0];
var ymin = T[0][1];
var ymax = T[0][1];
for (var k = 1; k < T.length; k++) {
  xmin = Math.min(xmin, T[k][0]);
  xmax = Math.max(xmax, T[k][0]);
  ymin = Math.min(ymin, T[k][1]);
  ymax = Math.max(ymax, T[k][1]);
};


/*
Zeichnung erzeugen. Das Datenfeld D speichert die Koordinaten der
bereits sichtbaren Zeichnungen, damit nur Zeichnungen dargestellt
werden, die genuegend Abstand zueinander haben.
*/

var D = [];
var Q = Scribble.get(item, {format:"raw", count:count});

Canvas.init([0,600], [0,600], {width:600, background:"lightgrey"});

for (var k = 0; k < T.length; k++) {
  var x = 16 + ((T[k][0]-xmin)/(xmax-xmin)) * 536;
  var y = 16 + ((T[k][1]-ymin)/(ymax-ymin)) * 536;
  var h = nearest(D, x, y);
  if (h < 256/8) continue;
  D.push([x,y]);
  var M = Q[k];
  for (var i = 0; i < M.length; i++) for (var j = 0; j < M[i].length-1; j++) {
    Canvas.line(x+M[i][j][0]/8, y+M[i][j][1]/8, x+M[i][j+1][0]/8, y+M[i][j+1][1]/8);
  };
};

</script>
</body>
</html>

Vorschau Download Kopie speichern