Flatiron School Project 3: Virtual Art Gallery

4 min readSep 22, 2020

In Module 3 of my time at Flatiron School, my partner and I created a single-page application using Javascript in the frontend and Ruby on Rails for the backend. We decided to make a virtual art gallery that would recreate the experience of actually being in a museum. While we were inspired by sites such as the Frick Collection, Smithsonian Museum, and New York Times’ “close reading” series for paintings, we also strived to go even further in providing a tangible and interactive user experience on the frontend. Listed below are some of the unique features of our site:

Visual and Audio Tours of Paintings (with Scroll-Responsive Zoom)

One feature of this application is the visual tour of a painting using a scroll-responsive zoom. Here is a video demonstrating this feature:

There were several aspects to this scroll-and-zoom feature. During the scroll, the picture remains fixed on the page while the note containers are gradually brought up. Using the ‘window.onscroll’ event listener, we set ranges of ‘window.pageYOffset’ (the number of pixels that have scrolled from the top of the window). Within these ranges, we employed the transform CSS property to change the scale of the image and thus zoom in on different elements. Moreover, the the transformOrigin style property let us set different origins in the image for zooming in.

Because we wanted the zoom to be responsive to the scroll, we wrote a function to calculate the rate of change in the scroll and thereby return the corresponding y-value for the scale of the zoom. The function is below:

// Calculate linear value based on scroll position
function getLinearValue(yOffset1, yOffset2, scale1, scale2){
  let currentYOffset = yOffset // current scroll position
  let x2 = yOffset2 //x2
  let x1 = yOffset1 //x1
  let scaleY2 = scale2 //y2
  let scaleY1 = scale1 //y1  let slope = (scaleY2 - scaleY1)/(x2 - x1) // Calculate slope
  let b = scaleY1 - (slope * x1) // calculate y-intercept  //Calculate y- value for x-offset value
  let currentScale = (slope * currentYOffset) + b   return currentScale // Return linear y-value
}

Based on the current scroll position, the CSS transform property would increase or decrease at the same rate of the scroll. This would look like the following:

window.onscroll = () => {
  let yOffset = window.pageYOffset  //Set initial scale and position of image
  if (yOffset > 1 && yOffset < 250){
    svgTag.style.transform = "scale(1.0)"
    svgTag.style.transformOrigin = "50% 50%"
  }  // Transform scale of image as user scrolls down
  if (yOffset > 250 && yOffset < 766){
    svgTag.style.transform = `scale(${getLinearValue(250, 766, 1.0, 2.0)})`
    svgTag.style.transformOrigin = "75% 75%"
    svgTag.style.transition = "transform .3s"
  }[...]
}

In this way, we were able create a scroll-responsive zoom feature with vanilla Javascript. In addition to the visual tour, the website also has an audio tour feature, which has similar scroll and zoom functionality, but with audio instead of visual notes.

Artistically Rendered Paintings with HTML Canvas

Through HTML canvas, we were able to “draw” paintings and frames onto the DOM. After creating a table of painting information and images, we made a canvas element for each painting to create the effect above. Our intended effect was to reproduce the tangible experience of being in a museum.

Image Magnification with JQZoom Library

To achieve image magnification on an individual painting’s show page, we experimented with a number of Javascript libraries before finally settling on jqZoom. When we created the image element and rendered it on the page, we also called a jqZoom function that would formulate another viewer box on the page and show a magnified image based on where the user hovered over in the painting.

Interactive Art Feature

To add an enjoyable and interactive art feature to our app, we created a drawing feature where a user could choose a background, paint color, and paint thickness to make their own work of art. In this instance, we again used HTML canvas and wrote a function where a line would be drawn based on the user’s mouse placement and movement.

Final Product

We had a lot of fun learning about Javascript and finding ways to express our unique points of view in this art gallery web application. Here is a video that delineates our final product:

This is the link to the GitHub repo: https://github.com/chsohn15/final_art_gallery

Flatiron School Project 3: Virtual Art Gallery

Written by Christina Sohn