This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Heni Amundsen
Posted Dec 09 - Read on Facebook

did someone use http://p5js.org/ (processing) with framer? does that work?

16 Comments

Pedro Ivo

hey guys, I'm using Framer Studio v76 and the code above is not working. Thoughts on how to implement p5 in Framer?

Pedro Ivo

And yes, I've altered it to CoffeeScript and linked p5, p5.dom and p5.sound in the index

Ee Venn Soh

Pedro Ivo The easiest way in to get it done using iFrame. Try this link https://github.com/processing/p5.js/wiki/Embedding-p5.js I prefer this method now.

Pedro Ivo
Alexander Kozhevin

Hah, background of this site looks impressive :)

James Hare

Hi Heni, I'm thinking the same thing. Did you ever find a solution? I need to animate Framer layers like particles, so P5 would be an amazing integration

Heni Amundsen

Unfortuantly I did not continue with that, but it should be possible. I wish you luck :)

Ee Venn Soh

I did try this by including p5.js library into the index.html but the generated layers of Framer sit on top of the whole p5.js canvas and it is hiding it. Still figuring out how to integrate p5.js with framer.js.

Ee Venn Soh

Ah! I have figured this out. It works (: Let me know if you guys are interested. Could further explain this.

Heni Amundsen

Thats the reason i asked here last year, because i couldnt get it work. So yes please! :D
Maybe you can write about it on medium.com or somewhere others can find that topic too. Would be awesome! :)

Ee Venn Soh

Sure, at some point I will do some tutorials / articles. But in the nutshell, to get p5.js to work with Framer.js. You will need to create a Framer layer object that will act as a canvas.

If I am designing in a 360x640 Android phone,

In JS:
// Setup your canvas
var p5canvas = new Layer({
width: 360*4,
height: 640*4,
background: ‘transparent’
});

// Create an empty div to serve as an anchor point
p5canvas.html = "<div id='p5canvas'></div>";

// Using Framer selector API
var sketch = p5canvas.querySelector('#p5canvas');

// p5.js
function setup() {
// Matching canvas size
var cnv = createCanvas(360*4, 640*4);

// Using p5 parent API to nest it within #p5canvas
cnv.parent(sketch);
}

And that's all you need to get it working.

Heni Amundsen

Awesome! thank you very much! :D

James Hare

Thanks Ee. I actually ended up doing the same thing in the end - the trick works for many other libraries too, including three.js and two.js. Now, what I dream about is a Framer module that abstracts all the physics and particle goodness from p5/three/two, and makes it available to animate native Framer layers

Ee Venn Soh

James Hare Yes, it will work for all other libraries. It is essentially setting up a canvas area to play with. Can't wait to see what you guys could come up with!

Marty Laurita

Ee Venn Soh, this is awesome, but could you link to an example framer file? I still don't quite follow..

Ee Venn Soh

Marty Laurita I am using open source framer.js for this James Hare do you have a framer file you can share?

Read the entire post on Facebook