Curve Stitching: Star
A simple technique of drawing a series of straight lines that together create curves. This one demonstrates a star design.
Canvas (your drawing will display here)
Editor (write code below)
var canvas = document.getElementById('my_drawings_canvas'); var context = canvas.getContext('2d'); context.scale(0.5, 0.5); function initDrawing() { var lineA = new Line(0, 0, 390, 0, 21, function() { context.translate(400, 400); context.rotate(0 * Math.PI / 3); }); var lineB = new Line(0, 0, 390, 0, 21, function() { context.translate(400, 400); context.rotate(2 * Math.PI / 3); }); var lineC = new Line(0, 0, 390, 0, 21, function() { context.translate(400, 400); context.rotate(4 * Math.PI / 3); }); var lineD = new Line(0, 0, 390, 0, 21, function() { context.translate(400, 400); context.rotate(1 * Math.PI / 3); }); var lineE = new Line(0, 0, 390, 0, 21, function() { context.translate(400, 400); context.rotate(3 * Math.PI / 3); }); var lineF = new Line(0, 0, 390, 0, 21, function() { context.translate(400, 400); context.rotate(5 * Math.PI / 3); }); for (var i = 0; i < Math.min(lineA.points.length, lineB.points.length); i++) { context.beginPath(); lineA.moveTo(i); lineB.lineTo(lineB.points.length - 1 - i); context.stroke(); context.beginPath(); lineB.moveTo(i); lineC.lineTo(lineB.points.length - 1 - i); context.stroke(); context.beginPath(); lineC.moveTo(i); lineA.lineTo(lineB.points.length - 1 - i); context.stroke(); context.beginPath(); lineD.moveTo(i); lineE.lineTo(lineB.points.length - 1 - i); context.stroke(); context.beginPath(); lineE.moveTo(i); lineF.lineTo(lineB.points.length - 1 - i); context.stroke(); context.beginPath(); lineF.moveTo(i); lineD.lineTo(lineB.points.length - 1 - i); context.stroke(); } } var Line = function(x0, y0, x1, y1, tickCount, transform) { this.points = []; for (var i = 0; i < tickCount; i++) { var x = (x0 == x1) ? x0 : x0 + (x1 - x0) * i / (tickCount - 1); var y = (y0 == y1) ? y0 : y0 + (y1 - y0) * i / (tickCount - 1); this.points.push({x: x, y: y}); } this.transform = transform; this.draw = function() { context.save(); if (this.transform !== undefined) this.transform(); context.beginPath(); context.moveTo(this.points[0].x, this.points[0].y); context.lineTo(this.points[this.points.length - 1].x, this.points[this.points.length - 1].y); context.stroke(); context.restore(); }; this.moveTo = function(i) { context.save(); if (this.transform !== undefined) this.transform(); context.moveTo(this.points[i].x, this.points[i].y); context.restore(); }; this.lineTo = function(i) { context.save(); if (this.transform !== undefined) this.transform(); context.lineTo(this.points[i].x, this.points[i].y); context.restore(); }; }; initDrawing();
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset