One more for the day.
It’s always the same number of segments and they are always the same length.
Woke up with this in my head. Had to figure it out before breakfast. (Move your mouse around the canvas.)
Essentially the same as the last one but added some configurable shakiness, rotation and the ability to draw specific parts of the shape. Also discovered that the knob component is really good for confined layouts.
I’ve done variations of this a few times over the years. It’s essentially Jared Tarbell’s Substrate, but with fixed, isometric angles. This one draws all three angles at once. I have some other ideas for this as well, which I’ll be exploring.
You’d be forgiven if you came to the conclusion that I had any idea of what was going on here, especially with the filter node. I’m half decent at coding to an API, but I don’t really have much of a clue about music and sound.
There’s a lot more I could do with this if I knew more about sound and music and synths. But this is not bad for a couple hours work.
Exploring some ideas.
Update: Made this drag and drop, like it should have been in the first place. And made it wider. And less tall.
I know, I know, too many releases in too short a time. But I think this is the last minor release for a while. Pretty sure I’ve done most of what I really want to do with these for a v1. And I have no idea what v2 will look like. So from here on out it should be mostly patches with bug fixes and minor tweaks.
What’s in it?
HSlider label positions
Up to now you could only change the position of the text label on an HSlider. Now you can put the value slider just about wherever you want it as well. Both can be placed top, left, right or bottom. There’s some logic in there to make sure they don’t overlap. A change on this one is that previously the value label would be to the right of the slider. Like this:
Now it defaults to on top. Like this:
I think this looks a lot better, but it might mess things up for you. You can easily manually change it back to the right side.
ColorPicker with sliders
When you tab or click into the color picker’s input field, the panel will drop down, giving you RGB sliders to adjust your color. I like this SO much better. My favorite update for this release! You can make it drop up if you want, or turn this feature off altogether to just use the text field.
Dropdown drop up
You can now make the Dropdown component drop up if you don’t have room for it to drop down. This is not automatic. It’s a setting. Hey, these are minimal components.
VSlider swap labels
You can swap the position of the text and value labels on the VSlider, like you can on the Knob. Not a big deal, but someone might use it.
Yup, a new component.
Functionally, this is the same as a Checkbox or Toggle. You click it to toggle it back and forth between two states (checked / not checked, toggled / not toggled, playing / not playing). But who wants to use a checkbox to start and stop an animation or audio?
That’s all folks. Like I said, I don’t anticipate a v1.6 for a while. But probably some v1.5.x patches here and there to fix bugs and give minor tweaks. Mostly I’m just going to be using them as much as I can in various experiments.
I gotta admin, I’m not crazy about how the 2 in MinimalComps2 works with the semantic versioning. Version 1.4 of version 2? Whatever.
Anyway… VERSION 1.4.0!!!
No new components this time, but some super useful features, as well as a bunch of bug fixes.
There are some new defaults in the
Defaults object. These are mostly useful if you are creating a bunch of components that need some specific property that is not settable in the constructor. Like HSlider’s text position. Rather than doing something like:
const hs1 = new HSlider(panel, x, y, "one", 0, 0, 100); hs1.textPosition = "left"; const hs2 = new HSlider(panel, x, y, "two", 0, 0, 100); hs2.textPosition = "left"; const hs3 = new HSlider(panel, x, y, "three", 0, 0, 100); hs3.textPosition = "left";
You can do:
Defaults.hslider.textPosition = "left"; const hs1 = new HSlider(panel, x, y, "one", 0, 0, 100); const hs2 = new HSlider(panel, x, y, "two", 0, 0, 100); const hs3 = new HSlider(panel, x, y, "three", 0, 0, 100);
You can see all the properties that use this technique here.
Another ease of use improvement. Basically, all settable properties now have a setter method that returns the current instance of the component. This lets you set a bunch of properties in a row and assign the result back to a variable that holds the instance. Especially useful for those properties that aren’t in the constructor, but some people don’t like the long constructors either. Along with this work, I made sure that just about all the constructor parameters are optional and have sensible defaults.
So now, if you want, you can do stuff like this:
const velSlider = new HSlider(panel) .setText("velocity") .move(x, y) .setSize(200, 30) .setHandleSize(30) .setMin(50) .setMax(200) .setValue(175) .setTextPosition("left") .setDecimals(2) .addHandler(handleSlider);
Maybe a little overboard with that example, but you get the idea.
Binding is one of my favorite features. It turns this:
new HSlider(panel, 20, 20, "velocity", 0, 0, 100, event => model.velocity = event.target.value;
new HSlider(panel, 20, 20, "velocity", 0, 0, 100) .bind(model, "velocity");
I wrote about this in a lot more detail here: https://www.minimalcomps2.com/docs/bind/ . So I’ll leave you with that.
I also upgraded the API docs a bit, both in style and content.
A bunch of bug fixes, more demos
Also, check my last few posts here for some more examples of the components in action.
I hope to get a showcase up eventually, linking to other real world uses of the library beyond my own. So if you do something with these, let me know!