Fun Experiments in React Native

I recently found out that I could use processing in a react native app and started to play around with it.

Processing is a visual programming language that makes data visualisations, interactive art and more. To find out more about it you can find it at this link.

To start with I created a simple bouncing ball, to do this a new project will have to be created and processing js will need to be installed.

create-react-native-app BouncingBall 
npm install — save processing-js expo-processing

Next I set up App.js in preparation for the sketch.

Processing has two methods that are necessary for every sketch, setup() and draw(). Setup is where you put all the code needing in setting up the app and draw is the method that is called every frame of your app.

First I set up some variables needed for the ball i.e velocity, position and gravity. These variables will be Vectors which will hold a 2D x and y value.

Finally I added the code that will draw the ball too the screen and handle it’s collisions with the edges of the screen.

The end result:

Bouncing ball in react native