Seeking p5 data visualization help

p5.js Coding Questions
1

Hello,

I am new to p5, and I am creating a simple data visualization about wind using data from an accelerometer (in a .csv file).

My “x” values are represented by the variable sensorx, and my “y” values are represented by sensory. I then remap these values with the following:

  let scaled_sensorx = map(sensorx, 0, 1.5, 0, 300);
  let scaled_sensory = map(sensory, 0, 3, 0, 300);

The data is visualized by a single line that expands/contracts and rotates slightly for each data point.

line((200 - scaled_sensorx), (300 - (scaled_sensory/3)), (400 + scaled_sensorx), (300 + (scaled_sensory/3))); `

I was hoping for any suggestions regarding how to make the line less jerky, with more subtle transitions between the data points (note there are about 43,000 rows of data). Perhaps a fading line, or easing?

Any help would be much appreciated.

Thank you!

-ff

1 Like
2

Hello @felixthefein,

If you want to stick with line, you’ll have to implement a smoothing algorithm yourself. Or plot the line on a smaller scale, zoom out so to speak, as everything tends to look more fluid when looked at from afar.

You could also visualize using curves instead of lines. Take a look at the example under the heading Continuous Spline Curves on the Curves page.

1 Like
3

Hello @Sven,

Thank you for the suggestions!

By “zooming out”, do you mean increasing the canvas size and scaling up all the visual elements?

I appreciate the help!

Best,
ff

4

Sorry, I meant the opposite. Compare it with a digital photograph. If you zoom or look close to the screen, you’ll start seeing pixels. The photo looks rough (or jerky, if you want). But if you zoom out or back away from the screen: you’ll stop noticing the pixels and the photo looks smoother.

If you visualize your data on a smaller scale, the jerkiness will be less apparent (but still be there, of course). So it’s a bit of a hack. You probably want to implement something smarter, like cubic interpolation. Or, just use curves instead of lines.

5

@Sven,

I ended up using a continuous spline curve, and it worked perfectly!

Thank you so much for your suggestions!

Best,
Felix

2 Likes