Learn programming by recreating what you see.
visuco shows you a short animation. You write the code to reproduce it — and get graded on how close you are, shape by shape, colour by colour.
function everyFrame(){ backgroundColour(25); shapeColour(x, y, 200); circle(x, y, 40); x += dx; y += dy; if (x < 20 || x > 380) dx = -dx; if (y < 20 || y > 380) dy = -dy; }
How it works
No setup, no installs — everything runs in your browser.
Watch the target
Every challenge is a short animation: shapes moving, growing, reacting. Study what happens frame by frame.
Write code to match it
Recreate the animation in real JavaScript — variables, loops and a handful of shape commands. Run it as many times as you like.
Get graded, precisely
Your animation is compared to the target frame by frame — position, size, shape and colour each scored separately, so you always know exactly what's left to fix.
Why copy animations?
Programming is turning "what I want to happen" into precise instructions. An animation shows you exactly what should happen — the only thing left to learn is the instructions. You'll pick up variables, loops, conditions and coordinate thinking without a wall of theory, and you can see every mistake instead of reading about it.
Get started
Start here — the first topic of Getting Started. Work down the list in order; each challenge takes a couple of minutes.
How a Sketch Works
How every sketch is put together: the everyFrame lines that draw each frame, why they are used again and again, and what start does before the first frame.