Hype WebGLCanvas

Extension Project
1

20190812-s6mg0
20190812-s6mg0.jpg1108×344 47.5 KB

This little experiment could become an extension but is currently more a demo. It uses the work of the amazing Evan Wallace from back in 2011. It creates a WebGL Canvas and offers some neat texture base manipulations. The texture can even be updated on the fly.

Preview it here:
CanvasWebGL.html

Download it here:
CanvasWebGL.zip

Versionhistory
0.8 (Alpha) Initial release under MIT-license

Hope you like it.

5 Likes
2

It is pretty nifty setting the On Drag to Control Element Position for the ellipse or to have it use physics.

1 Like
3

Here you go… drag is fun (with less effects) in this case … but animation was more of an side effect. I was after all the high performance effects listed here that are also included. I’d love to expose the filters over dataset. Using them in JS it’s already all possible.

CanvasWebGL-Drag.html

2 Likes
4

Thanks for the link to Evan’s Demo, etc. very interesting material as is your latest “project” above.

(BTW: Do You ever sleep? :upside_down_face:)

5

Wow! Very nice Max.
That’s what I wanted to do last weeks.
Let’s see what is possible in the future with that.
Thanks for sharing this :vulcan_salute:

1 Like
6

Your welcome… if you want to have an in depths hands on tutorial look at …

After watching it you will understand why I went the easy route and used Evan Wallace glfx.js.
Still very interesting to see how deep the rabbit hole is actually becoming with webgl.

2 Likes
7

Check out this Berlin Startup and tool…

1 Like
8

Cables now has great tutorials online

Here ist the link to the Playlist if you don’t want to watch it on the forum and rather on youtube itself.

9

BTW we need a Playlist like that for Hype! :slight_smile:

1 Like
10

I’m sorry, but cables just blew my mind! I really hope we can incorporate this tool into Hype. Waiting for my login confirmation from them.

1 Like
11

So great effects…:grinning:

Two points please:

  1. It would be great if it support multiple images, for now, it seems only support one by assigning:
    data-canvas-webgl true.

2.I find it does not work in responsive layouts, but it works well in single PC layout. It would be great if WebGLCanvas support responsive layout too.

Thanks

12

@alexlii, I provide all my code as is. If you need custom work you need to hire a developer. I sometimes do request but on any project you encounter you ask for more. Use what you can and try to learn as much as you can as it will give you great independence down the road of your career.

1 Like
13

Hi Max,

Thanks, I will if I need some work in production requirement, always thanks for your work and kind suggestions.

Nice day.

14

Wow…Impressive!

It seems eating lots of CPU, maybe stop rendering on exit viewport?

15

Go right ahead… code is an experiment and under the MIT license.

It uses requestAnimationFrame so the browser is in charge of controlling the firing of the frames. Meaning it already pauses if the OS needs power elsewhere like when switching tabs etc. But thats up to the OS and Browser.

If I touch this again I would probably now use Hype AnimationFrame as it deregisters any running requestAnimationFrame animations when switching scenes.

16

Hey there!
I’m new to Hype and so far I really like what I see!

Is AnimationFrame built-in API please?

17

Hype is based on HTML5. So it's not an API from Hype itself, but from the HTML5 Layer below Hype.

18

WOW!!! Thanks :+1:

19

Looks really charming...:grinning:

That would be great...really expect upgrade.

20

Hype AnimationFrame is out here …

Just use it instead of the regular request animation frame in the example.