GithubHelp home page GithubHelp logo

ADSR / Envelope UI about otto HOT 23 CLOSED

bitfieldaudio avatar bitfieldaudio commented on September 28, 2024
ADSR / Envelope UI

from otto.

Comments (23)

AlbertSmit avatar AlbertSmit commented on September 28, 2024 4

I evolved on zacYP2's idea and added the fill below the ADSR lines. I put some black in between the blocks to prevent contrast issues and clutter though.

I personally really like where this is going!

schermafbeelding 2018-08-13 om 23 54 49

from otto.

ras0k avatar ras0k commented on September 28, 2024 1

Should we color code the four parts of the wave maybe? so it's easier to see what every knob does.

Could only the line or even better the area under the curve. If some one digs the idea I can do it no problem :)

from otto.

topisani avatar topisani commented on September 28, 2024 1

You're not the first one to say that, but im gonna have to still go with a hard no on that 📦

I think the rounded corners are really essential for our new graphical style, and in this case especially, i just think it looks good

from otto.

AlbertSmit avatar AlbertSmit commented on September 28, 2024

Can you make/sketch what you mean? I think I get what you're saying, but having an example would help getting opinions here and on the Discord going. :-)

from otto.

AlbertSmit avatar AlbertSmit commented on September 28, 2024

So, if I got your idea right, you mean something like this?

schermafbeelding 2018-08-09 om 19 39 49

from otto.

topisani avatar topisani commented on September 28, 2024

i think i could be a fan of that

from otto.

ras0k avatar ras0k commented on September 28, 2024

I love this, could also add a low opacity area under the curve?

from otto.

ras0k avatar ras0k commented on September 28, 2024

I can do it next week too I'll have time

from otto.

ras0k avatar ras0k commented on September 28, 2024

There you go, quick mockup

otto adsr

from otto.

ras0k avatar ras0k commented on September 28, 2024

Maybe we should drop the tail of the release? the fact that it has no area shows it's not representing anything.

from otto.

ras0k avatar ras0k commented on September 28, 2024

This maybe?

otto adsr 2

from otto.

nebularnoise avatar nebularnoise commented on September 28, 2024

IMHO the Release should be curved like the Decay. Other than that, I'm a fan 👍

from otto.

cester-ino avatar cester-ino commented on September 28, 2024

In reality in a envelope editor you should be able to set the curves trend, maybe via a keys combination (i.e. Fn+encoder)

from otto.

nebularnoise avatar nebularnoise commented on September 28, 2024

Maybe by pressing the red or blue encoder ?

from otto.

cester-ino avatar cester-ino commented on September 28, 2024

I think it would be better if we set a standard for accessing Alt-settings (i.e. Holding shift or Fn) this way you can set more than 4 parameters in any function)

from otto.

topisani avatar topisani commented on September 28, 2024

trend?

from otto.

cester-ino avatar cester-ino commented on September 28, 2024

Curve progress/shape, for example in xfer serum you have to drag the blue dots to shape the curves

from otto.

topisani avatar topisani commented on September 28, 2024

Could maybe be interesting to do. I think id prefer just doing exponential curves and be done with it though

from otto.

ras0k avatar ras0k commented on September 28, 2024

Good work! Something feels off with the roudned corners, it does not make the yellow and blue part seem continuous. Is there any way the junctions could feel more pointy without taking away the black space? I don't have the awnser, just the question :P

from otto.

AlbertSmit avatar AlbertSmit commented on September 28, 2024

Well, to be fair (and it might be an unpopular opinion); the ADSR is not specifically about having a continuous line, but it is about showing the differences of the settings between A, D, S, and R. So in the view of the users experience, separating those values is a gain, as it becomes easier to make distinction between the values., without having to look at it too long. Now, I know colour has this property, too, but having both a space in between and the colour coding, it makes it really user friendly and quick in use.

Is my two cents.

But we'll have to see how it functions in real life situation to make up a verdict, I think.

from otto.

ras0k avatar ras0k commented on September 28, 2024

Good point. I agree we should keep rounded corners. I am eager to see it in action now!

from otto.

ras0k avatar ras0k commented on September 28, 2024

Is there a way to integrate opacity for the area under the curve? I am not sure how it would work with the display or how it fits with the graphical identity of the project, but it could be worth a try. Can you try a mockup with what you did DISKUS?

from otto.

topisani avatar topisani commented on September 28, 2024

We tried opacity too, definately doesnt fit in.

To be honest, we're not gonna change anything about this. We really like it, and it fits in very well with our style - lets move on to other things

from otto.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.