taralino

Faltungen

Zur Veranschaulichung der zuvor beschriebenen Faltungen dient der folgende Quellcode. Neben der Spielfeldgröße kann der Radius als Parameter variiert werden.

Bestimmt werden die diskreten Filter in Abhängigkeit von , bevor diese auf das Spielfeld mit fest definierter Startkonfiguration angewandt werden. Die Ergebnisse werden entsprechend dargestellt (von links nach rechts):

Spielfeld, also wie zuvor
Spielfeld gefaltet mit Kreis, also
Spielfeld gefaltet mit Kreisring, also

Da die Darstellungen zeitunabhängig sind, kann jeweils gesetzt werden.

Hinweis

Bei der Anwendung der Filter kommen grundsätzlich (und wie beim Game of Life) periodische Randbedingungen zum Einsatz.

Quellcode

Ohne auf den Quellcode im Detail einzugehen: Beispiel, um die diskreten Faltungen zu veranschaulichen.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<div style="text-align:center;">
<div id="plot1" style="display:inline-block;"></div>
<div id="plot2" style="display:inline-block;"></div>
<div id="plot3" style="display:inline-block;"></div>
</div>
<script>

/*************************************************
  Parameter
*************************************************/

// Spielfeldgroesse
var q = 24;

// Radius zur Bestimmung der Filter
var r = 3.5;



/*************************************************
  Spielfeld und Startkonfiguration
*************************************************/

var S = [];
for (var i = 0; i < q; i++) S.push([]);
for (var i = 0; i < q; i++) for (var j = 0; j < q; j++) S[i].push(0);

var h = Math.round(q/8);
var c = Math.round(q/2);
for (var i = c-h; i < c+h; i++) for (var j = c-2*h; j < c+2*h; j++) {
  S[i][j] = 1;
};



/*************************************************
  get_filter
*************************************************/

function get_filter(r) {

  function dist(x1, y1, x2, y2) {
    var xh = x1-x2;
    var yh = y1-y2;
    return Math.sqrt(xh*xh + yh*yh);
  };

  function create_filter(n, r) {
    var F = [];
    for (var i = 0; i < n; i++) F.push([]);
    for (var i = 0; i < n; i++) for (var j = 0; j < n; j++) {
      var h = 0;
      for (var q = 0; q < 10; q++) for (var s = 0; s < 10; s++) {
        h += (dist(j+0.1*s+0.05, i+0.1*q+0.05, n/2, n/2) < r ? 1 : 0);
      };
      F[i].push(h);
    };
    return F;
  };

  function filter_sub(G, F) {
    var n1 = F.length;
    var n2 = G.length;
    var t = Math.round(n2-n1)/2;
    if (t <= 0) return G;
    var H = [];
    for (var i = 0; i < n2; i++) H.push([]);
    for (var i = 0; i < n2; i++) for (var j = 0; j < n2; j++) H[i][j] = G[i][j];
    for (var i = 0; i < n1; i++) for (var j = 0; j < n1; j++) H[i+t][j+t] -= F[i][j];
    return H;
  };

  function filter_normalize(F) {
    var n = F.length;
    var h = 0;
    for (var i = 0; i < n; i++) for (var j = 0; j < n; j++) h += F[i][j];
    if (h <= 0) return F;
    var G = [];
    for (var i = 0; i < n; i++) G.push([]);
    for (var i = 0; i < n; i++) for (var j = 0; j < n; j++) G[i][j] = F[i][j] / h;
    return G;
  };

  var m = Math.ceil(2*Math.abs(r));
  var n = Math.ceil(6*Math.abs(r));
  m += ((m+1)%2);
  n += ((n+1)%2);

  var M = create_filter(m,   r);
  var N = create_filter(n, 3*r);
  N = filter_sub(N, M);

  M = filter_normalize(M);
  N = filter_normalize(N);

  return {M:M, N:N};
};



/*************************************************
  convolution
*************************************************/

function convolution(S, F) {
  var n = S.length;
  var U = [];
  for (var i = 0; i < n; i++) U.push([]);
  for (var i = 0; i < n; i++) for (var j = 0; j < n; j++) U[i].push(0);

  var m = Math.round(F.length/2-1);
  for (var i = 0; i < n; i++) for (var j = 0; j < n; j++) {
    var h = 0;
	for (var r = -m; r <= m; r++) for (var s = -m; s <= m; s++) {
	  h += S[(i+r+n)%n][(j+s+n)%n]*F[r+m][s+m];
	};
	U[i][j] = h;
  };

  return U;
};



/*************************************************
  main
*************************************************/

var T = get_filter(r);

var M = convolution(S, T.M);
var N = convolution(S, T.N);

// Spielfeld darstellen
Grid.init(q, q, {style:"canvas", zoom:Math.max(1,Math.floor(200/q)), div:"plot1"});
var P = Picture.colorize(S, [0,0.3,1], [[3,12,20],[26,124,208],[66,188,53]]);
for (var i = 0; i < q; i++) for (var j = 0; j < q; j++) Grid.pixel(j, i, P[i][j]);
Grid.draw();

// Spielfeld gefaltet mit Kreis darstellen
Grid.init(q, q, {style:"canvas", zoom:Math.max(1,Math.floor(200/q)), div:"plot2"});
var P = Picture.colorize(M, [0,0.3,1], [[3,12,20],[26,124,208],[66,188,53]]);
for (var i = 0; i < q; i++) for (var j = 0; j < q; j++) Grid.pixel(j, i, P[i][j]);
Grid.draw();

// Spielfeld gefaltet mit Kreisring darstellen
Grid.init(q, q, {style:"canvas", zoom:Math.max(1,Math.floor(200/q)), div:"plot3"});
var P = Picture.colorize(N, [0,0.3,1], [[3,12,20],[26,124,208],[66,188,53]]);
for (var i = 0; i < q; i++) for (var j = 0; j < q; j++) Grid.pixel(j, i, P[i][j]);
Grid.draw();


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

Vorschau Download Kopie speichern