Repository files navigation

u5.js is a minimalist and lightweight canvas animation library. Its API is essentially a stripped down version of the popularp5.js library which focuses on 2D canvas animation.

I have been using and loving p5.js since 2014, it is all over my websiteucodia.space, including the home page. Though the p5.js library was never built to be tree-shakeable and is now over 800KB, which is very large if all you need is to animate simple primitives.

There is anexisiting issue in the p5.js GitHub repository, though it seems the way the library is built makes it impossible to enable tree-shaking while remaining backward compatible.

As such I have decided to give a try at building a library with the same API which focuses only on 2D canvas animation.

• frameCount
• deltaTime
• frameRate()
• windowWidth
• windowHeight
• windowResized()
• width
• height

• background()
• clear()
• fill()
• noFill()
• noStroke()
• stroke()

• circle()
• ellipse()
• line()
• rect()
• square()
• triangle()

• strokeWeight()

• HALF_PI
• PI
• QUARTER_PI
• TAU
• TWO_PI

• setup()
• draw()
• remove()
• noLoop()
• loop()
• u5()

• createCanvas()
• resizeCanvas()

• rotate()
• translate()
• scale()

• mouseX
• mouseY
• pmouseX
• pmouseY
• mouseIsPressed
• mouseMoved()
• mousePressed()
• mouseReleased()
• doubleClicked()

• map()
• constrain()

• Auto-sizing canvas
• Out of the box support for SVG export (no animation)

Here is an equivalent top5.js setup and draw example.

const example = (sketch) => {  let y = 100;  sketch.setup = function () {    sketch.createCanvas(720, 400);    sketch.stroke("white");    sketch.frameRate(30);  };  sketch.draw = function () {    sketch.background("black");    y = y - 1;    if (y < 0) {    y = sketch.height;    }    sketch.line(0, y, sketch.width, y);  };};new u5(example, document.getElementById("container"));