Hope you guys enjoy this video and the black friday sale! Can't wait to start updating all the courses next year and start releasing new ones for you! Thanks, Ed
32:40 yes there is multiple methods to do this here is 2 methods 1) using regex with powertoys: * powertoys has subprogram called powerRename that you can use regex with it (that you are familiar with) you need rename the files 2 time 1st use it as counting and the 2nd use for rename with this regex .*\((.*)\) 2)if you have python installed you can use this script to rename files with more advanced controle import os def rename(): folder = r"" #folder path for count, filename in enumerate(os.listdir(folder)): src =f"{folder}/{filename}" os.replace(src, str(count+1)+'.png') #rename rename()
32:39 you can also create in the same folder where the jpgs are a simple .bat @echo off setlocal enabledelayedexpansion set count=1 for %%f in (*.jpg) do ( ren "%%f" "!count!.jpg" set /a count+=1 ) just safe is as whatever.bat and run it.
Hey DevEd! Love your channel. Long time listener, first time caller... some tips for the newbies like me : 1. if the images are not loading, I may be that the render() function is being called before the array has finished populating. In this case I added the following (which took a while to workout). In the for loop - after images.push(img) img.onload = ( ) => { //Check if all images have loaded if (images.every(img => img.complete)) { render(); } } 2. PowerToys has great feature for renaming multiple files Thanks for your content!
For some reason when adding physics to the background/bottom frame the ball seemed to get stuck in the pipe. Tried modelling the pipe and frame again but same problem. But managed to kinda fix it by changing the collision to "mesh" from Convex hull for the frame.
for a bulk rename in windows I usually use this software: bulk rename utility in linux mint I used Bulky. maybe even terminal or a simple program with a for loop should do something about it. (most of the time I use it for movie/anime chapters and matching it with subtitle filename)
32:20 hi Ed and everyone try this to rename all the images= Open the command prompt in the folder and run this command: for /L %i in (1,1,184) do ren *%i.png %i.png If you want then I will try to make a video on this
Nice tutorial, gsap and blender tutorials are awesome. But im wondering is playing a rendered video based on the scroll position not easier and also beter for the performance. Now you are making 180 http requests to the server and with a video only 1
Thank you my friend, I just created this awesome effect following your tutorial, all worked perfectly, I'll always be grateful with people like you who share their knowledge. I have a question for you, let's suppose I'll GSAP timeline, How can PAUSE the render in the middle of the animation, make some letters to appear and then RESUME the render animation until the end, all of the above using the timeline. Thank you so much in advance! ;)
The easiest approach to use the image names is to create the zeros before the index and you can do it in one line: `${Array(5 - `${index + 1}`.length).join('0')}${index + 1}.png` The logic behind it is that the Array constructor create an empty array with the length we provide, and because this array elements are undefined when we join them we get one zero for each two elements (1 zero for array length of 2, 2 zeros for length of 3 etc...) I don't have much experience in blender but if frames that are higher then 999 also have a zero before them we can use a simple condition like: `${Array(5 - `${index >= 999 ? 999 : index + 1}`.length).join('0')}${index + 1}.png` Hope it helps!
I did exactly the same with my sequenced video, but in my local server browser shows about 2/3 of the screen. I tried everything I could think of-nothing. What am I missing? How can I make canvas responsive?
Yes, It's cool and really amazing, but the main concern is the network load, it needs download 173MB of resources to visualise this very cool animation.
I did everything exactly as shown in the video but for some reason It rendered only the first frame of the animation, and it took 1.5hrs to render that frame. Please tell me, is there a way I could get this animation rendered
Hi Ed, once again, thank you for a wonderful tutorial. i need to know tho, the part of the code where gap was used on the BALL object is not clear enough. i just started using gsap and in my experience so far, the first parameter to the gsap.to function (the target), is usually a css class. i've been googling for answers and so far the gsap doc hasn't yielded a good reference. so if you could explain that part of the code and also what the frame property does i'd be grateful... Thanks
let padded = filename.padStart(4,"0"); why rename? -- love your video -- your demographics now includes at least on 71yr old retired man me ;-) love to learn new things. over 50yrs + programming and still playing
I´ve tried it with 2500 frames. it works good on pc browsers (and of course on chrome mobile emulator) but when i use live server in vscode to run the site on my iphone it shows maybe just about 1000 frames and the rest of the site stays white. i can´t find any useful information about frame limitations on mobile. can u help me with this pls?
Anyone else come across a solution for the ".ball-text" bug on window resize? To recreate the bug: scroll past the end of the animation to the next section, resize the window and ".ball-text" reappears. I've tried triggering it's visibility based on if the canvas was in the viewport and that didn't work, I've also tried adding a display block / display none to the fromTo, still not working. Any suggestions?
Hey Ed, Awesome tutorial, I learned a lot. A bit off topic question but I saw you are using windows OS but it looks like mac schema ? and it looks amazing. Can you please share how to make my windows OS look like yours? thank you
Quick and simple Bash script for sequential bulk renaming: cd 'FILE PATH TO YOUR DESIRED FOLDER' files=$(ls) counter=1 for file in $files; do mv "$file" "${counter}.png" ((counter++)) done 1. save the above as a .sh file 2. open git bash 3. enter 'chmod +x file_renamer.sh' to make it executable 4. enter ./file_renamer.sh to run script
You should try the renaming thing with a little shell script. Just loop through the files in the folder and rename each file by taking out the leading zeros. Maybe try this one here. for FILE in `ls`; do mv $FILE `echo $FILE | sed -e 's:^0*::'`; done
Yes, more blender to code videos please! it's really helpful to see the full process and how we can apply it. Thank you!
Hope you guys enjoy this video and the black friday sale!
Can't wait to start updating all the courses next year and start releasing new ones for you!
Thanks,
Ed
Hello Ed,
There is no audio!
@@santhoshpai1847 I can hear it...weird..
@@developedbyed i think the issue is for mobile devices.... Though in PC i can't go above 360p res....
reuploading might fix the issue...
@@jhaprashant1108 Work for me now, maybe fixed?
@@dotterel yeah works now
As usual, our Ed is back with another masterpiece!
32:40
yes there is multiple methods to do this here is 2 methods
1) using regex with powertoys:
* powertoys has subprogram called powerRename that you can use regex with it (that you are familiar with)
you need rename the files 2 time 1st use it as counting and the 2nd use for rename with this regex .*\((.*)\)
2)if you have python installed you can use this script to rename files with more advanced controle
import os
def rename():
folder = r"" #folder path
for count, filename in enumerate(os.listdir(folder)):
src =f"{folder}/{filename}"
os.replace(src, str(count+1)+'.png') #rename
rename()
Hey Ed,
Instead of manually editing all the files, we can just do this:
const getZeroes = (index) => {
if (index < 10) {
return "000";
} else if (index < 100) {
return "00";
} else {
return "0";
}
};
const getCurrentFrame = (index) => {
return `./images/${getZeroes(index)}${index}.jpg`;
};
I did everything like in movie. How to add it to elementor/wordpress?
Love this, got into programming recently and not really learnt about animations or 3d models etc yet and this was really interesting.
Hey Ed. I came to like your tutorials. And this one is no exception. You seem to release those somehow exactly when I need them ;)
2:20 You can rename the files pretty easily in bulk with powerrename feature in windows 11
32:39 you can also create in the same folder where the jpgs are a simple .bat
@echo off
setlocal enabledelayedexpansion
set count=1
for %%f in (*.jpg) do (
ren "%%f" "!count!.jpg"
set /a count+=1
)
just safe is as whatever.bat
and run it.
Thanks for the awesome video - this has been my first ever tutorial in blender and i found it really useful!
stellar :) would be awesome with a tut using spline :)
Awesome as always Ed. Keep rocking 😎
Hey DevEd!
Love your channel. Long time listener, first time caller... some tips for the newbies like me :
1. if the images are not loading, I may be that the render() function is being called before the array has finished populating. In this case I added the following (which took a while to workout). In the for loop - after images.push(img)
img.onload = ( ) => {
//Check if all images have loaded
if (images.every(img => img.complete)) {
render();
}
}
2. PowerToys has great feature for renaming multiple files
Thanks for your content!
For some reason when adding physics to the background/bottom frame the ball seemed to get stuck in the pipe. Tried modelling the pipe and frame again but same problem.
But managed to kinda fix it by changing the collision to "mesh" from Convex hull for the frame.
Dude 🙏🙏 thanks it worked.. for me too.. i was having the same problem...
Did you find why this was happening?
Thank you!! I can't tell you how many times I remodeled my pipe thinking that was the problem
@@mythicalmimsame after 4 remodels stumbled across the comment 😭
for a bulk rename in windows I usually use this software: bulk rename utility
in linux mint I used Bulky. maybe even terminal or a simple program with a for loop should do something about it.
(most of the time I use it for movie/anime chapters and matching it with subtitle filename)
Love your explanation for blender.
Quality tutorial mate. I'll be trying this very soon!
Absolutely perfect. Thank you for this tutorial.
I love your energy, keep it up!
I really enjoy this guys videos... he's amiable, and his videos make sense
Never heard of gsap before, looks really cool and easy to use!
I am rlly not a big Fan of yt-Tutorials, but your Tutorial is funny and really engaging. Thank you for this great Tutorial! 🔥
Thank you for this amazing tutorial
Ohh it continued with sound. Cooool. Easy peasy lemon squezy
Thank you so much. I have tried to do something like this several times and failed. This video was able to explain it to me.
that's great, thanks ed!
holy jessssus thank you for this wonderful noob tutorial, this golden video saved me
Amazing!!! Thank you for doing this!☺
Another Banger....My Favourite tutor
32:20 hi Ed and everyone try this to rename all the images=
Open the command prompt in the folder and run this command:
for /L %i in (1,1,184) do ren *%i.png %i.png
If you want then I will try to make a video on this
Great video - lightroom would be able to export batches of images with a number sequence as the name
Thank you! You rock! I used Python os to change images' name, but I think Node.js can do the same
Nice tutorial, gsap and blender tutorials are awesome. But im wondering is playing a rendered video based on the scroll position not easier and also beter for the performance. Now you are making 180 http requests to the server and with a video only 1
he didn't use video but image instead
I would also like to the answer to that question
Came here to also ask this. It seems like not only is he making 180 http requests, but loading 180 full resolution JPG images per instance
Thank you my friend, I just created this awesome effect following your tutorial, all worked perfectly, I'll always be grateful with people like you who share their knowledge. I have a question for you, let's suppose I'll GSAP timeline, How can PAUSE the render in the middle of the animation, make some letters to appear and then RESUME the render animation until the end, all of the above using the timeline. Thank you so much in advance! ;)
Was I the only person shouting at the screen "You've spelt "complete" wrong"? 😂
What an excellent tutorial. Thank you. 👏👏 Steve
Not opening in comparatively slower internet, I guess three js is better than this image sequence rendering, don't know if that's possible though!
The easiest approach to use the image names is to create the zeros before the index and you can do it in one line:
`${Array(5 - `${index + 1}`.length).join('0')}${index + 1}.png`
The logic behind it is that the Array constructor create an empty array with the length we provide, and because this array elements are undefined when we join them we get one zero for each two elements (1 zero for array length of 2, 2 zeros for length of 3 etc...)
I don't have much experience in blender but if frames that are higher then 999 also have a zero before them we can use a simple condition like:
`${Array(5 - `${index >= 999 ? 999 : index + 1}`.length).join('0')}${index + 1}.png`
Hope it helps!
Thank you so much....
How do you makr the texture behind the ball?
I did exactly the same with my sequenced video, but in my local server browser shows about 2/3 of the screen. I tried everything I could think of-nothing. What am I missing? How can I make canvas responsive?
Love you man, you so cool !
Great vid Ed, however, woulda been cool if you stated at the start that this is not threejs website and not responsive on mobile
Do you think you will make more of these types of tutorials?
Can't wait to watch this one 🔥
Wauw I love this! Thanks
But you can also add the nulls by a simple function, that complete the given index length to get 4 digits at the end.
Great work 👑
I did it everything, please tell me how can I add it to wordpress/elementor?
Yes, It's cool and really amazing, but the main concern is the network load, it needs download 173MB of resources to visualise this very cool animation.
Thanks for your videos
Thank you so much !
How can we Apply above in React or Next , please do make a video on that as well, can anyone help me
I did everything exactly as shown in the video but for some reason It rendered only the first frame of the animation, and it took 1.5hrs to render that frame. Please tell me, is there a way I could get this animation rendered
On which website are you hosting this? because netlify is way too slow
make more blender stuff please
Hi Ed, once again, thank you for a wonderful tutorial. i need to know tho, the part of the code where gap was used on the BALL object is not clear enough. i just started using gsap and in my experience so far, the first parameter to the gsap.to function (the target), is usually a css class. i've been googling for answers and so far the gsap doc hasn't yielded a good reference. so if you could explain that part of the code and also what the frame property does i'd be grateful... Thanks
you can use rename-it on windows or transnomino on Mac for renaming. unbeatable.
32:46 the best part 😂 "totototo"
Hi Ed! Incredible content! Instantly subbed!
May I know if I can do this on Webflow?
Please update your full stack course in your website is not working!
Awesome!
let padded = filename.padStart(4,"0"); why rename? -- love your video -- your demographics now includes at least on 71yr old retired man me ;-) love to learn new things. over 50yrs + programming and still playing
To fix the file naming, if you just set the export name to "#" it will do this correctly.
I´ve tried it with 2500 frames. it works good on pc browsers (and of course on chrome mobile emulator) but when i use live server in vscode to run the site on my iphone it shows maybe just about 1000 frames and the rest of the site stays white. i can´t find any useful information about frame limitations on mobile. can u help me with this pls?
did you found a solution? I'm facing the same problem
How can I implement the code in my shopify store?
OMG!!! Awesome!! :)
Oohh my georgeous friend. You have mistaken a little bit. But is easy peasy lemon squezy for you.
Great tut. How would one incorporate something like this into a wordpress site?
just add cdnjs link to your themes header.php file.
how can i make this with react.js
Wow great🎉 many thank
At some point mine sphere stucks. What to do
Please make a Blender course, Ed.
you can use power rename ...to rename this kinds of files
Im getting a scroll bar and the 3d ball is zoomed in!!! can anyone Help
Othwr method to rename everything at once is 'power rename' from 'Power Toys(Microsoft)'
can you make this in react js
I had to download blender to follow along ,I have Maya and 3ds max first time using blender...
Use nodejs with fs for renaming. Filename to number to string i guess. Gpt will write the script for you 😊
hi man, can you create contents about splice?
Anyone else come across a solution for the ".ball-text" bug on window resize? To recreate the bug: scroll past the end of the animation to the next section, resize the window and ".ball-text" reappears. I've tried triggering it's visibility based on if the canvas was in the viewport and that didn't work, I've also tried adding a display block / display none to the fromTo, still not working. Any suggestions?
IrfanView is great for quick batch image resizing and renaming
it would be cool if we can make it smoother , by interpolating between each scroll
Use total commander to mass rename files. :)
Great~
What is the theme of vscode?
are u able to find the theme?
The ball is like a marble ball sliding in my intestine
Bro we need pt.2
You are the best
you could have used bulk rename utility.
Hey Ed,
Awesome tutorial, I learned a lot. A bit off topic question but I saw you are using windows OS but it looks like mac schema ? and it looks amazing.
Can you please share how to make my windows OS look like yours? thank you
did you find anything?
Oh Cool!!
U can select all and rename and press 1, it automatically renames everything
Hello Ed,
I have one question, i am from india is there any chance to get job as a front end developer in Uk?
But loading 100s of megabytes of images in website will make it slow as hell?
Whatbis website name
Quick and simple Bash script for sequential bulk renaming:
cd 'FILE PATH TO YOUR DESIRED FOLDER'
files=$(ls)
counter=1
for file in $files; do
mv "$file" "${counter}.png"
((counter++))
done
1. save the above as a .sh file
2. open git bash
3. enter 'chmod +x file_renamer.sh' to make it executable
4. enter ./file_renamer.sh to run script
Who know which vscode theme is this ? Please
are u able to find the theme?
Making this responsive 😩
You should try the renaming thing with a little shell script. Just loop through the files in the folder and rename each file by taking out the leading zeros.
Maybe try this one here.
for FILE in `ls`; do mv $FILE `echo $FILE | sed -e 's:^0*::'`; done
The misspelling part was too real, We've all been there
if you got windows 11 then I'd say use powerename for renaming
I wonder if it would be better to have a video instead of images?