gilmoreorless/.block

## .block
license: cc-by-4.0

## README.md

      
    Raw
  

              README.md
            
          
    This is an attempt to get a straight line to curl around into a circle, while still keeping its fill gradient flowing along the length of the line.
Ideally this would be solved by using a single path with a conic gradient fill, with the radius of the line and the gradient changing together. Unfortunately conic gradients don’t currently exist in canvas or SVG. The workaround is to manually draw a series of tiny arc segments to fake the gradient fill.

This is part one of a 4-part series of experiments:
1. Gradient line to circle |
2. Flatten a circle |
3. Arc fill clipping |
4. Twist a gradient-filled circle

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: sans-serif;
  margin: auto;
  position: relative;
  width: 600px;
}
.controls {
  left: 0;
  position: absolute;
  top: 2em;
}
label {
  display: block;
  margin-top: 0.25em;
}
#curvey {
  width: 300px;
}

</style>
<body>
<div class="controls">
  <label>Curvey-ness: <input type="range" id="curvey" min="0" max="1" step="0.01" value="0" /></label>
  <label><input type="checkbox" id="animate" /> Animate</label>
  <label><input type="checkbox" id="trippy" /> “Artistic” mode</label>
</div>
<canvas id="drawing"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

// Config
var width = 600,
    height = 500,
    mainRadius = 80,
    lineThickness = 40,
    segments = 180;

// Derived values
var TAU = Math.PI * 2,
    TAU_4 = TAU / 4,
    circumference = mainRadius * TAU,
    cx = width / 2 - 120,
    cy = height / 2 + 50;

// State
var isAnimating = false,
    shouldClear = true;

/**
 * NOTES ON INCONSISTENT ANGLES:
 *
 * - Canvas2DContext.arc()   => clockwise from [1, 0]
 * - d3.arc()                => clockwise from [-1, 0]
 * - Math.sin() / Math.cos() => anti-clockwise from [0, 1]
 */
// Normalise all angles so input starts from [-1, 0] and runs anti-clockwise.
var _angleDomain = [0, TAU];
var angleCanvas = d3.scaleLinear()
    .domain(_angleDomain)
    .range([TAU / 2, -TAU / 2]);
var angleD3 = d3.scaleLinear()
    .domain(_angleDomain)
    .range([TAU * 0.75, -TAU / 4]);
var angleSinCos = d3.scaleLinear()
    .domain(_angleDomain)
    .range([-TAU / 4, TAU * 0.75]);

// Canvas setup
var canvas = document.getElementById('drawing');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.translate(cx, cy);

function hue(h) {
  return 'hsl(' + h + ', 70%, 50%)';
}

function clamp(num, min, max) {
  return Math.min(Math.max(min, +num), max);
}

/**
 * Draw a fixed-width line with full hue gradient from start to finish.
 * Line always has y=mainRadius at x=0, with parameterised curve.
 *
 * `curveFactor` is a float in range [0, 1] that defines how curved the line is.
 *   0 = no curve (flat horizontal)
 *   1 = full curve (circular)
 */
function drawGradientLine(curveFactor) {
  curveFactor = clamp(curveFactor, 0, 1);
  if (curveFactor < 0.008) curveFactor = 0;
  // Angles measured anti-clockwise from [-1, 0]
  var startAngle = curveFactor > 0 ? TAU_4 - (TAU_4 * curveFactor) : TAU_4;
  var endAngle = curveFactor > 0 ? TAU_4 + (TAU_4 * 3 * curveFactor) : TAU_4;
  // Derived values
  var outerRadius = 1 / curveFactor * mainRadius;
  var innerRadius = outerRadius - lineThickness;
  var midRadius = innerRadius + lineThickness / 2;
  var derivedY = mainRadius - outerRadius;
  var segmentAngleFull = (endAngle - startAngle) / segments;
  var segmentAngle = segmentAngleFull / 2;
  var p2 = 0.5 / segments;
  var fudgeFactor = curveFactor > 0 ? TAU / (180 * outerRadius / mainRadius) : 0.005;

  var grad, midAngle, gradAngle1, gradAngle2, p, p3, x1, x2, xw, y1, y2, i;

  var arc = d3.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .context(ctx);

  ctx.save();
  if (curveFactor > 0) {
    ctx.translate(0, derivedY);
  }

  for (i = 0; i < segments; i++) {
    p = (i + 0.5) / segments;
    ctx.beginPath();

    if (curveFactor > 0) {
      midAngle = startAngle + segmentAngleFull * i + segmentAngle;
      gradAngle1 = angleSinCos(midAngle - segmentAngle);
      gradAngle2 = angleSinCos(midAngle + segmentAngle);

      x1 = Math.sin(gradAngle1) * midRadius;
      y1 = Math.cos(gradAngle1) * midRadius;
      x2 = Math.sin(gradAngle2) * midRadius;
      y2 = Math.cos(gradAngle2) * midRadius;

      arc({
        startAngle: angleD3(midAngle - segmentAngle),
        endAngle: angleD3(midAngle + segmentAngle + (i === segments - 1 ? 0 : fudgeFactor))
      });
    } else {
      p3 = circumference * p - circumference / 4;
      x1 = p3 - p2 * circumference;
      x2 = p3 + p2 * circumference;
      y1 = y2 = 0;
      xw = p2 * 2 * circumference + (i === segments - 1 ? 0 : fudgeFactor * circumference);
      ctx.rect(x1, mainRadius - lineThickness, xw, lineThickness);
    }

    grad = ctx.createLinearGradient(x1, y1, x2, y2);
    grad.addColorStop(0, hue((p - p2) * 360));
    grad.addColorStop(1, hue((p + p2) * 360));
    ctx.fillStyle = grad;
    ctx.fill();
  }

  ctx.restore();

  // Show reference point and curve factor
  ctx.save();

  ctx.strokeStyle = '#666';
  ctx.fillStyle = '#666';
  ctx.beginPath();
  ctx.moveTo(-mainRadius, mainRadius + .5);
  ctx.lineTo(mainRadius, mainRadius + .5);
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(0, mainRadius + .5, 2, 0, TAU);
  ctx.fill();

  ctx.restore();
}

var slider = document.getElementById('curvey');
var ease = d3.easeCubicInOut;
var duration = 4000;
var timer;

function showIt(t) {
  if (shouldClear) {
    ctx.clearRect(-width / 2, -height / 2, width * 2, height);
  }
  drawGradientLine(t);
  ctx.fillText(t, 0, mainRadius + 20);
  slider.value = t;
}

function tick(elapsed) {
  var t = ease(1 - Math.abs((elapsed % duration) / duration - .5) * 2);
  showIt(t);
}

// Handle controls
slider.addEventListener('input', function (e) {
  showIt(this.value);
}, false);
document.getElementById('animate').addEventListener('click', function (e) {
  isAnimating = this.checked;
  if (isAnimating) {
    if (!timer) {
      timer = d3.timer(tick);
    } else {
      timer.restart(tick);
    }
  } else {
    timer && timer.stop();
  }
}, false);
document.getElementById('trippy').addEventListener('click', function (e) {
  shouldClear = !this.checked;
}, false);

// Setup
showIt(0);

</script>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: sans-serif;
	margin: auto;
	position: relative;
	width: 600px;
	}
	.controls {
	left: 0;
	position: absolute;
	top: 2em;
	}
	label {
	display: block;
	margin-top: 0.25em;
	}
	#curvey {
	width: 300px;
	}

	</style>
	<body>
	<div class="controls">
	<label>Curvey-ness: <input type="range" id="curvey" min="0" max="1" step="0.01" value="0" /></label>
	<label><input type="checkbox" id="animate" /> Animate</label>
	<label><input type="checkbox" id="trippy" /> “Artistic” mode</label>
	</div>
	<canvas id="drawing"></canvas>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	// Config
	var width = 600,
	height = 500,
	mainRadius = 80,
	lineThickness = 40,
	segments = 180;

	// Derived values
	var TAU = Math.PI * 2,
	TAU_4 = TAU / 4,
	circumference = mainRadius * TAU,
	cx = width / 2 - 120,
	cy = height / 2 + 50;

	// State
	var isAnimating = false,
	shouldClear = true;

	/**
	* NOTES ON INCONSISTENT ANGLES:
	*
	* - Canvas2DContext.arc() => clockwise from [1, 0]
	* - d3.arc() => clockwise from [-1, 0]
	* - Math.sin() / Math.cos() => anti-clockwise from [0, 1]
	*/
	// Normalise all angles so input starts from [-1, 0] and runs anti-clockwise.
	var _angleDomain = [0, TAU];
	var angleCanvas = d3.scaleLinear()
	.domain(_angleDomain)
	.range([TAU / 2, -TAU / 2]);
	var angleD3 = d3.scaleLinear()
	.domain(_angleDomain)
	.range([TAU * 0.75, -TAU / 4]);
	var angleSinCos = d3.scaleLinear()
	.domain(_angleDomain)
	.range([-TAU / 4, TAU * 0.75]);

	// Canvas setup
	var canvas = document.getElementById('drawing');
	canvas.width = width;
	canvas.height = height;
	var ctx = canvas.getContext('2d');
	ctx.translate(cx, cy);

	function hue(h) {
	return 'hsl(' + h + ', 70%, 50%)';
	}

	function clamp(num, min, max) {
	return Math.min(Math.max(min, +num), max);
	}

	/**
	* Draw a fixed-width line with full hue gradient from start to finish.
	* Line always has y=mainRadius at x=0, with parameterised curve.
	*
	* `curveFactor` is a float in range [0, 1] that defines how curved the line is.
	* 0 = no curve (flat horizontal)
	* 1 = full curve (circular)
	*/
	function drawGradientLine(curveFactor) {
	curveFactor = clamp(curveFactor, 0, 1);
	if (curveFactor < 0.008) curveFactor = 0;
	// Angles measured anti-clockwise from [-1, 0]
	var startAngle = curveFactor > 0 ? TAU_4 - (TAU_4 * curveFactor) : TAU_4;
	var endAngle = curveFactor > 0 ? TAU_4 + (TAU_4 * 3 * curveFactor) : TAU_4;
	// Derived values
	var outerRadius = 1 / curveFactor * mainRadius;
	var innerRadius = outerRadius - lineThickness;
	var midRadius = innerRadius + lineThickness / 2;
	var derivedY = mainRadius - outerRadius;
	var segmentAngleFull = (endAngle - startAngle) / segments;
	var segmentAngle = segmentAngleFull / 2;
	var p2 = 0.5 / segments;
	var fudgeFactor = curveFactor > 0 ? TAU / (180 * outerRadius / mainRadius) : 0.005;

	var grad, midAngle, gradAngle1, gradAngle2, p, p3, x1, x2, xw, y1, y2, i;

	var arc = d3.arc()
	.innerRadius(innerRadius)
	.outerRadius(outerRadius)
	.context(ctx);

	ctx.save();
	if (curveFactor > 0) {
	ctx.translate(0, derivedY);
	}

	for (i = 0; i < segments; i++) {
	p = (i + 0.5) / segments;
	ctx.beginPath();

	if (curveFactor > 0) {
	midAngle = startAngle + segmentAngleFull * i + segmentAngle;
	gradAngle1 = angleSinCos(midAngle - segmentAngle);
	gradAngle2 = angleSinCos(midAngle + segmentAngle);

	x1 = Math.sin(gradAngle1) * midRadius;
	y1 = Math.cos(gradAngle1) * midRadius;
	x2 = Math.sin(gradAngle2) * midRadius;
	y2 = Math.cos(gradAngle2) * midRadius;

	arc({
	startAngle: angleD3(midAngle - segmentAngle),
	endAngle: angleD3(midAngle + segmentAngle + (i === segments - 1 ? 0 : fudgeFactor))
	});
	} else {
	p3 = circumference * p - circumference / 4;
	x1 = p3 - p2 * circumference;
	x2 = p3 + p2 * circumference;
	y1 = y2 = 0;
	xw = p2 * 2 * circumference + (i === segments - 1 ? 0 : fudgeFactor * circumference);
	ctx.rect(x1, mainRadius - lineThickness, xw, lineThickness);
	}

	grad = ctx.createLinearGradient(x1, y1, x2, y2);
	grad.addColorStop(0, hue((p - p2) * 360));
	grad.addColorStop(1, hue((p + p2) * 360));
	ctx.fillStyle = grad;
	ctx.fill();
	}

	ctx.restore();

	// Show reference point and curve factor
	ctx.save();

	ctx.strokeStyle = '#666';
	ctx.fillStyle = '#666';
	ctx.beginPath();
	ctx.moveTo(-mainRadius, mainRadius + .5);
	ctx.lineTo(mainRadius, mainRadius + .5);
	ctx.stroke();

	ctx.beginPath();
	ctx.arc(0, mainRadius + .5, 2, 0, TAU);
	ctx.fill();

	ctx.restore();
	}

	var slider = document.getElementById('curvey');
	var ease = d3.easeCubicInOut;
	var duration = 4000;
	var timer;

	function showIt(t) {
	if (shouldClear) {
	ctx.clearRect(-width / 2, -height / 2, width * 2, height);
	}
	drawGradientLine(t);
	ctx.fillText(t, 0, mainRadius + 20);
	slider.value = t;
	}

	function tick(elapsed) {
	var t = ease(1 - Math.abs((elapsed % duration) / duration - .5) * 2);
	showIt(t);
	}

	// Handle controls
	slider.addEventListener('input', function (e) {
	showIt(this.value);
	}, false);
	document.getElementById('animate').addEventListener('click', function (e) {
	isAnimating = this.checked;
	if (isAnimating) {
	if (!timer) {
	timer = d3.timer(tick);
	} else {
	timer.restart(tick);
	}
	} else {
	timer && timer.stop();
	}
	}, false);
	document.getElementById('trippy').addEventListener('click', function (e) {
	shouldClear = !this.checked;
	}, false);

	// Setup
	showIt(0);

	</script>