Babylon~cinematics

Demos and projects
81

p5.js looks GREAT!

I will probably deepdive someday.

82

IMPORTANT

Found a great animation syntax.

Had to dig for it. Very obscure. Hidden. Not explained on web.

It was necessary to “instrument” a web cinematic.

It uses “Inbetweening” syntax underneath, (CPU ok) and works (better than) ok.

Proof shortly.

EXAMPLE: interpolates 4 things simultaneously: x, y, z, with 1 rotation.

anm.({FROM},{TO});

x: 0 - 1
y: 10 - 0
z: 100 - 1
anything: 3.14 - 0

 anm({x:0,y:10,z:100, anything: 3.14})
 .anim8({x:1,y:0,z:1,anything:0},
 {bunch:false,dur:8000,ease:'swing',
 idx: function(now) {
    hero.position.x = this.x;  //<-- this.x is the interpolation num assigned to BABYLON.position.x
    hero.position.y = this.y;
    hero.position.z = this.z;
    hero.rotation.x = this.anything; //<-- interpolate multiple things simultaneously with PRECISION-.
 },done:function(){ //important, simple syntax.
}});

ALL IN ONE-LINE OF CODE!

Being COMPACT is key - to scale up.

It is called ANM~PATTERN-.

REQUIREMENT: anms defined ALL IN ONE LINE OF CODE -so they can move around and be instrumented. Which then results in fine-tuned animations at scale.

This is important to me. I had to have it. And I want to share-back. Happy Holidays!
NOTE: item for shelf, not dustheap. lol. : )

EXAMPLE: moving a camera and focus simultaneously:

 $({cx:initCAMPOS.x,cy:initCAMPOS.y,cz:initCAMPOS.z})
 .animate({cx:endCAMPOS.x,cy:endCAMPOS.y,cz:endCAMPOS.z
 },{queue:false,duration:8000*nx.RUNTIME,easing:'swing',
   step: function(now) {
       if(nx.cinemaStop){ $(this).stop(); console.log('stopped'); nx.spaceSeqIdx[1]={on:1}; return;}
          nx.camz.freeCam.position.x = this.cx;
          nx.camz.freeCam.position.y = this.cy;
          nx.camz.freeCam.position.z = this.cz;
          nx.camz.freeCam.setTarget(new BABYLON.Vector3(this.fx,this.fy,this.fz))
      },complete:function(){
       //SEQUENTIAL-ANMS-.
} });

Additional features (above): STOP, FFWD, and SLOWMO, as well.

CPU .

Could it be GPU?, as BABYLON.ANM;

Idk. My code is useless. But the concept is not.

BABYLON could make it cosmic.

Animation-Factory

BABYLON.anm({from},{to},idx=>,done:=>});

  • seems cool2me. <-shrug->
  • it is unique

(ping) @Deltakosh waddya think? : ]

Does aFalcon have ping-power? : )

BABYLON Animation Factory 2020.

It’ll happen.

:eagle:

(NOTE: I try to say clear concepts, good words, few jokes, re-write often. Working on better writing - still. : )

83

UPDATE:

ACOZMOSTORY: MOVIE~GAME~BOOK~APP. 1st 3D-WebAdventure. 2020.

:eagle:

1 Like
84

Nice @aFalcon. Sounds like some good figuring out going on there.

I decided to park simultaneity for the moment… so everything in my engine works in sequence. Move character A, then character B, etc. Not the most cinematic, but keeps it simple. At least for first version.

On that note, I’m aiming for a Jan V1 release! Am needing to take all kinds of shortcuts. V1 is gonna be really simple. Probably a good thing.

1 Like
85

Yes, I had to adopt PRINCIPLE of SIMPLICITY to get to the finishline also.

86

NOTES:

CINEMATIC~PRINCIPLE: Top~Priorities can be easily mis-aligned.

EXAMPLE:

  • STORY and EMOTION are top priority (for cinematics).

  • because STORY and EMOTION are HOOKS, in addition to LOOKS.

87

CINEMATIC~META~PROCESSES

To make a CINEMO, there are META~PROCESSES, that are very hard to describe.

EXAMPLES:

MULTI~POINT~EDITING

  • must be able to start at ANY POINT in the entire movie.

  • because that is the only way to have EFFICIENT EDITING.

  • (SLOMO/FASTMO vImportant) (above).

MULTI~INSERTION and MULTI~ORDERING

  • must be able to MOVE animations around easily.

  • that means ADDITIVE such as expanding an ANM at any point. Or compress.

  • and in SEQUENTIAL ORDER or SIMULTANEOUS

  • if ANMS cannot be added and moved around easily, cinematics is impossible.

  • cinematic code needs MAXIMUM~FLEXIBILITY. PRINCIPLE: CINEMATIC~FLUIDITY.

ATOMIC~ANMZ

  • ANMZ tightly packed mini-modules

  • create ANMZ with ZERO-DEPENDENCIES. So they can move around.

  • 1 line of code ANIMATION SYNTAX.

  • then we feed ANM into ANIMATION~FACTORY-.

88

Lol.

PRINCIPLE of BOTH: GOOD~LOOK and GOOD~STORY-.

1 Like
89

MODE-FLAG-FACTORIES

rendering functions that animate multiple states, in a single function.

modeFlagFactory = function(mode){}

90

@withADoveInOneHand, thank you for reading.

I hope this helps you in whatever it is that you are working on.

If you want to talk CAMZ or whatever.

I code BABYLON ALL DAY/ALL NIGHT (24/7), so it seems.

:eagle: : )

1 Like
91

I thought you went full wingnut for a second.
I will get with you.

1 Like
92

DM ok.

Like https://treha.online/

:eagle:

93

HERO JOURNEY “monomyth” DESIGN PATTERN by Campbell and Vogler.

The concept “Hero Journey” was a study by Joseph Campbell, that turned into a DESIGN PATTERN by Christopher Vogler, who inspired Hollywood, in the 80’s, of how to make better movies.

Which STARWARS was the first test, by his colleague/friend George Lucas.

As you know, DESIGN PATTERNS can be applied to any medium.

So, the use of Hero Journey Pattern in BABYLON to tell BETTER STORIES, is a good idea.

Here is how:

Campbell studied ALL the Hero Journey Myths around the world and realized they shared similar aspects. Then Vogler thought, well if these PATTERNS make traditional stories better - would they make movies better?

And they did.

It is NOT a STRICT SCRIPT, but more of a RECIPE - to make stories more INTERESTING.

image
A recipe to make the STORY ENGAGING.

That is what you want, yes? Then, this is THE PATTERN to get YOU there.

Use a few, to ENHANCE your PLOT. There are many FLAVORS. Be flexible.

image
image1000×826 245 KB

EXAMPLE:

  • CALL TO ACTION: clear call to go do the hard work, usually with a reluctance, then unavoidable.
  • THRESHOLD: clear differences between this world and the new world. A clear point of no return.
  • MENTOR, ALLIES, CHALLENGES: ordeals for your hero to overcome, with a support group is better.
  • DEATH & REBIRTH: you might want to kill your character - with a clever way of bringing them back(stronger).
  • GROWTH: the most important of all ingredients is to show how your character GROWS into a HERO.

Why show the GROWTH of a COMMON character into a HERO?

Because it gives HOPE to the rest of us.

And more!

The old world is set in its ways ~ but the new world is how we choose to see it.

And that is how a Hero is made.

:eagle:

2 Likes
94

So,

I solved WebCinema with BABYLON (happy new year)

  • AnimationFactory, with “scripted” Atomic~ANMZ.

  • 3DWebPipeline end-to-end.

  • low-poly episodic~cartoonz for wurld~wild~web

  • new social models, market partnerships &

  • new technologies

  • 1st Vid this Jan.

WebCinema ~ powered by BABYLON ~ 2020.

DM open, enjoy the show.

:eagle:

2 Likes
95

DETAILS:

Last 3 years (plus)

  • I built a space cartoon. : )

GENERAL-AUDIENCE

(is BIGGEST audience)

NewYearz~GOALZ:

  • start a BLOG on ORDEALS, HOW2’s, and
  • GITHUB stuff
  • for #JS #DEVs.

Call it: aFalcon’s Space Case (or whatever).

  • Hit SUBSCRIBE 2020

  • creative~content

`-~-~-~-~-~-~-~-.

:eagle:

2 Likes
96

DM me a link brother! I waNNA SEE

1 Like
97

AWESOME @Pryme8, will do, onReady().

pic- removed

FINAL~SHOWDOWN.

2 Likes
98

UPDATE:

Multiple new ANIMATION techniques.

  • one related to Text, called ANMTXTs-.

  • another with ACTORS and IMPOSTORS-.

  • WITH dynamically loaded animations.

  • finished FINAL-SHOWDOWN

:eagle:

1 Like
99

3 CINEMATOGRAPHY TECHNIQUES for BABYLON.

Cinematics101 https://www.youtube.com/watch?v=BXAr2yiYCV4

SpikeLee on what I’m up to: https://www.masterclass.com/classes/spike-lee-teaches-filmmaking?utm_source=Paid&utm_medium=Youtube&utm_campaign=SL&utm_content=Video&utm_term=Aq-Prospecting&gclid=CjwKCAiA6vXwBRBKEiwAYE7iS2W9lYdPBKj2u6uxc4WsMT0l6eIXdWuOAu0Al6dyMpkd9P655LYX1RoC6zQQAvD_BwE

TLDR: It’s great. No, it is really gr8.

THREE CINEMATIC CAMFX in BABYLON:

  1. called “DUTCH ANGLE” on CAM1:

           *nx.scene.CAM1.rotation.x = 0.05;*

  2. RE~POS~CAM can also re-position TIME.

      - Use that technique, to view EXPLOSION from multiple angles. Going BACKWARD in TIME, revisiting simultaneous ACTION. It is great.

  3. RE~POS~CAM, also, can replace IMPOSTOR/ACTORS, wtth ZERO~GLITCH.

Jump in.

COMING~SOON

100

Here is an EXAMPLE of ANIMATION~FACTORY:

nx.explosionFactory = function( factory ){
	if(factory==='firstBOOM'){
       //ANM
	} else if(factory==='secondBOOM'){
       //ANM
	} else if(factory==='thirdBOOM') {
       //ANM
	}
}

There are more…

2 Likes