Rainbow Tube

A blast from the past!

In 2019-20 we were just beginning to experiment with p5js and in an older version of TNT, we featured a more primitive app, Rainbow Tube.

Since then, we've made some progress and this year's novices are spiffing up that app, as you can see. Some improvements:

• The cool site ColorSpace helped us design an attractive gradient background with custom thematic colors
• The header background image was tiled with a free background image from background-tiles.
• The app has a 'loading' feature where vital components on the page are not shown until the page has loaded, thanks to the nifty: onload="myInit();" attribute in the body tag of the web page
• It's responsive: the pen radius is a percentage of the canvas width
• The radius is linked to the mouse wheel via the mouseWheel function
• The output is dressed up with a Bootstrap5 table
• Bootstrap5 radio buttons allow you to choose the drawing modality and by their nature indicate the current mode
• A 'slider' lets you control the alpha property (transparency) of the pen color
• Media queries allow the output to adapt to browser window size (try it!)
• Buttons allow you to clear the background or reset the app
• Commas in the 'Mileage' output make the number easier to read. How did we do that?!
• Move the mouse in and out of the canvas. What happens? How was this done?

---

The Secret of the Tube

If you dive into the code you'll notice that a command:
myDistance += dist(mouseX, mouseY, pmouseX, pmouseY);
accumulates the distance between where the mouse currently is and where it's been (pmouseX → 'previous mouseX'). That value, myDistance ('Mileage' in the table) is used to change the 'hue' of myColor. It does this using the % operator, aka 'modulus operator' using the command:
myHue = myDistance % 360;
What this does is it divides myDistance by 360 and returns the remainder. For any value of myDistance above 360, myHue cycles back to zero.

When the canvas is 400px tall, you'll notice that a vertical tube starting with red cycles back to red near the bottom of the canvas and restarts its ROYGBIV adventure!

We like using an HSB color mode (hue, saturation, brightness) with p5js. You can check out our color wheel to see what hues give what colors. (Red, at the top of the color wheel, has hue = 0. Other colors take on values in [0, 360°] as you move clockwise around the wheel).

If you want to design your own colors, check out Heath's Color Sliders which shows the interconnection between HSB and RGB color modes.

---