Pointicated Waves

by Andrew Maxwell

HTML

<body style="margin:0"><canvas id="C">

JavaScript

// Change these variables and see what happens!
var rows = 20,
	scale = 20,
	minRadius = 0.1,
	maxRadius = 2,
	speed = 0.06, // easy does it
	waviness = 0.3,
    wiggleAmount = 0.5,
    wiggleSpeed = 1,
    wiggleWeirdness = 3,
	lineWidth = 0.05 // in proportion to radius


// Don't change these variables or it will break.
var C = document.getElementById("C"),
	W = C.width = innerWidth,
	H = C.height = innerHeight,
	T = C.getContext('2d'),
	frame = 0
	
T.strokeStyle = "white"

setInterval(function(){
	T.clearRect(0,  0, W, H)
    T.save()
    T.translate(W / 2, H / 2)
    T.scale(scale, scale)
	for (var i = 0; i < rows; i++){
		for (var j = 0; j < rows; j++){
            
			var wiggle = -((i + j) * wiggleWeirdness + frame) * speed * wiggleSpeed,
                x = j - (rows - 1) / 2 + Math.cos(wiggle) * wiggleAmount,
				y = i - (rows - 1) / 2 + Math.sin(wiggle) * wiggleAmount,
				rad = minRadius + (maxRadius - minRadius) * (Math.sin(frame * speed - (i + j) * waviness) + 1) / 2
            
			T.lineWidth = rad * lineWidth
			T.beginPath()
			T.arc(x, y, rad, 0, 2 * Math.PI)
			T.fill()
			T.stroke()
		}
	}
    T.restore()
	frame++
}, 30)