Coding Math: Episode 21 - Bitmap Collision Detection

coding-math-episode-21-bitmap-collision-detection.markdown

Coding Math: Episode 21 - Bitmap Collision Detection

A Pen by Sean Esteva on CodePen.

License.

index.html

<canvas id="canvas"></canvas>

<div style="font-size:16px;margin:0 auto;width:300px;" class="boom blockchain-btn"
     data-address="1E1GnMqkPzBFwHHLRWqQowpQPwJZkQimNi"
     data-shared="false">
    <div class="blockchain stage-begin">
        <img src="https://blockchain.info/Resources/buttons/donate_64.png"/>
    </div>
    <div class="blockchain stage-loading" style="text-align:center; ">
        <img src="https://blockchain.info/Resources/loading-large.gif"/>
    </div>
    <div class="blockchain stage-ready">
         <p style='background-color: white;' align="center">Please Donate To Bitcoin Address: <b>[[address]]</b></p>
         <p align="center" class="qr-code"></p>
    </div>
    <div class="blockchain stage-paid">
         Donation of <b>[[value]] BTC</b> Received. Thank You.
    </div>
    <div class="blockchain stage-error">
        <font color="red">[[error]]</font>
    </div>
</div>
<canvas id="canvas2"></canvas>

script.js

// https://www.youtube.com/watch?v=ixwQEQRiFhM

let canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d"),
  canvas2 = document.getElementById("canvas2"),
  ctx2 = canvas2.getContext("2d"),
  width = (canvas.width = canvas2.width = window.innerWidth),
  height = (canvas.height = canvas2.height = window.innerHeight),
  cX = width / 2,
  cY = height / 2;

let p = new Particle(0,height/.5,55,0);

drawCircle();

function resetFrame() {
  ctx.clearRect(0, 0, width, height);
}

function resetParticle() {
  p.x = 0;
  p.y = cY;
  p.setHeading(rand(-0.15,0.15));
}

function drawCircle() {
  ctx2.fillStyle = "#FF6000";
  ctx2.beginPath();
  ctx2.arc(cX, cY, 200, 0, Math.PI * 2, false);
  ctx2.fill();
}

function drawPoint(p) {
  ctx.fillStyle = "#ffff00";
  ctx.beginPath();
  ctx.arc(p.x, p.y, 10, 0, Math.PI * 2, false);
  ctx.fill();
}

function draw() {
  resetFrame();
  drawPoint(p);
}
function update() {
  p.update();
  let imageData = ctx2.getImageData(p.x,p.y,1,1);
  if(imageData.data[3] >0){
    ctx2.save();
    ctx2.globalCompositeOperation = "destination-out";
    ctx2.beginPath();
    ctx2.arc(p.x, p.y, 50, 0, Math.PI * 2, false);
    ctx2.fill();//
    ctx2.restore();
    resetParticle();
  } else if(p.x > width){
    resetParticle();
  }
}
function loop() {
  draw();
  update();
  window.requestAnimationFrame(loop);
}

loop();

scripts

<script src="https://codepen.io/delpher/pen/PKMaXO"></script>

style.scss

body{
  background-color: #111;
}
.boom {
position:  relative;
  top: 42px;
  z-index: 2
}
canvas {
  background-color: rgba(0,0,0,0);
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
}