Sunshine Day

Hello, Sunshine!

Bringing sunshine into your otherwise dreary life!

We wanted an engaging animation showing an oscillating sun shape that sinusoidally cycled in size and hue. Huh? (Maybe you ought to take some Precal!) Some features:

• The top 3 buttons influence how the background is refreshed with each frame. When transparent background colors are used, you can see a 'trail' effect. Try out each of the 3 buttons to get different effects
• baseHue is the minimum hue (color family) of the images. From there, the max hue goes 60 above that. The colors cycle between those two colors. The center circle varies as a cosine; the rays as sines
• The alpha affects the transparency of the shapes. When partially transparent, they overlap to form a stained-glass sort of effect
• The number of rays dictate the number of equilateral triangles surrounding the center disk. They are sized base on a 'side scale' of the circumference of the 'tri radius' (shown in the table). The larger that scale, the more overlap of the triangles!
• The radius of the center disk 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
• Hidden 'Easter Egg' features allow you to show/hide the tri radius circle and the triangle sides and start/stop the sun rotation. Can you find them?!
• The concepts that made this program manageable were p5js's push and pop functions, in conjunction with translate and rotate. The equilateral triangles were a cinch with our handy coordinate transformations. Anytime we successfully manipulate coordinate transformations in this way, it calls for singing and dancing. The linked clip was the inspiration for the app name.