Curve Stitching: Triangle
A simple technique of drawing a series of straight lines that together create curves. This one demonstrates a triange 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(390, 0, 390 * Math.cos(2 * Math.PI / 3), 390 * Math.sin(2 * Math.PI / 3), 41, function() { context.translate(400, 500); context.rotate(1 * Math.PI / 6); }); var lineB = new Line(390, 0, 390 * Math.cos(2 * Math.PI / 3), 390 * Math.sin(2 * Math.PI / 3), 41, function() { context.translate(400, 500); context.rotate(5 * Math.PI / 6); }); var lineC = new Line(390, 0, 390 * Math.cos(2 * Math.PI / 3), 390 * Math.sin(2 * Math.PI / 3), 41, function() { context.translate(400, 500); context.rotate(9 * Math.PI / 6); }); for (var i = 0; i < lineA.points.length; i++) { context.beginPath(); lineA.moveTo(i); lineB.lineTo(i); context.stroke(); context.beginPath(); lineB.moveTo(i); lineC.lineTo(i); context.stroke(); context.beginPath(); lineC.moveTo(i); lineA.lineTo(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