# Want lots of curves? – 50 lines of pure JavaScript

4 min read

In my endless exploration of the boundaries between code and poetry, I’ve come across this dark place where mysterious forms reveal their ghostly beauty for a fleeting moment before plunging back into the dark cyber abyss for the rest of eternity.

In other words, here’s a simple prog that animates square curves on an HTML5 Canvas.

Finally something that looks really cool but is easy to code and doesn’t require any math beyond the four basic operations you learned by 3rd grade – no trigometer, complex numbers, or direct bitmap operations.

Let’s jump straight to the code:

<html> |

<style> |

body |

background–color: black; |

style> |

<body> |

<canvas ID=”myCanvas” width=”800” height=”600“>canvas> |

<scenario> |

const time = 255 * 2; |

I allow h = [], Mr = [], speedX = [], speedY = []; |

I allow red, green, son, randomRed, randomGreen, randomBlue, counter, fade away; |

I allow canvas = document.getElementById(‘myCanvas‘); |

I allow context = canvas.getContext(‘2d’); |

function reset() |

counter = 0; |

randomRed = mathematics.random(); |

randomGreen = mathematics.random(); |

randomBlue = mathematics.random(); |

for (I allow n = 0; n < 5; n++) |

h[n] = mathematics.floor(mathematics.random() * canvas.width); |

Mr[n] = mathematics.floor(mathematics.random() * canvas.height); |

speedX[n] = –2 + mathematics.random() * 4; |

speedY[n] = –2 + mathematics.random() * 4; |

function i come alive() |

context.clearRect(0, 0, canvas.width, canvas.height); |

fade away = mathematics.ABS(time / 2 – counter); |

for (I allow n = 0; n < 64; n++) |

green = n * 4 + 1; |

green = mathematics.max(green – fade away, 0); |

green = green * randomGreen; |

son = 255 – n * 4; |

son = mathematics.max(son – fade away, 0); |

son = son * randomBlue; |

red = mathematics.max(randomRed * 256 – fade away, 0); |

context.strokeStyle = ‘rgba(‘ + red + ‘,’ + green + ‘,’ + son + ‘,1)’; |

context.beginPath(); |

context.moveTo(h[0], Mr[0]); |

context.square curve(h[1], Mr[1], h[2] + n * 5, Mr[2] + n * 5); |

context.square curve(h[3], Mr[3], h[4] + n * 5, Mr[4] + n * n); |

context.square curve(h[1], Mr[1], h[0], Mr[0]); |

context.blow(); |

counter++; |

if (counter == time) |

reset(); |

for (I allow n = 0; n < 5; n++) |

h[n] = h[n] + speedX[n]; |

Mr[n] = Mr[n] + speedY[n]; |

window.requestAnimationFrame(i come alive); |

reset(); |

window.requestAnimationFrame(i come alive); |

scenario> |

body> |

html> |

Overview:

In short, we have 5 points on the screen. We draw 3 square curves between them. For each of these curves we draw 63 more, moving the points a little each time and changing the color slightly.

In each animation frame we move the 5 points. After about 500 frames, we start a new set of curves: we randomize the coordinates of the points, their velocities and the color of the curves.

The “fade” factor decreases from 255 to 0 during the first half of the set (fade) and then increases during the second half (fade).

Here’s how quadratic curves work:

To draw this white curve, first move the pen to point 0 (the origin) and then do quadraticCurveTo(point 1, point2)

Point 2 is the end point. Point 1 is the control point – it defines the curvature between the start and end. The red lines are just there to show where the control point is.

In our program, we add a second curve at the end of the first one (it’s blue in this picture):

And third, back to the first (green). This time I’m not including the supporting red lines. In our final program, all three curves (white, blue, and green) will have one color. The three colors are used here to help you understand the mechanism of drawing the shape.

See what happens if for each of these curves we draw similar ones, shifting some of the points slightly:

So the curves themselves are relatively simple. It’s the offset cloning that makes them interesting and gives them a 3D canvas-like feel.

Now you know how to create the shape. The rest is just shuffling the colors and animating the 5 dots…

details:

Lines [1-9] set up HTML5 Canvas

[10] time – how many frames a set of curves will stay on the screen

[11] coordinates and velocities of the points

[12-16] colors and other variables, HTML setting

[17-29] the ‘reset’ function creates a new set of curves by randomizing their parameters.

[31-61] this is the actual engine that does all the work:

[32] clear the previous frame. Removing this line produces an interesting effect – try it!

[34] calculate the current fading factor

[35] the cycle that draws 64 curves

[36] the green component of the curve RGB (Red/Green/Blue) color is proportional to the curve number (n)

[37] subtract the “fading” factor. If the result is negative, use 0

[38] factor in the green randomizing component for the given set

[39-41] the blue component is analogous to the green, except that the proportion is reversed

[42] the red component is independent of row number

[43] set the calculated curve color [36-42]

[45] start the curve

[46] go to point 0

[47] draw the first curve – to point 2

[48] draw the second curve – to point 4

[49] draw the third curve – back to point 0

[50] complete the curve

[52] increase the frame counter

[53-54] if the counter reaches the limit, start a new set of curves

[56-59] shift the coordinates of each point using its velocities (x and y axes)

[60-61] this is the main program – it just creates the first set and starts the animation

Check out these programming tutorials:

**JavaScript:**

Optical Illusion (18 lines)

Rotating Squares – Visual Effect (25 rows)

Oldschool fire effect (20 lines)

Fireworks (60 lines)

Animated Fractal (32 rows)

Physics engine for beginners

Physics engine – interactive sandbox

Physical engine – stupid contraption

Starfield (21 lines)

Yin Yang with a twist (4 circles and 20 lines)

Tiled Map Editor (70 rows)

Sinusoidal scroller (30 lines)

Interactive animated sprites

Image transition effect (16 rows)

Your first JavaScript program: you need 5 minutes and a notebook

Fractals in Excel

**Python in Blender 3d:**

Domino effect (10 rows)

Wrecking Ball Effect (14 rows)

3d Fractal in Blender Python