Paint Canvas

Twine Version: 2.0.8

Format: SugarCube 1.0.28

I have two versions of this CSS/jQuery pack for the SugarCube 1.0.28. The first displays randomized paint daubs on the background and passage “papers”, with a background paper that conforms to the shape of the passage paper. The second does the same thing with paint, but it creates an ongoing pile of paper divs beneath the passage.

Instructions: Save the Javascript and CSS files to your hard drive. Copy and paste the Javascript and CSS directly into their respective editors in Twine. Update the image paths to the location of your image folder.

Style 1

Demo

Javascript

CSS

Images

Style 2

Demo

Javascript

CSS

Images

Customization

You can change the fonts and colours inside the CSS file. To change the paint daubs, you can add or replace as many paint daubs as you like into your images folder. Add the URL’s for those images to the existing daubs array, and the javascript will do the rest.

//make an array of paint daubs
var daubs = ['YOUR_DOMAIN/img/DaubGold.png', 'YOUR_DOMAIN/img/DaubOrange.png', 'YOUR_DOMAIN/img/DaubBlue.png', 'YOUR_DOMAIN/img/DaubSplatter.png', 'YOUR_DOMAIN/img/DaubBrush.png'];

The number of paints are randomized, but there is a maximum amount. To increase the number of paint daubs in the background or passage papers, change the constant variables at the beginning of the code:

var MAXBGPAINTS = 20;
var MAX_PASSAGE_PAINTS = 20;