Midpoint circle algorithm

.block

license: mit
height: 500
border: no

.DS_Store

README.md

Made with blockup

This fills and strokes a circle using the midpoint circle algorithm.

colors.js

const colors = [
  '#f6d6bd',
  '#c3a38a',
  '#997577',
  '#816271',
  '#4e495f',
  '#20394f',
  '#0f2a3f',
  '#08141e'
]

export default colors

dist.css

*{box-sizing:border-box}body,html{margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#08141e;height:100%}canvas{display:block;background:#0f2a3f;-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:pixelated}

dist.js

!function(e){function n(B){if(c[B])return c[B].exports;var r=c[B]={i:B,l:!1,exports:{}};return e[B].call(r.exports,r,r.exports,n),r.l=!0,r.exports}var c={};n.m=e,n.c=c,n.i=function(e){return e},n.d=function(e,c,B){n.o(e,c)||Object.defineProperty(e,c,{configurable:!1,enumerable:!0,get:B})},n.n=function(e){var c=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(c,"a",c),c},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=3)}([function(module,exports,__webpack_require__){"use strict";eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nvar colors = ['#f6d6bd', '#c3a38a', '#997577', '#816271', '#4e495f', '#20394f', '#0f2a3f', '#08141e'];\n\nexports.default = colors;//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9jb2xvcnMuanM/MDg0ZSJdLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBjb2xvcnMgPSBbXG4gICcjZjZkNmJkJyxcbiAgJyNjM2EzOGEnLFxuICAnIzk5NzU3NycsXG4gICcjODE2MjcxJyxcbiAgJyM0ZTQ5NWYnLFxuICAnIzIwMzk0ZicsXG4gICcjMGYyYTNmJyxcbiAgJyMwODE0MWUnXG5dXG5cbmV4cG9ydCBkZWZhdWx0IGNvbG9yc1xuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyBjb2xvcnMuanMiXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUE7QUFDQTtBQVVBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///0\n")},function(module,exports,__webpack_require__){"use strict";eval('\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nvar drawLine = function drawLine(_ref) {\n  var x0 = _ref.x0,\n      x1 = _ref.x1,\n      y = _ref.y,\n      ctx = _ref.ctx;\n\n  ctx.beginPath();\n  ctx.moveTo(x0 + 1, y + 0.5);\n  ctx.lineTo(x1, y + 0.5);\n  ctx.stroke();\n};\n\nvar fillCircle = function fillCircle(_ref2) {\n  var cx = _ref2.cx,\n      cy = _ref2.cy,\n      radius = _ref2.radius,\n      ctx = _ref2.ctx,\n      color = _ref2.color;\n\n  var x = radius - 1;\n  var y = 0;\n  var dx = 1;\n  var dy = 1;\n  var err = dx - (radius << 1);\n\n  ctx.strokeStyle = color;\n\n  while (x >= y) {\n    drawLine({ x0: cx + y, x1: cx - y, y: cy - x, ctx: ctx });\n    drawLine({ x0: cx + x, x1: cx - x, y: cy - y, ctx: ctx });\n    drawLine({ x0: cx + x, x1: cx - x, y: cy + y, ctx: ctx });\n    drawLine({ x0: cx + y, x1: cx - y, y: cy + x, ctx: ctx });\n\n    if (err <= 0) {\n      y++;\n      err += dy;\n      dy += 2;\n    }\n\n    if (err > 0) {\n      x--;\n      dx += 2;\n      err += dx - (radius << 1);\n    }\n  }\n};\n\nexports.default = fillCircle;//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMS5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9maWxsQ2lyY2xlLmpzPzQxNzkiXSwic291cmNlc0NvbnRlbnQiOlsiY29uc3QgZHJhd0xpbmUgPSAoeyB4MCwgeDEsIHksIGN0eCB9KSA9PiB7XG4gIGN0eC5iZWdpblBhdGgoKVxuICBjdHgubW92ZVRvKHgwICsgMSwgeSArIDAuNSlcbiAgY3R4LmxpbmVUbyh4MSwgeSArIDAuNSlcbiAgY3R4LnN0cm9rZSgpXG59XG5cbmNvbnN0IGZpbGxDaXJjbGUgPSAoeyBjeCwgY3ksIHJhZGl1cywgY3R4LCBjb2xvciB9KSA9PiB7XG4gIGxldCB4ID0gcmFkaXVzIC0gMVxuICBsZXQgeSA9IDBcbiAgbGV0IGR4ID0gMVxuICBsZXQgZHkgPSAxXG4gIGxldCBlcnIgPSBkeCAtIChyYWRpdXMgPDwgMSlcblxuICBjdHguc3Ryb2tlU3R5bGUgPSBjb2xvclxuXG4gIHdoaWxlICh4ID49IHkpIHtcbiAgICBkcmF3TGluZSh7IHgwOiBjeCArIHksIHgxOiBjeCAtIHksIHk6IGN5IC0geCwgY3R4IH0pXG4gICAgZHJhd0xpbmUoeyB4MDogY3ggKyB4LCB4MTogY3ggLSB4LCB5OiBjeSAtIHksIGN0eCB9KVxuICAgIGRyYXdMaW5lKHsgeDA6IGN4ICsgeCwgeDE6IGN4IC0geCwgeTogY3kgKyB5LCBjdHggfSlcbiAgICBkcmF3TGluZSh7IHgwOiBjeCArIHksIHgxOiBjeCAtIHksIHk6IGN5ICsgeCwgY3R4IH0pXG5cbiAgICBpZiAoZXJyIDw9IDApIHtcbiAgICAgIHkrK1xuICAgICAgZXJyICs9IGR5XG4gICAgICBkeSArPSAyXG4gICAgfVxuXG4gICAgaWYgKGVyciA+IDApIHtcbiAgICAgIHgtLVxuICAgICAgZHggKz0gMlxuICAgICAgZXJyICs9IGR4IC0gKHJhZGl1cyA8PCAxKVxuICAgIH1cbiAgfVxufVxuXG5leHBvcnQgZGVmYXVsdCBmaWxsQ2lyY2xlXG5cblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gZmlsbENpcmNsZS5qcyJdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///1\n')},function(module,exports,__webpack_require__){"use strict";eval('\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nvar drawPixel = function drawPixel(x, y, ctx) {\n  ctx.fillRect(x, y, 1, 1);\n};\n\nvar strokeCircle = function strokeCircle(_ref) {\n  var cx = _ref.cx,\n      cy = _ref.cy,\n      radius = _ref.radius,\n      ctx = _ref.ctx,\n      color = _ref.color;\n\n  var x = radius - 1;\n  var y = 0;\n  var dx = 1;\n  var dy = 1;\n  var err = dx - (radius << 1);\n\n  ctx.fillStyle = color;\n\n  while (x >= y) {\n    drawPixel(cx + x, cy + y, ctx);\n    drawPixel(cx - x, cy + y, ctx);\n\n    drawPixel(cx + y, cy + x, ctx);\n    drawPixel(cx - y, cy + x, ctx);\n\n    drawPixel(cx + x, cy - y, ctx);\n    drawPixel(cx - x, cy - y, ctx);\n\n    drawPixel(cx + y, cy - x, ctx);\n    drawPixel(cx - y, cy - x, ctx);\n\n    if (err <= 0) {\n      y++;\n      err += dy;\n      dy += 2;\n    }\n\n    if (err > 0) {\n      x--;\n      dx += 2;\n      err += dx - (radius << 1);\n    }\n  }\n};\n\nexports.default = strokeCircle;//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMi5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9zdHJva2VDaXJjbGUuanM/NGE1MyJdLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBkcmF3UGl4ZWwgPSAoeCwgeSwgY3R4KSA9PiB7XG4gIGN0eC5maWxsUmVjdCh4LCB5LCAxLCAxKVxufVxuXG5jb25zdCBzdHJva2VDaXJjbGUgPSAoeyBjeCwgY3ksIHJhZGl1cywgY3R4LCBjb2xvciB9KSA9PiB7XG4gIGxldCB4ID0gcmFkaXVzIC0gMVxuICBsZXQgeSA9IDBcbiAgbGV0IGR4ID0gMVxuICBsZXQgZHkgPSAxXG4gIGxldCBlcnIgPSBkeCAtIChyYWRpdXMgPDwgMSlcblxuICBjdHguZmlsbFN0eWxlID0gY29sb3JcblxuICB3aGlsZSAoeCA+PSB5KSB7XG4gICAgZHJhd1BpeGVsKGN4ICsgeCwgY3kgKyB5LCBjdHgpXG4gICAgZHJhd1BpeGVsKGN4IC0geCwgY3kgKyB5LCBjdHgpXG5cbiAgICBkcmF3UGl4ZWwoY3ggKyB5LCBjeSArIHgsIGN0eClcbiAgICBkcmF3UGl4ZWwoY3ggLSB5LCBjeSArIHgsIGN0eClcblxuICAgIGRyYXdQaXhlbChjeCArIHgsIGN5IC0geSwgY3R4KVxuICAgIGRyYXdQaXhlbChjeCAtIHgsIGN5IC0geSwgY3R4KVxuXG4gICAgZHJhd1BpeGVsKGN4ICsgeSwgY3kgLSB4LCBjdHgpXG4gICAgZHJhd1BpeGVsKGN4IC0geSwgY3kgLSB4LCBjdHgpXG5cbiAgICBpZiAoZXJyIDw9IDApIHtcbiAgICAgIHkrK1xuICAgICAgZXJyICs9IGR5XG4gICAgICBkeSArPSAyXG4gICAgfVxuXG4gICAgaWYgKGVyciA+IDApIHtcbiAgICAgIHgtLVxuICAgICAgZHggKz0gMlxuICAgICAgZXJyICs9IGR4IC0gKHJhZGl1cyA8PCAxKVxuICAgIH1cbiAgfVxufVxuXG5leHBvcnQgZGVmYXVsdCBzdHJva2VDaXJjbGVcblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyBzdHJva2VDaXJjbGUuanMiXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///2\n')},function(module,exports,__webpack_require__){"use strict";eval("\n\nvar _strokeCircle = __webpack_require__(2);\n\nvar _strokeCircle2 = _interopRequireDefault(_strokeCircle);\n\nvar _fillCircle = __webpack_require__(1);\n\nvar _fillCircle2 = _interopRequireDefault(_fillCircle);\n\nvar _colors = __webpack_require__(0);\n\nvar _colors2 = _interopRequireDefault(_colors);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar canvas = document.querySelector('canvas');\nvar ctx = canvas.getContext('2d');\n\nvar size = 128;\ncanvas.style.width = size * 4 + 'px';\ncanvas.style.height = size * 4 + 'px';\n\ncanvas.width = size;\ncanvas.height = size;\n\nvar radius = 1;\nvar delta = 1;\n\nsetInterval(function () {\n  ctx.clearRect(0, 0, size, size);\n\n  (0, _fillCircle2.default)({\n    cx: size / 2,\n    cy: size / 2,\n    radius: radius,\n    ctx: ctx,\n    color: _colors2.default[2]\n  });\n\n  (0, _strokeCircle2.default)({\n    cx: size / 2,\n    cy: size / 2,\n    radius: radius,\n    ctx: ctx,\n    color: _colors2.default[0]\n  });\n\n  radius = radius + delta;\n\n  if (radius === size / 2) delta = -1;\n  if (radius === 1) delta = 1;\n}, 1000 / 15);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9zY3JpcHQuanM/OWE5NSJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3Ryb2tlQ2lyY2xlIGZyb20gJy4vc3Ryb2tlQ2lyY2xlLmpzJ1xuaW1wb3J0IGZpbGxDaXJjbGUgZnJvbSAnLi9maWxsQ2lyY2xlLmpzJ1xuaW1wb3J0IGNvbG9ycyBmcm9tICcuL2NvbG9ycy5qcydcblxuY29uc3QgY2FudmFzID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignY2FudmFzJylcbmNvbnN0IGN0eCA9IGNhbnZhcy5nZXRDb250ZXh0KCcyZCcpXG5cbmNvbnN0IHNpemUgPSAxMjhcbmNhbnZhcy5zdHlsZS53aWR0aCA9IHNpemUgKiA0ICsgJ3B4J1xuY2FudmFzLnN0eWxlLmhlaWdodCA9IHNpemUgKiA0ICsgJ3B4J1xuXG5jYW52YXMud2lkdGggPSBzaXplXG5jYW52YXMuaGVpZ2h0ID0gc2l6ZVxuXG5sZXQgcmFkaXVzID0gMVxubGV0IGRlbHRhID0gMVxuXG5zZXRJbnRlcnZhbCgoKSA9PiB7XG4gIGN0eC5jbGVhclJlY3QoMCwgMCwgc2l6ZSwgc2l6ZSlcblxuICBmaWxsQ2lyY2xlKHtcbiAgICBjeDogc2l6ZSAvIDIsXG4gICAgY3k6IHNpemUgLyAyLFxuICAgIHJhZGl1cyxcbiAgICBjdHgsXG4gICAgY29sb3I6IGNvbG9yc1syXVxuICB9KVxuXG4gIHN0cm9rZUNpcmNsZSh7XG4gICAgY3g6IHNpemUgLyAyLFxuICAgIGN5OiBzaXplIC8gMixcbiAgICByYWRpdXMsXG4gICAgY3R4LFxuICAgIGNvbG9yOiBjb2xvcnNbMF1cbiAgfSlcblxuICByYWRpdXMgPSByYWRpdXMgKyBkZWx0YVxuXG4gIGlmIChyYWRpdXMgPT09IHNpemUgLyAyKSBkZWx0YSA9IC0xXG4gIGlmIChyYWRpdXMgPT09IDEpIGRlbHRhID0gMVxufSwgMTAwMCAvIDE1KVxuXG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIHNjcmlwdC5qcyJdLCJtYXBwaW5ncyI6Ijs7QUFBQTtBQUNBOzs7QUFBQTtBQUNBOzs7QUFBQTtBQUNBOzs7OztBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBTEE7QUFDQTtBQU9BO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUxBO0FBQ0E7QUFPQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///3\n")}]);

fillCircle.js

const drawLine = ({ x0, x1, y, ctx }) => {
  ctx.beginPath()
  ctx.moveTo(x0 + 1, y + 0.5)
  ctx.lineTo(x1, y + 0.5)
  ctx.stroke()
}

const fillCircle = ({ cx, cy, radius, ctx, color }) => {
  let x = radius - 1
  let y = 0
  let dx = 1
  let dy = 1
  let err = dx - (radius << 1)

  ctx.strokeStyle = color

  while (x >= y) {
    drawLine({ x0: cx + y, x1: cx - y, y: cy - x, ctx })
    drawLine({ x0: cx + x, x1: cx - x, y: cy - y, ctx })
    drawLine({ x0: cx + x, x1: cx - x, y: cy + y, ctx })
    drawLine({ x0: cx + y, x1: cx - y, y: cy + x, ctx })

    if (err <= 0) {
      y++
      err += dy
      dy += 2
    }

    if (err > 0) {
      x--
      dx += 2
      err += dx - (radius << 1)
    }
  }
}

export default fillCircle

index.html

<!DOCTYPE html>
<title>blockup</title>
<link href='dist.css' rel='stylesheet' />
<body>
  <canvas></canvas>
	<script src='dist.js'></script>
</body>

preview.png

script.js

import strokeCircle from './strokeCircle.js'
import fillCircle from './fillCircle.js'
import colors from './colors.js'

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

const size = 128
canvas.style.width = size * 4 + 'px'
canvas.style.height = size * 4 + 'px'

canvas.width = size
canvas.height = size

let radius = 1
let delta = 1

setInterval(() => {
  ctx.clearRect(0, 0, size, size)

  fillCircle({
    cx: size / 2,
    cy: size / 2,
    radius,
    ctx,
    color: colors[2]
  })

  strokeCircle({
    cx: size / 2,
    cy: size / 2,
    radius,
    ctx,
    color: colors[0]
  })

  radius = radius + delta

  if (radius === size / 2) delta = -1
  if (radius === 1) delta = 1
}, 1000 / 15)

strokeCircle.js

const drawPixel = (x, y, ctx) => {
  ctx.fillRect(x, y, 1, 1)
}

const strokeCircle = ({ cx, cy, radius, ctx, color }) => {
  let x = radius - 1
  let y = 0
  let dx = 1
  let dy = 1
  let err = dx - (radius << 1)

  ctx.fillStyle = color

  while (x >= y) {
    drawPixel(cx + x, cy + y, ctx)
    drawPixel(cx - x, cy + y, ctx)

    drawPixel(cx + y, cy + x, ctx)
    drawPixel(cx - y, cy + x, ctx)

    drawPixel(cx + x, cy - y, ctx)
    drawPixel(cx - x, cy - y, ctx)

    drawPixel(cx + y, cy - x, ctx)
    drawPixel(cx - y, cy - x, ctx)

    if (err <= 0) {
      y++
      err += dy
      dy += 2
    }

    if (err > 0) {
      x--
      dx += 2
      err += dx - (radius << 1)
    }
  }
}

export default strokeCircle

style.styl

$palette-1 = #f6d6bd
$palette-2 = #c3a38a
$palette-3 = #997577
$palette-4 = #816271
$palette-5 = #4e495f
$palette-6 = #20394f
$palette-7 = #0f2a3f
$palette-8 = #08141e

*
  box-sizing border-box

html

body
  margin 0
  padding 0
  display flex
  justify-content center
  align-items center
  background $palette-8
  height 100%

canvas
  display block
  background $palette-7
  image-rendering pixelated

thumbnail.png