r3mot / sampler-step

A simple step sequencer that leverages the Tone.js API and React to provide a fun experience without a DAW.
https://www.gridgroovin.com
1 stars 1 forks source link

Suggestion: Background variation to visually separate steps into groups of 4 #5

Open currentsound opened 2 weeks ago

currentsound commented 2 weeks ago
  1. See how FL Studio uses a different background color for the for steps 4678 and 13,14,15,16 to make it easier to visually see where each group of 4 starts.
r3mot commented 2 weeks ago

Originally, each measure was visually separated, but I found that the combination of the sequencer’s style and the visual separation became distracting.

FL Studio’s UI handles this well by alternating between two colors and adjusting the opacity/brightness when a beat is selected. Adopting a similar approach could work here, though it would change the overall look of the project.

I’ve attached a modified version to see if this aligns with what you’re envisioning. I’m open to feedback and suggestions for further improvements. Let me know your thoughts!

step-diff

currentsound commented 2 weeks ago

Yeah that works. This is easier to sequence.

But I miss the cool glowing pad look.

The background color change makes it a lot easier to see the groups of 4.

At the moment on app you're doing different sample tracks with different colors. Do you still want to do this? You could maybe still do this and alternate the next color in the color wheel.

Example:

track 1: green, yellow Track 2: blue, purple

That's a way you could still get different colors for tracks if you wanted to while being able to visually separate each group of 4.

Here's some pads with the next color in the color wheel next to each pad. You could for example alternate between two pad colors that are next to each other here for each track. That way you don't have to break your color per track idea?

You can get 8 track colors from this one image (below) by taking 2 pads (horizontally) for each track. Eg, track 1: top row pad colors 1+2, track 2: top row pad colors 3+4, etc...

Just an idea if you don't want to break your color per track design. This allows you to just vary the color on the track slightly. You're kinda doing similar colors to this already with kick and snare, those two colors look close to two of these pads. You can see there are other two color combination like that which could work for each track to alternate between.

maschine-mkii-front-black-1024x911-1725636378

currentsound commented 2 weeks ago

Other option would be to do the background only but the issue with that is, once you make a pattern you're now reliant on looking at other tracks that have less steps used and once they're filled you'll lose your reference, making editing more tricky. But it would be better than no background color change.