July 31, 2017 06:15 · Jul 31, 2017
diff --git a/index.html b/index.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>JS Bin</title>
+</head>
+<body>
+  <canvas id="canvas" width="640" height="480"/>
+<script id="jsbin-javascript">
+window.onload = function() {
+  const canvas =  document.getElementById("canvas");
+  const ctx = canvas.getContext("2d");
+
+  const H = canvas.height;
+  const W = canvas.width;
+
+
+
+  function drawStuff(cnt) {
+//     const jx = (Math.random() * 4 - 2)
+//     const jy = (Math.random() * 2)
+    let r = 128 + Math.random() * 128 | 0
+//    let g = Math.random() * 255 | 0
+    //const r = g
+     const g = (Math.random() > 0.5 ? 0 : 0.5*r) | 0
+//     let b = Math.random() * 255 | 0
+    let b = 0
+
+//      r=0
+//      g = 0
+//      b = 0
+
+    const R = () => Math.random()
+
+    const w = R() * 100
+    const h = R() * 50
+    const a = R()
+    const color = `rgba(${r},${g},${b},${a})`
+    //console.log(color)
+    const x = R() * W;
+    const y = R() * H;
+
+    const x2 = (cnt*32) % W;
+    const y2 = (cnt*32) % H;
+
+
+
+
+
+//      ctx.strokeStyle = "white"
+//      ctx.strokeStyle = R() > 0.5 ? "black" :  "white"
+    //ctx.globalCompositeOperation = "multiply";
+    ctx.globalCompositeOperation = "xor";
+
+      ctx.strokeStyle = color
+     //console.log(color, "ctx="+ ctx.strokeStyle)
+      ctx.strokeStyle = R() > 0.5 ? "goldenrod" :  "black"
+      ctx.strokeRect(x,y,w,w)
+
+
+
+//     ctx.font = '48px sans'
+//      ctx.strokeText("Lou",x2,y2)
+
+     //ctx.fillStyle = color
+//      ctx.fillRect(x,y,w,w)
+
+  }
+
+  let cnt = 0
+
+  function main(...args) {
+    window.requestAnimationFrame(main)
+    //console.log(...args)
+    for (i = 0; i < 100; i++) {
+      drawStuff(cnt++)
+    }
+  }
+
+  main(0)
+
+}
+</script>
+
+
+
+<script id="jsbin-source-javascript" type="text/javascript">window.onload = function() {
+  const canvas =  document.getElementById("canvas");
+  const ctx = canvas.getContext("2d");
+
+  const H = canvas.height;
+  const W = canvas.width;
+
+
+
+  function drawStuff(cnt) {
+//     const jx = (Math.random() * 4 - 2)
+//     const jy = (Math.random() * 2)
+    let r = 128 + Math.random() * 128 | 0
+//    let g = Math.random() * 255 | 0
+    //const r = g
+     const g = (Math.random() > 0.5 ? 0 : 0.5*r) | 0
+//     let b = Math.random() * 255 | 0
+    let b = 0
+
+//      r=0
+//      g = 0
+//      b = 0
+
+    const R = () => Math.random()
+
+    const w = R() * 100
+    const h = R() * 50
+    const a = R()
+    const color = `rgba(${r},${g},${b},${a})`
+    //console.log(color)
+    const x = R() * W;
+    const y = R() * H;
+
+    const x2 = (cnt*32) % W;
+    const y2 = (cnt*32) % H;
+
+
+
+
+
+//      ctx.strokeStyle = "white"
+//      ctx.strokeStyle = R() > 0.5 ? "black" :  "white"
+    //ctx.globalCompositeOperation = "multiply";
+    ctx.globalCompositeOperation = "xor";
+
+      ctx.strokeStyle = color
+     //console.log(color, "ctx="+ ctx.strokeStyle)
+      ctx.strokeStyle = R() > 0.5 ? "goldenrod" :  "black"
+      ctx.strokeRect(x,y,w,w)
+
+
+
+//     ctx.font = '48px sans'
+//      ctx.strokeText("Lou",x2,y2)
+
+     //ctx.fillStyle = color
+//      ctx.fillRect(x,y,w,w)
+
+  }
+
+  let cnt = 0
+
+  function main(...args) {
+    window.requestAnimationFrame(main)
+    //console.log(...args)
+    for (i = 0; i < 100; i++) {
+      drawStuff(cnt++)
+    }
+  }
+
+  main(0)
+
+}</script></body>
+</html>
diff --git a/jsbin.lufixucuzi.js b/jsbin.lufixucuzi.js
@@ -0,0 +1,73 @@
+window.onload = function() {
+  const canvas =  document.getElementById("canvas");
+  const ctx = canvas.getContext("2d");
+
+  const H = canvas.height;
+  const W = canvas.width;
+
+
+
+  function drawStuff(cnt) {
+//     const jx = (Math.random() * 4 - 2)
+//     const jy = (Math.random() * 2)
+    let r = 128 + Math.random() * 128 | 0
+//    let g = Math.random() * 255 | 0
+    //const r = g
+     const g = (Math.random() > 0.5 ? 0 : 0.5*r) | 0
+//     let b = Math.random() * 255 | 0
+    let b = 0
+
+//      r=0
+//      g = 0
+//      b = 0
+
+    const R = () => Math.random()
+
+    const w = R() * 100
+    const h = R() * 50
+    const a = R()
+    const color = `rgba(${r},${g},${b},${a})`
+    //console.log(color)
+    const x = R() * W;
+    const y = R() * H;
+
+    const x2 = (cnt*32) % W;
+    const y2 = (cnt*32) % H;
+
+
+
+
+
+//      ctx.strokeStyle = "white"
+//      ctx.strokeStyle = R() > 0.5 ? "black" :  "white"
+    //ctx.globalCompositeOperation = "multiply";
+    ctx.globalCompositeOperation = "xor";
+
+      ctx.strokeStyle = color
+     //console.log(color, "ctx="+ ctx.strokeStyle)
+      ctx.strokeStyle = R() > 0.5 ? "goldenrod" :  "black"
+      ctx.strokeRect(x,y,w,w)
+
+
+
+//     ctx.font = '48px sans'
+//      ctx.strokeText("Lou",x2,y2)
+
+     //ctx.fillStyle = color
+//      ctx.fillRect(x,y,w,w)
+
+  }
+
+  let cnt = 0
+
+  function main(...args) {
+    window.requestAnimationFrame(main)
+    //console.log(...args)
+    for (i = 0; i < 100; i++) {
+      drawStuff(cnt++)
+    }
+  }
+
+  main(0)
+
+}