monfera/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Constant area for the known quantity, anchoring at the mass center of its sector - a quick remake draft on known legal (turquoise) vs. unknown black market weed use.
(Tweening is achieved by a few lines of winged physics. Yes I should've just used D3 and SVG but I tried faster-paced animations first.)
Other issues remain, e.g.

the maximum possible black market size or ratio is unknown
the probability distribution of this random variable is unknown
the animation can be misread as representing temporality
appropriateness of the pie chart form in general

A new property of the remake: it can cause nausea, which is only fitting, given the subject matter. It's also somewhat more psychedelic than the original.
Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<canvas id="canvas">
</canvas>
  <script>

var ctx = canvas.getContext('2d')

var width = 960
var height = 500

var background = 'rgba(245,244,246, 0.5)'
var blackMarket = 'rgba(0, 0, 0, 0.5)'
var legit = '#32abaf'

canvas.width  = width
canvas.height = height

var legitMarketSize = 5000 // arbitrary constant, as it's known

// Ken "Perlin noise" Perlin's smootherstep translated to JS
// (disused due to having switched to random jumps with physics easing)
function smootherstep(edge0, edge1, x0) {
  // Scale, and clamp x to 0..1 range
  var x = Math.max(0, Math.min(1,  (x0 - edge0) / (edge1 - edge0)))
  // Evaluate polynomial
  return Math.pow(x, 3) * (x * (x * 6 - 15) + 10)
}

var weight = 10000
var friction = 0.25
var target = 1.03 * Math.sqrt(legitMarketSize / Math.PI) + 150
var velocity = 0
var force = 0
var current = target
var lastT
var deltaT

window.requestAnimationFrame(function jump(t) {

  lastT = t

  target = 1.03 * Math.sqrt(legitMarketSize / Math.PI)
         + 150 * Math.pow(Math.random(), 2)

  window.setTimeout(function() {
    window.requestAnimationFrame(jump)
  }, 1000)
})

window.requestAnimationFrame(function render(t) {

  ctx.fillStyle = background
  ctx.fillOpacity = 0.0
  ctx.rect(0, 0, 960, 500)
  ctx.fill()

  // poor man's winged physics
  force = target - current // a spring
  deltaT = t - lastT
  velocity += deltaT * force / weight
  velocity *= 1 - friction
  current += velocity * deltaT
  lastT = t

  var totalRadius = Math.max(0, current) // momentum might cause -ve val

  var totalMarket = Math.pow(totalRadius, 2) * Math.PI

  var legitFraction = legitMarketSize / totalMarket
  var legitAngle = 2 * Math.PI * legitFraction

  var centroidX = 4 * totalRadius * Math.sin(legitAngle / 2) / (3 * legitAngle)

  var centerX = 3 * width / 5 - centroidX
  var centerY = height / 2
  var startX = centerX + totalRadius * Math.cos(legitAngle / 2)
  var startY1 = centerY - totalRadius * Math.sin(legitAngle / 2)
  var startY2 = centerY + totalRadius * Math.sin(legitAngle / 2)

  ctx.beginPath()
  ctx.fillStyle = legit
  ctx.moveTo(centerX, centerY)
  ctx.lineTo(startX, startY1)
  ctx.arc(centerX, centerY, totalRadius, - legitAngle / 2, legitAngle / 2)
  ctx.lineTo(centerX, centerY)
  ctx.fill()

  ctx.beginPath()
  ctx.fillStyle = blackMarket
  ctx.moveTo(centerX, centerY)
  ctx.lineTo(startX, startY2)
  ctx.arc(centerX, centerY, totalRadius, legitAngle / 2, -legitAngle / 2)
  ctx.lineTo(centerX, centerY)
  ctx.fill()

  window.requestAnimationFrame(render)
})

  </script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<canvas id="canvas">
	</canvas>
	<script>

	var ctx = canvas.getContext('2d')

	var width = 960
	var height = 500

	var background = 'rgba(245,244,246, 0.5)'
	var blackMarket = 'rgba(0, 0, 0, 0.5)'
	var legit = '#32abaf'

	canvas.width = width
	canvas.height = height

	var legitMarketSize = 5000 // arbitrary constant, as it's known

	// Ken "Perlin noise" Perlin's smootherstep translated to JS
	// (disused due to having switched to random jumps with physics easing)
	function smootherstep(edge0, edge1, x0) {
	// Scale, and clamp x to 0..1 range
	var x = Math.max(0, Math.min(1, (x0 - edge0) / (edge1 - edge0)))
	// Evaluate polynomial
	return Math.pow(x, 3) * (x * (x * 6 - 15) + 10)
	}

	var weight = 10000
	var friction = 0.25
	var target = 1.03 * Math.sqrt(legitMarketSize / Math.PI) + 150
	var velocity = 0
	var force = 0
	var current = target
	var lastT
	var deltaT

	window.requestAnimationFrame(function jump(t) {

	lastT = t

	target = 1.03 * Math.sqrt(legitMarketSize / Math.PI)
	+ 150 * Math.pow(Math.random(), 2)

	window.setTimeout(function() {
	window.requestAnimationFrame(jump)
	}, 1000)
	})

	window.requestAnimationFrame(function render(t) {

	ctx.fillStyle = background
	ctx.fillOpacity = 0.0
	ctx.rect(0, 0, 960, 500)
	ctx.fill()

	// poor man's winged physics
	force = target - current // a spring
	deltaT = t - lastT
	velocity += deltaT * force / weight
	velocity *= 1 - friction
	current += velocity * deltaT
	lastT = t

	var totalRadius = Math.max(0, current) // momentum might cause -ve val

	var totalMarket = Math.pow(totalRadius, 2) * Math.PI

	var legitFraction = legitMarketSize / totalMarket
	var legitAngle = 2 * Math.PI * legitFraction

	var centroidX = 4 * totalRadius * Math.sin(legitAngle / 2) / (3 * legitAngle)

	var centerX = 3 * width / 5 - centroidX
	var centerY = height / 2
	var startX = centerX + totalRadius * Math.cos(legitAngle / 2)
	var startY1 = centerY - totalRadius * Math.sin(legitAngle / 2)
	var startY2 = centerY + totalRadius * Math.sin(legitAngle / 2)

	ctx.beginPath()
	ctx.fillStyle = legit
	ctx.moveTo(centerX, centerY)
	ctx.lineTo(startX, startY1)
	ctx.arc(centerX, centerY, totalRadius, - legitAngle / 2, legitAngle / 2)
	ctx.lineTo(centerX, centerY)
	ctx.fill()

	ctx.beginPath()
	ctx.fillStyle = blackMarket
	ctx.moveTo(centerX, centerY)
	ctx.lineTo(startX, startY2)
	ctx.arc(centerX, centerY, totalRadius, legitAngle / 2, -legitAngle / 2)
	ctx.lineTo(centerX, centerY)
	ctx.fill()

	window.requestAnimationFrame(render)
	})

	</script>
	</body>
	</html>