rsgestalt.js

ABOUT

rsgestalt.js is an ongoing computer imaging research and design project exploring how JavaScript + HTML Canvas may be used for computational drawing and animation. This library has four interrelated components  — colors, structures, arrangements, and movements.

📋 Although, colors are native feature of HTML Canvas, within rsgestalt.js, 139 web safe colors are treated as objects with color name, hex value, and red, green, and blue values as parameters. There is a function to randomize these colors and functions to randomize these colors within specific color groups (blacks, reds, purples, etc.). Native JavaScript methods for creating radial and linear gradients are wrapped in functions for ease of use. Most structure functions take parameters (c1, c2) for color selection  — “c1” for fill color and “c2” for stroke color.

📋 Structures are singular instances of forms. They can be organized into static compositions or into animated scenes. Structures include basic polygons and iterations of polygons, and complex forms like hypotrochoids, epitrochoids, and lissajous curves.

📋 Arrangements are static organizations of forms. This includes regular tiling using a grid and circle packing on a rectangular plane. Any structure may also be used as a method of arrangement if it utilizes parametric equations. 

📋 Movements are animated organizations of forms. All forms and arrangements have the ability to be animated.This website serves as documentation of the project. Documentation will include detailed explanations, screenshots of output/images, and reusable code snippets. It should also be noted that my background is in visual art and not programming. While I utilize the later in my work, I do so in a somewhat unconventional manner — often pushing the Canvas API and my browser’s memory usage to their limits with iterative loops and recursive functions. Sometimes I seek perfection (i.e., the code performing as expected). Sometimes I seek beauty obtained from a forced error. Sometimes the perfection is an unexpected flaw.~ Rosalynn Stovall

USAGE

The first completed project derived from this library is Arachne/Loom.​​​​​​​

PLANNED UPDATES AND EXPANSIONS

  • Increased variability via randomness of line weight, opacity/translucency, transformations (scale, rotate, translate, transform), compositing (layering and masking). 
  • 1-point boxes/cubes — closed, with open top/bottom, with open front, with open sides
  • Isometric boxes (closed)
  • Combinator — mix and match parts to sort through multiple variations of a certain arrangement
  • Projection of depth using one or more of the following: vertical perspective, overlapping, diminution, atmospheric perspective, value distribution (highlight, shadows), linear perspective (1-point, 2-point, 3-point)
  • Interactivity
  • Pixel Manipulation.
  • WebGL context for the use of 3D forms and arrangements
  • Rule of Thirds.
  • Pyramidal organization.
  • Balance/Symmetry — symmetrical (reflection symmetry, radial/rotational symmetry, biradial symmetry, point reflection) and asymmetrical organizations.
  • Equilibrium for Asymmetry — Computationalizing the intrinsic weight of different areas of pictorial space and the heaviness of forms considering position, size, color, texture, and density relative to other forms. 
  • The use of L-systems for fractals and biological growth patterns.