Skip to content
p5.we is a boilerplate to develop Wechat Mini Game using p5.js.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


p5.we is a boilerplate to develop Wechat Mini Game using p5.js.

webgl particle flocking


Just clone the project, and start forking. You should follow WeChat Mini Game workflow of course.

There are some examples in sketch directory. Only need very a few changes from the original p5.js example.

code screenshot

Examples PR are always welcome!

Code structure

├── libs
│   ├── symbol.js           // ES6 Symbol
│   └── weapp-p5js-adapter  // WeChat Mini Game p5js-adapter
│       ├── xxx.js   
├── sketch  
│   ├── xxx.js              // p5 example sketch
└── game.js                 // main game enter


p5.we contains "weapp-p5js-adapter", which is the key to port p5.js on WeChat Mini Game.

WeChat has a basic "weapp-adapter" example.

"weapp-p5js-adapter" I created is based on weapp-adapter ES6 version made by @finscn.

More WeChat Mini Game document.

Notes and TODO

    The WeChat Mini Game only support one canvas to draw, created at wx.createCanvas() firstly called. If you call wx.createCanvas() multiple times, the canvas except the first one are all offscreen, they can't be shown on screen directly.
    However, p5.js will create a default canvas firstly itself on start (and the renderer is P2D).
    So if you want WEBGL renderer, you could hack the p5.js source code and change the default canvas from P2D to WEBGL. And better solutions PR are welcome~

  • p5 library:
    Only support core lib (p5.js) for now.

  • blendMode:
    The globalCompositeOperation of RenderingContext of WeChat Mini Game is NOT the same as p5.js:

  • preload and loadImage:
    Now you can use preload and loadImage as usual! Thanks @xarray!!
    loadImage in preload may not display correctly.
    Canvas of the image created by loadImage() in preload() is not the same as the canvas in setup() or draw(). It should be something conflict with WeChat Mini Game.
    For now you can loadPixels() in callbackFunction of loadImage(xxx, callbackFunction) in preload(), and then setup the pixels to another Image created in draw().
    More about this:



You can’t perform that action at this time.