Giter VIP home page Giter VIP logo

immersive-scholar / coded-glass Goto Github PK

View Code? Open in Web Editor NEW
2.0 3.0 1.0 682.49 MB

Immersive Scholar web display featuring content from Liss LaFleur's Coded Glass project

Home Page: https://immersive-scholar.github.io/coded-glass/

CSS 93.51% HTML 6.49%
stained-glass-windows exhibit data-visualization data-driven-art responsive-web-app large-scale-display metoo digital-scholarship immersive-environment

coded-glass's Introduction

Coded Glass

Coded Glass explores the urgency of the #metoo movement, the role of social technology, and the ways in which individual narratives can shape the web as a form of community building and reflection through stained glass imagery, a rich art historical material. Using collected data and analysis of 2,629,581 #metoo tweets from October 1, 2017 to August 15, 2018 as source material, this visual exhibit by artist and activist Liss LaFleur showcases stained glass windows of protest signs, emojis, and hashtags from the #metoo movement as a form of data visualization and metaphor for creating communal sacred spaces.

This README file follows documentation recommendations established in Testing Guidelines for Immersive Digital Applications to support sharing and testing of immersive digital content.

About

Coded Glass is a web-based visual application built at the NC State University Libraries as part of the Immersive Scholar project and is responsively designed for exhibit across a diverse range of large-scale displays. Coded Glass is primarily featured in the iPearl Immersion Theater at the James B. Hunt Jr. Library at NC State University.

This application was built using Webpack 3 and is optimized to run in the Chrome browser. It is designed for both non-interactive large-scale displays and interactive personal devices (i.e. desktops, laptops, tablets, and phones) but not optimized for all sizes and aspect ratios yet.

Coded Glass is hosted on GitHub Pages and can be run via the following link: https://immersive-scholar.github.io/coded-glass/.

Large-scale display specifications and guidelines

Here, a "large-scale display" is defined as a screen with a viewport height greater than or equal to 2100px (vh โ‰ฅ 2100px). Anything below 2100px high is considered a "personal device" screen size.

The properties below indicate considerations with regard to optimal display of this content on large-scale displays.

Content type: web application available via URL

Required software: modern web browser (Chrome suggested)

Optimal aspect ratio range: 8:5 - 4:1 (square to landscape)

Optimal screen width: 2500px - 10000px

Optimal screen height: 2100px - 3000px

Optimal viewing distance: near to moderate distance

Environmental differences

Large-scale: The large-scale display is designed for non-interactive video walls and plays automatically. It begins at the index page with thumbnails of the windows, which are randomly ordered each time the display is loaded. The order they are displayed in in the matrix determines the order that they will be played in. After a minute elapses, the display starts to play the slideshows of each window in the specified order. Each image in the slideshow is zoomed in on and panned across so viewers can see the details of the glass. Once all the windows have been played, the display will return to the index page. The display continuously loops between the slideshows of each window and the index page.

Personal-sized: The personal-sized display is designed for smaller, interactive devices, such as desktops, laptops, and handhelds. Hovering over a window's image will display the window's title. Clicking/tapping on a thumbnail will play that window's slideshow. The user can choose which windows they want to play.

Authors

Liss LaFleur

Jasmine Lang

Walt Gurley

coded-glass's People

Contributors

jlangdesign avatar waltgurley avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.