large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<a href="http://ift.tt/2nGZve1">Framer &#8211; Medium</a> | Giles Perry 
<h4>A module for adding 2D physics simulations to your <a href="http://ift.tt/2oEjwae">Framer</a> prototypes.</h4>
<img alt="" src="http://ift.tt/2nGU4M8">
<a href="http://ift.tt/2oEo5Bj">My first article</a> on prototyping in Framer looked at how to write a custom layer class and save it as a module. This follow-up takes things to the next level with an experiment in physics.
<blockquote>What would it take to build a simple physics simulation in Framer?</blockquote>
I recently set myself a challenge to build a physics engine module for Framer. Something I could use to test out a game idea. To a non-developer like myself, that might seem ambitious. But when you take anything on in Framer most times you’ll find you can build on other people’s efforts. Plus there’s an awesome community on hand to help out when you get stuck. Now I want to share the results with you, together with a few tricks I’ve learned along the way.
<h4>TL;DR</h4>
Everything you need to use a physics engine in Framer is in this prototype. Check it out and enjoy!
<a href="http://ift.tt/2nH6OCq">Coffee Physics</a>
<img alt="" src="http://ift.tt/2oECe1x"><a href="http://ift.tt/2nH6OCq">http://ift.tt/2nH6OCq</a>
<h3>Step 1 — Find a physics engine</h3>
I want to make a prototype where objects have mass, collide and bounce off each other. So I need a physics engine to handle the simulation.
Framer already has ‘powerful physics’ — scroll components, draggable layers and spring animations all rely on Framer’s built in physics engine — but there’s no way to access the engine directly. <a href="http://ift.tt/2nH7szR">There has been chat about integrating a full blown physics engine in Framer</a>. How’s that going? I have no idea…
Luckily, Justin Windle (a.k.a. <a href="https://soulwire.co.uk">soulwire</a>) has written ‘A simple, lightweight physics engine written in CoffeeScript’:
<a href="http://ift.tt/2oEfkqL">soulwire/Coffee-Physics</a>
Let’s download the ZIP file from Justin’s GitHub repo and see what’s inside.
There are three folders:
‘source’ contains Justin’s original CoffeeScript files. In ‘compiled’, the same code has been compiled to JavaScript. In ‘deploy’ the separate parts of the system are combined into a single file. I haven’t figured out how to import JavaScript modules in Framer so we’ll focus on the source code and see how well we get on.
Rename the source folder ‘coffeePhysics’ and drag it into the modules folder of a fresh Framer Project.
<h3>Step 2 — Modularise</h3>
The aim is to create a module so we can use the physics engine in any project that needs it. You can <a href="http://ift.tt/2nGZ4Ak">find out more about modules on Framer.com</a>.
I want to change Justin’s code as little as possible. That way I’m less likely to break it.
Inside our new coffeePhysics folder is a set of files, each responsible for a separate aspect of the physics engine. For example, the math sub-folder contains the file vector.coffee which defines a class for creating and handling two dimensional vectors.
vector.coffee starts like this:
<pre>### 2D Vector ###</pre>
<pre>class Vector</pre>
<pre> # rest of class definition goes here...</pre>
We don’t really need to understand the code. All we want to do is add the prefix exports so that the class is available to use in our Framer project:
<pre>### 2D Vector ###</pre>
<pre>class exports.Vector</pre>
<pre> # rest of class definition goes here...</pre>
To include a module in a Framer project the code would normally be something like this:
<pre># Include myModule.coffee in our prototype</pre>
<pre>module = require "myModule"</pre>
But Vector.coffee is in a sub-folder of the modules folder, so we need to include its relative path:
<pre># Include Vector.coffee in our prototype</pre>
<pre>vectorModule = require "coffeePhysics/math/Vector"</pre>
Now that the module has been included in the project, we will be able to create an instance of the Vector class:
<pre># Create a new Vector instance</pre>
<pre>vectorA = new vectorModule.Vector</pre>
It would be nicer if we could write vectorA = new Vector. To do this we need to use a shortcut with the require statement:
<pre># Include Vector.coffee # and assign the exported Vector class to a variable</pre>
<pre>{Vector} = require "coffeePhysics/math/Vector"</pre>
So far so good. We’ve figured out how to export a class from a module and include it in our project. But there’s an added complication…
Some classes in Coffee Physics don’t work in isolation. They build on another class, extending what it does. Take euler.coffee for example:
<pre>### Euler Integrator ###</pre>
<pre>class Euler extends Integrator</pre>
<pre> # rest of class definition goes here...</pre>
The Euler class needs Integrator to be defined before it can extend it. Because the Integrator class is defined in a separate module, it’s not enough just to import both classes into our Framer project. Euler.coffee needs its own require statement:
<pre>### Import Integrator module ### {Integrator} = require 'coffeePhysics/engine/integrator/Integrator'</pre>
<pre>### Euler Integrator ### class exports.Euler extends Integrator</pre>
<pre> # rest of class definition goes here...</pre>
<h3>One module to rule them all…</h3>
Coffee Physics is made up of many files. We don’t want to import each file one by one every time we use it in a project. So we need to create a parent module that will do the job of tying everything together. This is relatively straightforward once you know how.
All the parent module has to do is import each of the required classes and then export them. We’ll name the parent module coffeePhysics.coffee and save it in the modules folder of our project. The code looks like this:
<pre># Import the class... {Integrator} = require ‘coffeePhysics/engine/integrator/Integrator’</pre>
<pre># ...and then export it exports.Integrator = Integrator</pre>
<pre># and repeat for every other class…</pre>
The require statement needed in our project to include the entire engine is a bit more complicated than normal:
<pre>{Integrator, Euler, ImprovedEuler, Verlet, Particle, Physics, Vector, Spring, Behaviour, Attraction, Collision, ConstantForce} = require ‘coffeePhysics’</pre>
It works like this: {Integrator, Euler, etc.} is an object containing a set of variables, one for each class. require &#8216;coffeePhysics&#8217; creates an object containing each exported class in the coffeePhysics module. The = operator assigns each class to the correct variable using the magic of <a href="http://ift.tt/1pR86uj">destructuring assignment</a>.
Our physics engine is complete! Let’s see if it works.
<h3>Step 3 — The moment of truth!</h3>
To test out our physics engine, I’ve taken the code example from the README in the Coffee Physics repo. Other than translating it from JavaScript to CoffeeScript, the only significant change is to use layers to draw the particles.
Rather than walk you through every line I’ll stick to the highlights. So download the project if you want to take a closer look…
To create a simulation, you need a Physics instance. This keeps track of time, and updates the position of particles according to the forces added to the system and the behaviours given to particles. You need to specify which <a href="http://ift.tt/Oz0GLB">numerical method</a> the Physics instance will use to integrate Newton’s equations of motion.
<pre># Create a physics instance which uses the Verlet integration method physics = new Physics() physics.integrator = new Verlet()</pre>
Adding a Collision instance allows the system to check when particles collide, and apply any resulting changes of direction and velocity.
<pre># Allow particle collisions to make things interesting</pre>
<pre>collision = new Collision()</pre>
The next step is to add some forces. Our system will be governed by two forces: pullToCentre, an attraction force pulling everything to the centre of the screen, and avoid, which has negative strength and so pushes particles away from its centre.
<pre># Design some behaviours for particles avoid = new Attraction() pullToCenter = new Attraction()</pre>
<pre>pullToCenter.target.x = Screen.width / 2 pullToCenter.target.y = Screen.height / 2 pullToCenter.strength = 120</pre>
<pre>avoid.setRadius( 100 ) avoid.strength = -1000</pre>
Now we’re ready to add some layers.
avoidLayer is a draggable layer constrained within the limits of the screen. You can flick and drag this layer around the prototype. We’re going to position the avoid force at the centre of this layer.
<pre>avoidLayer = new Layer borderRadius: 100 size: 100 opacity: 0.30</pre>
<pre>avoidLayer.center() avoidLayer.draggable.enabled = true avoidLayer.draggable.constraints = x: 0 y: 0 width: Screen.width height: Screen.height</pre>
Next up, use a loop to create 200 particles.
Particles have mass, radius and position properties, with position defined using a vector. particle = new Particle( Utils.randomNumber(.1,1) ) creates a new particle with a random mass between 0.1 and 1. position = new Vector( Utils.randomNumber( 0, Screen.width ), Utils.randomNumber( 0, Screen.height ) ) defines a position vector at a random point on the screen. After setting the radius of the particle to be proportional to its mass, we move it into position:
<pre># Create a particle particle = new Particle( Utils.randomNumber(.1,1) )</pre>
<pre>position = new Vector( Utils.randomNumber( 0, Screen.width ), Utils.randomNumber( 0, Screen.height ) )</pre>
<pre>particle.setRadius( particle.mass * 10 ) particle.moveTo( position )</pre>
Any behaviours effecting the particle are added to its particle.behaviours property. Then we add the particle to the collision.pool, so that collisions are handled, and to physics.particles, the array that keeps track of every particle in the simulation:
<pre># Apply behaviours to the particle particle.behaviours.push( avoid, pullToCenter, collision )</pre>
<pre># Make it collidable collision.pool.push( particle ) # Add it to the simulation physics.particles.push( particle )</pre>
Coffee Physics doesn’t do the job of drawing our particles. We use Framer layers for that. Layer coordinates are measured from the layer’s top left corner, while a particle’s coordinates are from its centre, so that needs to be taken into account.
If we had more time, we could create a ParticleLayer class that extends the Layer class by adding particle properties to it. Instead, we’ll make the particle instance a property of the layer.
<pre> # Create a layer to show the particle on the screen ball = new Layer x: particle.pos.x - particle.radius y: particle.pos.y - particle.radius size: particle.radius * 2 borderRadius: particle.radius backgroundColor: colourCycler() # Add the particle instance to the layer ball.particle = particle</pre>
Finally, we can set it all in motion!
Every 60th of a second, reposition the avoid force to wherever the avoidLayer has moved to. Use physics.step() to update the simulation based on the elapsed time, and move the ball layers accordingly:
<pre>frameRate = 1 / 60</pre>
<pre># Set everything in motion</pre>
<pre>Utils.interval frameRate, -&gt; # Update the position of the avoid target avoid.target.x = avoidLayer.x + 50 avoid.target.y = avoidLayer.y + 50 # Step the simulation physics.step() # Update the position of the balls for ball, i in balls ball.x = ball.particle.pos.x - ball.particle.radius ball.y = ball.particle.pos.y - ball.particle.radius</pre>
We’re done! <a href="http://ift.tt/2nH6OCq">Time to take a look at the finished prototype</a>.
<h4>A few acknowledgements</h4>
<a href="http://ift.tt/2oExwAy">Justin Windle</a> is responsible for all of the clever stuff. <a href="http://ift.tt/2nGZ7w9">Jonas Treub</a> and <a href="http://ift.tt/2oEryQu">Niels van Hoorn</a> helped me piece it together. Thank you all.
<h4>Was this article helpful?</h4>
If you liked this article, please tap the little ? icon at the bottom of the page to help spread the word.
If you use my module to make something nice in Framer, or you have any thoughts, leave a comment ? to let me know. Thanks!
<h4>A bit about me</h4>
My name is Giles Perry. I’m a freelance UX Designer based in London, UK. I’ve been creating digital experiences for the last 17 years. <a href="http://ift.tt/2nH04o0">Check out my website</a> or find me on <a href="http://ift.tt/2oEy0H6">LinkedIn</a>, and thank you for reading.
<a href="http://ift.tt/2nH4ivT"><img alt="" src="http://ift.tt/2oEo54n"></a><a href="http://ift.tt/2nH2T8W"><img alt="" src="http://ift.tt/2oEvsJ7"></a><a href="http://ift.tt/2nGQMIY"><img alt="" src="http://ift.tt/2oEqonR"></a><img src="http://ift.tt/2nH3asb" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2oEsDHH">It’s Particle Time! How To Use A Physics Engine With Framer</a> was originally published in <a href="https://blog.framer.com">Framer</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

It’s Particle Time! How To Use A Physics Engine With Framer

It’s Particle Time! How To Use A Physics Engine With Framer

A module for adding 2D physics simulations to your Framer prototypes.

Top Stories