https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cfded214-06f9-4c7e-aa2f-5dfc9c8acb79/splatter-paint.png

When most people think about coding, they don't often think of creating an assault on your senses composed of two different instances of flashing colors and ear-piercing sound. But that's exactly what we're making today.

This workshop uses Paper.js, a library for easily creating images with code, and Tone.js, a library that allows for easily creating sounds.

Start by creating a new HTML, CSS, and JS repl on repl.it. Call it whatever you want. I’m calling mine splatter-paint

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f0ff3cb9-3d19-4705-b84f-ef719b9737cb/E27F3CAA-AF90-4817-9546-AB52FC136043.jpeg

Once your project is set up, import Paper.js and Tone.js by adding these two lines of code somewhere between the <head> tags of your index.html file.

<script src="<https://unpkg.com/[email protected]/dist/paper-full.min.js>"></script>
<script src="<https://unpkg.com/[email protected]/build/Tone.js>"></script>
<script type="text/paperscript" canvas="myCanvas" src="/script.js"></script>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/eadaadac-81e2-4f17-b68d-0b425e16606a/F8AA747A-4BB9-46AF-8E75-0C113A4BE269.jpeg

Replace line 13 with the following line, which creates an HTML5 Canvas:

<canvas id="myCanvas"></canvas>

Navigate to your style.css file and add the following code snippet to it:

html, body {
  width:  100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
}

This makes the HTML canvas take up the entire size of your screen and prevents any overflow scrolling.

That’s all the HTML and CSS you need! Believe it or not, most of this project is written entirely in JavaScript.

Navigate to your script.js file and add these two lines to the top of the file: