AC Power Visualizer / Sharing Code

Published September 26, 2017

Alternating Current Visualizer

A few weeks ago, I was speaking with a co-worker and trying to understand a few aspects of the power distribution system in place in our theater.  I understood that most power transmission lines carry three phases of alternating current, and that typical household power contains only a single phase of 120V at 60 Hertz, but I didn’t understand how we managed to make usable 240V out of two phases of 120V. After digging a bit, it became clear that this system used two directly out of phase 120V circuits to create a 240V potential between the two “hot” phases, each of which was only 120V from ground. Still, several aspects of our power distribution system remain somewhat confusing to me, so for this week’s ICM project, I attempted to make a p5.js sketch able to visualize the various waveforms of alternating current.

As this project progressed, I quickly realized the complexity I could build into it given time. I began by figuring out how to continuously redraw a sine wave using a series of nested for-loops: once for each phase of power, then once for each point along that wave. Within the for-loop designated with actually drawing the sine wave, I calculated a line to be drawn between a previous point and a newly calculated by y=sin(x) with a precision factor and a scaling factor added for both x and y, then drew the actual line:

//create the sine wave at several separate phases
for (let j = 0; j < phaseQty; j++) {
//reset previous x and y to starting point
//formula for previous y is same as formula for making sine wave at x=0
px = 0;
py = -sin(j * phaseOffset - rOffset) * yScale;

//in every phase instance, run from x=0 to x


The full version of this sketch can be found here!

Sharing Code

The second part of this week’s assignment involved sharing code with a classmate.  Having never shared code before, I was surprised how difficult it can be to figure out what is going on in someone else’s code!  Even after running the code and seeing the output, it took some time to dig into the specific causes and effects within the code.  Especially difficult were:

  • ambiguously named variables

  • related sections of code that weren’t physically near each other

  • long formulas or boolean statements

It is quickly becoming obvious why code semantics and style are so important for anything more complex than these ~100 line sketches we are working on!

That said, after delving into how my partner’s code worked, I began playing with altering it aesthetically and functionally.  Below are my partner’s code output and mine: