Scrubbing values in the editor, emoji or images in the editor


I was using an editor for Lua called ZeroBrane, and it has a feature called Scratchpad that lets you scrub values while the program is running ( i thought this would be pretty useful for trying out fx settings in sonic pi as you might do in ableton or another daw, or in livecoding too (where the other option might be tying the parameters to knobs on a midi device).

i know from javascript, some people have made similar things, like this:

here’s the simple example they give of using it for an animation:

<!DOCTYPE html>
<script src=''></script>
  .ball {
    position: absolute;
    left: 100px; top: 100px;
    width: 50px; height: 50px;
    border-radius: 25px;
    background: green;
<div class='ball'></div>
<script type='text/scrubby'>
var t = 0;
var lastFrame =;
setInterval(function() {
  var ball = document.querySelector('.ball');
  var now =, dt = (now - lastFrame) / 1000 * 40;
  t += dt; lastFrame = now; = 100 + 50 * Math.sin(t * 0.2) + 'px'; = 100 + 50 * Math.sin(t * 0.2 + 0.4 * Math.PI*2) + 'px';
}, 1000/60);

i looked around in the Show Package Contents for the sonic pi editor, to see if there’s javascript that i might be able to modify, but i didn’t really see anything that i could figure out what’s going on…

the other thing i thought of is, i found the spark and spark_graph commands, that give you a little graph. those are pretty neat. what would be even nicer is if you could add emoji, or custom emoji in the editor, so that if you come up with good ADSR envelope settings, then you can add the image in the editor (like the ones in the tutorial, or like an ADSR tool in a daw). so then you can save out a library of presets or something like that, and have a visual indicator of what they are. i haven’t really used emoji much, but i’m pretty sure that in slack, people make up their own custom emoji and add them in to the text