Hype Dynamic Camera

Extension Project
#4

↑ look at project
1.2.1 Refactored to use a Mutation Observer instead of requestAnimationFrame

Additional Notes:

  • The planned release on GitHub has been realized
  • Disable "Use WebKit graphics acceleration" in Hype to avoid blurry text in Safari
1 Like
#5

Wonderful extension. I love dCam and this update looks to be spectacular. Thanks @MaxZieb

2 Likes
#6

↑ look at project
1.2.2 Fixed inital update regression after switching to Mutation Observer

2 Likes
#7

↑ look at project
1.2.3 Moved the automatic application of the observer to HypeScenePrepareForDisplay

Added a new example file

1 Like
#8

The possibility of multi-camera animation is amazing!

Tremendous work @MaxZieb

1 Like
#9

CleanShot 2022-01-03 at 11.51.09@2x
CleanShot 2022-01-03 at 11.51.09@2x1200×800 310 KB

Preview:
Example_zooming_on_image.html

Download:
Example_zooming_on_image.hype.zip

I came across a small issue, that when using regular boxes instead of a symbol in Hype the transformation is slightly off duo to the way Hype reports width and height including borders. Hence, I added some CSS to create the border on the camera in this example. This CSS was added to the code base starting from version 1.2.4 and remember to avoid Hype native borders on cameras for the highest precision.

3 Likes
#10

↑ look at project
1.2.4 Added border style for IDE, HypeDynamicCamera.hideBorderInIDE, .dynamic-camera-no-border and --dynamic-camera-border

I added the border for the cameras through the extension because adding them using the Hype API introduces calculation problems (as Hype adds the border width in contrast to the default box model). Every rectangle that gets the additional attribute data-dynamic-camera also gets a border. Remove any border in Hype for most precise results. These borders are only applied in the Hype IDE. If you want to disable borders on a specific camera, just add dynamic-camera-no-border as a class. If you want to have a specific border, just define and add a class setting the CSS variable --dynamic-camera-border either as a class name or :root

.dynamic-camera-green-border {
	--dynamic-camera-border: solid green 4px;
}

I updated all the example files to use the built-in border, rather than one added through Hype.

If for some reason you want to hide borders in the IDE you can add HypeDynamicCamera.hideBorderInIDE() to Head HTML in a script tag.

3 Likes
#11

Flying through letters

As I am exploring animation concepts while playing around with this, I might as well share them here:

CleanShot 2022-01-03 at 23.55.34

CleanShot 2022-01-04 at 00.01.16

Example_fly_through_letter.hype.zip (41,1 KB)

6 Likes
#12

Preview of upcoming skew support

Playing around with parsing skew and I also replaced the one remaining Matrix calculation with a getter from the API. Also, adding support to retain the translation of the stage in a multi stage setup.

CleanShot 2022-01-04 at 15.17.56

5 Likes
Worldmap -> timeline continent
#13

This looks great! :heart_eyes:

The creative possibilities multiply. :exploding_head: :smiley:

2 Likes
#14

Hi @MaxZieb and @h_classen

I'm trying to combine the use of 'dynamic camera' and the 'drag and drop enabler'. The dynamic cam GPS interferes with the drag and drop enabler GPS. See example attached.

Is there somehow an option for them not to interfere with each other?

gameSimulation1.zip (55.1 KB)

#15

as hypes own dragcontrolfunctionality won't work correct using the camera and dd-enabler relies on it ...

but regular scaling the group should be fine.
nudgingDD.hype.zip (46,4 KB)

*only thing it'll need this nudgingfunction at the end of scaling the group

#16

Thank you Hans.

I tried the camera because I did not think I could scale the group without losing DD integrity. I appreciate it.

H

#17

___Ignore my questions. Let me do the homework first______Do I run the nudgeFunction on every animation of the wrapper, and when I reset the the wrapper position and size, do I have to reverse the nudge somehow, or just run it again?

#18

technical background: the whole setup for positionings is handled by the script onload of a scene, on resize of the window and if involved elements attributes are changed. so far so good, but if just the wrapperelements attributes change (your case) the script by default won't react ... this is why it has to be nudged to make an update ... (bit dirty by dispatching the resizeevent ...)

1 Like
#19

Thanks @h_classen. This could work. I will explore further. Thank you for the extension. I love working with it.

@MaxZieb after imagining the possibilities of using the DD enabler and dynamic camera together, is there a way there could be a 'nudge' function that will re-align the positioning after a camera move?

#20

As Hannes said there is no easy way to make it compatible. Hype Dynamic Camera was a project I picked up from a previous active community member and it is based on setting a CSS transform manually so the Hype Runtime doesn’t “know” about any of the scaling . this has some advantages but one downside is that the math for the dragging pointer alignment doesn’t work anymore. Meaning it is not compatible with the built and dragging functionality.

1 Like
#21

Funny ... Hannes is my nick by sportsmates

1 Like
#22

Thank you @h_classen and @MaxZieb. Between the two of you it is cleared up. I'm going to try and reverse engineer the camera concept and with the the nudge function I can do the drag and drop.

#23

Wow, this is amazing and just what I'm looking for to zoom in and out of Valles Marineris hi res image. Brilliant work