Website Presents "The Joy of Painting" in a New Light

A website located at connorrothschild.github.io hosts an online gallery that compiles and exhibits the works of the late painter and television personality, Bob Ross. However, rather than simply displaying each work as a screen-filling image, the website first presents statistical data on his overall portfolio. The site relies on CSS animation and JavaScript to make various graphs and charts dynamically fill themselves out depending on how far down the page the user has scrolled.

Ultimately, the site's priority is not necessarily to function as an actual repository displaying Ross' works up close. At the bottom of the gallery page is a section in which a thumbnail of a given painting functions as an embedded link to a YouTube video of the corresponding episode of Ross' show, The Joy of Painting. In each video, he walks the audience through the conception and eventual completion of that painting. Since a defining theme of the overall show was that every work ultimately drew from the same specifically prepared selection of colors, the site visually identifies every color used on every piece and arranges the colors in an interactive timeline at the bottom.

The website's earlier data-focused sections initially represent all 403 of Ross' works as a set of gray rectangles arranged as a grid. While the user's mouse cursor hovers over a rectangle, a thumbnail of the image pops up and identifies the season and episode numbers of the episode in which it was featured. As the user starts scrolling down, the rectangles reshape and rearrange themselves as part of a vertical bar chart that visually indicates how many established colors were used in a given episode's palette.

As the user scrolls down further, the underlying syntax compels all the rectangles comprising a particular column on the bar chart to smoothly change color for the sake of highlighting it as the most populated such column on the chart. When the site makes it a point to highlight one particular painting, only its respective rectangle in the chart stays blue even as the rest of the column turns back to gray. For more information click here https://connorrothschild.github.io/bob-ross-art-gallery/.