Maniphest T39855

Icons for Robert Penner easing equations
Closed, ResolvedDESIGN

Assigned To
Joshua Leung (aligorith)
Authored By
Joshua Leung (aligorith)
Apr 23 2014, 9:02 AM
Tags
  • User Interface
  • Animation & Rigging
  • BF Blender
Subscribers
codemanx
Ejnar Brendsdal (ejnaren)
Joshua Leung (aligorith)
Paulo José Oliveira Amaro (pauloup)
Paweł Łyczkowski (plyczkowski)
Thomas Beck (plasmasolutions)

Description

A few weeks ago, I committed the Robert Penner easing equations patch to master (T22084). This design task/patch is for adding a set of icons for this, as proposed by @Paulo José Oliveira Amaro (pauloup)

For this, currently we would need the following icons:

  • Constant (it might be better if this one suggested "stepped" keys more to help transitioning users)
  • Linear
  • Bezier
  • Sine, Quadric, Cubic, ... Quintic - Let's try having one for each first, and maybe scaling that back if its doesn't add much. The key thing here is that it's clear that each is more sudden than the previous
  • Exponential and Circular - Again, these two are the "most dramatic" (especially circular)
  • Bounce
  • Elastic
  • Back/Overshoot
  • Ease In
  • Ease Out
  • Ease In/Out

Perhaps it won't be possible to have all of these (or some might not be easily discernable). But it's still something we should look into.

Preferably these would be in the blender icons file so that we don't have to find a way to merge the two svg files (though with this number of icons, we may have some issues finding enough space on the existing image)

Related Objects

StatusSubtypeAssignedTask
ResolvedPATCHJoshua Leung (aligorith)
ResolvedDESIGNJoshua Leung (aligorith)

Event Timeline

Joshua Leung (aligorith) created this task.Apr 23 2014, 9:02 AM
Joshua Leung (aligorith) claimed this task.
Joshua Leung (aligorith) raised the priority of this task from to Normal.
Joshua Leung (aligorith) updated the task description.
Joshua Leung (aligorith) added projects: BF Blender, Animation & Rigging.
Joshua Leung (aligorith) edited a custom field.
Joshua Leung (aligorith) added subscribers: Joshua Leung (aligorith), Thomas Beck (plasmasolutions), Paulo José Oliveira Amaro (pauloup).
Joshua Leung (aligorith) edited this Maniphest Task.Apr 23 2014, 9:02 AM
Paulo José Oliveira Amaro (pauloup) added a comment.EditedApr 24 2014, 2:59 PM

Here's my proposal for the icons (edited to include "Quartic").

For Constante, Linear, and Bezier I used the "In and Out" mode and did 2 versions for Bezier, because I think it is the only one that allows editing, if so it should indicates this.
From Sine to Circular I used the "In" mode because I think it's easier to see the differences. I tried to use the colors to suggest the dramaticity of each curve, beyond the curve itself.
For Bounce, Elastic, and Back I used a violet gradient to differ from the others.

Please let me know if this they are enough and appropriated, or if there any changes I could do to improve them.
Inkscape SVG:

Joshua Leung (aligorith) added a comment.Apr 24 2014, 3:04 PM

Looks great IMO :)

I think the second Bezier one communicates the editable nature better

Thomas Beck (plasmasolutions) added a comment.Apr 24 2014, 3:33 PM

Great icons overall!

And I got the same feeling for the second one! I would lighten up the handles a bit, they are now almost invisible and make me think in combination with the bright ends (at least in my mind) that I'm looking at the percent symbol %.

For the ease-icons: Don't you think the red misleads the user? Red is reserved for fast motions but in our case the opposite is the case - it slows down on the red ends.. what do you think..?

Greetings and thanks so far!
Thomas

Joshua Leung (aligorith) added a comment.Apr 24 2014, 3:55 PM

Oh, I just noticed that the quartic (4) icon seems to be missing from the svg

I've tried adding these to the blender_icons.svg from master

Joshua Leung (aligorith) added a project: User Interface.Apr 24 2014, 3:57 PM
Paulo José Oliveira Amaro (pauloup) added a comment.Apr 24 2014, 5:39 PM

Hi, thanks for the nice comments. I agree to the issues and I tried to solve them.

Easing icons only:


Blender Icons with easing ones:

I feel something different from the other icons, maybe it's the black outline and I'll try to improve it soon.Let me know if there are something more to do.

Thomas Beck (plasmasolutions) added a comment.Apr 24 2014, 7:27 PM

Hi @Paulo José Oliveira Amaro (pauloup),
I like the new ones very much! The ease-icons are much more clear now and the bezier handles are more prominent and distinctive. So in my opinion, it's good to go.

The style of the default icons is much nearer to the tango icon guidelines style than to the "rainbow" styled icons you created here (no offense, I like them very much) ... but I think that they fit the purpose very much! I like especially that you symbolized the incline of the curves via the colors (from green to red).

Greetings, Thomas

Paulo José Oliveira Amaro (pauloup) added a comment.Apr 24 2014, 11:09 PM

Thank you Thomas!

I made some changes, like adding some color to outline (just a little) and bright up some colors.
In my opinion, now they match the existing icons enough, beside the color differences. So that's the final version.


Easing icons only:
Blender Icons with easing ones:

Joshua Leung (aligorith) added a comment.Apr 25 2014, 4:09 AM

I'm not sure that having the ease icons and the handles on the bezier fading to black read that well, especially in many of the dark themes that people use. Having it white (as in the first version) seems closer to the style used in the other icons (e.g. modifiers - M16 or M25)

Paulo José Oliveira Amaro (pauloup) added a comment.Apr 26 2014, 3:59 AM

You're right about icons M16 and M25, they have a lightgrey degrade to blue. The easing icons could keep this style, but it actually decreases contrast between the affected part and the rest of the curve. It seems to me the darkgrey / blue curve works better, so in this new proposal (v4) I've just bright them a little. But I can change it if you still think different.

Comparison:


You can see how the lightgrey/blue degrade can decrease contrast (test #1). The icons are placed against different background color, something I didn't test before your comment. I also include the reference icons and the first versions with white / red curve. You're right about the handles of bezier icon, so I did a new version based on icon I25.

Proposal v4:

Easing icons only:

(includes the comparison if you want to test it yourself)
Blender Icons with easing ones:

So that's it. I wait your comments on these changes. Thanks @Joshua Leung (aligorith) and Thomas @Thomas Beck (plasmasolutions) for giving your opinion and advising.

Joshua Leung (aligorith) added a comment.Apr 26 2014, 4:38 PM

Hi @Paulo José Oliveira Amaro (pauloup),

Nice work with the comparison. Indeed, with white, the contrast isn't that great.

v4 looks good to me :)

@Thomas Beck (plasmasolutions): Unless you've anything to add, I think these are ready to be committed

Thomas Beck (plasmasolutions) added a comment.Apr 26 2014, 6:30 PM

@Joshua Leung (aligorith) Yeah, they are lovely and ready from my side of view :) Would you like to commit them? I'm away from my machine now...
@Paulo José Oliveira Amaro (pauloup) I like them very much and thank you very much for taking the time to make and alter them!

Greetings & Thanks, Thomas

codemanx added a subscriber: codemanx.Apr 26 2014, 9:17 PM

I'm not familiar with the easing itself, but the Bounce and Back icons feel odd - I expect them to be mirrored (left and right flipped for Bounce, top and bottom for Back).

If I picture a bouncing ball, it should first bounce a lot a the beginning, then less each time until all kinetic energy is used up.
If I picture a Back easing for this: [start] ____/‾‾‾‾‾‾ [end], I expect it to go from [start] at left bottom to right top, but exceed the target on Y-axis, then go down a bit to [end].

But it depends on what is actually done in the easing.

If I compare the reference icons with the proposed v4 icons, the ref icons seem to stand out more. They got some kind of highlight or embossing (chisel effect?). They neither look flat, nor completely round, more like a flat relief.

Other than that, they are awesome!

Paulo José Oliveira Amaro (pauloup) added a comment.Apr 26 2014, 10:24 PM

Hi @codemanx, I tried to represent the In mode in these icons, so they are Bounce In and Back in. I believe they match to the reference in: http://easings.net/
Maybe Bounce should use the Out mode. I thinks it's used more often, I'm not sure if it applies to Back also. Therefore it would make it inconsistent to the other modes.

Paulo José Oliveira Amaro (pauloup) added a comment.Apr 27 2014, 8:08 AM

About the ref icons seem to stand out more, I believe it's because they are sharper, plus the highlight effect. So I tried to get as closer as I can in this new proposal (v5).

Now the lines are thinner and sharper, have highlight on top and the border is stronger. The changes are subtle. Adding effects can affect the color perception.
A comparison between the last version v4 and the new v5:

Easing icons only:


Blender Icons with easing ones:

It's up to you guys. Any suggestion?

Thomas Beck (plasmasolutions) added a comment.Apr 27 2014, 2:57 PM

@Paulo José Oliveira Amaro (pauloup) From my side we're good to go - I think that the latter version is marginally better... but all in all they match the functions very well (and I think the bounce icon is well suited for it).
@codemanx This depends entirely if you choose the (in) or the (out) version of the bounce or back effect. The icons represent the actual working of those effects quite well.

I vote for "put them in"..

codemanx added a comment.EditedApr 27 2014, 5:02 PM

Makes sense, as the input mode is shown, it's absolutely correct!

The numbers in v5 are better readable on white background, that's a good improvement. Put them in!

Paweł Łyczkowski (plyczkowski) added a subscriber: Paweł Łyczkowski (plyczkowski).Apr 27 2014, 8:05 PM
Joshua Leung (aligorith) changed the task status from Unknown Status to Resolved.Apr 28 2014, 3:50 AM

Committed to master! :)

https://developer.blender.org/rB4a1b87790d456453fa5a25f08588dd6d9e8e47f9

Well done @Paulo José Oliveira Amaro (pauloup)

Paulo José Oliveira Amaro (pauloup) added a comment.May 1 2014, 7:51 PM

I'm very happy to be part of Blender development. This is being my first contribution to Blender actually! :-D And even more because it's for a feature that I like so much! Thank you @Joshua Leung (aligorith), @codemanx and Thomas @Thomas Beck (plasmasolutions) for the suggestions and comments on my icons. I'm sure I could not be so satisfied with the result as I am if you didn't have guided me so well as you did. Thank you so much! :-D

Thomas Beck (plasmasolutions) added a comment.May 1 2014, 9:25 PM

I think I speak for @Joshua Leung (aligorith) too when I say that it's encouraging to hear that our work is helping users and is used to create any kind of art :) And I'm very happy that we are in the lucky position of having users that are able to produce art that in return is added to blender - for me this is true open source collaboration and makes me feel great!
Btw: This is how the icons were commented by Stephen Thomas on twitter, so I think you did your job well ;) " The new icons for the interpolation modes in #b3d are so tasty I want to lick them. Yum :) pic.twitter.com/BrRNZK3iiF "

I'm hoping to see more icons in other tasks in the future ;)

Paulo José Oliveira Amaro (pauloup) added a comment.May 1 2014, 10:11 PM

Thank you! Very nice to know it and thank you for let me know it!

Yeah, I'm totally available, if you know something I could help, just let me know. I actually tried to build blender from the source, to start to learn how to help as a coder, but I was not successful to solve its dependences. If someone could help me, I would be very grateful. My email is pauloup @ gmail.com and some guidance or even tips are very welcome.

Ejnar Brendsdal (ejnaren) added a subscriber: Ejnar Brendsdal (ejnaren).May 1 2014, 10:56 PM

@Paulo José Oliveira Amaro (pauloup) Very nice icons.
I really like the quality of the blender icon set. Sometimes icons are reused more than one place though so its nice of you to give a hand. I feel your style give some extra color to the original style. Looks tasty :)

A small comment. Is it me or should the sine icon be more symmetric so to communicate the sine-wave effect?
Maybe I have misunderstood the sine easing...?

Paulo José Oliveira Amaro (pauloup) added a comment.May 2 2014, 4:38 AM

@Ejnar Brendsdal (ejnaren), it seems your doubt is similar to @codemanx's one. Maybe you're thinking about the "In Out" mode of sine. (See easeInOutSine here). The easing icons represent the "In" mode only.

Ejnar Brendsdal (ejnaren) added a comment.May 2 2014, 11:30 AM

@Paulo José Oliveira Amaro (pauloup) Ahh I see. It was me who misunderstood the idea :) So I see it makes sense. And apparently it does communicate the "in" mode well. Otherwise I would not have recognized it as odd.

Joshua Leung (aligorith) mentioned this in rBS4a1b87790d45: Patch T39855: Icons for Interpolation Types (and Robert Penner easing).Nov 20 2014, 9:33 AM