Glisp

A Lisp-based Design Tool Bridging Graphic Design and Computational Arts

• Demo (Chrome Only)
• Documentation
• 🇺🇸 English
• 🇯🇵 日本語

Glisp, an acronym for Graphical LISP, is the prototyping project to experiment what if a design tool meets a way of creative coding, and obtain the self-bootstrapping power of LISP. This tool looks like the integration of Illustrator and Processing IDE at a glance. And in fact, it adopts both benefits of intuitiveness of direct manipulation on GUI and abstractness of programming language.

Glisp literally uses a customized dialect of Lisp as a project file. As the Code as Data concept of Lisp, the project file itself is the program to generate an output at the same time as a tree structure representing SVG-like list of shapes. And even the large part of the app's built-in features are implemented by the identical syntax to project files. By this nature so-called homoiconicity, artists can dramatically hack the app and transform it into any tool which can be specialized in various realms of graphics -- daily graphic design, illustration, generative art, drawing flow-chart, or whatever they want. I call such a design concept "purpose-agnostic". Compared to the most of existing design tools that are strictly optimized for a concrete genre of graphics such as printing or UI of smartphone apps, I believe the attitude that developers intentionally keep being agnostic on how a tool should be used by designers makes it further powerful.

Developed by Baku Hashimoto

Features list I've been fantasizing

✨: High priority
🍡: Personally think it'd be cool
🌶️: Important but I have no clue how to do

• [ ] UI enhancements
• [ ] ✨Selects path/group by clicking viewport
• [ ] ✨Transplants Programmable Pen Tool
• [ ] Touch-screen support
• [ ] Much more intuitive interface for designers I prototyped here
• [ ] Improve the GUI to allow non-programmers edit the project without seeing any Lisp code
• [ ] ✨Layer list view
• [ ] Lisp interpreter optimization/enhancement
• [ ] 🌶️ Incremental evaluation system to avoid the overhead by re-calculating entire project for each tweak
• [ ] Incremental Lisp parser
• [ ] 🌶️ Enables to refer other node's value by relative path without explicitly defining a symbol, like Houdini's ch("../transform/tx") expression
• [ ] Headless REPL environment to render images by command (partially supported)
• [ ] Standalone JS library to dynamically render the sketch embedded in a web page
• [ ] Timeline features
• [ ] Video exporter
• [ ] AE-like layer view and curve editor
• [ ] 🍡 Velocity/acceleration based easing editor
• [ ] Raster image manipulation
• [ ] Writes custom filters in GLSL (Interactive Shader Format might be useful)
• [ ] 🍡 Captures still image from video input (e.g. webcam) to make a stop-motion
• [ ] Abstraction of user inputs
• [ ] Not only mice and keyboards, add support to bind commands with any controller's inputs via OSC/MIDI on the fly while you design. The notion "remembering hotkeys" will be vanished.
• [ ] 🍡 Wouldn't it be cool if we can even use Leap Motion to record an animation...?
• [ ] Input hooks. Quantizing, copying, flipping, and smoothing the mouse coordinate for instances.

Helpful Repositories

• The implementation of Lisp interpreter is the modified version of Make a Lisp project.
• Boolean Operator and some bezier manipulations by Paper.js.
• Bezier curve analyzation by Bezier.js

Similar and Inspirational Projects

Below are all cool projects I've deeply inspired by.

• Programming-oriented Drawing Apps

• Para and Dynamic Brush by Jeninifer Jacobs

• Sketch-n-Sketch

• Lisp-based Creative Coding Toolkits

• Ronin by Hundred Rabitts

• Quil

• snek by Anders Hoff

• Past researches, products, and plugin-ins for generative design

• Autoshop

• Auto-Illustrator
• Scriptographer and Paper.js by Jürg Lehni

Information by Tomoya Matsuura and Yasuhiro Tsuchiya

Supporters

This projects are supported by these kindful people. I'd be appreciated if you would support me to cups of coffee:)

Sponsor @baku89 on GitHub Sponsors

And I especially appreciate Naoto HIEDA for his contribution to examples, suggestions, and English translation.

Development

The project adopts Vue-CLI.

• Setup: yarn install
• Launch server for development: yarn serve
• Build: yarn build
• Lint: yarn lint
• Preview the documentaiton: yarn doc:serve
• Launch the electron app for development: yarn electron:serve
• Build the Electron app: yarn electron:build

LICENSE

This repository is published under an MIT License. See the included LICENSE file.