@@ Line 537: / Line 537: @@
 === main.js ===
 <source lang="java">
+//Globale Variablen
+var greens = new Array('#1fad0c','#199508','#1b710f','#4d7e0c','#6cba07');
+var reds = new Array('#66200a','#96391d','#d34317','#ec6338','#fb997b');
+var blues = new Array('#064077','#2565a0','#5c97cf','#63acef','#a8d3fc');
+var yellows = new Array('#d8d62c','#edeb4c','#f7f56f','#dcdb82','#f6f5b3');
+var multis = new Array ('#1b710f','#4d7e0c','#d34317','#ec6338','#63acef','#a8d3fc','#dcdb82','#f6f5b3');
+var greys = new Array('#272727', '#4a4a4a', '#717171', '#a0a0a0', '#c8c8c8');
+var fill_color_circle = greens;
+var gLetter = 'A';
+var gText = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+var gLetterIndex = 0;
+var gAnimation = true;
+var Heigh_or_Width = Math.min(window.innerHeight, window.innerWidth);
+var gLetterHigh = Heigh_or_Width*0.4;
+var loadfont = 'Arial';
+var font = gLetterHigh + 'px ' + loadfont;
+var canvas = document.getElementById('canvas');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight - document.getElementById('Title').offsetHeight;
+var ctx = canvas.getContext('2d');
+var Grid_Scale = 250;
+var Grid_Cell_Size = Math.ceil(Heigh_or_Width / Grid_Scale);
+var Clips = [];
+var activeCells = [];
+var intv = 6;
+var minc = 1;
+var maxc = 5;
+var res;
+var faktor = 1;
+//Color Buttons
+document.getElementById('green-button').onclick=function(){
+    fill_color_circle =  greens;
+    return fill_color_circle;
+};
+document.getElementById('red-button').onclick=function(){
+    fill_color_circle =  reds;
+    return fill_color_circle;
+};
+document.getElementById('blue-button').onclick=function(){
+    fill_color_circle =  blues;
+    return fill_color_circle;
+};
+document.getElementById('yellow-button').onclick=function(){
+    fill_color_circle =  yellows;
+    return fill_color_circle;
+};
+document.getElementById('multi-button').onclick=function(){
+    fill_color_circle =  multis;
+    return fill_color_circle;
+};
+document.getElementById('grey-button').onclick=function(){
+    fill_color_circle =  greys;
+    return fill_color_circle;
+};
+//Font Buttons
+document.getElementById('sans').onclick=function(){
+    loadfont = 'Arial';
+    font = gLetterHigh + 'px ' + loadfont;
+    return font;
+};
+document.getElementById('serif').onclick=function(){
+    loadfont = 'Gabriela';
+    font = gLetterHigh + 'px ' + loadfont;
+    return font;
+};
+document.getElementById('hand').onclick=function(){
+    loadfont = 'Stalemate';
+    font = gLetterHigh + 'px ' + loadfont;
+    return font;
+};
+//Size Buttons
+document.getElementById('thin').onclick=function(){
+    minc = 1;
+    maxc = 5;
+    return minc;
+    return maxc;
+};
+document.getElementById('medium').onclick=function(){
+    minc = 1;
+    maxc = 5;
+    minc = minc*3;
+    maxc = maxc*3;
+    return minc;
+    return maxc;
+};
+document.getElementById('big').onclick=function(){
+    minc = 1;
+    maxc = 5;
+    minc = minc*6;
+    maxc = maxc*6;
+    return minc;
+    return maxc;
+};
+//Faktor Buttons
+document.getElementById('x1').onclick=function(){
+    faktor = 1;
+    return faktor;
+};
+document.getElementById('x2').onclick=function(){
+    faktor = 3;
+    return faktor;
+};
+document.getElementById('x3').onclick=function(){
+    faktor = 8;
+    return faktor;
+};
+document.getElementById('x4').onclick=function(){
+    faktor = 20;
+    return faktor;
+};
+//Funktion: Stop Funktion die Animation anhält
+function myStopFunction(b) {
+    clearInterval(b);
+}
+//Funktion: Random Choice
+function choice(random_choice) {
+    return random_choice[Math.round(Math.random())]; //0 oder 1
+}
+//Funktion: Clean Canvas
+function cleanup() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    console.log ('Clean');
+}
+//Funktion: Fonteinstellungen
+function start() {
+    ctx.fillStyle = 'white';
+    ctx.font = font;
+    ctx.textAlign = 'center';
+    ctx.fontWeight='bold';
+    ctx.fillText(gLetter, canvas.width/2, gLetterHigh);
+}
+//Funktion: Grid erkennen / Array erstellen / x Werte an y Position speichern oder false wnn nicht auf buchstabe
+function clip_grid()
+{
+    for (var y = 0; y < Grid_Scale; y += 1)
+    {
+        var clipColumn = [];
+        clipColumn.length = Grid_Cell_Size;
+        for (var x = 0; x < Grid_Scale; x += 1)
+        {
+            var data = ctx.getImageData(x * Grid_Cell_Size, y * Grid_Cell_Size,Grid_Cell_Size,Grid_Cell_Size);
+            var v = data.data[(Grid_Cell_Size + Grid_Cell_Size)];
+            if (v > 0)
+            {
+                activeCells.push(data);
+                clipColumn[x] = activeCells.length - 1;
+            }
+            else
+            {
+                clipColumn[x] = false;
+            }
+        }
+        Clips[y] = clipColumn;
+        //console.log (clipColumn);
+    }
+    console.log ('Grid');
+}
+//Funktion: Kreis zeichnen
+function circle(centerX,centerY,radius)
+{
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
+        ctx.fillStyle = fill_color_circle[getRandomInt(0,fill_color_circle.length)]; // Füllen mit zufälliger Farbe aus Liste
+        ctx.fill();
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = fill_color_circle[getRandomInt(0,fill_color_circle.length)]; // Füllen mit zufälliger Farbe aus Liste
+        ctx.stroke();
+}
+//Funktion: Randomvariable Kreise
+function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+//Funktion: Grid in finale Liste speichern
+function prepare()
+{
+    var tx = 0;
+    var ty = 0;
+    var a = [];
+    if (canvas.width > canvas.height)
+    {
+        tx = (canvas.width - Heigh_or_Width) / 2;
+    }
+    else
+    {
+        ty = (canvas.height - Heigh_or_Width) / 2;
+    }
+    var count=0;
+    for (var y = 0; y < Grid_Scale; y += 1)
+    {
+        for (var x = 0; x < Grid_Scale; x += 1)
+        {
+            var cellData = Clips[y][x];
+            if (cellData !== false)
+            {
+                a[count]= [];
+                var imgData = choice(activeCells);
+                a[count]['0']=true;
+                a[count]['1']=x*Grid_Cell_Size;
+                a[count]['2']=y*Grid_Cell_Size;
+                count++;
+            }
+        }
+    }
+    res = a;
+    //console.log (res);
+    console.log ('Prepare');
+}
+//Funktion:Circle zeichnen auf Punkte im Buchstaben Grid
+function draw(a)
+{
+    var n=-1;
+    if (n<0)
+    {
+        n=getRandomInt(0,a.length);
+        while(a[n]['0']===false)
+        {
+            n=getRandomInt(0,a.length);
+        }
+    }
+    var rad=getRandomInt(minc,maxc);
+    circle(a[n]['1'],a[n]['2'],rad);
+    console.log ('Draw');
+}
+//Funktion: Event Listener auf Keyboardeingabe - beendet Alphabet
+window.addEventListener('keypress', function (getLetter) {
+    gAnimation = false;
+    var newLetter = String.fromCharCode(getLetter.keyCode);
+    gLetter = newLetter;
+    render();
+});
+//Funktion: Alphabet
+function nextLetter(bl) {
+    if (gAnimation) {
+        myStopFunction(bl);
+        gLetterIndex = (gLetterIndex + 1) % gText.length;
+        gLetter = gText[gLetterIndex];
+        render();
+  }
+  console.log ('Next Letter');
+}
+//Funktion: Alles aufrufen
+function render() {
+    cleanup();
+    start();
+    clip_grid();
+    cleanup();
+    prepare();
+    var drw=window.setInterval(function(){draw(res);},intv/(2*faktor));
+    var stp=window.setTimeout(function(){nextLetter(drw);},intv*res.length/(faktor/2));
+    console.log ('Render');
+}
+//Funktionsaufruf
+console.log ('Start Project');
+render();
 </source>