dCam - Dynamic Hype Camera using Hype 3.5 features v1

Luckyde · September 9, 2015, 8:40pm

Hey guys,

Months ago I created an alpha for a camera object i posted on the forums

which would be able to simulate an after effects camera using hype. Well with Hype's new functionality I got it!

This symbol can be copy pasted into a document and as soon as it does the scene will resize itself to it's dimensions. When you animate it the stage will animate and it uses request animation frame so that coupled with the new engine makes it very smooth to work with!

Current features:

Pan/Zoom/Rotate camera to make the stage do the same
ScaleX/Y
Filter Effects
Opacity changes on it reflect the stage's opacity
Multiple scenes are supported
it doesn't matter which scene you place it into it will find the scene it's in as long as the class name stays and rejigs the code.

I'm sure there are bugs still but I worked 2 months on it so far and it's now in a stable place thanks to @jonathan's help with the rotation i couldn't solve before so i'm very happy and proud of it

Give it a shot and let me know your feedback!

jonathan · September 9, 2015, 9:57pm

This is an amazingly innovative way to solve the issue of Hype not having a built-in camera object. It works extremely well and effortlessly from the perspective of an animator. When @Luckyde emailed me about it I was giddy as a schoolgirl to see Hype used in this manner. Well done!

On a side note, I noticed that the animation was exceedingly slow. I tracked it down to filter effects being applied and calculated unnecessarily. I’ve fixed this, and it will be much faster in the next beta of Hype.

DBear · September 9, 2015, 9:58pm

Nice work @Luckyde good things do come to those that wait! So says Guiness!!

D

Luckyde · September 9, 2015, 10:03pm

Hahah thanks guys! Just wanna build tools to improve the base and hopefully this helps!

Oh so if i disable the webkitfilter it will run faster? I can disable them for now if it means improving the speed. Otherwise awesome, will try it in the new beta to compare!

jonathan · September 10, 2015, 1:05am

The problem was even where filter values are their default (even if you reset to defaults) we'd still write filter code, and it looks like WebKit instead of ignoring would spend a lot of time trying to apply them. Hype is now smarter about not applying filter CSS if it doesn't need to be there (within the scene editor, this was not a problem in the browser). So unless you remake your elements from scratch there's not much you can do until the new beta.

Luckyde · September 10, 2015, 1:43am

Oh ok makes sense, cheers!

Luckyde · December 9, 2015, 8:46pm

BUMP!
Now that the new Hype is out everyone please feel free to use this camera! It will work in all of your files
Thanks

jonathan · December 12, 2015, 1:38am

Just wanted to double endorse this project - it is trés cool.

Cescomare · December 12, 2015, 4:40pm

OMG man, this is amazing!!!

3saul · December 16, 2015, 7:53am

Thanks for sharing…

MaxZieb · October 17, 2018, 9:24pm

Hello Everybody,

even though people haven’t been commenting much this is a great project and I updated the code a bit.

v1.1

Fixed the selection scopes to only focus on the current document and stage when selecting elements
Fixed the requestAnimationFrame to cancel when the scene is changed
Streamlined the query process with querySelector and more efficient scene selector


// Dcam by Lucky || LuckyDe.com || v1.0 
// modified by Max Ziebell  || v1.1

var gP = hypeDocument.getElementProperty,
	hD = hypeDocument,
	stage = hD.getElementById(hD.documentId()),
	cam = stage.querySelector(".dCam"),
	scene = stage.querySelector('#'+hD.documentId()+' > .HYPE_scene[style*="block"]'),
	stageW = gP(scene, 'width'),
	stageH = gP(scene, 'height'),
	camMatrix, scaleW, scaleH, originX, originY, translateX, translateY, angle, camL, camT, camH, camW, camsX, camsY, realW, realH, realL, realT, rAF;
	cam.style.visibility = 'hidden';
	cam.style.zIndex = scene.style.zIndex;

function setupCam() {
	rAF = requestAnimationFrame(setupCam);
	camMatrix = new WebKitCSSMatrix(window.getComputedStyle(cam).webkitTransform)
	camL = gP(cam, 'left');
	camT = gP(cam, 'top');
	camH = gP(cam, 'height');
	camW = gP(cam, 'width');
	camsX = gP(cam, 'scaleX');
	camsY = gP(cam, 'scaleY');
	angle = -Math.atan2(camMatrix.b, camMatrix.a) * (180 / Math.PI);
	realW = camW * camsX;
	realH = camH * camsY;
	realL = (camL - (realW - camW) / 2);
	realT = (camT - (realH - camH) / 2);
	originX = (realL + (realW / 2));
	originY = (realT + (realH / 2));
	translateX = (originX - (stageW / 2)) * -1;
	translateY = (originY - (stageH / 2)) * -1;
	scaleW = stageW / realW;
	scaleH = stageH / realH;
	scene.style.transformOrigin = scene.style.WebkitTransformOrigin = originX + "px " + originY + "px";
	scene.style.webkitTransform = scene.style.transform = "translateX(" + translateX + "px) translateY(" + translateY + "px) scaleX(" + scaleW + ") scaleY(" + scaleH + ") rotateZ(" + (angle) + "deg)";
	scene.style.webkitFilter = cam.style.webkitFilter;
	scene.style.opacity = cam.style.opacity;
	if (scene != stage.querySelector('#'+hD.documentId()+' > .HYPE_scene[style*="block"]')) {
        cancelAnimationFrame(rAF);
    }
}
setupCam();

Nice work @Luckyde

jonathan · October 17, 2018, 11:50pm

(just wanted to give a shout out on how cool this is and I’m glad you’ve made some improvements to the original!)

Luckyde · October 18, 2018, 12:29am

Great job Max! Sorry I never updated this, I moved to a slightly dif position type of animator position and never got the time to update my hype knowledge so I appreciate you updating this!

petester · October 18, 2018, 2:14am

This is pretty intense, a camera system in hype who would’ve thought? What were you trying to achieve when creating this for hype? Im just wondering where/what can I apply this to, any ideas? Its def cool.

MaxZieb · October 18, 2018, 7:05am

A camera system is the actual system to frame a scene. We instead use an inverted system in Hype. Much like choosing to see the live camera view if we had an actual camera system. Meaning we move all the objects to focus on a particular one or (if grouped) move and rotate a whole bunch of layers/objects so that in a intense zoom most of them are off screen and it’s labor intensive. A camera system keeps you in a birds eye overview when choosing the framing. Here are some pro’s and con’s on the system in Hype in it current implementation:

Pro

Keep an overview of your scene
frame your shots independent of the Hype editor viewport
Use one scene as a setting and plan multiple “shots” in it (establishing, dialog etc.)
Just have a wild camera movement like in some animated type poems

Contra
… in the current Implementation as in general
there isn’t much against such a system

One can’t switch to a live preview in the IDE (needs publishing)
One has to rely on the browser to manage performance (off screen objects etc.)
It can be hard to achieve one to one pixel

Potential to explore and future option of this script

Set the frameing to a specific group (and it’s children) to enable camera and traditional frameing in one scene (this would enables camera movement with independant titles for example).
Options to enable and disable the camera system in the same scene… I added this to scene changes already but not with a specific function.
Maybe an easier way to resize the camera dimensions to match the scene (if not 1920x1080). The code already allows for this (just resize the outer bound in the dCam symbol content). But lot’s of other stuff in there like title save and color control.
Unprobable: Get some parallax going and depths.
Highly unprobable: Get a live preview in the IDE running.

hyperthetical · October 18, 2018, 11:35am

call me an idiot but I can’t figure out what this is supposed to do. I downloaded the file and it just animates into a black scene in my browser. Then I pasted it into a scene with stuff in and … nothing happened on preview.

Maybe there’s a ton of stuff about Hype I need to learn before I can apply this. Can anyone clue up a newbie?

It’s not what I expected from a “camera system” but then maybe that’s my experience as a semi-pro photographer causing me issues.

MaxZieb · October 18, 2018, 2:57pm

The download of a functioning example is up there dCam - Dynamic Hype Camera using Hype 3.5 features v1

There is not much going on in the example just a square and rectangle but you should get the idea… Here is a explanation from the good old Flash days…

BTW just to appreciate what modern animation like Hype, formerly Flash and Toon Boom is actually solving… look what Walt Disney had to accomplish without computers just to get a parallax going https://www.youtube.com/watch?v=YdHTlUGN1zw

hyperthetical · October 18, 2018, 3:35pm

as I said, I downloaded it. And, as I said, I didn't get the idea.

But with the video, I got everything all at once... and realised it's lovely but not something I need. Thanks for sharing Max.

petester · October 23, 2018, 1:45pm

https://lab.hakim.se/zoom-js/

If you can do this that be great.

MaxZieb · October 24, 2018, 1:05pm

Well just write a little script that animates the dCam to the position of an element that has been clicked on. I am guessing around 7 lines of code but that is independent of the actual dCam or actually vCam code. Hint: Use hypeDocument.setProperty on the dCam container…