Making Interactive NFTs - #01 - AIR BALLS
Channel: ZIM LEARN
Date: 2022-04-20

Welcome to a new series called Making Interactive NFTs.  We have made dozens of interactive NFTs on the Tezos blockchain on Teia (from hic et nunc) and (fx)hash.  (These could be moved to Ethereum with BeyondNFT.)  The interactive NFTs are made with the ZIM JavaScript Canvas Framework at https://zimjs.com.  You can read about NFTs and minting for Teia and (fx)hash at https://zimjs.com/nft including articles, videos and templates.  

In this episode we look at making AIR BALLS which can be found at https://teia.art/DrAbstract. 

The series will take you through the JavaScript code for the NFTs.  You can see the https://zimjs.com/learn section for more about ZIM to code creativity!  Note the ZIM Basics video series there too.  All the best, and please join us at https://zimjs.com/discord or https://forum.zimjs.com for questions and community!

00:00 start how to move circles by cam example video https://youtu.be/z_jn6wkX6Ec?si=McXIBWYdkvNZVvjD
01:00 example you can find on https://teia.art/objkt/629326
07:00 new CamAsk() implemented because needed for iOS
08:00 explaining ZIM code is for the html canvas STYLE
08:20 ZIM DOCS STYLE https://zimjs.com/docs.html?item=STYLE
09:37 new Pane() https://zimjs.com/docs.html?item=Pane group with ZIM DUO technique
12:10 new CamAsk()
12:30 scripts are now possible with type = module
16:36 if (yes) do a function
16:40 new CamMotion() capture your body that moves https://zimjs.com/docs.html?item=CamMotion
16:52 examples of AIRballs https://teia.art/objkt/629326
17:25 CamMotion parameter VisualizerObject and more
18:20 ZIM version VEE (5) values makes ZIM powerful for example random and min:,max values
20:10 color array with "htmlcolorname" between brackets possible
21:40 add title new Label("airballs")
22:00 FULL mode makes the cam over the full width and height of the browser
23:18 FIT mode on a fixed size of the app
24:25 title set on the frame FULL left top
25:40 difference between var (variable) const (constant) let (let's make a name for the object)
28:00 sca(le) alp(ha) .ble(nd) modes examples on https://zimjs.com/docs.html?item=ble
28:11 .change() method to turn off
30;00 you can choose for the name slider or e.target when the event is set
30:50 .wire() is also possible https://zimjs.com/docs.html?item=wire
31:40 new version of ZIM ZIM 014 https://zimjs.com/zim
33:06 version ZIM CAT https://zimjs.com/cat/wire connects components values
34:07 example slider that wires the alpha
34:50 other NFT examples on https://zimjs.com/examples.html#nft