• Stars
    star
    169
  • Rank 224,453 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 3 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

generative artwork hosted on Ethereum

Subscapes

🔧 Tooling for the Subscapes generative art project by Matt DesLauriers.

Pictured above: #378, #72, #75, #220, #363, #103

About Subscapes

Subscapes is a generative art project where the core rendering code is immutably secured & hosted on the Ethereum mainnet blockchain. The program accepts a unique hash as a seed, and outputs the corresponding artwork using a determinstic generative algorithm.

A total of 650 unique iterations of this project were minted by collectors on ArtBlocks.io, and will continue to be available for re-sale in the secondary market on OpenSea. These 650 editions make up the entire collection available for tokenized ownership, and no more editions will be minted or sold in the future.

The ethos of ArtBlocks is 1/1 of X, as each minted output is limited and unique among the infinite array of possibilities.

Hacking & Experimentation

I'm releasing some of the code & tools here to encourage printing, hacking, and experimentation with the Subscapes program, for non-commercial explorations within the community and collectors. The code here allows users to programmatically run the software to generate high resolution outputs, as well as render new iterations beyond the 650 ArtBlocks-minted editions.

For example: since the Subscapes code is renderer-agnostic (it can run in browser or Node.js), it could be adapted to different display mediums, galleries, and engines (web frontends, e-ink screens, WebGL, mechanical pen plotters, 3D printing, etc).

CLI Tool

The CLI tool for subscapes allows users to render a specific iteration of Susbcapes from a hash or ArtBlocks mint number. These can be output as PNG, JPG, or SVG format with a specific width and height size.

Installation with Node.js and npm:

npm install subscapes --global

On first run, the tool will fetch the code from Ethereum. Subsequent runs are cached for convenience.

Examples:

# render Subscapes #32 (minted) as 512x512
subscapes -i 32 -w 512

# render an output from a specific hash
subscapes -i 0xd6a58b3f39ac40bc4160bb7153eb1d27f32d0588c29004e19d0a69cfa0d491d8

# render #300 as SVG with a specific filename
subscapes -i 300 --format svg --name 300.svg

# render a purely random Subscapes, beyond the 650 minted set
subscapes

Details:

Usage:
subscapes [options]

Options:
  --id, -i          input hash as 0xXXXX, or mint id number 0..649 (optional)
  --dir, -d         output directory (defaults to cwd)
  --name, -n        file name (defaults to hash)
  --format, -f      file format: png, svg, jpg (default png)
  --resolution, -r  sets the raycast resolution (default 42)
  --width, -w       output width in pixels (default 2048)
  --height, -h      output height in pixels (default 2048)
  --no-log          disables logging
  --no-cache        forces a new fetch from blockchain and disables cache

If only one dimension (width or height) is set, the other dimension will use the same, to produce a square ratio.

Resolution

The algorithm raycasts against the topology to remove lines that are behind peaks/mountain ranges, but to improve this user experience for the online (Live) artwork, I have kept the number of subdivisions low (42). You can increase the resolution (-r flag) to 60-100 during rendering to get higher quality outputs, but the rendering time will also increase exponentially.

subscapes -i 335 -r 80

See #335 before and after, for example:

Programmatic API (Node.js/JavaScript)

Work in progress.

Web/Frontend Tools

Work in progress.

Archival Limited-Edition Signed Prints

I am still considering how best to approach bespoke, archival, and signed prints of Subscapes. This may be suitable for collectors who plan to archive and display/exhibit the minted works long-term, and wish to own an artist-certified physical artefact. Keep an eye on my Twitter or the #subscapes discord channel for details.

Source Code & License

The code in this repository is Open Source MIT, see LICENSE.md for details. This includes a small set of generic math/vector/color/etc utilities used by the Subscapes algorithm in src/.

The resulting PNG/JPG/SVG files produced from the Subscapes algorithm (such as the images that can be downloaded from ArtBlocks) are licensed under CC BY-NC 4.0.

Neither of these licenses covers the code for the Subscapes generative algorithm (which is hosted on the blockchain and not present in this repository). I've chosen not to release this yet code yet, to help maintain my artistic IP over the project and ensure that no third-parties can claim distribution rights over newly tokenized iterations. However, I may decide to publish all of the Subscapes code at a later point, granting a non-commercial license for educational use.

More Repositories

1

canvas-sketch

[beta] A framework for making generative artwork in JavaScript and the browser.
JavaScript
5,019
star
2

budo

🎬 a dev server for rapid prototyping
JavaScript
2,174
star
3

lwjgl-basics

🔧 LibGDX/LWJGL tutorials and examples
Java
1,841
star
4

graphics-resources

📝 a list of graphic programming resources
1,748
star
5

color-wander

🎨 Generative artwork in node/browser based on a seeded random
JavaScript
1,615
star
6

promise-cookbook

📙 a brief introduction to using Promises in JavaScript
1,603
star
7

module-best-practices

📚 some best practices for JS modules
JavaScript
1,521
star
8

workshop-generative-art

A workshop on creative coding & generative art
JavaScript
1,362
star
9

svg-mesh-3d

🚀 converts a SVG path to a 3D mesh
JavaScript
1,169
star
10

workshop-webgl-glsl

A workshop on WebGL and GLSL
JavaScript
1,032
star
11

webgl-wireframes

Stylized Wireframe Rendering in WebGL
JavaScript
713
star
12

workshop-p5-intro

Intro to Creative Coding workshop with p5.js and Tone.js
711
star
13

canvas-sketch-util

Utilities for sketching in Canvas, WebGL and generative art
JavaScript
661
star
14

threejs-app

Some opinionated structure for a complex/scalable ThreeJS app
JavaScript
444
star
15

bellwoods

JavaScript
395
star
16

webgl-lines

some interactive content for a blog post
JavaScript
385
star
17

eases

a grab-bag of modular easing equations
JavaScript
372
star
18

audiograph.xyz

A visual exploration of Pilotpriest's 2016 album, TRANS.
JavaScript
335
star
19

jsconfeu-generative-visuals

Code for the generative projection mapped animations during JSConf EU 2018 in Berlin.
JavaScript
334
star
20

load-asset

Loads a single or multiple assets and returns a promise.
JavaScript
311
star
21

glsl-fxaa

FXAA implementation for glslify in WebGL
GLSL
310
star
22

dictionary-of-colour-combinations

palettes from A Dictionary of Colour Combinations
Python
290
star
23

shader-reload

An interface for reloading GLSL shaders on the fly.
JavaScript
284
star
24

penplot

[DEPRECATED] see canvas-sketch
JavaScript
262
star
25

mp4-wasm

[proof-of-concept] fast MP4 mux / demux using WASM
C
258
star
26

gifenc

fast GIF encoding
JavaScript
246
star
27

codevember

codevember
JavaScript
242
star
28

impressionist

🎨 generative painting using perlin noise for motion
JavaScript
242
star
29

three-line-2d

lines expanded in a vertex shader
JavaScript
224
star
30

three-orbit-controls

orbit controls for ThreeJS
JavaScript
216
star
31

physical-text

🌂 simulating text in the physical world
JavaScript
216
star
32

mp4-h264

[project suspended] MP4 + H264 encoding for the browser with WASM
C
212
star
33

prot

highly opinionated dev environment [Proof of concept]
JavaScript
201
star
34

template-electron-installation

a template for media art installations using Electron in kiosk mode
JavaScript
199
star
35

workshop-web-audio

Web Audio workshop with Frontend Masters
JavaScript
189
star
36

yyz

JavaScript
187
star
37

parametric-curves

JavaScript
185
star
38

fontpath

Font to vector path tools
JavaScript
183
star
39

ghrepo

:octocat: create a new GitHub repo from your current folder
JavaScript
177
star
40

google-panorama-equirectangular

gets equirectangular images from Google StreetView
JavaScript
172
star
41

image-sdf

generate a signed distance field from an image
JavaScript
171
star
42

glsl-film-grain

natural looking film grain using noise functions
JavaScript
171
star
43

pack-spheres

Brute force circle/sphere packing in 2D or 3D
JavaScript
161
star
44

polartone

experimental audio visualizer
JavaScript
154
star
45

dom-css

fast dom CSS styling
JavaScript
153
star
46

tiny-artblocks

Toolkit for small ArtBlocks projects
JavaScript
152
star
47

adaptive-bezier-curve

adaptive and scalable 2D bezier curves
JavaScript
138
star
48

atcq

An implementation of Ant-Tree Color Quantization
JavaScript
136
star
49

workshop-data-artwork

material & notes for a workshop on data artwork & creative coding
JavaScript
125
star
50

kami-demos

🚧 Some demos for the Kami WebGL renderer
JavaScript
122
star
51

rust

experiments
JavaScript
122
star
52

kami

🚧 Rendering ecosystem using Node style packaging
JavaScript
120
star
53

looom-tools

Svelte
115
star
54

esmify

parse and handle import/export for browserify
JavaScript
112
star
55

polyline-normals

gets miter normals for a 2D polyline
JavaScript
112
star
56

three-vignette-background

a simple ThreeJS vignette background
JavaScript
111
star
57

simple-input-events

Unified mouse & touch events for desktop and mobile
JavaScript
105
star
58

tweenr

minimal tweening engine
JavaScript
105
star
59

text-modules

✏️ a list of text/font modules
104
star
60

spectrum

a small tool to visualize the frequencies of an audio file
JavaScript
104
star
61

three-shader-fxaa

optimized FXAA shader for ThreeJS
JavaScript
102
star
62

lerp

bare-bones linear interpolation function
JavaScript
101
star
63

canvas-sketch-cli

A CLI used alongside canvas-sketch
JavaScript
92
star
64

svg-path-contours

gets a discrete list of points from svg
JavaScript
90
star
65

pen-plotter-blog-post

JavaScript
90
star
66

simplify-path

simplify 2D polyline of arrays
JavaScript
83
star
67

garnish

🍸 prettifies ndjson from wzrd and similar tools
JavaScript
81
star
68

get-rgba-palette

gets a palette of prominent colors from an array of pixels
JavaScript
81
star
69

keytime

[EXPERIMENT] keyframe animation tools
JavaScript
79
star
70

three-glslify-example

a simple example of ThreeJS with glslify
GLSL
77
star
71

canvas-text

[experiment] better Canvas2D text rendering
JavaScript
77
star
72

raylight

Experimental WebGL Music Visualizer
JavaScript
76
star
73

verlet-system

2D and 3D verlet integration
JavaScript
75
star
74

word-wrapper

wraps words based on arbitrary 2D glyphs
JavaScript
71
star
75

mp4-wasm-encoder

JavaScript
70
star
76

gl-sprite-text

bitmap font rendering for stackgl
JavaScript
69
star
77

tendril-webtoy-blog-post

A blog post for an interactive Tendril web toy
68
star
78

paper-colors

A small set of pastel and off-white paper colors
JavaScript
68
star
79

threejs-tree-shake

Tree-shakes and optimizes ThreeJS apps
JavaScript
66
star
80

gh-readme-scrape

a CLI to bulk download URLs (images/pdfs/etc) from GitHub readmes
JavaScript
65
star
81

fika

A figma plugin generator
JavaScript
60
star
82

shadertoy-export

render ShaderToy demos to PNG
JavaScript
59
star
83

glsl-random

pseudo-random 2D noise for glslify
C
59
star
84

electron-canvas-to-buffer

in Electron, turns a Canvas into a Buffer
JavaScript
55
star
85

gl-vignette-background

a soft gradient background in WebGL
JavaScript
55
star
86

webpack-three-hmr-test

test of ThreeJS + Webpack + HMR
JavaScript
53
star
87

workshop-generative-color

a workshop on color science for generative art and creative coding
JavaScript
52
star
88

filmic-gl

filmic GLSL shaders in ThreeJS
JavaScript
51
star
89

riso-colors

A list of Risograph printer colors
51
star
90

gsx-pdf-optimize

Optimize PDFs with Ghostscript command
JavaScript
50
star
91

raf-loop

a minimal requestAnimationFrame render loop
JavaScript
49
star
92

gdx-swiper

An example of a "Fruit Ninja" style swipe in LibGDX
Java
47
star
93

gsap-promise

promise wrapper for gsap (TweenLite)
JavaScript
47
star
94

browserify-example

a bare-bones, no-bullshit example of using browserify to dev + build a static demo
JavaScript
45
star
95

extract-svg-path

extracts a string of subpaths from an svg file
JavaScript
45
star
96

figma-plugin-palette

"Image Palette" Plugin in Figma
JavaScript
42
star
97

adaptive-quadratic-curve

adaptive and scalable 2D quadratic curves
JavaScript
42
star
98

three-geometry-data

Get vertex and face data from THREE.Geometry
JavaScript
40
star
99

budo-chrome

an extension of budo dev server that supports live script injection
JavaScript
39
star
100

three-tube-wireframe

Builds a tube-based wireframe geometry in ThreeJS
JavaScript
39
star