Adventures In Line Drawing

It's kinda my thing for Photics.TV — to use Line Drawing to create nice video intros. This was the previous example — Line Draw Option — Three Times In One Video 😄

That was tough and took a lot of time, so you think I would have quit while I was ahead. And on Monday morning, I was thinking of skipping this effect. But nope, I put in the extra hours to get it done...

…you can see it right at the beginning. I created that intro video with Hype. Even the pulsing red lights were partially done with Hype. (I used Final Cut Pro to change the color from white to red, as that's the actual color. It was a tough internal debate. I also used FCP to give the lights a bit of a glow with a blur.)

This is the adventure part of the story. I knew this one was going to be trouble, as it's more complex than the Pocket Tripod Pro and the Wallet Ninja. However, I had no idea how bad it would get.

First, my 2018 Mac Mini simply could not work with the document anymore. There were just too many vector shapes. It started to lag really bad. Lag is a softer description, this was more like beachball freezing. It certainly could not export the video.

So, I switched to my M1 Mac. It could keep up with the complexity of the Hype Document. Although, it would do this wobbling graphics thing...

However, the M1 too could not export the document. It would just get to a certain point and then freeze. What was wrong? The project would play in Safari, so why can't it just screenshot it and make the video.

That's when I wondered, hey, couldn't I do the same thing as what Hype's doing? It's basically taking a screenshot and then putting it in a video.

Unfortunately, my Mac Mini wasn't powerful enough to screen record the browser without lagging. As for the M1 MacBook Air, it's the wrong screen ratio. I didn't feel like juggling with external monitors and cables. So, to solve the lagging on the Mac Mini, I just decided to slowdown the playback of the Hype project.

To control the speed of the timeline, I added the following JavaScript code…

var x = 0;

      x = x + 0.01;
      hypeDocument.goToTimeInTimelineNamed(x, "Main Timeline");
 }, 1000);

That way, I could make a proper screen recording. I would just speed it up in Final Cut Pro — by a mere 5634% :grinning_face_with_smiling_eyes:

So, this ~20 second video clip was 20 minutes long. That's 4K too! However, this wasn't accomplished in one shot. No, that would have been easy. Instead, things like email notification would mess up the recording…


I pulled the Ethernet cable, only to be thwarted by the screensaver. But eventually, I got it to work. I'm really happy with how the video turned out.

So, what did we learn?

  1. While not new information, obviously it would be nicer if Hype could import SVG files or even auto-trace artwork. I had to manually create the line-draw effect, which takes time. (Although, since it is so difficult to create this effect, it is rare. I'm thinking that Tumult will probably make this easier one day. And when that happens, this effect will be on-par with page curls and lens flares. :grinning_face_with_smiling_eyes:)
  2. In situations like this, there's something wrong with the way Hype makes the videos from the animation. If I could get it done manually, then Hype should be better able to do it automatically.
  3. I suspect that part of the application lag has to do with screenshots. I mentioned here... Free Hype Templates 🏗 - #87 by Photics ...that I thought it was a good idea to have the option to turn off the automatic screenshot/thumbnails. Perhaps the lag is Hype trying to create a screenshot, but it can't because it's too intense.

I think this effect is something cool to mention in the next Hype Newsletter. However, I'm not sure if I'd recommend that someone else do what I just did. HA HA!

I think the effect looks great though. That's why I used it twice though, once at the beginning and again at the end. Heh, it's a 16 minute video, so maybe you forgot about it from 15 minutes ago. :blush:


Do you think you could send us the .hype document ton investigate the issues you are seeing? Thanks!

For those following along at home, I sent over the Hype document. Hopefully Tumult can improve this feature, as it's a really nice effect. :slightly_smiling_face:


Got it thanks! I'll follow up with you directly; from the initial investigation it looks like a 3D rotation on a specific vector shape is causing dramatic issues that can lead to the entire system (or at least windowserver) hanging for periods of a time.


Cool, so I think I'll use the effect in my next video. I'm planning to review a router.

After that, probably another Hype video. :slightly_smiling_face:

1 Like

Wow, I knew that line drawing was special from when I first saw it added to Hype. The latest Photics.TV video is more proof…

This video took longer than expected. So, I didn't put as much attention into the thumbnail. I was hoping that YouTube would automatically select an interesting frame from the video, but it didn't seem to be good enough at catching attention. That's when I created two thumbnails.

Version #1

Version #2

I went with the second one because I think it really matches the blueprint theme of the channel. It looks cleaner, more professional. It really matches with the thumbnail from the SteelSeries Nimbus+ review video — very nice!

The good news is that I'm developing a style.
The bad news is that this takes WAY longer. Ha Ha! :grinning_face_with_smiling_eyes:

Which Thumbnail Is Better?
  • Version #1
  • Version #2

0 voters

I voted version 2, but I like the little hey speech bubble from the first one.

I would recommend using both at different times early on and see which thumbnail attracts more views. Discussed here:

I've been switching them, no real effect. HA HA! :grinning_face_with_smiling_eyes:

1 Like

I just did another one…

It was way easier than last time. It makes me wonder if Flowcharts could be made with Hype. With something like Joints, it might work.


I did it again…

This one was sooooo easy, as it's just rectangles/squares with rounded edges and a letter — very nice! I'm actually thinking of ways to use Hype to automate content creation. It's just I've been playing catchup the past couple of weeks. Part of it was the difficulty in updating widgets. The other part is Apple Arcade. :grinning_face_with_smiling_eyes:

1 Like

…and again

This one is amazing! It was tedious to create, but it turned out great. It was smart to put the MacBook Air on an angle. At first I didn't make the keys rounded, but then I did the extra work. It looks so much better. The best is the little joke, how the word "courage" and the arrow is drawn in, very nice!


Wow that's great! Is each key unique or did you do a 3D transform/perspective?

Any chance you'd eventually share the .hype file? :smiley:

1 Like

Heh, that might have been quicker. Each key is one element. They're hand drawn.

There's not much to show here. It's a vector shape, where the border line goes from 0% to 100%. Take that and repeat it around 100 times. :smile:

1 Like

I added some sloppy handwriting to this video… Four iPhone Time-Lapse Photography Lessons Learned — How To Create Better Time-Lapse Videos. 📷📱 - YouTube …with the Hype line drawing tool. :smile:

1 Like

Via an iPad with sidecar/luna display, or mouse? :slight_smile:

Just a mouse. :smile:

1 Like

Here's another video… Creating 3D Models Through Photogrammetry (Plus: Dolly vs Susan) - YouTube …which focuses on HelloPhotogrammetry from Apple. There were seven Hype drawing scenes in this video. It's a lot like a whiteboard with a blueprint color scheme. :smile:

1 Like

Thanks for posting that - interesting to see this experiment since I was meaning to play around with the new object capture APIs (for funzies, not for Hype).

When I did photogrammetry in the past I had used my microwave plate and coaster ring as a lazy susan.

Also I used the Scandy Pro app which you can just wave over object with the iPhone, though keeping it steady on the lazy susan definitely provided superior results.

1 Like