Home  Week1  Week2  Week3  Week4  Week5  Week6  Week7  Week8  Week9  Week10  >Week11  Week12  Week13  Final Instagram
Week 11

11 Interface and Application Programming

WAVEFORM VISUALIZER

For this week I wanted to continue off of previous week and built a web-UI that my ESP32 could connect to. Since my final project is about building a transcranial alternating current stimulation using sinusoid waves, I found this week to be a great opportunity to build a front-end UI for the device. In this guide, it was demonstrated how p5.js can be used as a front-end interface with the ESP32 which I then decided on doing for this week.

According to www.digilentic.com, a sinusoid wave function can be computed with the formula:

where "A" is the amplitude, "f" is the frequency of the sinusoid in Hz, "2π" are the radians in one cycle, "t" is the time in seconds, and "θ" is the angle. .

With the sinusoid wave formula above, I went ahead and implemented it p5.js, which was fairly simple. At first I did a simple sinus function (and added a bit of perlin noise to make it look rougher). However, I found that I didn't quite like the design.

I then went for a more 2.5D looking design with a more vintage/retro feel to it. I did this by first reducing the verteces to 6 and then copying the wave function and offsetting it slightly to give it that 2.5D look. I was very satisfied with my results.