this is actually harder to make than sound variations, yet the same tools which made those images and sounds helped me make sound variations
You are free to use this video's images and sounds in your projects!
Images and sounds are made independently using my Audio and Image editors and my imagination.
Tools that inspired me to make the editors I used for this video were DayDun Random, BonesYT's Effects Editor and the ByteBeat composer by SthephanShi (the one from the dollchan imageboard).
My Image and Audio editors:
Image Editor: https://quitin.github.io/projects/html/media-workstation/image-editor/image-editor.html
Audio Editor: https://quitin.github.io/projects/html/media-workstation/audio-editor/audio-editor.html
INSTRUCTIONS
Effects are written in JavaScript and they are executed left to right. Always end your effect code with "return v" in Image and Audio editor to pass the image or audio data to another effect.
If you're familiar with the dollchan bytebeat composer, the Audio Editor generates audio that is equivalent to floatbeat. So, you'll need to convert to bytebeat so you can write bytebeats. For convenience, you could use an effect that converts floatbeat to bytebeat. You definitely should use the limiter that is loaded by default when you open Audio Editor as the last effect while working with effects so you don't get scared out by very loud sounds.
In Audio Editor, there are three variables: v, t and sr. There's also a function getSample(n) which returns the n+1th stereo sample of the audio.
v is the main variable, it's an array that represents the data of the input audio or output of previous effect.
v[0] represents the left channel, v[1] represents the right channel.
If you write "return v[0]" in an effect, it will only play the left channel of the audio.
You can manipulate the v variable like this:
v[0] = v[1],
v[0] = v[0]*2,
v = [sin(t/50),sin(t/50)]
v = getSample(t*2)
etc.
t is time, and it is equivalent to the current Unix epoch in milliseconds.
sr is the project's sample rate.
In Image Editor, there are seven variables: v, x, y, i, width, height and t.
width and height represents the dimensions of the canvas. Default is 256x256, or width=256, height=256.
v is the main variable, it represents the image data as an array of pixels stored as an array in the form [R, G, B, A], representing the rgb and alpha channels.
"return v[0]" returns the red channel, "v[0] = x" sets each pixel in the red channel to x, which depends on the x position of the pixel.
x and y represent the x and y distance from the top left corner pixel respectively. The variable i increases to width*height-1, counting from the top left pixel beginning as 0 and reading left to right, top to bottom like a book.
t also represents time as the current Unix epoch in milliseconds.
Also, pixel colors can be expressed as RGBA array or a decimal number which will then be converted to hexadecimal and will be represented as a rgb color. For example, 255 = 0x0000FF = blue, 65280 = 0x00FF00 = green, 16711680 = 0xFF0000 = red.
There are shorthand aliases of functions from JS Math object:
sin(x), cos(x), tan(x), floor(x), max(x,y,z, ...), min(x,y,z, ...) ...
Many functions from the JavaScript Math object have aliases.
You can look in the main.js code of the editors through inspect element to see which aliases are available.
You can define your own functions like you do normally while writing JavaScript programs. I personally like using arrow notation for defining functions.
TL;DR With some practice and fiddling around, I think you can get the hang of this editor.
My editors aren't perfect and have a couple of bugs, for instance Image Editor code overwrites code in Audio Editor and vice versa, or the auto setting breaks after export sometimes, but these are avoidable by saving your projects once a while and toggling the auto setting. Maybe one day I could improve the editors.