mogoz

Creative Programming

tags
General Programming , Web Animation , Human Computer Interaction ( HCI )

Tool list

CanvasAPI only wrappers

Wrappers (canvas+webgl)

  • These are wrappers around canvasAPI/webGL/webGPU which gives additional features and easy access to the underlying APIs.

P5js

  • Mostly used for 2D but can also be used for 3D
  • Sits of top of canvasAPI, can use webGL if needed
  • p5.js is a reboot of original processing using JS syntax, deviates from original processing syntax. There used to be processing.js which is no longer maintained external link .
  • p5.js is good for JS, if python there’s py5 external link which uses JPype to connect the Processing Jars (Java).

PIXIjs

  • Mostly used for 2D but can also be used for 3D
  • Sits of top of webGL, can fallback to canvasAPI
  • Performance is usually better than p5.js

ThreeJS

  • Sits on top of webGL. Handles linear algebra / matrix-math behind scenes
  • Mostly used for 3D

BabylonJS

  • Sits on top of webGL. Alternative to ThreeJS

Games

Native engines

This is not very relevant for me but to summarize. But using these native engines will need to send over like 10-20MB atleast even without your game. Something to be aware of before anything else.

  • Unreal: More batteries than unity (Usually AAA)
  • Unity: Less batteries than unreal (Usually AA)
    • 2023 May Update: WebGL player is too heavy for phones atm.
  • Godot: Open source, good for indie games etc.
  • Others: PlayCanvas external link | A-Frame external link

JS engines

These are usually lightweight. And you can use things like tauri/electron to package and release these also.

Additional tooling

Website Building

Live programming

Explorable Explanations

have a diff page

Links to this note