Just playing around with some generative type drawing today, using curves.

In Flash, you have moveTo and curveTo. In JavaScript, you have the exact two functions that work exactly the same way, creating a quadratic curve. But you also have bezierCurveTo, which is a nice addition.

To make a quadratic curve, moveTo a certain point, then call quadraticCurveTo(controlPointX, controlPointY, endPointX, endPointY) just like in Flash’s curveTo.

context.beginPath(); context.moveTo(100, 100); context.quadraticCurveTo(200, 0, 300, 100); context.stroke();

I’m not going to beat that one to death. You get it.

The bezierCurveTo function works the same way, but you get two control points, so you can make a more complex curve.

context.beginPath(); context.moveTo(100, 100); context.bezierCurveTo(200, 0, 400, 300, 300, 100); context.stroke();

That’s all there is to it really, but you can do some cool stuff like this:

Here’s the code for that:

$(function () { var i, j, canvas, context, points = [], width, height, numLines = 10; canvas = $("#canvas")[0]; context = canvas.getContext("2d"); width = canvas.width; height = canvas.height; context.lineWidth = 0.1; for(i = 0; i < 4 * numLines; i += 1) { points.push({x:Math.random() * width, y:Math.random() * height, vx:Math.random() * 4 - 2, vy:Math.random() * 4 - 2}); } setInterval(function() { for(j = 0; j < numLines; j += 1) { context.beginPath(); context.moveTo(points[j * 4].x, points[j * 4].y); context.bezierCurveTo(points[j * 4 + 1].x, points[j * 4 + 1].y, points[j * 4 + 2].x, points[j * 4 + 2].y, points[j * 4 + 3].x, points[j * 4 + 3].y); context.stroke(); } for(i = 0; i < points.length; i += 1) { points[i].x += points[i].vx; points[i].y += points[i].vy; } }, 1000/24); });

Basically, I create an array of points. Four random points for each line. Each point has a random x, y and a random vx, vy for velocity.

On each frame, I move to a point and then draw a curve through the next three points, and so on for each curve. Then I update all the points by adding the velocity to the position. Each line is drawn with a width of 0.1, so the many lines build up over time into a neat texture.

See it in action here: http://www.bit-101.com/jscanvas/mar24.html. Refresh to get a new design.

[...] JavaScript Day 24: Curves [...]

[...] Day 21: Text on Canvas JavaScript Day 22: Transformation JavaScript Day 23: Shadows JavaScript Day 24: Curves JavaScript Day 25: More Art JavaScript Day 26: Mouse Part I JavaScript Day 27: Mouse Part II [...]

CanvasRenderingContext2D doesn’t specify a curveTo() method – assume you meant quadraticCurveTo()?

http://www.whatwg.org/specs/web-apps/current-work/complete/the-canvas-element.html#2dcontext

Oops. You’re absolutely right. Thanks. Fixed.

Thanks for these awesome tutorials. Can you please point out why you update the x and y points with vx and vy velocities respectively? Shouldn’t be the other way around:

points[i].x += points[i].vx;

points[i].y += points[i].vy;

THX

Yes, I can explain that precisely: stupidity. Fixed.

[...] 7. Curves [...]

[…] HTML5 Curves […]