|
<!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> |
