Search code examples
javascripthtmlcanvasaccelerometer

Javascript car movement in x axis from accelerometer data?

I have X, Y and Z-axis data from an accelerometer sensor. I want to use the accelero(X) data to visualize a car in 2D. This is how the data look like.

enter image description here

This is a sample of the data:

enter image description here

The link for the full data is below:

Click here to download the dataset

The car model looks like that in 2D space:

enter image description here

The car only move up or down according to the input data from the file.

I tried to lookup Three.Js, Phaser.Js, Planck.Js, Matter.Js, Phyics.Js and other gaming engines. But I am looking for something really simple as a starting point without the need to use fancy gravity, physics functions, but at the same time the model should be convincing and smooth.

So can someone direct in the right path? How to do it? which library is best to perform this task? Is there an already implemented code that I use and modify according to my need?

I have been working on some code using the aformentioned libraries, for that reason, I didn't post the code here, as I am looking for an easier and simpler solution.

Much appreciated.

Solution

  • You can find an exemple (in 3D) using accelerometer and Arduino code on my github here : https://github.com/BaptisteZloch/Tracking-orientation-with-P5.js

    I have used p5.js to do it, it's quite simple to use.