search

Mid-The-Modder / Midbox-Source

Here are all the files for Midbox.
MIT License
0 stars 1 forks source link

Upgrades for Wavetable/Custom Chip Prompt UI (Round 2!) #89

Open Mid-The-Modder opened 6 months ago

Mid-The-Modder commented 6 months ago

I have a long list of plans for the wavetable prompt, with some additions that may carry on to custom chip's. Here is some concept art detailing what is to be added.

Addition Ideas

pixil-frame-0 (82) Here's the new wavetable prompt idea, here's some descriptions and plans I gave everything here:

This is the decent amount of stuff I wanna add to this prompt! First of all, the interpolation curve. I've had this idea commented out for a bit and decided to add it to the concept art here. Outside of the prompt this'll be positioned right underneath the interpolation checkbox and only visible when it is ticked. It changes the way the wavetable waves interpolate. In the prompt, I'll move all the wavetable's settings to the bottom there for easy editing too. Originally, I had the idea of flipping the wavetable wave buttons sideways and putting them on the side, but I learned while drawing that that it'd look bad visually. This concept has the buttons much more compressed into a single column area, with the drawing-specific buttons all on their own row. The placing line status thing and the "cancel selection" button are at the left of this row, and to the right of it is the selection drag bound event button (which I will remake to only change the SVG and swap via enum), however my actual plans for these three elements is to put them underneath the custom chip editor. The load preset button will also receive a new icon which has been commented out currently because SVGs don't seem to be compatible on the element I'm trying to put it on.

For the wavetable specifically, there is a new drawing button, or really "mode" as it is a toggle in of itself. I'll call it the "wave influence toggle". What it does is that when it is toggled, when you draw on the wave, other points in the other waves around the selected wave and around where you are drawing will also move somewhat near where you drew on the selected wave, kinda like what you had drawn had "influenced" the other waves to have a near similar shape. Each wave farther from the selected wave has less influence to what you draw on the selected one. Attached image of editing with the influence toggle activated: pixil-frame-0 (83)

There is also another set of buttons, here they are in their own section indicated by the horizontal line with buttons called "Smoothen Waves, Sharpen Waves, Shatter Waves, Interpolate Waves, Copy All, Paste All, and Flip All" with the last few buttons having the shortcuts "Shift+C, Shift+V, and Shift+C/N" respectively. The former rest of these buttons change the shape in various fun ways using algorithms that move the waveform points around. "Smoothen Wave" makes the wave smoother by curving waveforms that have sharp wave points with consideration to chip looping, e.g. a square wave would become more and more sine-shaped the more you hit the button. "Sharpen Wave" on the other hand would make the wave sharper by removing curves from waveforms and spreading out points that are a short distance from each other. E.g. A sine wave would become more and more like a square wave the more you press the button. "Shatter Wave" randomly moves every point in the waveform one or two samples upwards or downwards, looping when hitting the upper/lower bounds of the chipwave. "Interpolate Waves" is a wavetable-only button where- starting from the first wave and ending at the final wave, it makes every wave's wavepoints move towards the wavepoints of the upcoming wave in the cycle. Attached image of button algorithm shapes: pixil-frame-0 (84) And finally, the copy/paste/flip all buttons do the same as the regular versions of these buttons, however, they are wavetable-only and instead affect every wave in the wavetable. This will (hopefully) work on selections. The copied waves are stored separate to the custom chips copied singularly.

CSS Sketching

The buttons are in a div which is centered (i think i put position: absolute on some of these, I'll get rid of that if I can) Same for wavetable wave buttons. I'll separate the button column and custom chip editor/draw mode buttons into their own columns contained by a div. The first column is on the left and contains each button in their rows, which can also let me put two buttons in one row like shown there. The second column starts with the draw mode buttons which are centered in their own row, the custom chip editor which has shrunk to fit on the right side, and then the other three elements i mentioned earlier going underneath the custom chip editor, again centered in their own row. Then, after those columns, I'll need three more columns at the bottom contained in a div row, the first column containing the wavetable settings, the second column containing the extra settings or nothing, and the third column containing the confirm button at the bottom.