A plugin for using p5.js in Sketch
or read more ▼
This plugin was made to help with the creation of complex graphics, generative visuals and data visualizations with real data. And, in general, because I think we need more variety in our tools. As Jon Gold says: «I see nothing to tie the role of designer to rectangle-dragger».
Press the big “Play” button and run your code. If your code is valid after a moment you’ll see a new artboard in the current page with your code rendered in Sketch.
Copy the code on the left in the editor and click “Play”. The drawing on the right will render inside Sketch in a new artboard.
p5.sketchplugin doesn't match the whole p5.js library (yet!) but it gives access to most of the basic functions for drawing. Take a look at the reference on GitHub to see what is available and how to call these functions.
Do I need to know how to code to use this?
Isn't p5.js a library for animating stuff? How does that work in Sketch?
P5.js is a library for drawing with code. One of the key concepts of p5.js is to render the code contained in the draw() function up to 60 times per second in the browser. This is clearly not possible in Sketch. p5.sketchplugin exposes part of the p5.js library but does't allow to create animations within Sketch: the code is rendered only once. However, the same code can be copied in the browser and used without changes.
Is there a way to draw the code in a custom artboard?
Not yet. It's something I’m planning but it completely breaks away from the p5.js model so I’m still trying to understand how to do it properly.
When I tweak things in the p5canvas artboard, the code doesn't change.
Yes, there isn't a way to convert back changes made manually into code.
Can you implement…