# Sketchdance Suite

###### tags: `sketchdance`

[TOC]

## Description

Sketchdance is the working title for an in-progress suite of web applications that are intended to work together to be greater than the sum of their parts. The suite includes intentionally simple content creation tools (Shimmy, Veil, Jitter, and Gammaray), more advanced programming tools (Moonshine, Waterbear, Plugh, ~~Joker~~), a whole bunch of underlying, re-usable tools to put these together (Tardigrade, Moss Piglet, Alley), some tools for sharing, both privately (Moat) and socially (Xastle), some smaller re-usable components (~~Halo~~, ~~Roomatoom~~), and some larger projects that don't fit in any of the categories, but leverage many pieces of Sketchdance (Garden). Descriptions and status of all of these are below, along with some initial ideas of how they fit together.

Because there is a lot of overlap between these web applications goals, i.e., Drawing Board, Greenscreen, and Stop Motion are all very similar, there can be benefits to developing them in parallel and each can be informed by the others. Waterbear and Garden are different but might be useful to integrate with both content creation and sharing. I want two ways of storing results: shared to a social site (based on the Scratch community) or posted to a temporary private server to be downloaded later. Collectively, this is the Sketchpad Suite.

[Pick a random project to work on](https://wheelgenerator.com/random-number-generator/#?session=Ow2kzaWoViwQLuuv)

[Earlier version of this document with even more projects](https://hackmd.io/ZzxV1MepR9yDgYsjcHWszw)

### A note on epistemic statuses

Each of these projects has a status, which may be that it is only a pipe-dream I hope to one-day see in the world, whether I make it or not. For the most part, I would be happy to not have to build all of these, but to find them already existing or to partner with others to build them.

The epistemic statuses are related, but different, and originate from this post: [Epistemic statuses are lazy and that is a good thing](https://devonzuegel.com/post/epistemic-statuses-are-lazy-and-that-is-a-good-thing). The epistemic status is my confidence that a given project is a good and useful thing, and also possible downsides to it. The epistemic effort is a rough gauge of how much thought I've put into it and my confidence I can actually build it, although the second part may be elided since I'm confident I can build any of these, given time.

## Project relationships

Rough idea of how all of these projects relate to each other. Not all connections are shown, for instance many of the projects are designed to work with / rely on projects from Infrastructure, and ideally there will be a rich set of interconnections from the media creation projects to the programming projects (so you can, i.e., create sprites in Shimmy and use them for a game in Waterbear). Ideally all of these will be written in Moonshine some day, along with the demonstration programs that are otherwise unrelated to Sketchdance.

digraph hierarchy {
  Sketchdance [label="Sketchdance\nUmbrella Project"]
  Stack [label="Standard\nStack" URL="#Stack"]
  Infrastructure [label="Infrastructure\nDependencies" URL="#Infrastructure"]
  Content [label="Content\nCreation", URL="#Content-Creation"]
  Programming [label="Programming\nTools & Languages" URL="#Programming"]
  Advanced [label="Advanced\nProjects" URL="#Advanced-Projects"]
  Demos [label="Demonstration\nPrograms" URL="#Demos"]
    Sketchdance -> Stack
    Sketchdance -> Infrastructure
    Sketchdance -> Content
    Sketchdance -> Programming
    Sketchdance -> Advanced
}

## Currently Working on

* [Standard Stack](#Stack) Testing
* [Waterbear](#Waterbear) Getting (re-)started

---

## Content Creation

Nodes in red have not been started in any significant way yet. Nodes in black at least have a prototype implementation.

digraph hierarchy {
    node [shape=box]
    Content [shape=oval, label="Content Creation"]
    Shimmy [label="Shimmy\nFlipbook Animation" URL="#Shimmy"]
    Veil [color=orange, label="Veil\nGreenscreen Capture" URL="#Veil"]
    Jitter [label="Jitter\nStop Motion Animation" URL="#Jitter"]
    Gamma [color=red, label="Gamma\nSpecial FX" URL="#Gamma"]
    Puppet [color=red, label="Puppet\nConstraint Animation"]
    Content -> Shimmy
    Content -> Veil
    Content -> Jitter
    Content -> Gamma
    Content -> Puppet
}

### Shimmy
#### Flipbook Animation

Shimmy is sketch-based animation tool (status: working, needs Moat and some UI work). All the content-creation tools use Moat and eventually Xastle. Will feed into Waterbear and other Moonshine-based tools.

* Status: Launched 1.0, in active development
* Epistemic status: High confidence this can be a beneficial tiny tool for low-effort animation and introducing animation concepts, especially but not limited to children.
* Epistemic effort: I have built this, used it, presented it in public, and run workshops using it, so I've had time to both think about it and test my ideas out in the world. Still some rough edges and lots of room for improvement, but overall solid.
* [Documentation, Progress, Bugs](/_d_YffpgRu2vVVTFbPjDZg?both)
* [Code](https://glitch.com/edit/#!/sd-shimmy)
* [Demo](https://sd-shimmy.glitch.me/)
* [Teaching Guide](https://hackmd.io/@dethe/BJokR3_Ar?type=view)

### Veil
#### Greenscreen Effects

A program to remove/change background for video. Test version works fine with chroma-keyed background, researching ways to remove background without green screen.

* Status: Research phase
* Epistemic Status: Confident this can be used for a variety of creative endeavors, mixes well with other tools such as Jitter
* Epistemic Effort: Have used commercial and open source tools for this in library programs and barely scratched the surface of what we can do.
* [Documentation, Progress, Bugs](https://hackmd.io/Sjjj4YefTGSbevIqkXNpMw?both)
* [Code](https://glitch.com/edit/#!/sd-veil)
* [Demo](https://sd-veil.glitch.me/)
* Teaching Guide

### Jitter
#### Stop Motion Animation

* Status: Working prototype
* Epistemic Status: Confident this can be a useful tool for creating animation, even in its current simplistic state.
* Epistemic Effort: Have used commercial tools for this in the past. Have taught my own kids, but not public workshops yet.
* [Documentation](https://hackmd.io/G4fFJGKLTiSIB6najlYO_Q), Progress, [Bugs](https://github.com/dethe/jitter/issues)
* [Code](https://github.com/dethe/jitter)
* [Demo](https://dethe.github.io/jitter)
* Teaching Guide

### Gammaray
#### Special FX

Be able to insert special effects that look like super[hero/villain] powers, magic spells, etc. onto live video footage and record the results. Similar to commercial apps on the iPad, but using free effects overlays and/or generative effects code. For bonus points, add gesture detection to trigger specific effects.

* Status: Research
* Epistemic Status: I like it, I want it. Have used the commercial versions in the past and they were fun, but we can do way better. There are overlay effects with green chroma keys on YouTube and more that can be found on various sites, but producing effects with code would be my preferred option.
* Epistemic Effort: Have used commercial apps that record a short video with guide overlays and then generate the results (not realtime). I've created a couple of demos so far
* [Documentation, Progress, Bugs](https://hackmd.io/b9h_yFeASnm8SgjoyhdQew?both)
* Code
* Demos [Fiery Eyes](https://editor.p5js.org/dethe/sketches/zbjobRNe0) [Lightning Hands](https://editor.p5js.org/dethe/sketches/wvcq2tqft) [Draw with hands](https://editor.p5js.org/dethe/sketches/I5GXhXtZV)
* Teaching Guide

### Puppet
#### Constraint Animation

* Status: Not started
* Epistemic Status:
* Epistemic Effort:
* Documentation, Progress, Bugs
* Code
* Demo
* Teaching Guide

---

## Programming

Nodes in red have not been started in any significant way yet. Nodes in black at least have a prototype implementation.

digraph hierarchy {
    node [shape=box]
    Programming [shape=oval]
    Waterbear [label="Waterbear\nBlock-based programming" URL="#Waterbear"]
    Plugh [color=red, label="Plugh\nFlow-based programming" URL="#Plugh"]
    Moonshine [label="Moonshine\nProgramming Language" URL="#Moonshine"]
    Programming -> Moonshine
    Moonshine -> Waterbear
    Moonshine -> Plugh
}

### Waterbear
**Block-based visual programming**

Waterbear is a Scratch-like programming tool for general web and graphics programming. One of the most ambitious pieces to date, used (and developed) around the world. Currently being updated to be based on Moonshine and DJ, which will enable several features not possible before.

* Status: Working, needs UI refresh and further work
* Epistemic Status:
* Epistemic Effort:
* [Documentation, Progress, Bugs](https://hackmd.io/0W1H3vT3QDegwp3c5nmzJg?both)
* [Code](https://github.com/waterbearlang/waterbear/)
* [Demo](http://waterbearlang.com/)
* Teaching Guide

### Moonshine
**Block-aware text-based programming language**

Moonshine is a text-based language that maps well to blocks (status: early prototype). This is important because most languages do not necessarily map well to blocks.

Moonshine will start by being factored out of existing Waterbear code and turned into a runtime that can be shipped with Moonshine files to make them runnable in the browser stand-alone. Will evolve from there, the goal is to make it transpilable to other languages relatively easily.

* Status: Research/prototype
* Epistemic Status:
* Epistemic Effort:
* [Documentation, Progress, Bugs](https://hackmd.io/MPFE8cvQQOeP1bFb54FqCg)
* Code
* Demo
* Teaching Guide

### Plugh
#### Flow-based programming for the web

Plugh is a tool for flow-based programming for the web. Ideally should also use Moonshine behind the scenes. This is an alternative graphical programming tool, similar to Quartz Composer, Pure Data, and other graph-like programming tools.

Interestingly enough, it looks like [Node-Red](https://nodered.org/) does most of the hard bits of this already, but integrating it with Moonshine/Waterbear is still on my To-Do list.

* Status: Not started
* Epistemic Status:
* Epistemic Effort:
* [Documentation, Progress, Bugs](https://hackmd.io/h2cGeHkgSVq9d_CigzCBEg)
* Code
* Demo
* Teaching Guide

---

## Utilities

digraph hierarchy {
    node [shape=box]
    Utilities [shape=oval, label="Programming\nUtilities"]
    Tardigrade [label="Tardigrade\nGeneral Blocks" URL="#Tardigrade"]
    Alley [color=red, label="Alley\nWebapp Connect" URL="#Alley"]
    "Moss Piglet" [color=red, label="Moss Piglet\nDrawing & UI" URL="#Moss-Piglet"]
    "VaMished" [color=red, label="VaMished\nVirtual Machine" URL="#VaMished"]
    Utilities -> "Moss Piglet"
    "Moss Piglet" -> Tardigrade
    Utilities -> Alley
    Utilities -> VaMished
}

### Tardigrade
**Block toolkit**

General purpose tool for creating block-based languages. Waterbear uses blocks specific to Moonshine, but Tardigrade can support blocks for any language.

* Status: Early version working as part of Waterbear, but needs to be extracted and generalized
* Epistemic Status:
* Epistemic Effort:
* Documentation, Progress, Bugs
* Code
* Demo
* Teaching Guide

### Alley
**Connector from web-apps to the rest of the world**

Alley is an optional external program to connect web-based scripts to your computer, similar to Scratch Link. Allows Waterbear blocks to create Python code, hook into other systems. Will be usable for all Moonshine language and Tardigrade interfaces.

* Status: Not started
* Epistemic Status:
* Epistemic Effort:
* Documentation, Progress, Bugs
* Code
* Demo
* Teaching Guide

### Moss Piglet
**Graphic toolkit and runtime**

Moss Piglet is a layered toolkit for graphics and user interfaces, based on ideas from the Nile language from STEPS towards the reinvention of programming.

* Status: Not started
* Epistemic Status:
* Epistemic Effort:
* Documentation, Progress, Bugs
* Code
* Demo
* Teaching Guide

### VaMished
**Virtual Machine**

Inspired by [Uxn](https://100r.co/site/uxn.html), a portable way to adapt Moonshine-based languages to different environments.

* Status: Not started
* Epistemic Status:
* Epistemic Effort:
* Documentation, Progress, Bugs
* Code
* Demo
* Teaching Guide

---

## Advanced Projects

Nodes in red have not been started in any significant way yet. Nodes in black at least have a prototype implementation.

digraph hierarchy {
    node [shape=box]
    Advanced [shape=oval, label="Advanced Projects"]
    Garden [label="Garden\nCollaborative Text Adventures" URL="#Garden"]
    Xastle [color=red, label="Xastle\nSocial Media for Projects" URL="#Xastle"]
    Moat [label="Moat\nAnonymous File Share" URL="#Moat"]
    Bootleg [label="Bootleg OS\nMinimalist Operating System"]
    Advanced -> Garden
    Advanced -> Xastle
    Advanced -> Moat
    Advanced -> Bootleg
}

### Garden
**Collaborative Text Adventure (MUD)**

Garden of Forking Paths is a collaborative text adventure game tool (status: working, needs to be used to find weak points). A text adventure environment for both developing (multiple simultaneous developers) and playing (multiple players can be in a room and communicate with each other). An updated version of a MUD (Multi-user dungeon) for the web.

Worth exploring: Adapting something like the [Chapbook](https://klembot.github.io/chapbook/) Twine format to be both multi-user and multi-author using our toolkit.

* Status: Working demo, no advanced features yet
* Epistemic Status:
* Epistemic Effort:
* [Documentation, Progress, Bugs](https://hackmd.io/DCtzAJn_SFy3ll_z7_Q6qQ?both)
* [Code](https://glitch.com/edit/#!/sd-garden)
* [Demo](https://sd-garden.glitch.me/)
* Teaching Guide

### Xastle
#### Social Networking for Projects

Social site for favouriting, etc. visual projects. Design based largely on the Scratch social network, but allowing a wide variety of projects (both Sketchdance and others). Almost certainly built on the protocols of the Fediverse.

* Status: Design Phase
* Epistemic Status:
* Epistemic Effort:
* [Documentation, Progress, Bugs](https://hackmd.io/lBe8HMnERva8dZ8IBOjc-g?both)
* Code
* Demo
* Teaching Guide

### Moat
#### Private temporary file sharing

A way to store temporary files securely (status: in progress). This project is aimed squarely at libraries to solve the problem of someone creating content in a library program, but having no way to take it home with them. Generates a saved online copy only the user can access, with built-in expiry to prevent misuse.

* Status: Version 1.0 complete
* Epistemic Status:
* Epistemic Effort:
* [Documentation, Progress, Bugs](https://hackmd.io/_x7d0oTFThGM3Q_DigDs7A?both)
* [Code](https://glitch.com/edit/#!/sd-moat?path=server.js)
* [Demo](https://sd-moat.glitch.me/)
* Teaching Guide

### Bootleg OS
#### Minimalist Operating System

An operating system like that imagined by STEPS Towards the Reinvention of Programming, fits in about 30,000 lines so that a single person can understand and modify it.

* Status: Research
* Epistemic Status:
* Epistemic Effort:
* [Bootleg OS](/lNmvo_bUTU-oguNo06kCkQ)
* Code
* Demo
* Teaching Guide

---

## Stack

**Standard Libraries and tools**

The [Standard Stack](https://hackmd.io/-11_ctzwS7C0V62ipeLyNg) is a set of tools that are external to Sketchdance but are re-used across projects. It has its own documentation page.

digraph hierarchy {
  node [shape=box]
  Stack [shape=oval, label="Standard\nStack"]
  Templating [label="Live\nTeamplating", URL="#https://hackmd.io/-11_ctzwS7C0V62ipeLyNg#Live-templating-Heresy"]
  Functional [label="Functional\nProgramming", URL="https://hackmd.io/-11_ctzwS7C0V62ipeLyNg#Functional-Programming-Ramda"]
  Immutable [label="Immutable Data", URL="https://hackmd.io/-11_ctzwS7C0V62ipeLyNg#Immutability-Immer"]
  Drag [label="Drag & Drop", URL="https://hackmd.io/-11_ctzwS7C0V62ipeLyNg#Drag-and-Drop-Dragula"]
  Collaborative [label="Collaborative\nData", URL="https://hackmd.io/-11_ctzwS7C0V62ipeLyNg#Distributed-textjson-ShareDB"]
  Parsing [label="Text\nParsing" URL="https://hackmd.io/-11_ctzwS7C0V62ipeLyNg#Parsing-Pegjs"]
  Login [color=red, label="Shared\nLogin", URL="#Login"]
  Userinfo [color=red, label="User\nInfo" url="#Userinfo"]

  Stack -> Templating
  Stack -> Functional
  Stack -> Immutable
  Stack -> Drag
  Stack -> Collaborative
  Stack -> Parsing
  Stack -> ShareDB
  ShareDB -> Login
  ShareDB -> Userinfo
  
}

---

## Demos

**Demonstration Progams to re-write in Moonshine**

The Demonstration Programs are not necessarily related to Sketchdance, but should be examples of the kinds of things you can create with Sketchdance.

digraph hierarchy {
  node [shape=box]
  Demos [shape=oval, label="Demonstration\nPrograms"]
  Video [label="Interactive\nVideos", URL="https://hackmd.io/wJk0QkWaSqG84lM7nJSZlw"]
  Loom [label="Loom\nGenerator", URL="https://glitch.com/edit/#!/svg-loom?path=README.md%3A1%3A0"]
  Flexagon [label="Hexahexaflexagon\nTool", URL="https://github.com/dethe/flexagon"]
  Games [label="Various\nGames"]
  Demos -> Video
  Demos -> Loom
  Demos -> Flexagon
  Demos -> Games
}