Hype Capabilities

Animation
1

Hi All,

I'm looking for a quick rundown on what Hype can do for me, based on my goals. Perhaps people with some significant experience can tell me if something is impossible, possible, possible with difficulty...

Say I want to animate a clock... and I want the user to set the time:
1- Can I have the user enter a time into a text field, and then move the clock hands to that time?
2- Can I have the user move the hands (mouse/touch) to that time?
3- Can I implement slider object that the user can adjust to set the clock hands?
4- Can I read the time by examining the clock hands position?
5- Can I set the hands positions/time to a variable?

Related:
6- Can I animate the colors of the clock elements?
7- Can the user set the color of the clock elements?

Finally - Does any of the above require scripting?

Thank you for your kind help.

2

Don't be afraid of scripting. JavaScript is a powerful ally.

This free template is close to what you're looking to do...

It uses a lot of JavaScript, but it's not really too bad. Once you understand what's going on, your seven project requirements are well within the realm of possibility.

1- Can I have the user enter a time into a text field, and then move the clock hands to that time?

For this one, you'd need to add an HTML Input field and then update the clock based on an "input" event. It's JavaScript. It is tricky too, as you'd need to validate the response. If someone put roman numerals for time, what would happen? If you were expecting numbers, then the project would likely crash.

2- Can I have the user move the hands (mouse/touch) to that time?

This one's tricky because the clock hands move circular. Hype has the ability to control a timeline with a click-and-drag of an element — but the drag movement is meant to be linear. That might get you close to what you're looking for, but then you'd have to control the clock hands by manipulating the Hype timelines, rather than element angles. The aforementioned "Timing" template uses angles.

If I wanted more precise movement, I'd probably do something similar to the "Looking" template.

See how the eyes follow the mouse position? Something similar could be done by clicking-and-dragging.

3- Can I implement slider object that the user can adjust to set the clock hands?

Here's an example of sliders.

...and here's another...

4- Can I read the time by examining the clock hands position?

Yes, you'd just have to reverse the process. You can get an element's position... including rotation... and then just calculate that backwards. If using timelines to control movement, you'd just have to grab the time in the timeline and then convert that to a conventional clock time.

(This is obviously more JavaScript.)

5- Can I set the hands positions/time to a variable?

I'm not sure what you're asking here. But basically, in the "Timer" example, the "now" variable is set to the current Date/Time. The "s" is for seconds. The "m" is for minutes. The "h" is for hours.

6- Can I animate the colors of the clock elements?

Sure, as an example, the look of the clock could change based on the time of day.

Here's an example of the "Timing" template, but changing color based on "Dark Mode"...

7- Can the user set the color of the clock elements?

Sure, I use "LocalStorage" to let the user set their preferences in a Hype project. Here's an example with the "Multilingual" project, where the user can set their language...

...and in the "Circles with Grandma" game, the user can set preferences...

...where the circles are just pencil colored / dark gray, or colorful based on the player's turn.

Basically, it sounds like what you want to do is possible, but there's a lot of work to do.

2 Likes
3

@Photics Thanks...

OK, so there seems to be a path to success, even though it might be a little steep.

Ultimately what I am looking for is a tool that presents all of the filtering options up front... not an application that points toward other packages that use library calls that I have to manage... just a check box that says "Blur", and blur is added... and a corresponding value that I can set... and a value that can be animated in the way that object transformations are currently animated.

My next question, related... has to do with how slick it can be made to look. The examples you provided have very simple looking controls...

Imagine implementing this:

image

I am assuming all of the work to define the "look", has to be done in one's favorite SVG editor... am I correct?

Again, thank you for you kind help.

R

4

Them's fightin' words. :laughing:

...and did you look at Circles with Grandma? That's pretty. :smiling_face_with_three_hearts:

The tutorials are to show the basics. It's up to you to make your project look pretty.

Circular dials are tough though.

Buttons can be HTML / CSS or images — vector or raster — can be used as buttons.

No, you can also use PNG / JPEG / GIF... or you can use the vector tools in Hype.

5

Sorry :slight_smile:

Circles with Grandma is indeed rather nice...

So that's what I'm really curious about... some of the "slickness" comes from controls that might, say, cast a drop shadow. Imagine an audio slider, or the hands of the clock... from a fixed light source, you would see a shadow created by the control that would interact with the elements beneath it in the z-order...

Or a flashing light would cause a glow that would interact with the elements near to it.

Are my descriptions clear enough?

(PS, if I had an application that did this, I could simply do it, and show you :wink:

Thank you again, for your very kind help.

-R-

1 Like
6

Awww, that's nice. :blush:

It looks like you want to add advanced design techniques... but you don't want the bloat / maintenance of third-party libraries. The latter is one of the main reasons I use Hype.

You can manage drop shadows in Hype. You can also animate it. Here's a quick example that I threw together...

hype-drop-shadow

The way Hype works is that it manages a lot of the CSS / JavaScript work for you. It's is very close to "vanilla" programming, but there is a Hype "Runtime"... a fairly tiny file (or files depending on the features used) that does a lot of the heavy lifting.

The challenge for you is going beyond the basics of the software, as it sounds like you'll need it. That's why I like Hype. Because when I want to do something that the software doesn't support, it's usually just a matter of adding custom CSS / JavaScript code.

Careful with Flashing colors. That's not accessible... Flashing | 18F Accessibility Guide

...but that's cool. You're trying to add lighting to your project. Hype has a couple of features that might help. First, Hype has the Filter Effects "Backdrop" option, which can affect the look of the elements underneath. It's pretty cool. Sadly, the support is kinda weak...

...however, you can control multiple timelines with Hype. So, if one element is switched on, you can manipulate other elements dynamically. That might be able to create the effect you're looking for — but I'm not sure, as I'm not quite understanding what you're trying to do.

I think the problem is how many elements need to be interactive... and what kind of effects you're looking to do... as Hype doesn't have dynamic lighting effects. That's something you'd have to add / build.

Ha, that's funny... and that's also problem. Flash is dying soon. Adobe is ending support at the end of this year. There hasn't been a true replacement. Hype is close. But yeah, there's a lot of programming involved to add advanced features. That's what I find ironic about Hype. I got started with Hype because I didn't want to code. But over time, by using the software, I started learning JavaScript. Now, I prefer to code. Instead of relying on the timeline, a lot of the animation / interactivity is done dynamically with JavaScript.

1 Like
7

I know what you mean about diving into the power via scripting... I found the same thing with Excel and VBA. I'm pretty sure you can do anything with Excel and VBA.

But that's the thing... I could almost literally do all of this with Excel and VBA... but it is cumbersome. It's not a graphics tool, but as you can map images to button objects, you CAN do some fancy layering and get interactivity all at the same time.

It's just that you wouldn't want to :frowning:

It seems to me that I have discovered a basic type of computing functionality that has not been addressed.

Like word processing has been addressed.
Painting (bitmap or SVG) has been addressed.
Calculations have been addressed.

But think about this:

ALL interaction with computing devices today (with the rarest exceptions... like speaking to them and listening to them), are basically looking at graphical elements on a screen, and interacting with them. All of it. From web browsers to Super Mario to video editors... it's all "shapes" with attributes. (I prefer the term "entities"... as shapes is too limited).

You would think that a tool that allows you to define entities and interact with them would be almost the most basic tool you could find on a modern, GUI oriented device.

Make an entity... define how it looks... define how it behaves.

If you had an application that did that... then you could almost literally do anything because that is all anything on a PC really is (3D rendering is a notable exception... the techniques to do that effectively are well defined and available).

What excited my about Hype is that it understands the power of having a physics system that can be applied. It understands that entities can collide.

It should, IMHO, understand 2D lighting. It should understand deep appearance attributes... basically an SVG toolset, with deep texturing and other related tools at the ready... with emphasis on effects.

And sure, at some point... scripting is always king, but just think about how far you could go short of that.

If you want to see a great example of a pretty wild tool that merged vector and raster graphics with insane effects and style elements... Real Draw Pro was an overlooked gem. A bit dated now, but you can see the power...

image

But all of these tools are designed to produce static results... the entities are not available to the user.

So Hype is clearly trying to address that...

But one day, when someone realizes that IF you make a tool that creates entities that can be dynamically changed in every way... that can interact with the user and all other entities... then you will have a tool that can almost literally do anything.

The problem seems to be that applications that sort of do this have an idea about what the end result supposed to be (like a 2D game engine... it assumes you are making a game) and therefore the tools are not generalized.

But a generalized tool that does entities and interactions... is really a do anything tool. Because interacting with visual entities is all anything really is... in the end.

-R-

8

I'd think of Hype being a tool case well equipped for the common tasks its been designed for. if you need a special tool it can normally be added with some additional css/js. It's got its own API allowing a subset of UI-Properties and as a bonus a messaging system.

So if you're trying to build something on the basis of webtechnologies Hype could be a good starting point ...

9

Recently keyshape was mentioned here.

10

Well... technically... it might... Matter.js Demo · code by @liabru

Hype uses Matter.js... and Matter.js has a "Ray Casting" feature.
Perhaps that's what you're looking for. :man_shrugging:t2:

11

Well, it understands raycasting... which I suppose is step one when it comes to lighting...

But lights are for illumination:
image

And would have effects on the SVG objects around them...

image

This is sometimes called "2D Lighting"

Regards.

12

I took a look... keyshape looks interesting and somewhat comprehensive... but appears to be missing all interactivity.

Philosophically... all computer use (end-user experience), is seeing graphical entities, and interacting with them... so Keyshape appears to be approx. half of a tool.

There are very few "full tools" with respect to end-user experience.

Animation tools let you create an animation that the end user has to watch (half a tool)
Word processors let you create a document that the end user reads (half a tool)
Paint programs let you create art, that the end user views (half a tool)

Other programs let you interact with things... but you don't get to choose the thing:

Calculators let you interact with them... but only to do math.

Web browsers let you interact... but only to web surf.

Hype is starting to get close, I believe, to finally realize a tool that lets you make anything, and interact with it in any way.

The power of this cannot be overstated.

I'm pretty confident that nobody understands the true depth of what I am saying here.

It goes very, very, deep. It basically flips creation on computing devices on its head.

Think of it this way.

Say you are a GUI designer (you're an expert at user experience)... then say that you "mock up" a GUI design that looks exactly like the "real" GUI. Then you go an define behaviors of the graphical elements so that the GUI Mock Up has apparent functionality.

If you add functionality to this GUI Mock Up, to the point where it is behaving absolutely identical to the supposed application that it is a mock up for, aren't you in fact done?

There is no longer a need for the application. You "mocked it up", literally into existence. You have the application.

Naturally, this has apparent practical limitation... though you might be surprised how little the limitation truly is... because we don't have experience in this mode of thinking.

R

13

Oh damn... I'm just realizing that what you said is literally true. All this time I believed that Hype imports SVG from common sources.

I'm seeing that this is a huge issue for users, and I understand.

This is indeed an unfortunate limitation (I use Affinity designer).

Perhaps I am operating on a bit of a misconception... I get that SVG is a concept and not a standard... but I assumed that there is at least some working SVG standard out there. Is this a very wrong assumption? I suppose that all of the SVG tools use a very propriatary version of SVG...

There is no doubt that this is high on the "to do" list for Hype, if it can be done at all. I saw that someone is selling an Ai converter tool...

Im no expert, but it seems that Hype is all about taking SVG and converting it to HTML 5. Perhaps that is the bridge... exporting from Ai or AD to HTML5... and then importing that into Hype?

I am truly wondering if Hype is right for me at this point... which is sad, it has such a strong set of tools... impressive results with almost no effort.

Do you see that Hype has a future more coupled, directly or indirectly, to the SVG tools out there?

14

it's got an js-Library. this can be loaded in Hype and used to control keyshapes animations.

well Hype creates the 'surf' -> its output will be viewed in a browser or webview

in the very end you'll need to get kind of expert in svg/css/js to get it all done :slight_smile: looking at the screenshots and the approaches to add kind of scenelightning