ZIM LEARN
ZIM LEARN
  • 783
  • 214 994
ZIM Explore! 90. Doctor Abstract Site! #JavaScript #Canvas #threejs #VR #TextureActive ZIM #ZIMjs
Here we explore the new Doctor Abstract site chronicling the last 10 years of creativity with stories, puzzles and more! doctorabstract.com - come on and visit! The site uses ZIM TextureActive to add 2D interactivity to 3D in three.js. It also features ZIM Pages to swipe between pages and ZIM Scrambler for making puzzles.
Please come and join us at forum.zimjs.com or zimjs.com/discord - we would love to answer any questions.
00:00 start
00:16 showing docterdanzen.com
06:09 SOUP makers: images made with AI
07:50 explaining ZIM three.js TextureActives
09:07 ZIM TextureActive on a new Panel() in three.js
09:26 T-key lets you toggle and see the different ZIM objects with pages
11:34 how we will explore the long code
12:30 start explaining html page
14:10 assets pictures and sounds mp3 saved on cloudfront
16:30 side: front: explaining the front TextureActive page
18:00 pages with objects
19:22 social media buttons zimjs.com/tiktok zimjs.com/x
24:09 side:back: puzzle scrambler with emitter
26:18 if puzzle is complete, the chop() picture removing to original picture
27:33 toBack functionality button
28:59 animating the rotations of the cube
30:04 import Three Helper module with VR (Virtual Reality) + XR (eXtended Reality)
31:20 showing 3D cube all sides how it turns to the sides
32:03 using VR: coding everything in a holder
33:36 more videos about coding ZIM TextureActives with three.js on zimjs.com/015
34:03 preparing the logo 3D side boxes
34:40 scene 3D logo with OrbitControls
35:36 TextureActives loading with VR need a 1 at the end of the code
36:33 if you are not using panels three.makePanel()
37:40 front, side and back are all made with makePanel() each with a TextureActive
38:53 navigation
40:35 dispose
40:57 playing sounds must be timeout set always when going through pages fast
42:23 STORIES (first episodes, more will come)
43:18 DAN ZEN museum danzen.com
44:22 more stories for example NFT's zimjs.com/nft will come
45:00 join forum.zimjs.com or discord.zimjs.com
Переглядів: 49

Відео

ZIM Explore! 89. 3D Maze! #JavaScript #Canvas #threejs #maze #TextureActive ZIM #ZIMjs
Переглядів 6014 днів тому
Here we show how to make a maze inside three.js using ZIM TextureActive - with the three helper module and the physics helper module. Please come and join us at forum.zimjs.com or zimjs.com/discord - we would love to answer any questions.
Hamilton Opticks Group at Factory Media 20th
Переглядів 52Місяць тому
Presented abstract fish animated with ZIM by wiggling Bezier points of Blobs. Also added sound reactive bubbles. What a cool event - opticks.ca/ zimjs.com/lights/factory/ if you resize window then refresh app - also press to get mic access.
Ring Maze!
Переглядів 142Місяць тому
A three.js cylinder with ZIM TextureActive 2D interactivity on 3D textures. Using ZIM Physics (Box2D) and our special wall technique for the maze - this could also be any hand-drawn maze!
Making Educational Games with ZIM - E learning apps on the Canvas with #ZIMjs
Переглядів 903 місяці тому
Making Educational Games with ZIM - E learning apps on the Canvas with #ZIMjs
ZIM Explore! 88. Sockets in NodeJS NPM #JavaScript #Canvas with ZIM #ZIMjs
Переглядів 1094 місяці тому
ZIM Explore! 88. Sockets in NodeJS NPM #JavaScript #Canvas with ZIM #ZIMjs
All you need to make HTML 5 Games #4. Tile Game Tutorial
Переглядів 3004 місяці тому
All you need to make HTML 5 Games #4. Tile Game Tutorial
All you need to make HTML 5 Games #3. Falling Game Tutorial
Переглядів 3164 місяці тому
All you need to make HTML 5 Games #3. Falling Game Tutorial
All you need to make HTML 5 Games #2. Side-scroller Game Tutorial
Переглядів 3184 місяці тому
All you need to make HTML 5 Games #2. Side-scroller Game Tutorial
All you need to make HTML 5 Games #1. Isometric Board Game Tutorial
Переглядів 1,3 тис.4 місяці тому
All you need to make HTML 5 Games #1. Isometric Board Game Tutorial
ZIM Explore! 87. Sprites for Kids - without Scratch! #JavaScript #Canvas with ZIM #ZIMjs
Переглядів 1165 місяців тому
ZIM Explore! 87. Sprites for Kids - without Scratch! #JavaScript #Canvas with ZIM #ZIMjs
ZIM Bubbling 206. New Forum on Discourse #JavaScript #Canvas
Переглядів 495 місяців тому
ZIM Bubbling 206. New Forum on Discourse #JavaScript #Canvas
Can you solve Vault 8?
Переглядів 1355 місяців тому
Can you solve Vault 8?
ZIM Explore! 86. NPM - Canvas, Vue, Svelte, React and Angular #JavaScript #Canvas with ZIM #ZIMjs
Переглядів 2016 місяців тому
ZIM Explore! 86. NPM - Canvas, Vue, Svelte, React and Angular #JavaScript #Canvas with ZIM #ZIMjs
ZIM Explore! 87. NPM - 3D, Physics and more in Svelte... #JavaScript #Canvas with ZIM #ZIMjs
Переглядів 1376 місяців тому
ZIM Explore! 87. NPM - 3D, Physics and more in Svelte... #JavaScript #Canvas with ZIM #ZIMjs
ZIM Explore! 84. ShaderToy Shaders for the #JavaScript #Canvas with ZIM #ZIMjs
Переглядів 836 місяців тому
ZIM Explore! 84. ShaderToy Shaders for the #JavaScript #Canvas with ZIM #ZIMjs
ZIM Explore! 85. Vertex and Fragment Checkerboard Shader for the #JavaScript #Canvas with ZIM #ZIMjs
Переглядів 346 місяців тому
ZIM Explore! 85. Vertex and Fragment Checkerboard Shader for the #JavaScript #Canvas with ZIM #ZIMjs
ZIM Explore! 83. Basic Shaders for the #JavaScript #Canvas with ZIM #ZIMjs
Переглядів 796 місяців тому
ZIM Explore! 83. Basic Shaders for the #JavaScript #Canvas with ZIM #ZIMjs
ZIM Bubbling 205. Eight new exciting features #JavaScript #Canvas
Переглядів 927 місяців тому
ZIM Bubbling 205. Eight new exciting features #JavaScript #Canvas
ZIM Bubbling 204. Make Great Instagram Shots with Threshold! #JavaScript #Canvas #Threshold
Переглядів 457 місяців тому
ZIM Bubbling 204. Make Great Instagram Shots with Threshold! #JavaScript #Canvas #Threshold
ZIM Bubbling 203. Speech Recognition and Talking! #JavaScript #Canvas #Speech #VoiceRecognition
Переглядів 847 місяців тому
ZIM Bubbling 203. Speech Recognition and Talking! #JavaScript #Canvas #Speech #VoiceRecognition
ZIM Bubbling 202. Normalize and Ratio makes for Amazing Animations! #JavaScript #Canvas #Animation
Переглядів 417 місяців тому
ZIM Bubbling 202. Normalize and Ratio makes for Amazing Animations! #JavaScript #Canvas #Animation
ZIM Bubbling 201. Emitter Configurator for Perfect Particles! #JavaScript #Canvas #Emitters
Переглядів 467 місяців тому
ZIM Bubbling 201. Emitter Configurator for Perfect Particles! #JavaScript #Canvas #Emitters
ZIM Bubbling 200. Shaders on the 2D Canvas - GLGS Fragment and Vertex #JavaScript #Canvas #Shaders
Переглядів 767 місяців тому
ZIM Bubbling 200. Shaders on the 2D Canvas - GLGS Fragment and Vertex #JavaScript #Canvas #Shaders
ZIM Bubbling 199. ZIM 016 is Live! #JavaScript #Canvas #Shaders #Emitters
Переглядів 667 місяців тому
ZIM Bubbling 199. ZIM 016 is Live! #JavaScript #Canvas #Shaders #Emitters
Process of bringing Shaders into ZIM Canvas Framework
Переглядів 687 місяців тому
Process of bringing Shaders into ZIM Canvas Framework
Threshold Filter app made in 2 hours with ZIM - Code Creativity ZIMjs
Переглядів 348 місяців тому
Threshold Filter app made in 2 hours with ZIM - Code Creativity ZIMjs
Happy New Years from ZIM - Shaders in ZIM coming in soon!
Переглядів 438 місяців тому
Happy New Years from ZIM - Shaders in ZIM coming in soon!
ZIM Explore! 82. Customizing #Components on the #JavaScript #Canvas with ZIM #ZIMjs
Переглядів 758 місяців тому
ZIM Explore! 82. Customizing #Components on the #JavaScript #Canvas with ZIM #ZIMjs
ZIM Editor - Looking at Lists! Education tool for learning and teaching the JavaScript Canvas
Переглядів 938 місяців тому
ZIM Editor - Looking at Lists! Education tool for learning and teaching the JavaScript Canvas

КОМЕНТАРІ

  • @karelrosseel
    @karelrosseel 27 днів тому

    cool projections! are the files online? 🎉

    • @ZIMLEARN
      @ZIMLEARN 26 днів тому

      zimjs.com/lights/factory/fish.html - refresh window if resizing, press on screen to accept mic

  • @user-dw4us1kp5n
    @user-dw4us1kp5n 29 днів тому

    Супер! 🎉🎉🎉

  • @user-dw4us1kp5n
    @user-dw4us1kp5n Місяць тому

    Great 🎉🎉🎉

  • @user-dw4us1kp5n
    @user-dw4us1kp5n Місяць тому

    Отлично! 🎉🎉🎉

  • @user-dw4us1kp5n
    @user-dw4us1kp5n Місяць тому

    Супер!!!

  • @user-dw4us1kp5n
    @user-dw4us1kp5n Місяць тому

    Это лучший движок! Спасибо❤❤❤

  • @ZIMLEARN
    @ZIMLEARN Місяць тому

    In the video code where we loop through the colors and each time get (color, i) we used colors[i] when we could have just used color.

  • @djumeau
    @djumeau Місяць тому

    It is neat! Well done!

  • @user-dw4us1kp5n
    @user-dw4us1kp5n 2 місяці тому

    Верните, пожалуйста, доступ к сайту из России

    • @ZIMLEARN
      @ZIMLEARN 2 місяці тому

      Okay - will look into it... the server fellows said we were being hacked. But seems like a severe solution.

    • @ZIMLEARN
      @ZIMLEARN 2 місяці тому

      The server fellows have removed the block and will keep an eye out for more attacks. If they come they may need to block again... they said that you could access the site through a VPN. All the best!!

    • @user-dw4us1kp5n
      @user-dw4us1kp5n 2 місяці тому

      ​@@ZIMLEARN СПАСИБО! ВЫ ЛУЧШИЙ! 🎉🎉🎉

  • @ranro7371
    @ranro7371 3 місяці тому

    can it increase speed gradually over a set period of time.? For example, over 20 minutes I would like the speed to become x3, it would increase the speed +0.15 every minute, It would be even better if it could increase in 0.01 or even smaller increments every second over the set period of time, but if this is too complicated then the older method is better.

    • @ZIMLEARN
      @ZIMLEARN 3 місяці тому

      Yes - good idea. The Accelerator has a percentSpeed property that can be changed in time. For instance: interval(.1, ()=>{accel.percentSpeed+=.1});

    • @ZIMLEARN
      @ZIMLEARN 3 місяці тому

      You are welcome to visit us at forum.zimjs.com with more questions or to discuss!

  • @user-hz8fw4eq6q
    @user-hz8fw4eq6q 3 місяці тому

    Wow!

  • @karelrosseel
    @karelrosseel 3 місяці тому

    Super! 🎉

  • @elhjbtt7681
    @elhjbtt7681 4 місяці тому

    Hiw to use new canvas

    • @ZIMLEARN
      @ZIMLEARN 4 місяці тому

      In ZIM, the Frame() makes the canvas for you - so no need for a new canvas. You can also have more than one Frame but usually we just have one.

    • @elhjbtt7681
      @elhjbtt7681 4 місяці тому

      @@ZIMLEARN Ok how to use. const stage = new Stage("canvasID"); don't work

    • @ZIMLEARN
      @ZIMLEARN 4 місяці тому

      @@elhjbtt7681 The Frame makes the stage for you so no need for new Stage. The stage is then available as S. The Frame as F and width and height as W and H. What are you making?

    • @elhjbtt7681
      @elhjbtt7681 4 місяці тому

      When use Stage(canvasID, touch, singleTouch) when we use because it exists on doc

    • @ZIMLEARN
      @ZIMLEARN 4 місяці тому

      @@elhjbtt7681 Stage is an object so we might want to refer to its properties, etc. And it can be used directly when the Frame is not used, but I have never used it alone... that is left over to a time 10 years ago when people just used CreateJS. The Frame will give you a stage and everything you need. If you are coming from a CreateJS world, perhaps watch the first few ZIM Basics videos here ua-cam.com/video/G4K0PwtwXRQ/v-deo.html

  • @elhjbtt7681
    @elhjbtt7681 4 місяці тому

    how to use api with zimjs and fetch??

    • @ZIMLEARN
      @ZIMLEARN 4 місяці тому

      There is often no need for server code when using ZIM Socket. Unless you are storing data like scores, etc. and then the fetch API works just as always. When not in node - for instance communicating to php, etc. we have ZIM async() for JSONp and ZIM Ajax() for easy Ajax - or use the Fetch API. If you have more questions, you are welcome to join us at forum.zimjs.com - it is a little easier there!

  • @karelrosseel
    @karelrosseel 4 місяці тому

    Super!

  • @Techwithdaddy
    @Techwithdaddy 4 місяці тому

    Nice stuff can we collaborate and build something together,I tried reaching out on X but your inbox is closed

    • @ZIMLEARN
      @ZIMLEARN 4 місяці тому

      That's odd... it should not be. Will check. Find me at forum.zimjs.com would be happy to chat!

  • @yingshuaimiao
    @yingshuaimiao 4 місяці тому

    so cool

  • @saganandroid4175
    @saganandroid4175 4 місяці тому

    A damned shame nobody got you into the Amiga in 1985.

  • @saganandroid4175
    @saganandroid4175 4 місяці тому

    Get out your lenticular lenses!

  • @saganandroid4175
    @saganandroid4175 5 місяців тому

    CITIZEN, YOU HAVE BEEN CITED FOR PROMOTING FALSE CLAIMS ABOUT SPRITES. PLEASE REPORT TO YOUR LOCAL AMIGA DEALER TO PROCESSED. SIGNED, YOUR FRIENDLY NEIGHBORHOOD SPRITE POLICE

    • @ZIMLEARN
      @ZIMLEARN 5 місяців тому

      amigadev.elowar.com/read/ADCD_2.1/Hardware_Manual_guide/node00AF.html lol - okay - I give up. for all those watching the video, please read the manual.

  • @patrupisicivesele
    @patrupisicivesele 5 місяців тому

    I am looking for a new library/framework to do some animations and createjs/zimjs seems like a good fit. But I also saw that createjs(EaselJS) has the last commit 2 years ago and I saw that the original creator focus on flutter. So I am not sure if is the best idea to start using a project that is not actively maintained. While zimjs seems to be actively maintained( last release 4 days ago, yay!) it seems it is also build on top of createjs and I am not sure if thats a problem. Do you have any idea if zimjs should be the smart choice giving that is build on top of create js?

    • @ZIMLEARN
      @ZIMLEARN 5 місяців тому

      Hi @patrupisicivesele - that is a good question. Something that does not update can also be called stable. CreateJS does what it is supposed to do and that is all it needs to do. It is a base. Like the Canvas too - it has not really updated in this time frame. If it did, we might be in trouble because everything built from it might break. So we are glad that CreateJS has not updated. Now, our hundreds of added features all still work. Anyway, we will update anything needed for maintenance in CreateJS and we have. So do not worry, consider it part of the infrastructure. Also, please come join us at forum.zimjs.com and we can discuss further and if you have any other questions, we can help there! Cheers.

  • @user-pw4ug8ri7t
    @user-pw4ug8ri7t 5 місяців тому

    Hello Annette, its John ... how are you?

  • @halilerbil118
    @halilerbil118 7 місяців тому

    How can I access the codes in the video?

    • @ZIMLEARN
      @ZIMLEARN 7 місяців тому

      @halilerbil118 - sorry for the delay - missed the message. We had not posted the code but just went and found most of it, I assume, and zipped it for you here zimjs.com/creativecoding/code.zip

    • @ZIMLEARN
      @ZIMLEARN 7 місяців тому

      Just watch... the lessons are a few years ago now... you might want to try the ZIM Basics vids which are more recent (there is a playlist here in UA-cam) or check out the various examples on the zimjs.com/editor

  • @karelrosseel
    @karelrosseel 7 місяців тому

    whoohaa Thanks Dr. Abstract: yes speech is now in ZIM to talk and listen to text spoken, or text buttons, labels onto the Canvas can be clicked to listen to! Happy coding now without having to talk every word myself :-) as audiofile!!

  • @BiemNguyen
    @BiemNguyen 7 місяців тому

    verry good 🎉

  • @avirads
    @avirads 7 місяців тому

    Great sir, Dr.Abstract ....abstraction at its best.

  • @ZIMLEARN
    @ZIMLEARN 8 місяців тому

    PhoneGap Build has been discontinued - we now do all of this in 5 minutes with PWA. Please see zimjs.com/mobile

  • @devaj9272
    @devaj9272 8 місяців тому

    This is too exciting!

  • @karelrosseel
    @karelrosseel 8 місяців тому

    ZIM Editpr is amaZing!

  • @user-dw4us1kp5n
    @user-dw4us1kp5n 8 місяців тому

    Wow, new ZIM video!

  • @user-dw4us1kp5n
    @user-dw4us1kp5n 8 місяців тому

    Wow, its very cool👍

  • @user-dw4us1kp5n
    @user-dw4us1kp5n 8 місяців тому

    Wow new best video ZIM!!!

  • @user-dw4us1kp5n
    @user-dw4us1kp5n 9 місяців тому

    Wow!

  • @edinetgrunhed6000
    @edinetgrunhed6000 9 місяців тому

    can ZIM support REST API?

    • @ZIMLEARN
      @ZIMLEARN 9 місяців тому

      Not sure how much you are expecting us to do for this... but we do have an Ajax class for POST and GET and a global async() method that does JSONp. Were you looking for more code inside our Framework to handle REST? We also have Bind() that can help send and receive variables to and from the server. All these can be found in the Docs zimjs.com/docs - to discuss further, you are welcome to join us at zimjs.com/slack or zimjs.com/discord.

    • @edinetgrunhed6000
      @edinetgrunhed6000 9 місяців тому

      @@ZIMLEARN actually all i need is to a communication between C# or python to animate (html) , i don't which one is more efficient. u have any idea how to do this? thanks for exerting greet effort to make this wonderful library a reality/

    • @ZIMLEARN
      @ZIMLEARN 9 місяців тому

      @@edinetgrunhed6000I am not sure - any way that JavaScript would normally communicate with C# or Python would work. There is nothing in ZIM specifically. Not sure if that is a socket or web workers or WASM. Why are you wanting to communicate to Python?

    • @edinetgrunhed6000
      @edinetgrunhed6000 9 місяців тому

      @@ZIMLEARN python easy to communicate for my arduino but not good for animating the data so i planning to use adobe air for displaying and animation thru python

  • @user-gp1ov8ow5d
    @user-gp1ov8ow5d 9 місяців тому

    the zip file says "invalid" when i try to extract it.

    • @ZIMLEARN
      @ZIMLEARN 9 місяців тому

      We just checked and it seems fine for us. Can you please try downloading again. If there is still a problem, please contact us at zimjs.com/discord or zimjs.com/slack and we can get the ZIP file there to you. Cheers.

  • @londonkaitlin4822
    @londonkaitlin4822 10 місяців тому

    *PromoSM*

  • @user-dw4us1kp5n
    @user-dw4us1kp5n 10 місяців тому

    Best of the best! Spasibo!

  • @SaiKumar-cl7hm
    @SaiKumar-cl7hm 11 місяців тому

    Next level stuff Dr. Abstract :)

  • @avirads
    @avirads 11 місяців тому

    press spacebar to pause..i got a bit giddy watching the scene rotate.. :)

  • @karelrosseel
    @karelrosseel 11 місяців тому

    waauw!

  • @avirads
    @avirads 11 місяців тому

    This is great. Do u have plans to add hands?

    • @ZIMLEARN
      @ZIMLEARN 11 місяців тому

      three.js comes with a controller factory - a set of models to model the current controller... not sure if hands are part of that - probably if using hand gestures. These can be passed into XRControllers type to show those models. Just today, a friend was using it and we may have received an error with hand gestures... sort of kept the code for it but did not test. Will do so at some point.

  • @karelrosseel
    @karelrosseel 11 місяців тому

    Whaahooo ZIM VR is ZupeR!

  • @karelrosseel
    @karelrosseel 11 місяців тому

    Whoohaa! super! VR is now possible!

  • @BiemNguyen
    @BiemNguyen Рік тому

    very good

  • @MuhammedMaruf
    @MuhammedMaruf Рік тому

    You are amazing!

  • @user-hz8fw4eq6q
    @user-hz8fw4eq6q Рік тому

    Great!!!

  • @Trivimania
    @Trivimania Рік тому

    Exciting...

  • @Trivimania
    @Trivimania Рік тому

    I think Dan for your light.decay that the scale of your scene is very big. I have no idea what units three.js works in, but if for example it would be meters, then you set your light a couple of hundred meters away from your cube. If I put a 1 watt lightbulb at 20cm of a teddybear, then it will light my teddybear, but if I put that same light at 100 meters distance, then it will not affect my teddybear

    • @ZIMLEARN
      @ZIMLEARN Рік тому

      Oh!!! That totally makes sense. Cheers.

    • @ZIMLEARN
      @ZIMLEARN Рік тому

      ah... that could be it... but in a previous version of three.js the light did reach.

  • @BiemNguyen
    @BiemNguyen Рік тому

    🎉 very good

  • @andierni1642
    @andierni1642 Рік тому

    Phenomenal! Thanks a lot!