⚠️ working but BUG#9 draw() is called too often

just in case a pan and zoom changes

public/css/does-it-glider.css

@@ -69,7 +69,19 @@
     text-align: left;
 }
 
-@keyframes rainbow
+@keyframes rainbow-color
+{
+    0% {color: red;}
+    14% {color: orange;}
+    28% {color: yellow;}
+    42% {color: lime;}
+    57% {color: blue;}
+    71% {color: indigo;}
+    85% {color: violet;}
+    100% {color: red;}
+}
+
+@keyframes rainbow-fill
 {
     0% {fill: red;}
     14% {fill: orange;}
@@ -126,7 +138,13 @@
     stroke-width: 1.5;
 }
 
+/* .cell.⬜, */
 .cell.glider
 {
-    animation: rainbow 333ms linear infinite;
+    animation: rainbow-fill 333ms linear infinite;
+}
+
+.title
+{
+    animation: rainbow-color 16ms linear infinite;
 }

public/src/does-it-glider/draw.js

@@ -8,30 +8,28 @@
 let draw_count = 0, sum_total = 0, sum_remove = 0
 let min = Infinity, max = 0
 let total = 0, time = 0
-const draw_times = Array(200).fill(0)
-const len = draw_times.length
 
 const COLOR_TO_CLASS = {
     '⬛': false,
     'o': false,
     '.': false,
-    '⬜': '⬜',
+    '⬜':'⬜',
     'b': '⬜',
     'X': '⬜',
-    '🟥': '🟥',
+    '🟥':'🟥',
     'R': '🟥',
-    '🟦': '🟦',
+    '🟦':'🟦',
     'B': '🟦',
 }
 // modify the DOM from a 2D array of Conway's Game of Life (gol_state)
 export const draw = (g, state, cell_px) => { // HACK - do better than passing cell_px down, add some class 
-    let startTime = performance.now()
+    const startTime = performance.now()
 
     // render/draw each live cell in state as a white rect in the svg
     // clear all of the old rects first
-    let all = g.selectAll('rect.cell')
+    const all = g.selectAll('rect.cell')
     all.remove()
-    let removeTime = performance.now() - startTime
+    const removeTime = performance.now() - startTime
     // loop over 2D array state
     for(let y = 0; y < state.length; y++) {
         for(let x = 0; x < state[0].length; x++) {
@@ -48,21 +46,9 @@ export const draw = (g, state, cell_px) => { // HACK - do better than passing ce
         }
     }
 
-    draw_times[draw_count] = {
-        total: performance.now() - startTime,
-        remove: removeTime,
-    }
-    total += time = draw_times[draw_count].total
-    sum_total += time
-    sum_remove += draw_times[draw_count].remove
-    if (time < min) min = time
-    if (time > max) max = time
-    draw_count++
-    if (draw_count >= len) {
-        console.log(`total: ${(sum_total / len).toFixed(2)}ms, remove: ${(sum_remove / len).toFixed(2) }ms, min: ${min.toFixed(2)}ms, max: ${max.toFixed(2)}ms`)
-        draw_count = 0
-        sum_total = sum_remove = 0
-        min = Infinity, max = 0
+    const draw_time = performance.now() - startTime
+    if (draw_time > 33.33) {
+        console.log(`draw time: ${draw_time.toFixed(3)}ms`)
     }
 }
 

public/src/does-it-glider/main.js

@@ -55,7 +55,7 @@ if (use_gl) {
     webgl_div = app.mynew('div.bottom')
         .style('background', '#e600ffff') // should never see this
 }
-    
+
 app.selectAll('.top,.bottom') // styles in common for both divs
     .style('overflow', 'hidden') // tested, this is needed to avoid scroll bars
     .style('position', 'relative')
@@ -65,15 +65,15 @@ app.selectAll('.top,.bottom') // styles in common for both divs
 let touch_target = app.append('span')
     .classed('touch-target', true)
 
-const _title =                   'Does it Glider?'    
-const _sub_title =        'Tap here to paste Wordle score.'
+const _title = 'Does it Glider?'
+const _sub_title = 'Tap here to paste Wordle score.'
 // max width reference: '##################################'
 // abbove is max width on smallest mobile (iPhone SE)
 
 touch_target.append('div')
     .attr('class', 'title')
     .html(_title)
-    
+
 touch_target.append('div')
     .attr('class', 'title sub-title')
     .html(_sub_title)
@@ -155,24 +155,25 @@ add_seed(seed, grid_ping) // grid_ping is grid_pong 1 tick earlier
 // we will ping pong between them
 
 let tick = 0
-let num_ticks = Math.round((settings.BEAT/4) / (1000 / 60)) // BEATmsec / (1000msec/60frame) ->  num_ticks has units of frames
+let num_ticks = Math.round((settings.BEAT / 1) / (1000 / 60)) // BEATmsec / (1000msec/60frame) ->  num_ticks has units of frames
 let pause_for_new = Math.round(1.333 * 60) // to pause for N seconds, set N sec * 60 frames/sec then round() so that mod (%) works
 let ping_pong = true
 const event_loop = () => {
     if (pause_for_new == 0) {    // apply the rules to the state
         if (tick % num_ticks == 0) { // only apply rules every num_ticks frames
+            ping_pong = !ping_pong
             if (ping_pong) { // TODO why wasn't [grid_ping, grid_pong] = [grid_pong, grid_ping] working?
-                apply_rules(grid_ping, grid_pong)
+                apply_rules(grid_pong, grid_ping) // ping_pong is true, grid_ping gets the new state
             } else {
-                apply_rules(grid_pong, grid_ping)
+                apply_rules(grid_ping, grid_pong)
             }
-            ping_pong = !ping_pong
         }
     } else {
         pause_for_new-- // HACK, there must be a better way to pause for new and also draw only n frames
     }
     if (ping_pong) {
         draw(grid_sel, grid_ping, settings.CELL_PX) // redraw every frame for smooth pan and zoom
+        // BUG #9 recreating rects every frame is doesn't allow animations to run *AND* it uses too much CPU 
     } else {
         draw(grid_sel, grid_pong, settings.CELL_PX) // redraw every frame for smooth pan and zoom
     }
@@ -185,15 +186,17 @@ let life_seed = []
 
 const parse_clipboard = (pasted_clipboard) => {
     let pasted_lines = []
-    pasted_lines = pasted_clipboard.split(/\r\n|\r|\n/ug)
+    // for importing RLE patterns
+    pasted_lines = pasted_clipboard.replace(/\$|!/ug, '\n') // '$' used as end of line and '!' used as end of seed in RLE format
+    pasted_lines = pasted_lines.split(/\r\n|\r|\n/ug)
 
     // filter pasted_lines for only lines that are length 5
-    // and contain only '⬜', '🟨', '🟩', or '⬛'
+    // and contain only '⬜', '🟨', '🟩', or '⬛' (or their aliases)
     let wordle_guesses = []
     wordle_guesses = pasted_lines
-        .filter(line => line.match(/^(⬜|🟨|🟩|⬛|🟦|🟧|o|b|R|B|X|\.)+$/ug))
+        .filter(line => line.match(/^(⬜|🟨|🟩|⬛|🟦|🟧|o|b|R|B|X|\.){5,5}$/ug))
     // this is only the lines with exactly 5 wordle squares
-    console.log(`filtered wordle_guesses: ${wordle_guesses}`)
+    console.log(`filtered wordle_guesses:\n${wordle_guesses.join('\n')}`)
 
     // convert all '🟨'|'🟩' in wordle_guesses to '⬜' and '⬜'|'⬛' to '⬛'
     life_seed = []
@@ -202,22 +205,24 @@ const parse_clipboard = (pasted_clipboard) => {
             guess
                 // need an intermediate character to avoid double replacement
                 // try red team 🟥 blue team 🟦 fight idea
-                .replace(/🟨|🟧/g, 'b') // hits in wrong location are red team
-                .replace(/🟩|🟦/g, 'b') // hits in correct location are blue team
-                .replace(/⬜|⬛/g, '⬛')
-                .replace(/X/g, 'b')
-                .replace(/\./g, '⬛')
+                .replace(/⬜|⬛/ug, '⬛')
+                .replace(/\./ug, '⬛')
+                .replace(/o/ug, '⬛')
+                .replace(/🟨|🟧/ug, '⬜') // hits in wrong location are red team
+                .replace(/🟩|🟦/ug, '⬜') // hits in correct location are blue team
+                .replace(/X/ug, '⬜')
+                .replace(/b/ug, '⬜')
         )
     )
-    console.log(`life_seed:\n ${life_seed}`)
+    console.log(`life_seed:\n${life_seed.join('\n')}`)
 
     let beat_pasted = settings.BEAT
     let beat_wordle_guesses = settings.BEAT
     let beat_life_seed = settings.BEAT
     // draw/render pasted_lines in the .paste-line divs
     const draw_pasted_lines = () => {
-        console.log(`draw_pasted_lines()`)
-        const transition = app
+        const last_line = pasted_lines.length - 1
+        app
             .selectAll('.paste-line')
             .data(pasted_lines)
             .join(
@@ -230,54 +235,79 @@ const parse_clipboard = (pasted_clipboard) => {
             .html(line => line || ' ')
             .transition().duration(beat_pasted)
             .remove()
-            .on('end', draw_wordle_guesses())
+            .on('end',
+                (_d, i) => { if (i == last_line) draw_wordle_guesses() }
+            )
     }
 
     const draw_wordle_guesses = () => {
-        const transiton = app
+        const last_line = wordle_guesses.length - 1
+        app
             .selectAll('.paste-line')
             .data(wordle_guesses)
             // d3.data() stores the array life_seed on the parent DOM element
             // then d3.join() compares new data to previous data
             // and calls enter, update, or exit on each element of data array
             // as appropriate for diff of new data comapred to previous data
             .join(
-                enter => enter.mynew('div').classed('paste-line', true),
+                enter => enter.append('div').classed('paste-line', true),
                 update => update,
                 exit => exit
                     .remove()
             ) //join returns enter and update merged
             .html(d => d)
             .transition().duration(beat_wordle_guesses)
             .remove()
-            .on('end', () => {
-                console.log(`draw_wordle_guesses() end event`)
-                draw_life_seed()
-            })
+            .on('end',
+                (_d, i) => {
+                    if (i == last_line) draw_life_seed()
+                }
+            )
     }
 
     const draw_life_seed = () => {
-        console.log(`draw_life_seed()`)
-        const transition = app
+        const last_line = life_seed.length - 1
+        console.log(`draw_life_seed: last_line = ${last_line}`)
+        app
             .selectAll('.paste-line')
             .data(life_seed)
+            .join(
+                enter => enter.append('div').classed('paste-line', true),
+                update => update,
+                exit => exit
+                    .remove()
+            ) //join returns enter and update merged
             .html(d => d)
             .transition().duration(beat_life_seed)
             .remove()
-            .on('end', (a, b, c, d) => {
-                console.log(`count these end events:\n${a}\n${b}\n${c}\n${d}`)
-                load_new_state(life_seed || seed)
-            }) // BUG #8 this transition ends for each line, I want to wait for the last
+            .on('end',
+                (_d, i) => {
+                    console.log(`.data(life_seed): [${i}] = ${_d}\n`)
+                    if (i == last_line)
+                        load_new_state(life_seed || seed)
+                }
+            ) // BUG #8 this transition ends for each line, I want to wait for the last
     }
 
     const load_new_state = (life_seed) => {
         console.time('load_new_state')
 
+        let grid
         // clear the state
-        grid_ping = Array.from({ length: grid_h }, () => Array.from({ length: grid_w }, () => '⬛'))
+        if (ping_pong) {
+            grid = grid_ping // if ping_pong is true, then we just finished applying rule to grid_ping, replace it
+        } else {
+            grid = grid_pong
+        }
+        // clear the grid in place
+        for (let row of grid) {
+            for (let i = 0; i < row.length; i++) {
+                row[i] = '⬛'
+            }
+        }
         // copy the life_seed into the center of the state
-        add_seed(life_seed, grid_ping)
-        pause_for_new = 2 * 60
+        add_seed(life_seed, grid)
+        pause_for_new = Math.round(1.333 * 60) // secs * frames/sec => units of frames
 
         console.timeEnd('load_new_state')
     }

public/src/does-it-glider/settings.js

@@ -8,8 +8,8 @@
 // XXX
 export const settings = {
     // game of life configuration
-    GRID_WIDTH: 512, // in cells
-    GRID_HEIGHT: 512, // in cells
+    GRID_WIDTH: 192, // in cells
+    GRID_HEIGHT: 192, // in cells
     WRAP_GRID: false,
 
     // shader source constants