Gallery

• 

  2D Generative Animation Gallery

  Generative animations coded with Pixi.js, utilizes WebGL and styled with Sass.

  What goes into a piece of generative art?
  Often, generative art draws inspiration from modern art, especially pop art that makes heavy use of orderly geometric patterns.

  • Randomness is crucial for creating generative art. The art should be different each time you run the generation script.
  • Algorithms — As generative artists, we use code basics like loops, control flow and specialized functions.
  • Geometry — Most generative art incorporates shapes, and the math from high school geometry class can aid in some really cool effects.

  An introduction to Generative Art: what it is, and how you make it

  Built With

  • Pixi.js - Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
  • WebGL - WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser.
  • Sass - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
• 

  Music by St. Louis Bus Drivers

  Coded with React, Redux, Web Audio API, Leaflet + OpenStreetMap, gtfs-realtime-bindings

  Using real-time data provided by Metro St. Louis Developer Resources music is created using the current movement of St. Louis's fleet of busses.

  • Pitch - determined using the latitude of the bus. Busses further north have a higher pitch, south lower.
  • Panning — Busses further west will play more in your left ear, east right.
  • Attack and Release — Busses moving at a quicker pace will play abruptly, slower bussess will play with a slow increase in volume.
  • Duration — Busses that cover more distance will hold their notes longer.

  Step 1. ❯ Retrieve data about busses from metrostlouis.org. Updated bus locations indicate movement.

  Step 2. ❯ Find an octave to play in. The busses latitudes are divided into six sections. Each one representing an octave register. Higher octaves for busses furtherst north. Lowest for busses furthest south.

  Step 3. ❯ Panning. We compare the bus's longitude to the average longitudes at given latitude. Notes in higher octaves are panned harder for audio engineering purposes.

  Step 4. ❯ Busses get sorted by their timestamp, meaning the piece will begin with the first update recieved. As the piece moves along at 120 beats per second, each timestamp associated with that second begins playing their note.

  Step 5. ❯ We keep track of the progress of the piece so a musical progression can repeat. Each progression is four measures long. A note is chosen from a chord that relates to each measue.

  Step 6. ❯ For endng the note, we multiply distance in miles by 10. No bus plays longer than eight beats or shorter than one. With the Busses mph we detrmine when the note should hit peak volume.

  Acknowledgments

  • inspired by Digital fixation of audio processes
• 

  Art-API-React

  A demo using the React Library with multiple external APIs. Style, Information and GPS are all contextual, based on one or more search terms for paintings.

  Explanation
  This is a newer version of an older project. I was looking for a way to demo React using multiple APIs. It was a struggle at times to make the data between these API's available and relevant to each other while delivering an intuitive experience. Hopefully the overall idea comes through.

  • Harvard Art Museums API - The Harvard Art Museums API is a REST-style service designed for developers who wish to explore and integrate the museums’ collections in their projects.
  • GeoNames Wikipedia Webservice - This geocoding API is provided to the public, for free, as a community service by MAPS, a web-based GIS & map making too
  • MediaWiki Action API - The MediaWiki Action API is a web service that allows access to some wiki features like authentication, page operations, and search.

  Built With

  • Create React App - Set up a modern web app by running one command.
  • SASS - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
  • Leaflet - an open-source JavaScript library for mobile-friendly interactive maps
  • React Tags - A fantastically simple tagging component for your React projects
  • Google Fonts - Making the web more beautiful, fast, and open through great typography
• 

  PureCssArt

  Main Street at Dusk (CSS, HTML)

  Inspired by cyanharlow.github.io/purecss-lace.

  Rules I have for myself:

  1. All (Most) elements must be typed out by hand
  2. Only VS Code text editor and Developer Tools allowed.

  Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will look laughable in anything other than MOZILLA FIREFOX :-)

  Acknowledgments

  • Hills stolen from Judith Neuman's Cerros CSS Mountains
  • CSS3 Patterns Gallery
  • Gradients made easier by cssgradient.io
  • Frame stolen from Tudor Sfătosu
• 

  generative-art-gallery

  First, what is code art?
  Code art is any art that is built using code.

  What goes into a piece of generative art?
  Often, generative art draws inspiration from modern art, especially pop art that makes heavy use of orderly geometric patterns.

  An introduction to Generative Art: what it is, and how you make it

  Built With

  • JavaScript - JavaScript is a scripting or programming language that allows you to implement complex features on web pages
  • HTML Canvas - The Canvas API provides a means for drawing graphics via JavaScript and the HTML element.

  Acknowledgments

  • meditate.js is inspired from the art of Rambling Ink
  • syntheosis.js is inspiredby the album artwork from Waste of Space Orchestra
  • reclaimedWorld.js is inspired / stolen from Jose Goncalo
  • randomcosmos.js is inspired from the art of Jin
  • pixelCity.js is inpired / stolen from the art of GewonP
  • mountainFog.js is inspired by the photo Light Leak from Karl Shakur