title
Working with Three.js Particle Systems - They're AWESOME!

description
https://bit.ly/3uIxMN5 - Become a frontend developer (50% off limited time!) -- Want to learn UI/UX? https://designcourse.com​​​​​​​​ -- Today, we're going to step back into the world of Three.js to take a look at particle systems / effects. This is an introductory lesson, so just understand, there's A LOT MORE that you can do (and we will, in the future!). Threejs starter: https://github.com/designcourse/threejs-webpack-starter Threejs playlist: https://www.youtube.com/playlist?list=PL0lNJEnwfVVO4sNO2WDq_h73w-eHQStCB Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Designcourse.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': "Working with Three.js Particle Systems - They're AWESOME!", 'heatmap': [{'end': 349.783, 'start': 326.909, 'weight': 0.723}, {'end': 932.455, 'start': 893.479, 'weight': 0.738}], 'summary': 'Explore the fundamentals of 3js and particle systems, cover front-end development career path, creating and positioning particles in 3d space, particle dispersion and 3d rendering customization, animating sphere rotation and manipulating mouse input, ui design and css usage, and using gsap for web animation.', 'chapters': [{'end': 86.052, 'segs': [{'end': 49.966, 'src': 'embed', 'start': 0.089, 'weight': 0, 'content': [{'end': 3.017, 'text': "Today we're going to be doing this here within 3JS.", 'start': 0.089, 'duration': 2.928}, {'end': 3.619, 'text': 'Look at that.', 'start': 3.037, 'duration': 0.582}, {'end': 17.286, 'text': "what's up everybody, Gary Simon here.", 'start': 15.765, 'duration': 1.521}, {'end': 23.409, 'text': 'so today we are stepping back into the world of 3js to learn more basics and fundamentals.', 'start': 17.286, 'duration': 6.123}, {'end': 27.131, 'text': "and of course, you can't talk about 3js without talking about particles.", 'start': 23.409, 'duration': 3.722}, {'end': 27.871, 'text': "they're very fun.", 'start': 27.131, 'duration': 0.74}, {'end': 31.693, 'text': 'they add texture and they add a lot of different things and aesthetics to your design.', 'start': 27.871, 'duration': 3.822}, {'end': 33.695, 'text': "so we'll be checking out that.", 'start': 31.693, 'duration': 2.002}, {'end': 35.475, 'text': 'just to show you real quickly the project.', 'start': 33.695, 'duration': 1.78}, {'end': 38.257, 'text': 'again, if I refresh, we have an animation.', 'start': 35.475, 'duration': 2.782}, {'end': 43.34, 'text': 'this is help and this is created by GSAP these very simple animations and um, we have.', 'start': 38.257, 'duration': 5.083}, {'end': 45.902, 'text': 'you can see custom little particles.', 'start': 43.34, 'duration': 2.562}, {'end': 47.343, 'text': "they're actually little crosses.", 'start': 45.902, 'duration': 1.441}, {'end': 48.264, 'text': 'you can see in the background.', 'start': 47.343, 'duration': 0.921}, {'end': 49.966, 'text': "i'll show you how to do that.", 'start': 48.264, 'duration': 1.702}], 'summary': 'Learning 3js basics and fundamentals, including particles and animations.', 'duration': 49.877, 'max_score': 0.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA89.jpg'}], 'start': 0.089, 'title': 'Introduction to 3js particles', 'summary': 'Introduces the basics and fundamentals of 3js, emphasizing the use of particles to enhance designs. the 3js playlist includes four recent videos with a focus on starting the project from a github repo.', 'chapters': [{'end': 86.052, 'start': 0.089, 'title': 'Introduction to 3js particles', 'summary': 'Introduces the basics and fundamentals of 3js, focusing on the use of particles to add texture and aesthetics to designs, with a project showcasing custom particles and geometry. the 3js playlist has four videos created within the last month, with emphasis on starting the project with boilerplate code from a github repo.', 'duration': 85.963, 'highlights': ['The 3JS playlist has four videos created within the last month, with emphasis on starting the project with boilerplate code from a GitHub repo.', 'Particles add texture and aesthetics to designs, showcased through a project with custom particles and geometry.', 'Introduction to the basics and fundamentals of 3js with a focus on particles.']}], 'duration': 85.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA89.jpg', 'highlights': ['Introduction to the basics and fundamentals of 3js with a focus on particles.', 'Particles add texture and aesthetics to designs, showcased through a project with custom particles and geometry.', 'The 3JS playlist has four videos created within the last month, with emphasis on starting the project with boilerplate code from a GitHub repo.']}, {'end': 274.898, 'segs': [{'end': 159.797, 'src': 'embed', 'start': 116.615, 'weight': 0, 'content': [{'end': 119.658, 'text': 'So check out the first link in the description below to get 50% off.', 'start': 116.615, 'duration': 3.043}, {'end': 120.339, 'text': 'All right.', 'start': 119.818, 'duration': 0.521}, {'end': 126.442, 'text': "So, basically, here is the 3js webpack starter, and i've already explained this in the first video.", 'start': 120.419, 'duration': 6.023}, {'end': 132.004, 'text': "that's a part of this playlist, um, and we're going to use this just to get up and running with a quick boilerplate.", 'start': 126.442, 'duration': 5.562}, {'end': 137.466, 'text': "so we're going to go to code and copy this address and i'm going to go to my visual studio code.", 'start': 132.004, 'duration': 5.462}, {'end': 140.426, 'text': 'i have a just like a new window open, but no folder.', 'start': 137.466, 'duration': 2.96}, {'end': 142.347, 'text': "we're going to go to terminal, um,", 'start': 140.426, 'duration': 1.921}, {'end': 151.79, 'text': "and actually we're going to go to view and terminal and then down here we're going to hop into our code folder wherever you store your projects at,", 'start': 142.347, 'duration': 9.443}, {'end': 154.632, 'text': "And I'm going to git clone.", 'start': 152.49, 'duration': 2.142}, {'end': 156.014, 'text': "So you're going to need the git client.", 'start': 154.652, 'duration': 1.362}, {'end': 159.797, 'text': "Google that in terms of how to install that depending on which OS you're using.", 'start': 156.714, 'duration': 3.083}], 'summary': 'Get 50% off on 3js webpack starter. set up using git clone in visual studio code.', 'duration': 43.182, 'max_score': 116.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA116615.jpg'}], 'start': 86.052, 'title': 'Front-end development career path', 'summary': 'Introduces the front-end development career path at scrimba.com, offering over 75 hours of content covering html, css, javascript, and react, with interactive coding challenges and a goal of preparing learners for hireability as a front end developer.', 'chapters': [{'end': 116.514, 'start': 86.052, 'title': 'Front-end development career path', 'summary': 'Introduces the front-end development career path at scrimba.com, offering over 75 hours of content covering html, css, javascript, and react, with interactive coding challenges and a goal of preparing learners for hireability as a front end developer.', 'duration': 30.462, 'highlights': ['Scrimba.com launched a front-end development career path, providing over 75 hours of content including html, css, javascript, and react, aimed at helping learners become hireable front end developers.', 'The career path includes hundreds of interactive coding challenges to enhance learning and skill development.', 'The content is designed for individuals interested in transitioning from a beginner to a proficient front-end developer.']}, {'end': 274.898, 'start': 116.615, 'title': '3js webpack starter and project setup', 'summary': 'Covers setting up a 3js webpack starter, including cloning the project, installing dependencies, and running a development server to display a spinning red torus, emphasizing the importance of watching the first video in the 3js playlist for detailed information.', 'duration': 158.283, 'highlights': ['Setting up 3JS webpack starter with 50% off discount The chapter starts by providing a 50% off discount link for the 3JS webpack starter, encouraging viewers to check out the link in the description below.', "Cloning the project and installing dependencies The process involves cloning the project using Git, giving it a name, moving into the project directory, and running 'npm i' to install the project's dependencies.", "Launching a development server to display a spinning red torus The chapter demonstrates running 'npm run dev' to launch a development server, resulting in the display of a spinning red torus in the browser.", 'Emphasizing the importance of watching the first video in the 3JS playlist The importance of watching the first video in the 3JS playlist is emphasized, as it contains detailed information about the project and script.js file.']}], 'duration': 188.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA86052.jpg', 'highlights': ['Scrimba.com launched a front-end development career path, providing over 75 hours of content including html, css, javascript, and react, aimed at helping learners become hireable front end developers.', 'The career path includes hundreds of interactive coding challenges to enhance learning and skill development.', 'The content is designed for individuals interested in transitioning from a beginner to a proficient front-end developer.', 'Setting up 3JS webpack starter with 50% off discount The chapter starts by providing a 50% off discount link for the 3JS webpack starter, encouraging viewers to check out the link in the description below.', "Cloning the project and installing dependencies The process involves cloning the project using Git, giving it a name, moving into the project directory, and running 'npm i' to install the project's dependencies.", "Launching a development server to display a spinning red torus The chapter demonstrates running 'npm run dev' to launch a development server, resulting in the display of a spinning red torus in the browser.", 'Emphasizing the importance of watching the first video in the 3JS playlist The importance of watching the first video in the 3JS playlist is emphasized, as it contains detailed information about the project and script.js file.']}, {'end': 738.18, 'segs': [{'end': 305.492, 'src': 'embed', 'start': 274.898, 'weight': 6, 'content': [{'end': 277.419, 'text': "so really it's kind of like a four step process.", 'start': 274.898, 'duration': 2.521}, {'end': 285.342, 'text': 'um, and what we want to do is change the material here and we want to make it look like it has particles on it,', 'start': 277.419, 'duration': 7.923}, {'end': 288.883, 'text': 'and this is a very quick and easy way of getting up and running.', 'start': 285.342, 'duration': 3.541}, {'end': 297.286, 'text': "um, with, uh, particles essentially or it, just they look like particles on your, your geometry that's already defined.", 'start': 288.883, 'duration': 8.403}, {'end': 305.492, 'text': "so what we'll do is we're going to delete this, we're going to change this to a points material,", 'start': 297.566, 'duration': 7.926}], 'summary': 'A four-step process to change material and create particle-like effect on geometry.', 'duration': 30.594, 'max_score': 274.898, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA274898.jpg'}, {'end': 352.004, 'src': 'heatmap', 'start': 326.909, 'weight': 0, 'content': [{'end': 330.312, 'text': "okay, nasty, i don't know what i'm looking at.", 'start': 326.909, 'duration': 3.403}, {'end': 337.278, 'text': "so the one thing we'll want to do is put in transparent, true, and save that.", 'start': 330.312, 'duration': 6.966}, {'end': 340.26, 'text': "obviously that doesn't do um.", 'start': 337.278, 'duration': 2.982}, {'end': 346.085, 'text': "so we're gonna put in size 0.005 or so, and, of course, these are values that you can experiment with.", 'start': 340.26, 'duration': 5.825}, {'end': 349.783, 'text': 'And there we go all right.', 'start': 347.501, 'duration': 2.282}, {'end': 352.004, 'text': "Oh, let's get that back.", 'start': 349.983, 'duration': 2.021}], 'summary': 'Adjust transparency to true, size to 0.005 for experimentation.', 'duration': 28.277, 'max_score': 326.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA326909.jpg'}, {'end': 549.853, 'src': 'embed', 'start': 521.951, 'weight': 2, 'content': [{'end': 528.236, 'text': "And so what ends up happening is it's kind of like X, Y, Z, X, Y, Z, X, Y, Z, X, Y, Z.", 'start': 521.951, 'duration': 6.285}, {'end': 532.86, 'text': "And that's how this float 32 array for position array is kind of structured.", 'start': 528.236, 'duration': 4.624}, {'end': 533.62, 'text': 'All right.', 'start': 532.88, 'duration': 0.74}, {'end': 538.064, 'text': "So then we're gonna iterate over these with a for loop.", 'start': 534.381, 'duration': 3.683}, {'end': 549.853, 'text': 'So let i equals zero, and i is gonna be less than particles count times three, and then i plus plus will increment it each time.', 'start': 538.144, 'duration': 11.709}], 'summary': 'Float 32 array for position array is structured with x, y, z, and iterated over with a for loop.', 'duration': 27.902, 'max_score': 521.951, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA521951.jpg'}, {'end': 633.893, 'src': 'embed', 'start': 604.722, 'weight': 1, 'content': [{'end': 606.084, 'text': 'and then we pass in three.', 'start': 604.722, 'duration': 1.362}, {'end': 609.235, 'text': "All right, I know it's a little bit convoluted looking,", 'start': 607.133, 'duration': 2.102}, {'end': 618.603, 'text': "but basically what this is doing is it's taking this position array that it's created and it's gone through and added these math random values for each one.", 'start': 609.235, 'duration': 9.368}, {'end': 626.55, 'text': "And it's setting the position attribute of our particles geometry from this three buffer geometry up here.", 'start': 619.203, 'duration': 7.347}, {'end': 632.572, 'text': 'and just assigning all those random values, x, y, z, x, y, z to all 5,000 of the particles.', 'start': 627.29, 'duration': 5.282}, {'end': 633.893, 'text': 'All right.', 'start': 633.153, 'duration': 0.74}], 'summary': 'Code assigns random x, y, z values to 5000 particles.', 'duration': 29.171, 'max_score': 604.722, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA604722.jpg'}], 'start': 274.898, 'title': 'Creating and positioning particles in 3d space', 'summary': 'Covers creating particle aesthetics, a four-step process, custom particle effects, and creating a star field with 5,000 particles. it also explains creating a float32 array for particle coordinates and positioning 5,000 particles in 3d space, overcoming setbacks, and repositioning particles.', 'chapters': [{'end': 470.815, 'start': 274.898, 'title': 'Creating particle aesthetics in 3js', 'summary': 'Explains a four-step process to create particle aesthetics in 3js, including changing materials, experimenting with particle size, and creating custom particle effects with custom geometries, with a specific example of creating a star field with 5,000 particles.', 'duration': 195.917, 'highlights': ['The chapter explains a four-step process to create particle aesthetics in 3JS, including changing materials, experimenting with particle size, and creating custom particle effects with custom geometries, with a specific example of creating a star field with 5,000 particles.', 'Experimenting with the size of the points can be done by adjusting the size value, such as setting it to 0.1, and depending on the desired aesthetic, lower values may be used.', 'Creating custom particle effects with custom geometries involves an evolved process, as demonstrated by creating a star field with 5,000 particles that move and interact based on mouse position.', 'The process involves changing the material to a points material and using three dot points instead of three dot mesh to create a sphere with a points material.']}, {'end': 604.722, 'start': 470.816, 'title': 'Creating float32 array for particle coordinates', 'summary': 'Explains the process of creating a float32 array to store x, y, z coordinates for 5,000 particles in a 3d scene and setting up the position attributes for the particles.', 'duration': 133.906, 'highlights': ['Creating a float32 array to store X, Y, Z coordinates for 5,000 particles in a 3D scene. 5,000 particles, float32 array, X, Y, Z coordinates', 'Setting up the position attributes for the particles using a for loop and math.random function for random positioning. for loop, math.random function, position attributes']}, {'end': 738.18, 'start': 604.722, 'title': 'Creating particles in 3d space', 'summary': 'Demonstrates the process of creating and positioning 5,000 particles in 3d space using three.js, encountering a setback due to an undefined variable, before successfully repositioning the particles in the center of the screen.', 'duration': 133.458, 'highlights': ['Creating and positioning 5,000 particles in 3D space using three.js', 'Encountering setback due to an undefined variable while positioning particles', 'Successfully repositioning the particles in the center of the screen']}], 'duration': 463.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA274898.jpg', 'highlights': ['The chapter explains a four-step process to create particle aesthetics in 3JS, including changing materials, experimenting with particle size, and creating custom particle effects with custom geometries, with a specific example of creating a star field with 5,000 particles.', 'Creating a float32 array to store X, Y, Z coordinates for 5,000 particles in a 3D scene. 5,000 particles, float32 array, X, Y, Z coordinates', 'Experimenting with the size of the points can be done by adjusting the size value, such as setting it to 0.1, and depending on the desired aesthetic, lower values may be used.', 'Creating custom particle effects with custom geometries involves an evolved process, as demonstrated by creating a star field with 5,000 particles that move and interact based on mouse position.', 'Setting up the position attributes for the particles using a for loop and math.random function for random positioning. for loop, math.random function, position attributes', 'Encountering setback due to an undefined variable while positioning particles', 'Successfully repositioning the particles in the center of the screen', 'The process involves changing the material to a points material and using three dot points instead of three dot mesh to create a sphere with a points material.']}, {'end': 1099.896, 'segs': [{'end': 791.785, 'src': 'embed', 'start': 759.867, 'weight': 4, 'content': [{'end': 762.108, 'text': 'And of course you could play with that number just to see what happens.', 'start': 759.867, 'duration': 2.241}, {'end': 762.708, 'text': 'And there we go.', 'start': 762.208, 'duration': 0.5}, {'end': 764.048, 'text': 'Very, very, very simple.', 'start': 763.068, 'duration': 0.98}, {'end': 766.249, 'text': 'You can also do other things.', 'start': 765.289, 'duration': 0.96}, {'end': 770.531, 'text': "Don't be afraid of playing around with the math, even if you don't understand it.", 'start': 766.289, 'duration': 4.242}, {'end': 773.992, 'text': 'For instance, I was trying to see what else I could do.', 'start': 771.071, 'duration': 2.921}, {'end': 778.293, 'text': 'And so what I did is I decided to wrap this in parentheses, another .math.random.', 'start': 774.232, 'duration': 4.061}, {'end': 782.596, 'text': 'and multiply that by five.', 'start': 780.294, 'duration': 2.302}, {'end': 783.858, 'text': 'And what happens then??', 'start': 783.077, 'duration': 0.781}, {'end': 791.785, 'text': "Well, actually it's kind of hard to tell, but you can see there's a lot of particles that are kind of situated, more so on X and Y in the middle.", 'start': 785.039, 'duration': 6.746}], 'summary': 'Experiment with math.random and functions to observe different outcomes.', 'duration': 31.918, 'max_score': 759.867, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA759867.jpg'}, {'end': 932.455, 'src': 'heatmap', 'start': 848.259, 'weight': 0, 'content': [{'end': 856.284, 'text': "so let's say, for instance, we don't want these, these default squares, we want to use a custom texture or sorts of sorts.", 'start': 848.259, 'duration': 8.025}, {'end': 862.249, 'text': 'so I already created in the static folder cross.png.', 'start': 856.284, 'duration': 5.965}, {'end': 865.653, 'text': 'Now, if you downloaded the starter, this is not gonna be in there.', 'start': 862.289, 'duration': 3.364}, {'end': 872.301, 'text': "I'm gonna try to remember to create another GitHub just for this project and you can clone that and then you'll have access to this little cross.png.", 'start': 865.994, 'duration': 6.307}, {'end': 872.582, 'text': 'graphic.', 'start': 872.301, 'duration': 0.281}, {'end': 875.345, 'text': "It's only like, I think it's like a 10 by 10.", 'start': 872.602, 'duration': 2.743}, {'end': 878.489, 'text': "It's just like, it's alpha, so the background's transparent.", 'start': 875.345, 'duration': 3.144}, {'end': 880.43, 'text': "but there's a white cross in the middle.", 'start': 879.089, 'duration': 1.341}, {'end': 881.27, 'text': "That's all it is.", 'start': 880.79, 'duration': 0.48}, {'end': 885.331, 'text': 'So you can create this easily on your own if you wish, like in Photoshop or whatever.', 'start': 882.11, 'duration': 3.221}, {'end': 891.634, 'text': 'So if we go back here, what we wanna do is we want to use a texture loader to get that in there.', 'start': 886.012, 'duration': 5.622}, {'end': 895.741, 'text': "we're going to say const a loader?", 'start': 893.479, 'duration': 2.262}, {'end': 901.447, 'text': 'oops, loader equals new three dot texture loader.', 'start': 895.741, 'duration': 5.706}, {'end': 903.308, 'text': "and then we're going to say const.", 'start': 901.447, 'duration': 1.861}, {'end': 906.692, 'text': "uh, we'll call it cross equals loader.load.", 'start': 903.308, 'duration': 3.384}, {'end': 909.314, 'text': "and then we don't at reference the static folder.", 'start': 906.692, 'duration': 2.622}, {'end': 910.776, 'text': "that's inherent already.", 'start': 909.314, 'duration': 1.462}, {'end': 915.76, 'text': 'so we just put, uh, like forward slash cross dot png.', 'start': 910.776, 'duration': 4.984}, {'end': 920.167, 'text': 'now we come back down here and then we simply use the map property Cross.', 'start': 915.76, 'duration': 4.407}, {'end': 922.689, 'text': "Now what's going to happen? Nothing.", 'start': 920.648, 'duration': 2.041}, {'end': 932.455, 'text': "Why? Because there's transparency that's baked into the PNG, but we have to tell our material that it is transparent true.", 'start': 923.249, 'duration': 9.206}], 'summary': 'Using a custom 10x10 cross.png graphic with transparency for texture loader in three.js.', 'duration': 47.482, 'max_score': 848.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA848259.jpg'}], 'start': 738.64, 'title': 'Particle dispersion and 3d rendering customization', 'summary': 'Explores dispersing particles and material control while also explaining how to customize textures, change colors, and apply blending properties in 3d rendering using three.js, with the option to experiment with properties and adjust transparency and color properties.', 'chapters': [{'end': 848.259, 'start': 738.64, 'title': 'Particle dispersion and material control', 'summary': 'Explores dispersing particles across the screen by multiplying them by a factor and creating different materials to control torus material independent of the background, with the option to experiment with the properties.', 'duration': 109.619, 'highlights': ['The chapter discusses dispersing particles by multiplying them by a certain factor, leading to the consumption of the screen and the creation of interesting visual effects.', 'The process of creating two different materials to control torus material independent of the background is explained, offering the opportunity to experiment with different properties.', 'Encouragement is given to play around with mathematical operations, even without full understanding, to discover unique visual effects and cool outcomes.']}, {'end': 1099.896, 'start': 848.259, 'title': 'Customizing textures and colors in 3d rendering', 'summary': 'Explains how to use custom textures, change colors, and apply blending properties in 3d rendering using three.js, including the process for loading custom textures and adjusting transparency and color properties, as well as setting background colors within the renderer.', 'duration': 251.637, 'highlights': ['The process for loading custom textures and adjusting transparency and color properties. Demonstrates the use of a texture loader to load a custom texture, cross.png, with transparency and a white cross, and explains how to adjust transparency and colors of the texture.', 'Setting background colors within the renderer and applying blending properties. Describes the process for setting background colors using renderer setClearColor and applying blending properties, such as additive blending, in 3D rendering.']}], 'duration': 361.256, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA738640.jpg', 'highlights': ['The chapter discusses dispersing particles by multiplying them by a certain factor, leading to the consumption of the screen and the creation of interesting visual effects.', 'The process for loading custom textures and adjusting transparency and color properties. Demonstrates the use of a texture loader to load a custom texture, cross.png, with transparency and a white cross, and explains how to adjust transparency and colors of the texture.', 'The process of creating two different materials to control torus material independent of the background is explained, offering the opportunity to experiment with different properties.', 'Setting background colors within the renderer and applying blending properties. Describes the process for setting background colors using renderer setClearColor and applying blending properties, such as additive blending, in 3D rendering.', 'Encouragement is given to play around with mathematical operations, even without full understanding, to discover unique visual effects and cool outcomes.']}, {'end': 1361.75, 'segs': [{'end': 1135.19, 'src': 'embed', 'start': 1100.717, 'weight': 0, 'content': [{'end': 1108.601, 'text': 'So down here is the tick function and request animation frame, which is just inherent with JavaScript, has nothing to do with 3ds.', 'start': 1100.717, 'duration': 7.884}, {'end': 1111.062, 'text': "We'll call this on every frame.", 'start': 1109.041, 'duration': 2.021}, {'end': 1113.984, 'text': 'So like 60 seconds, this is being called every single time.', 'start': 1111.162, 'duration': 2.822}, {'end': 1115.765, 'text': "That's how we're getting the sphere to rotate.", 'start': 1114.024, 'duration': 1.741}, {'end': 1120.629, 'text': 'we want our star field sort of thing to rotate.', 'start': 1116.845, 'duration': 3.784}, {'end': 1122.75, 'text': 'And I think we called it particles mesh.', 'start': 1121.149, 'duration': 1.601}, {'end': 1135.19, 'text': 'So what we can do is particles, mesh dot, rotation, dot y, just like the above, and we can say mouse y.', 'start': 1123.151, 'duration': 12.039}], 'summary': 'Javascript tick function rotates sphere and star field on every frame.', 'duration': 34.473, 'max_score': 1100.717, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA1100717.jpg'}, {'end': 1241.267, 'src': 'embed', 'start': 1175.803, 'weight': 1, 'content': [{'end': 1182.968, 'text': 'mouse Y equals event dot client Y and then mouse X will be the same thing.', 'start': 1175.803, 'duration': 7.165}, {'end': 1191.474, 'text': "Awesome, so now every time we move, we're gonna get the X and Y axis of where the mouse position is.", 'start': 1184.071, 'duration': 7.403}, {'end': 1193.935, 'text': 'So then we have mouse Y right here.', 'start': 1192.074, 'duration': 1.861}, {'end': 1195.236, 'text': "So let's save this.", 'start': 1194.455, 'duration': 0.781}, {'end': 1200.013, 'text': "And now we can move this and it's going crazy and it won't stop moving.", 'start': 1196.491, 'duration': 3.522}, {'end': 1203.715, 'text': "This is kind of a cool effect, but it's a little bit too much.", 'start': 1201.534, 'duration': 2.181}, {'end': 1207.697, 'text': 'What we wanna do is we wanna multiply this elapsed time.', 'start': 1204.255, 'duration': 3.442}, {'end': 1210.958, 'text': 'This elapsed time just gives you like how much time has passed.', 'start': 1207.737, 'duration': 3.221}, {'end': 1215.701, 'text': 'So what we can do is multiply this by like 0.00008, not four, eight, there we go, save.', 'start': 1211.859, 'duration': 3.842}, {'end': 1223.737, 'text': 'All right.', 'start': 1223.317, 'duration': 0.42}, {'end': 1225.158, 'text': 'Kind of interesting.', 'start': 1224.018, 'duration': 1.14}, {'end': 1229.3, 'text': "Let's change this to a mouse.", 'start': 1225.819, 'duration': 3.481}, {'end': 1230.781, 'text': 'Wait, no.', 'start': 1230.341, 'duration': 0.44}, {'end': 1233.843, 'text': 'Change this to X and leave that at Y.', 'start': 1231.582, 'duration': 2.261}, {'end': 1234.964, 'text': 'All right.', 'start': 1233.843, 'duration': 1.121}, {'end': 1241.267, 'text': 'Uh-oh Why is that not working? No error.', 'start': 1234.984, 'duration': 6.283}], 'summary': 'Tracking mouse position on x and y axis, adjusting with elapsed time.', 'duration': 65.464, 'max_score': 1175.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA1175803.jpg'}, {'end': 1361.75, 'src': 'embed', 'start': 1330.625, 'weight': 2, 'content': [{'end': 1343.792, 'text': 'So what I want to do is take our particles mesh, rotation.y equals, we can just do negative 0.1 times elapsed time.', 'start': 1330.625, 'duration': 13.167}, {'end': 1345.993, 'text': 'All right.', 'start': 1345.632, 'duration': 0.361}, {'end': 1350.815, 'text': "So now it's going to move, and now there we go.", 'start': 1346.973, 'duration': 3.842}, {'end': 1355.847, 'text': 'So refresh, we have movement and then it changes.', 'start': 1352.386, 'duration': 3.461}, {'end': 1357.928, 'text': 'And of course you could do with other different things.', 'start': 1356.408, 'duration': 1.52}, {'end': 1361.75, 'text': "Like if you move it, like it'll gradually slow down based on the direction.", 'start': 1357.948, 'duration': 3.802}], 'summary': 'Particles mesh rotates at -0.1 times elapsed time, resulting in gradual movement and directional changes.', 'duration': 31.125, 'max_score': 1330.625, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA1330625.jpg'}], 'start': 1100.717, 'title': 'Animating sphere rotation and manipulating mouse input', 'summary': "Details animating sphere rotation with mouse movement using javascript's functions and event listeners, and explores manipulating mouse input for aesthetic movement, adjusting direction and speed based on mouse position.", 'chapters': [{'end': 1241.267, 'start': 1100.717, 'title': 'Animating sphere rotation with mouse movement', 'summary': "Details the process of using mouse movement to animate the rotation of a sphere in a 3d environment, involving the utilization of javascript's inherent functions, event listeners for mouse movement, and the application of elapsed time for smoother animation.", 'duration': 140.55, 'highlights': ['The tick function and request animation frame are utilized in JavaScript to call the rotation of a sphere on every frame, approximately 60 times per second.', 'An event listener for mouse movement is added to the document to track the X and Y axis of the mouse position, enabling the incorporation of mouse movement in the animation process.', 'The elapsed time is multiplied by 0.00008 to control the intensity of the mouse-induced sphere rotation, ensuring a smoother and more controlled effect.']}, {'end': 1361.75, 'start': 1241.287, 'title': 'Manipulating mouse input for aesthetic movement', 'summary': 'Explores manipulating mouse input to create an interesting aesthetic movement with code, adjusting the direction and speed of movement based on the mouse position and providing a fix for the movement issue when the mouse is not in motion.', 'duration': 120.463, 'highlights': ['Adjusting direction and speed of movement based on mouse position The tutorial demonstrates adjusting the direction and speed of movement based on the mouse position, enabling the code to create an interesting aesthetic movement.', 'Providing a fix for movement issue when mouse is not in motion The chapter provides a solution to the issue of movement not occurring when the mouse is not in motion, by implementing a conditional statement to only change the movement when mouseX is greater than zero.', 'Utilizing code to gradually slow down movement based on direction The tutorial mentions the possibility of utilizing code to make the movement gradually slow down based on the direction, providing an opportunity for further experimentation and customization.']}], 'duration': 261.033, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA1100717.jpg', 'highlights': ['The tick function and request animation frame are utilized in JavaScript to call the rotation of a sphere on every frame, approximately 60 times per second.', 'An event listener for mouse movement is added to the document to track the X and Y axis of the mouse position, enabling the incorporation of mouse movement in the animation process.', 'The elapsed time is multiplied by 0.00008 to control the intensity of the mouse-induced sphere rotation, ensuring a smoother and more controlled effect.', 'Adjusting direction and speed of movement based on mouse position The tutorial demonstrates adjusting the direction and speed of movement based on the mouse position, enabling the code to create an interesting aesthetic movement.', 'Providing a fix for movement issue when mouse is not in motion The chapter provides a solution to the issue of movement not occurring when the mouse is not in motion, by implementing a conditional statement to only change the movement when mouseX is greater than zero.', 'Utilizing code to gradually slow down movement based on direction The tutorial mentions the possibility of utilizing code to make the movement gradually slow down based on the direction, providing an opportunity for further experimentation and customization.']}, {'end': 1557.509, 'segs': [{'end': 1389.979, 'src': 'embed', 'start': 1362.53, 'weight': 1, 'content': [{'end': 1365.351, 'text': "I'll leave that up to you all to experiment with.", 'start': 1362.53, 'duration': 2.821}, {'end': 1377.336, 'text': "So now let's switch roles and get into more like UI design stuff with HTML and CSS and maybe have like some sort of like headline on here and we'll animate it with the GreenSock animation platform or GSAP.", 'start': 1366.232, 'duration': 11.104}, {'end': 1380.397, 'text': "So to do that, let's go over to index.html.", 'start': 1378.277, 'duration': 2.12}, {'end': 1384.357, 'text': "And in our index.html, it's going to be very simple.", 'start': 1382.256, 'duration': 2.101}, {'end': 1386.578, 'text': "We're just going to have a class of container.", 'start': 1384.377, 'duration': 2.201}, {'end': 1389.979, 'text': "And inside of here, we'll have a class of content.", 'start': 1387.818, 'duration': 2.161}], 'summary': 'Experiment with ui design using html and css, animate with gsap.', 'duration': 27.449, 'max_score': 1362.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA1362530.jpg'}, {'end': 1437.603, 'src': 'embed', 'start': 1405.898, 'weight': 0, 'content': [{'end': 1407.179, 'text': "That's all our HTMLB.", 'start': 1405.898, 'duration': 1.281}, {'end': 1415.484, 'text': "Of course, we're not gonna be able to see it because we have WebGL in our CSS is position fixed and it's sitting on top of everything.", 'start': 1407.239, 'duration': 8.245}, {'end': 1420.727, 'text': "So what we'll do now is we're gonna make our color white because right now everything's black.", 'start': 1416.865, 'duration': 3.862}, {'end': 1427.311, 'text': "So all of our text will be white and we're going to specify just a few selectors here.", 'start': 1420.787, 'duration': 6.524}, {'end': 1434.476, 'text': "So for container, we'll do position absolute, and z index of one.", 'start': 1427.351, 'duration': 7.125}, {'end': 1437.603, 'text': 'So if we save this, now we can see our text.', 'start': 1434.957, 'duration': 2.646}], 'summary': 'Setting css properties to position text on top, making text visible.', 'duration': 31.705, 'max_score': 1405.898, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA1405898.jpg'}, {'end': 1485.741, 'src': 'embed', 'start': 1453.367, 'weight': 2, 'content': [{'end': 1458.769, 'text': "And then we'll also specify display grid and place content center.", 'start': 1453.367, 'duration': 5.402}, {'end': 1463.071, 'text': 'That places everything vertically and horizontally in the center.', 'start': 1459.369, 'duration': 3.702}, {'end': 1464.271, 'text': 'All right.', 'start': 1464.031, 'duration': 0.24}, {'end': 1466.952, 'text': "Next up, we'll have our content class.", 'start': 1464.971, 'duration': 1.981}, {'end': 1472.585, 'text': 'And our content will be display flex, a gap of five M units.', 'start': 1468.22, 'duration': 4.365}, {'end': 1475.589, 'text': 'So now we have this.', 'start': 1473.106, 'duration': 2.483}, {'end': 1485.741, 'text': "We'll do a width of 100%, a padding top of three M units, and then a position of relative.", 'start': 1477.471, 'duration': 8.27}], 'summary': 'Using display grid and flex to center content vertically and horizontally with specific dimensions and positioning.', 'duration': 32.374, 'max_score': 1453.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA1453367.jpg'}], 'start': 1362.53, 'title': 'Ui design and css usage', 'summary': 'Covers implementing ui design with html and css, including the use of greensock animation platform, setting up html structure, and applying css properties for layout and positioning. it also explains how to use css pseudo-elements to create a border effect and prepare for animation using gsap.', 'chapters': [{'end': 1485.741, 'start': 1362.53, 'title': 'Ui design with html and css', 'summary': 'Discusses implementing ui design with html and css, including the use of greensock animation platform, setting up html structure, and applying css properties for layout and positioning.', 'duration': 123.211, 'highlights': ['Setting up HTML structure with container, content, h1, and paragraph.', 'Applying CSS properties for layout and positioning, including position, z index, width, height, display, and place content.', 'Utilizing GreenSock animation platform for animating UI elements.']}, {'end': 1557.509, 'start': 1487.349, 'title': 'Css border and transform usage', 'summary': 'Explains how to use css pseudo-elements to create a border effect with a before pseudo-element and how to prepare for animation using gsap by setting the default value for transform scale x.', 'duration': 70.16, 'highlights': ['The chapter emphasizes using CSS pseudo-elements to create a border effect, specifically demonstrating the usage of before pseudo-element to make a border top go all the way across.', 'The speaker explains the importance of setting the default value for transform scale X to prepare for animation using GSAP, providing a detailed reasoning behind this decision.']}], 'duration': 194.979, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA1362530.jpg', 'highlights': ['Utilizing GreenSock animation platform for animating UI elements.', 'Applying CSS properties for layout and positioning, including position, z index, width, height, display, and place content.', 'Setting up HTML structure with container, content, h1, and paragraph.', 'The chapter emphasizes using CSS pseudo-elements to create a border effect, specifically demonstrating the usage of before pseudo-element to make a border top go all the way across.', 'The speaker explains the importance of setting the default value for transform scale X to prepare for animation using GSAP, providing a detailed reasoning behind this decision.']}, {'end': 1915.36, 'segs': [{'end': 1588.992, 'src': 'embed', 'start': 1558.61, 'weight': 0, 'content': [{'end': 1560.812, 'text': "So now let's save this and we see this.", 'start': 1558.61, 'duration': 2.202}, {'end': 1562.615, 'text': 'All right.', 'start': 1562.355, 'duration': 0.26}, {'end': 1566.197, 'text': "Things are looking a little bit small, so let's adjust some things here first.", 'start': 1563.176, 'duration': 3.021}, {'end': 1570.98, 'text': 'H1 font size is four rem units.', 'start': 1566.398, 'duration': 4.582}, {'end': 1573.402, 'text': 'Width will be 50 viewport width.', 'start': 1571.501, 'duration': 1.901}, {'end': 1579.826, 'text': 'Line height will be 97%.', 'start': 1574.062, 'duration': 5.764}, {'end': 1581.207, 'text': 'Not 987.', 'start': 1579.826, 'duration': 1.381}, {'end': 1583.649, 'text': "I'm trying to type too fast because I already did this like three times.", 'start': 1581.207, 'duration': 2.442}, {'end': 1585.87, 'text': "And then we'll do text align right.", 'start': 1584.309, 'duration': 1.561}, {'end': 1587.171, 'text': 'See what that looks like.', 'start': 1586.43, 'duration': 0.741}, {'end': 1588.992, 'text': 'All right.', 'start': 1588.712, 'duration': 0.28}], 'summary': 'Adjusting font size, width, and line height for h1 to improve appearance.', 'duration': 30.382, 'max_score': 1558.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA1558610.jpg'}, {'end': 1723.338, 'src': 'embed', 'start': 1676.589, 'weight': 1, 'content': [{'end': 1680.731, 'text': 'And then also we need the CSS role plugin right here.', 'start': 1676.589, 'duration': 4.142}, {'end': 1682.772, 'text': "And I'll tell you why in a second.", 'start': 1681.211, 'duration': 1.561}, {'end': 1685.765, 'text': "So we're gonna do script.", 'start': 1684.884, 'duration': 0.881}, {'end': 1687.306, 'text': "We'll just write this here inline.", 'start': 1685.985, 'duration': 1.321}, {'end': 1697.556, 'text': 'And basically, in order for GSAP to gain access to this transform scale element,', 'start': 1688.507, 'duration': 9.049}, {'end': 1700.399, 'text': "because we're going to take that border and just kind of scale it out in the middle.", 'start': 1697.556, 'duration': 2.843}, {'end': 1707.485, 'text': "Because it's in a pseudo selector or pseudo element, we need to use that plugin that gains access to that.", 'start': 1701.38, 'duration': 6.105}, {'end': 1711.208, 'text': "So what we do is we're going to say cots content.", 'start': 1707.865, 'duration': 3.343}, {'end': 1715.692, 'text': "really this should be called something more suitable, like border or something, because that's what we're trying to animate here.", 'start': 1711.208, 'duration': 4.484}, {'end': 1720.696, 'text': 'CSS role plugin, get role, content before.', 'start': 1716.413, 'duration': 4.283}, {'end': 1721.697, 'text': 'All right.', 'start': 1721.417, 'duration': 0.28}, {'end': 1723.338, 'text': "And then we'll do a couple more.", 'start': 1722.297, 'duration': 1.041}], 'summary': 'Using css role plugin to gain access to transform scale element for gsap animation.', 'duration': 46.749, 'max_score': 1676.589, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA1676589.jpg'}], 'start': 1558.61, 'title': 'Using gsap for web animation', 'summary': 'Covers the application of gsap for web animation, involving setting font size, width, line height, flex properties, clip path, animation duration, and delay, with the aim of achieving a visually appealing web layout.', 'chapters': [{'end': 1915.36, 'start': 1558.61, 'title': 'Using gsap for web animation', 'summary': 'Covers the use of gsap for web animation, including setting font size, width, line height, flex properties, clip path, animation duration, and delay, with the goal of creating a visually appealing web layout.', 'duration': 356.75, 'highlights': ['The chapter covers the use of GSAP for web animation, including setting font size, width, line height, flex properties, clip path, animation duration, and delay, with the goal of creating a visually appealing web layout.', 'The H1 font size is set to four rem units, width to 50 viewport width, and line height to 97% to create a visually appealing web layout.', 'The paragraph font size is set to 1.3 rem units and width to 40 viewport width to complement the web layout.', 'The use of GSAP and CSS role plugin for transforming and animating elements, such as scaling the border and animating clip path for the H1 and paragraph elements, with specified durations and delays to achieve the desired effects.', 'The tutorial emphasizes the process of using GSAP for web animation and encourages viewers to explore further content in the 3GAS playlist.']}], 'duration': 356.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/dLYMzNmILQA/pics/dLYMzNmILQA1558610.jpg', 'highlights': ['The tutorial emphasizes the process of using GSAP for web animation and encourages viewers to explore further content in the 3GAS playlist.', 'The use of GSAP and CSS role plugin for transforming and animating elements, such as scaling the border and animating clip path for the H1 and paragraph elements, with specified durations and delays to achieve the desired effects.', 'The H1 font size is set to four rem units, width to 50 viewport width, and line height to 97% to create a visually appealing web layout.', 'The paragraph font size is set to 1.3 rem units and width to 40 viewport width to complement the web layout.', 'The chapter covers the use of GSAP for web animation, including setting font size, width, line height, flex properties, clip path, animation duration, and delay, with the goal of creating a visually appealing web layout.']}], 'highlights': ['Scrimba.com launched a front-end development career path, providing over 75 hours of content including html, css, javascript, and react, aimed at helping learners become hireable front end developers.', 'The chapter explains a four-step process to create particle aesthetics in 3JS, including changing materials, experimenting with particle size, and creating custom particle effects with custom geometries, with a specific example of creating a star field with 5,000 particles.', 'The process for loading custom textures and adjusting transparency and color properties. Demonstrates the use of a texture loader to load a custom texture, cross.png, with transparency and a white cross, and explains how to adjust transparency and colors of the texture.', 'The tick function and request animation frame are utilized in JavaScript to call the rotation of a sphere on every frame, approximately 60 times per second.', 'Utilizing GreenSock animation platform for animating UI elements.', 'The tutorial emphasizes the process of using GSAP for web animation and encourages viewers to explore further content in the 3GAS playlist.']}