Other Creative Libs

As discussed in our notes on APIs and libraries, They Myth of Writing Code from "Scratch", there are a number of other JavaScript libraries out there which abstract some of the brower's more creative APIs. Like the libraries we've discussed so far, like netnet's standard library, moment.js and tone.js, most of these can be included in our project by adding a <script> tag pointing to that libraries code. After that, learning how to use the library is a matter of reading through the documentation page and exploring examples. However, because there are other ways to import libraries in the JavaScript eco-system, getting started with a library can be triky (even when refering to their documentation). Below are some netnet.studio starter templates to get you over that initial hurdle.

• GSAP

  GSAP - netnet.studio template
  

  One of the most popular libraries in the Web design community is GSAP, it provides a fairly declarative API for animating any HTML elements we create or get on our page.

• D3

  D3 - netnet.studio template
  

  Another popular library in the Web design community is D3, it's specifically used for creating data visualizations (charts, graphs, etc) from "vector graphics" (SVG) which levarage the interactive and dynamic nature of the Web. Keep in mind, we want to make generative art works in this class (not data visulaizations), still, I share this here because a library like D3 can be used in all sorts of less obvious or conventional ways.

• Paper.js

  Paper.js - netnet.studio template
  

  Paper.js is a drawing, interaction and animation library built on top of the Web's Canvas API which makes it easier to create generative/interactive animations using vector style graphics.

• p5.js

  p5.js - netnet.studio template

  Another library that abstracts the Web's Canvas API (and many other APIs) is p5.js. P5 is an increadibly popular library in art and creative coding communities, it's really more of a "framework" than a library, which is generally meant to be used it it's own editor following a specific code structure. That said, we could technically use any editor to work with p5.js and even combine it with other libraries, but that requires a less conventional setup for those already familiar with p5 (see template above).

• three.js

  three.js v160 - netnet.studio template (script tag)
  three.js v176 - netnet.studio template (module import)
  

  Though the canvas API can be used for creating 2D (interactive and/or generative) drawings from pure code (as opposed to using SVG or HTML elements including assets like images), it can also be used to create 3D compositions by tapping into the Web's WebGL API. While the 2D canvas API isn't all that difficult to use directly (meaning without a library) the WebGL API can be much more challenging. Here one of the most popular libraries is three.js. While it used to be possible to use three.js by including it with a script tag, more recent versions of three.js only allow you to use it via import statements as a JavaScript module type. That said, older versions of the library still work the traditional way, above I've linked to templates which use both the old and new versions.

• Hydra

  Hydra - netnet.studio template
  

  Unlike the vast majority of our JavaScript code which runs on our CPU (central processing unit), the WebGL API allows us to write code that runs on our GPU (graphical processing unit). The GPU is optimized for certain sorts of tasks, specifically processing complex graphics (but it's also really good at other "parallel" tasks like mining crypto currency and training/running AI models). For artists, working with WebGL and the GPU means generating 3D graphics, but WebGL can also be used to generate 2D graphics that leverage the processing power of the GPU known as "shaders". These shaders are often times used to create dynamic algorithmic textures and materials for 3D objects/meshes (like in three.js) but these shaders could also be artworks in/of themselves. One of the most popular JavaScript libraries for this is Hydra. Like p5.js, hydra isn't only a library it's also a code editor, specifically a "life coding" editor (the most popular for generating visuals in the live coding and algo rave communities). That said, it's not exclusively for live visuals, we can also use it like we would any other library (and combine it with other libraries) as seen in the template/example linked above.

• Tensorflow.js

  Tensorflow.js - example in netnet.studio

Tensorflow is one of the most popular Machine Learning (ie. AI) libraries out there. There's a version for python and JavaScript. While it can be used to train your own AI models (even create your own neural network architectures), the library also includes a list of pre-trained models you can import and used directly in the browser. Up to this point, we've only used AI as a coding assistant in this class, but this same technology can be integrated into our project like any other library. In the example linked above I'm using the one of the pose detection models to use our webcam feed to control a Tone.js oscilator (essentially creating a digital theramin)

It's worth noting, that there are creative individuals behind the creation of these libraries. Many of these libraries were started by a single artist before an open source community of creative devlopers formed around it to keep devloping and maintaining it. For example, Tone.js was stared by Yotam Mann, Three.js was started by mr.doob (aka Ricardo Cabello), Hydra was started by Olivia Jack and p5.js by Lauren Lee McCarthy (and the p5 editor by Cassie Tarakajian) based on another library called Processing (for Java) originally created by Casey Reas and Ben Fry inspired by an even older library by John Maeda.