loading...

Fun Experiments in React Native

kmukabe profile image doodlebug Updated on ・1 min read

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 gif

Posted on by:

kmukabe profile

doodlebug

@kmukabe

A python and react native developer. I'm also pretty interested in game dev

Discussion

markdown guide
 

Nice example!

There is wrong github code example link after "Finally I added..." sentence. It should be linked to App_2.js

 

Thanks for the feedback, I fixed the link.