title
Live Stream #46: Perlin Noise and Flow Fields
description
Live from sfpc.io!
This live stream is all about Perlin Noise! I explain how Perlin noise is created and how to visualize it. Then I get into 2D Perlin noise and use it to create a flow field with the p5.js library.
4:38 - Presenting today's topic
22:00 - Video #1 - Intro to Perlin noise
38:34 - Video #2 - Difference between noise() and random()
51:56 - Video #3 - Graphing values of Perlin noise
1:21:24 - Video #4 - 2D Perlin noise
1:40:58 - Video #5 - noiseDetail()
1:53:53 - Video #6 - Perlin noise flow field
2:32:15 - Conclusion/Q&A
Support this channel on Patreon: https://patreon.com/codingtrain
Send me your questions and coding challenges!
Contact: https://twitter.com/shiffman
Links discussed in this video:
Book of Shaders: http://thebookofshaders.com/
Perlin Noise Terrain Generator Video: https://www.youtube.com/watch?v=IKB1hWWedMk
Nature of Code video on the topic of Perlin noise: https://www.youtube.com/watch?v=8ZEMLCnn8v0
Pixel Array in p5.js video: https://www.youtube.com/watch?v=nMUMZ5YRxHI
Source Code for the Video Lessons: https://github.com/CodingTrain/Rainbow-Code
p5.js: https://p5js.org/
Processing: https://processing.org
For More Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
Help us caption & translate this video!
http://amara.org/v/Qbra/
📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct
detail
{'title': 'Live Stream #46: Perlin Noise and Flow Fields', 'heatmap': [{'end': 3778.449, 'start': 3672.715, 'weight': 0.751}, {'end': 7357.755, 'start': 7256.341, 'weight': 0.896}, {'end': 7852.705, 'start': 7743.603, 'weight': 0.708}, {'end': 8526.352, 'start': 8420.323, 'weight': 0.74}, {'end': 9198.056, 'start': 9002.59, 'weight': 0.946}], 'summary': "The live stream episode discusses perlin noise fields, javascript version of 'the nature of code' book, and programming updates. it also explores the concept of perlin noise, its visualization, and application in creating flow fields and visual effects in p5.js while optimizing performance for particle movement.", 'chapters': [{'end': 258.183, 'segs': [{'end': 81.31, 'src': 'embed', 'start': 29.919, 'weight': 3, 'content': [{'end': 60.161, 'text': 'Wait Hello, good morning.', 'start': 29.919, 'duration': 30.242}, {'end': 63.322, 'text': 'I see a green bar, which means I believe you can hear me now.', 'start': 60.181, 'duration': 3.141}, {'end': 66.723, 'text': 'Welcome to another episode of Coding Rainbow.', 'start': 63.822, 'duration': 2.901}, {'end': 68.084, 'text': 'This is episode number..', 'start': 66.763, 'duration': 1.321}, {'end': 69.445, 'text': 'I have no idea.', 'start': 68.084, 'duration': 1.361}, {'end': 77.168, 'text': "But I'm numbering the episodes now, and next time I do a live Coding Rainbow, I'll look at the number beforehand so I can tell you what number it is.", 'start': 70.125, 'duration': 7.043}, {'end': 81.31, 'text': 'But it is Tuesday, June 21st, on a very hot day in New York City.', 'start': 77.248, 'duration': 4.062}], 'summary': 'Live episode of coding rainbow on a hot day in new york city.', 'duration': 51.391, 'max_score': 29.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A29919.jpg'}, {'end': 215.38, 'src': 'embed', 'start': 100.436, 'weight': 0, 'content': [{'end': 103.339, 'text': 'But before I get to that stuff, let me just do some quick business.', 'start': 100.436, 'duration': 2.903}, {'end': 110.187, 'text': 'Number one is if you are watching this as an archive, you can check the time code, the description of this video, which will have time codes,', 'start': 103.76, 'duration': 6.427}, {'end': 112.97, 'text': 'so you can click around and find the important pieces of it.', 'start': 110.187, 'duration': 2.783}, {'end': 125.782, 'text': "And also, now that I've said that I want to check the chat here and see if in the chat please tell me, can you hear me?", 'start': 114.933, 'duration': 10.849}, {'end': 132.186, 'text': "and also I want to know I want to do it a sound check, even though actually I'm not sure if I'm gonna do any sound programming examples today.", 'start': 125.782, 'duration': 6.404}, {'end': 134.048, 'text': "but how's the balance?", 'start': 132.186, 'duration': 1.862}, {'end': 134.868, 'text': 'welcome to with me.', 'start': 134.048, 'duration': 0.82}, {'end': 152.774, 'text': "How's the balance of the volume of the music to the volume of me?", 'start': 147.97, 'duration': 4.804}, {'end': 155.036, 'text': "It's so much louder today on my computer.", 'start': 152.814, 'duration': 2.222}, {'end': 155.916, 'text': "It's interesting.", 'start': 155.416, 'duration': 0.5}, {'end': 159.119, 'text': 'The other day, I could barely hear the sound out of my computer, but it was too loud here.', 'start': 155.956, 'duration': 3.163}, {'end': 160.02, 'text': "I don't know what's going on.", 'start': 159.139, 'duration': 0.881}, {'end': 164.604, 'text': 'Hmm OK.', 'start': 161.841, 'duration': 2.763}, {'end': 172.817, 'text': 'OK All right, everybody settle down.', 'start': 164.624, 'duration': 8.193}, {'end': 174.7, 'text': 'Be nice to each other in the chat, please.', 'start': 172.837, 'duration': 1.863}, {'end': 177.223, 'text': "I don't want to have to start banning people.", 'start': 175.641, 'duration': 1.582}, {'end': 181.369, 'text': 'OK, so here we are today.', 'start': 179.046, 'duration': 2.323}, {'end': 182.671, 'text': 'Make what more loud? OK.', 'start': 181.81, 'duration': 0.861}, {'end': 189.459, 'text': 'So I have a few things on my mind today.', 'start': 186.836, 'duration': 2.623}, {'end': 196.905, 'text': "If this is new for you, if you haven't been here before, this is a YouTube live stream where I, me, my name is Dan.", 'start': 190.519, 'duration': 6.386}, {'end': 202.489, 'text': 'I make programming examples about a variety of different topics in the kind of creative coding space.', 'start': 197.025, 'duration': 5.464}, {'end': 208.314, 'text': 'And so I have a few things on my mind that I would like to look at today.', 'start': 204.351, 'duration': 3.963}, {'end': 212.278, 'text': "And let's talk about what some of those things are.", 'start': 209.375, 'duration': 2.903}, {'end': 215.38, 'text': "All right, first I'm going to check here.", 'start': 214.099, 'duration': 1.281}], 'summary': 'Dan discusses programming examples and upcoming topics in a youtube live stream.', 'duration': 114.944, 'max_score': 100.436, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A100436.jpg'}], 'start': 29.919, 'title': 'Live coding and volume balance', 'summary': 'Discusses a live episode of coding rainbow on june 21st, addressing technical issues and potential topics, along with the issue of volume balance between music and the speaker, emphasizing the need for adjustments and a youtube live stream by dan featuring programming examples and sound level checks, along with a brief twitter poll mention.', 'chapters': [{'end': 125.782, 'start': 29.919, 'title': 'Coding rainbow: episode june 21st', 'summary': 'Discusses the live episode of coding rainbow on june 21st, addressing technical issues, the date, and the potential topics for the day.', 'duration': 95.863, 'highlights': ['Technical issues addressed including audio verification and time code availability in the video description.', 'The episode is live on June 21st in a hot day in New York City.', 'The host is unsure of the episode number.', "The host is unwell, having a cold, and uncertain about the day's events."]}, {'end': 189.459, 'start': 125.782, 'title': 'Volume balance and sound check', 'summary': 'Discusses the issue of volume balance between music and the speaker, highlighting the disparity in volume levels and the need for adjustments.', 'duration': 63.677, 'highlights': ["The volume of the music is significantly louder on the computer, creating an imbalance with the speaker's volume.", 'The disparity in volume levels has been noticeable, with the speaker struggling to hear the sound from the computer on one occasion.', 'The speaker addresses the audience, emphasizing the need for respectful behavior in the chat.']}, {'end': 258.183, 'start': 190.519, 'title': 'Creative coding youtube live stream', 'summary': 'Covers a youtube live stream by dan, focusing on programming examples and checking sound levels, with a brief mention of a twitter poll.', 'duration': 67.664, 'highlights': ["Dan conducts a YouTube live stream focusing on programming examples and creative coding topics. The live stream is about programming examples and creative coding, indicating the primary focus of Dan's content.", 'Dan checks the sound levels and mentions a Twitter poll. Dan ensures that the sound levels are good and briefly mentions a Twitter poll, showing his interaction with the audience.']}], 'duration': 228.264, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A29919.jpg', 'highlights': ['Dan conducts a YouTube live stream focusing on programming examples and creative coding topics.', 'Technical issues addressed including audio verification and time code availability in the video description.', "The volume of the music is significantly louder on the computer, creating an imbalance with the speaker's volume.", 'The episode is live on June 21st in a hot day in New York City.', 'The disparity in volume levels has been noticeable, with the speaker struggling to hear the sound from the computer on one occasion.']}, {'end': 1277.322, 'segs': [{'end': 285.643, 'src': 'embed', 'start': 258.183, 'weight': 1, 'content': [{'end': 262.048, 'text': "so these are These are some topics that I'm thinking about today.", 'start': 258.183, 'duration': 3.865}, {'end': 265.23, 'text': 'And it looks like with, you can get your votes in now, 27 votes.', 'start': 262.067, 'duration': 3.163}, {'end': 270.093, 'text': 'It looks like people are certainly very interested in the Perlin noise fields.', 'start': 266.431, 'duration': 3.662}, {'end': 277.798, 'text': "Now, I'd like to do a little quick anecdotal poll with the chat and sort of get a sense.", 'start': 270.153, 'duration': 7.645}, {'end': 285.643, 'text': "One thing I've been thinking about is just kind of, I have a Perlin noise terrain generator example.", 'start': 277.858, 'duration': 7.785}], 'summary': '27 votes indicate high interest in perlin noise fields for terrain generation.', 'duration': 27.46, 'max_score': 258.183, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A258183.jpg'}, {'end': 411.625, 'src': 'embed', 'start': 381.413, 'weight': 0, 'content': [{'end': 386.155, 'text': "what I'm thinking about is actually taking today, which is about 11, 20 a.m.,", 'start': 381.413, 'duration': 4.742}, {'end': 395.197, 'text': 'and I have at least an hour and a half here to actually start from the beginning and do maybe a sequence of videos where I look at just what is the Perlin noise algorithm itself,', 'start': 386.175, 'duration': 9.022}, {'end': 396.677, 'text': 'how is it calculated?', 'start': 395.197, 'duration': 1.48}, {'end': 401.879, 'text': 'how does it work in processing and p5js and then take,', 'start': 396.677, 'duration': 5.202}, {'end': 411.625, 'text': 'what does it mean then to have Perlin noise in two dimensions or three dimensions and then actually build this flow field example and then make the hair like thing from that?', 'start': 401.879, 'duration': 9.746}], 'summary': 'Plan to create a sequence of videos on perlin noise algorithm and its applications, with at least an hour and a half dedicated to it.', 'duration': 30.212, 'max_score': 381.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A381413.jpg'}, {'end': 565.622, 'src': 'embed', 'start': 543.106, 'weight': 2, 'content': [{'end': 551.972, 'text': "and You know they're really at a course the book about algorithms and ideas but the code for this particular book is all processing Java based.", 'start': 543.106, 'duration': 8.866}, {'end': 557.536, 'text': 'so I am currently working on a JavaScript version of this book, Which I hope to have out by the end of the summer.', 'start': 551.972, 'duration': 5.564}, {'end': 561.239, 'text': 'Some people have asked if they can help with that, and so what I might take some time.', 'start': 557.536, 'duration': 3.703}, {'end': 565.622, 'text': "I don't want to do this now because I'll get totally distracted, but if you, if you can see,", 'start': 561.239, 'duration': 4.383}], 'summary': 'Working on a javascript version of a book about algorithms, aiming for release by end of summer.', 'duration': 22.516, 'max_score': 543.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A543106.jpg'}, {'end': 918.446, 'src': 'embed', 'start': 872.704, 'weight': 3, 'content': [{'end': 876.647, 'text': 'This icon over here is built on top of Java and is the Java programming language.', 'start': 872.704, 'duration': 3.943}, {'end': 881.851, 'text': 'The thing that I might be using more of now these days is JavaScript, in particular the p5.js framework.', 'start': 876.867, 'duration': 4.984}, {'end': 885.874, 'text': "And so those are the two things that I'm focusing on in this video tutorial series.", 'start': 882.712, 'duration': 3.162}, {'end': 893.42, 'text': 'However.. This fall, I do, or soon, I do plan on doing some, oh, maybe I can show a little bit of this today.', 'start': 885.955, 'duration': 7.465}, {'end': 897.663, 'text': "I've been working with Computer Craft in Minecraft, which is actually using the Lua programming language.", 'start': 893.44, 'duration': 4.223}, {'end': 901.106, 'text': 'And I, you know, people have requested some C++ tutorials.', 'start': 898.604, 'duration': 2.502}, {'end': 902.547, 'text': 'I might consider that someday.', 'start': 901.166, 'duration': 1.381}, {'end': 906.75, 'text': 'And I will be doing in the fall more with Node.js, which is also JavaScript.', 'start': 903.027, 'duration': 3.723}, {'end': 912.304, 'text': 'okay, here we go.', 'start': 910.723, 'duration': 1.581}, {'end': 913.484, 'text': 'so let me see.', 'start': 912.304, 'duration': 1.18}, {'end': 915.165, 'text': 'here I have a.', 'start': 913.484, 'duration': 1.681}, {'end': 918.446, 'text': 'let me open this up in Adam.', 'start': 915.165, 'duration': 3.281}], 'summary': 'Focusing on java and javascript, plans for lua, c++, and node.js tutorials.', 'duration': 45.742, 'max_score': 872.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A872704.jpg'}, {'end': 1087.661, 'src': 'embed', 'start': 1053.756, 'weight': 5, 'content': [{'end': 1055.516, 'text': 'OK Hello, everyone.', 'start': 1053.756, 'duration': 1.76}, {'end': 1056.632, 'text': "I'm back.", 'start': 1056.152, 'duration': 0.48}, {'end': 1065.82, 'text': "Yeah Yeah, I don't know why I used background 51.", 'start': 1056.652, 'duration': 9.168}, {'end': 1070.643, 'text': 'Ah, DragonHunt3 asked, what is Perlin Noise? Thank you for asking that question.', 'start': 1065.82, 'duration': 4.823}, {'end': 1074.246, 'text': 'You have just indicated to me that it is worth taking today.', 'start': 1070.944, 'duration': 3.302}, {'end': 1075.087, 'text': 'Today is the day.', 'start': 1074.306, 'duration': 0.781}, {'end': 1080.636, 'text': 'about Perlin noise.', 'start': 1077.393, 'duration': 3.243}, {'end': 1084.138, 'text': 'so first I want to show you something I feel like there was.', 'start': 1080.636, 'duration': 3.502}, {'end': 1087.661, 'text': "I'm going to google Hugo Elias Perlin noise.", 'start': 1084.138, 'duration': 3.523}], 'summary': "Introducing perlin noise and its significance in today's session.", 'duration': 33.905, 'max_score': 1053.756, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A1053756.jpg'}], 'start': 258.183, 'title': 'Perlin noise and programming updates', 'summary': "Delves into perlin noise fields, tutorials on the algorithm, plans for a javascript version of 'the nature of code' book, and programming updates covering java, javascript, and lua, with a brief mention of perlin noise.", 'chapters': [{'end': 731.477, 'start': 258.183, 'title': 'Perlin noise flow field', 'summary': "Discusses the interest in perlin noise fields, plans for creating tutorials on perlin noise algorithm, and the upcoming javascript version of 'the nature of code' book.", 'duration': 473.294, 'highlights': ['Plans for creating tutorials on Perlin noise algorithm and its applications in processing and p5js. The speaker plans to start a sequence of videos to explain the Perlin noise algorithm, its calculation, and applications in processing and p5js.', 'Interest in Perlin noise fields and the popularity of related topics. The audience shows significant interest in Perlin noise fields, as indicated by 27 votes and active participation in the chat.', "Upcoming JavaScript version of 'The Nature of Code' book. The speaker is working on a JavaScript version of the book 'The Nature of Code' and aims to release it by the end of the summer."]}, {'end': 1277.322, 'start': 731.477, 'title': 'Youtube channel programming and tutorial update', 'summary': 'Discusses the programming languages java, javascript, and lua, as well as plans for upcoming tutorials and a brief mention of perlin noise.', 'duration': 545.845, 'highlights': ['The main programming languages discussed are Java and processing, with a focus on p5.js framework and plans for tutorials on Node.js and C++ in the future. The main programming languages discussed are Java and processing, with a focus on p5.js framework and plans for tutorials on Node.js and C++ in the future.', 'Mention of working with Computer Craft in Minecraft using the Lua programming language and a brief mention of Perlin Noise. Mention of working with Computer Craft in Minecraft using the Lua programming language and a brief mention of Perlin Noise.', 'Brief discussion about Perlin Noise and the search for Hugo Elias Perlin noise algorithm page for reference. Brief discussion about Perlin Noise and the search for Hugo Elias Perlin noise algorithm page for reference.']}], 'duration': 1019.139, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A258183.jpg', 'highlights': ['The speaker plans to start a sequence of videos to explain the Perlin noise algorithm, its calculation, and applications in processing and p5js.', 'The audience shows significant interest in Perlin noise fields, as indicated by 27 votes and active participation in the chat.', "The speaker is working on a JavaScript version of the book 'The Nature of Code' and aims to release it by the end of the summer.", 'The main programming languages discussed are Java and processing, with a focus on p5.js framework and plans for tutorials on Node.js and C++ in the future.', 'Mention of working with Computer Craft in Minecraft using the Lua programming language and a brief mention of Perlin Noise.', 'Brief discussion about Perlin Noise and the search for Hugo Elias Perlin noise algorithm page for reference.']}, {'end': 2292.451, 'segs': [{'end': 1309.445, 'src': 'embed', 'start': 1277.322, 'weight': 7, 'content': [{'end': 1278.824, 'text': "welcome. so I'm gonna get started now.", 'start': 1277.322, 'duration': 1.502}, {'end': 1279.965, 'text': "I'm gonna cycle the cameras.", 'start': 1278.824, 'duration': 1.141}, {'end': 1298.661, 'text': "so what I'm going to do is a multi-part series, a multi-part video to look at eventually how to do a Perlin noise field, and This is, you know,", 'start': 1287.237, 'duration': 11.424}, {'end': 1303.423, 'text': 'a kind of classic visualization of that field, with kind of nice alpha blended lines.', 'start': 1298.661, 'duration': 4.762}, {'end': 1307.664, 'text': "okay?. I'm like itchy.", 'start': 1303.423, 'duration': 4.241}, {'end': 1309.145, 'text': "everything's going wrong today here.", 'start': 1307.664, 'duration': 1.481}, {'end': 1309.445, 'text': 'We go.', 'start': 1309.165, 'duration': 0.28}], 'summary': 'Creating a multi-part video on perlin noise field visualization with alpha blended lines.', 'duration': 32.123, 'max_score': 1277.322, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A1277322.jpg'}, {'end': 1365.812, 'src': 'embed', 'start': 1335.817, 'weight': 4, 'content': [{'end': 1340.439, 'text': 'which is going to be two or three short videos I want to have show you how to make this particular project.', 'start': 1335.817, 'duration': 4.622}, {'end': 1346.002, 'text': 'but before I can get there, I just want to answer the question in this video what is Perlin noise?', 'start': 1340.439, 'duration': 5.563}, {'end': 1350.604, 'text': 'and do a quick p5.js javascript sketch that shows you the basics of it.', 'start': 1346.002, 'duration': 4.602}, {'end': 1353.825, 'text': 'so Let me come over here and make a little diagram.', 'start': 1350.604, 'duration': 3.221}, {'end': 1358.468, 'text': 'So there are two functions in the p5.js library.', 'start': 1354.146, 'duration': 4.322}, {'end': 1360.329, 'text': 'This is also in processing as well.', 'start': 1358.468, 'duration': 1.861}, {'end': 1365.812, 'text': "There are more than two functions, but there's two functions that I'm thinking of right now that are relevant to this discussion.", 'start': 1360.329, 'duration': 5.483}], 'summary': 'Transcript explains perlin noise in p5.js with relevant functions.', 'duration': 29.995, 'max_score': 1335.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A1335817.jpg'}, {'end': 1409.07, 'src': 'embed', 'start': 1380.896, 'weight': 6, 'content': [{'end': 1386.921, 'text': "If you think about audio noise, that sound, it's kind of like random audio gibberish.", 'start': 1380.896, 'duration': 6.025}, {'end': 1396.269, 'text': 'But the noise function in both processing and p5.js refers to a particular kind of noise called Perlin noise.', 'start': 1387.562, 'duration': 8.707}, {'end': 1409.07, 'text': 'Now Perlin noise is named for a computer scientist named Ken Perlin, who was developing algorithms and has been developing algorithms for many years,', 'start': 1396.97, 'duration': 12.1}], 'summary': 'Perlin noise in processing and p5.js is named after computer scientist ken perlin.', 'duration': 28.174, 'max_score': 1380.896, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A1380896.jpg'}, {'end': 1498.455, 'src': 'embed', 'start': 1474.93, 'weight': 3, 'content': [{'end': 1485.252, 'text': 'I could render some sort of wood-like texture just with my pencil and paper and scan it or use some fancy Photoshop Illustrator-like program.', 'start': 1474.93, 'duration': 10.322}, {'end': 1490.573, 'text': 'Or I could have an algorithm that generates all the pixels to make that kind of texture.', 'start': 1485.632, 'duration': 4.941}, {'end': 1498.455, 'text': "So that's what Perlin Noise was originally developed for, procedural textures for three-dimensional objects in computer graphics.", 'start': 1490.853, 'duration': 7.602}], 'summary': 'Perlin noise generates procedural textures for 3d computer graphics.', 'duration': 23.525, 'max_score': 1474.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A1474930.jpg'}, {'end': 1777.592, 'src': 'embed', 'start': 1746.143, 'weight': 0, 'content': [{'end': 1751.787, 'text': 'And I want now, instead of random values, I want Perlin noise values over time.', 'start': 1746.143, 'duration': 5.644}, {'end': 1755.249, 'text': "So I'm going to draw you sort of a visual approximation of what it might look like.", 'start': 1751.847, 'duration': 3.402}, {'end': 1757.653, 'text': 'Something like this.', 'start': 1756.832, 'duration': 0.821}, {'end': 1767.282, 'text': 'So the idea here is that ultimately at its core, Perlin noise gives you smooth random numbers.', 'start': 1759.515, 'duration': 7.767}, {'end': 1768.744, 'text': 'What do I mean by smooth??', 'start': 1767.502, 'duration': 1.242}, {'end': 1777.592, 'text': 'I mean that a random number that you might pick at any point in time is related to the random number you might pick later, Moment later,', 'start': 1769.064, 'duration': 8.528}], 'summary': 'Utilizing perlin noise values over time to generate smooth random numbers.', 'duration': 31.449, 'max_score': 1746.143, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A1746143.jpg'}, {'end': 2088.389, 'src': 'embed', 'start': 2056.219, 'weight': 1, 'content': [{'end': 2058.282, 'text': 'And these, by the way, are known as octaves.', 'start': 2056.219, 'duration': 2.063}, {'end': 2064.79, 'text': "So Perlin noise is calculated over a number of octaves, and essentially it's a bunch of random waveforms.", 'start': 2058.902, 'duration': 5.888}, {'end': 2070.897, 'text': 'And those waveforms, their period and their amplitude change over those octaves and get added together.', 'start': 2065.23, 'duration': 5.667}, {'end': 2073.4, 'text': 'And in that sense, it has a fractal-like quality.', 'start': 2071.137, 'duration': 2.263}, {'end': 2078.382, 'text': "You might have to go back and find some of my videos about fractals if that concept doesn't make sense to you.", 'start': 2073.9, 'duration': 4.482}, {'end': 2083.206, 'text': "But fractal is this idea of self-similar shape, meaning at any zoom level, it's the same thing.", 'start': 2078.663, 'duration': 4.543}, {'end': 2088.389, 'text': "And because we're getting sort of finer and finer detail as we go through these different octaves.", 'start': 2083.485, 'duration': 4.904}], 'summary': 'Perlin noise is calculated over multiple octaves, creating fractal-like quality through self-similar shapes and finer details.', 'duration': 32.17, 'max_score': 2056.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A2056219.jpg'}], 'start': 1277.322, 'title': 'Understanding perlin noise', 'summary': 'Introduces a multi-part series on creating a 2d perlin noise field in p5.js, aiming to explain the concept of perlin noise and its visualization, leading to a project demonstration within two to three short videos. it also explores the origin, applications, and algorithm of perlin noise for computer graphics, laying the groundwork for further exploration.', 'chapters': [{'end': 1409.07, 'start': 1277.322, 'title': 'Understanding perlin noise', 'summary': 'Introduces a multi-part series on creating a 2d perlin noise field, aiming to explain the concept of perlin noise and its visualization in p5.js, ultimately leading to a project demonstration, within two to three short videos.', 'duration': 131.748, 'highlights': ['The chapter introduces a multi-part series on creating a 2D Perlin noise field with the goal of explaining the concept of Perlin noise and its visualization in p5.js.', 'Perlin noise is named after computer scientist Ken Perlin and refers to a specific type of noise, not just random noise.', 'The chapter mentions the intention to demonstrate the project at the end of the video series within two to three short videos.']}, {'end': 1718.325, 'start': 1409.07, 'title': 'Perlin noise for computer graphics', 'summary': 'Explores the origin and applications of perlin noise, originally developed for procedural textures in computer graphics, and its one-dimensional representation using random values over time, laying the groundwork for further exploration of the algorithm.', 'duration': 309.255, 'highlights': ['Perlin Noise was originally developed for procedural textures for three-dimensional objects in computer graphics, and Ken Perlin won an Academy Award for technical achievement for this development.', 'The one-dimensional representation of Perlin noise involves obtaining random values over time, similar to calling the random function in an animation, and this concept forms the basis for understanding the algorithm.', 'The chapter also mentions the historical context of Perlin noise and the film Tron as well as the manual creation of textures in computer graphics before the development of Perlin noise.']}, {'end': 2292.451, 'start': 1718.325, 'title': 'Perlin noise algorithm', 'summary': 'Explores the concept of perlin noise, explaining its smooth random numbers and how they are generated through a series of mathematical operations, ultimately creating a fractal-like quality, with no specific quantifiable data provided.', 'duration': 574.126, 'highlights': ['Perlin noise provides smooth random numbers, creating a visual approximation of smooth random values related over time.', 'The algorithm for generating Perlin noise involves a series of mathematical operations, including picking random values with specific amplitudes and intervals, and adding them together to create multiple octaves of random waveforms.', 'Perlin noise has a fractal-like quality, with finer and finer details as one zooms in, creating a self-similar shape at different levels of magnification.']}], 'duration': 1015.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A1277322.jpg', 'highlights': ['Perlin noise provides smooth random numbers, creating a visual approximation of smooth random values related over time.', 'The algorithm for generating Perlin noise involves a series of mathematical operations, including picking random values with specific amplitudes and intervals, and adding them together to create multiple octaves of random waveforms.', 'Perlin noise has a fractal-like quality, with finer and finer details as one zooms in, creating a self-similar shape at different levels of magnification.', 'Perlin Noise was originally developed for procedural textures for three-dimensional objects in computer graphics, and Ken Perlin won an Academy Award for technical achievement for this development.', 'The chapter introduces a multi-part series on creating a 2D Perlin noise field with the goal of explaining the concept of Perlin noise and its visualization in p5.js.', 'The one-dimensional representation of Perlin noise involves obtaining random values over time, similar to calling the random function in an animation, and this concept forms the basis for understanding the algorithm.', 'Perlin noise is named after computer scientist Ken Perlin and refers to a specific type of noise, not just random noise.', 'The chapter mentions the intention to demonstrate the project at the end of the video series within two to three short videos.', 'The chapter also mentions the historical context of Perlin noise and the film Tron as well as the manual creation of textures in computer graphics before the development of Perlin noise.']}, {'end': 3003.455, 'segs': [{'end': 2373.826, 'src': 'embed', 'start': 2339.5, 'weight': 0, 'content': [{'end': 2344.862, 'text': 'I was making a mess of this diagram, trying to explain how Perlin Noise is calculated over multiple octaves.', 'start': 2339.5, 'duration': 5.362}, {'end': 2360.767, 'text': 'So what I next need to look at is How do I actually call the noise function in p5.js or a processing and get values out of it and make use of those values?', 'start': 2347.683, 'duration': 13.084}, {'end': 2373.826, 'text': 'So one thing that is true is if you call the random function random, you can give it a minimum and a maximum argument,', 'start': 2361.187, 'duration': 12.639}], 'summary': 'Explaining perlin noise calculation and using noise function in p5.js or processing.', 'duration': 34.326, 'max_score': 2339.5, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A2339500.jpg'}, {'end': 2590.893, 'src': 'embed', 'start': 2564.325, 'weight': 1, 'content': [{'end': 2568.608, 'text': "Notice, the value is always a floating point value and it doesn't seem to be greater than one.", 'start': 2564.325, 'duration': 4.283}, {'end': 2570.889, 'text': 'It all seems to be clustering around point five.', 'start': 2568.608, 'duration': 2.281}, {'end': 2573.711, 'text': "so noise values actually don't have a uniform distribution.", 'start': 2570.889, 'duration': 2.822}, {'end': 2574.591, 'text': 'Between them.', 'start': 2573.711, 'duration': 0.88}, {'end': 2576.713, 'text': 'by the way, the range is between zero and one.', 'start': 2574.591, 'duration': 2.122}, {'end': 2579.234, 'text': "they also don't have a uniform distribution.", 'start': 2576.713, 'duration': 2.521}, {'end': 2583.477, 'text': "Right, if you, if I were to say to you Let's look at.", 'start': 2579.234, 'duration': 4.243}, {'end': 2590.893, 'text': "Let's say I want to pick random values between 0 and 1 over time.", 'start': 2585.208, 'duration': 5.685}], 'summary': 'The values are floating point, clustering around 0.5, with a range of 0 to 1.', 'duration': 26.568, 'max_score': 2564.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A2564325.jpg'}, {'end': 2728.535, 'src': 'embed', 'start': 2700.286, 'weight': 3, 'content': [{'end': 2705.372, 'text': 'No matter what you do, the noise function will always return values between 0 and 1.', 'start': 2700.286, 'duration': 5.086}, {'end': 2713.661, 'text': 'So one thing that I want to do is take that, the result of that function, which goes between 0 and 1, and map it between 0 and width.', 'start': 2705.372, 'duration': 8.289}, {'end': 2724.314, 'text': 'In truth, I could just multiply by width, because multiplying a number between 0 and 1 multiplies it by width, Gives me a value between 0 and width.', 'start': 2713.922, 'duration': 10.392}, {'end': 2728.535, 'text': 'so now, if I refresh this, Did I not hit save?', 'start': 2724.314, 'duration': 4.221}], 'summary': 'The noise function returns values between 0 and 1, which are then mapped to a range between 0 and width by multiplying with width.', 'duration': 28.249, 'max_score': 2700.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A2700286.jpg'}, {'end': 2804.765, 'src': 'embed', 'start': 2769.856, 'weight': 4, 'content': [{'end': 2773.099, 'text': 'Why?? Because that number is the same all the time.', 'start': 2769.856, 'duration': 3.243}, {'end': 2779.445, 'text': 'So what I want to do is make this instead of a fixed value 100, I want to call this something like x offset.', 'start': 2773.379, 'duration': 6.066}, {'end': 2780.786, 'text': 'I want a variable.', 'start': 2779.745, 'duration': 1.041}, {'end': 2788.833, 'text': "What I want to do is I want, I don't have my graph here anymore, but if this is my graph of Perlin noise, I want to move throughout the space.", 'start': 2781.006, 'duration': 7.827}, {'end': 2791.435, 'text': 'I could move forward or backward, I could move quickly, I could move slowly.', 'start': 2788.893, 'duration': 2.542}, {'end': 2794.498, 'text': 'I want to get new values every time through draw.', 'start': 2791.675, 'duration': 2.823}, {'end': 2804.765, 'text': 'So here, all I can do now is say x, I can say x offset here, and I can say x offset plus equals 0.01.', 'start': 2795.379, 'duration': 9.386}], 'summary': 'Desire to use a variable x offset instead of fixed value 100, to move throughout the space and get new values every time through draw.', 'duration': 34.909, 'max_score': 2769.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A2769856.jpg'}, {'end': 2841.596, 'src': 'embed', 'start': 2813.71, 'weight': 2, 'content': [{'end': 2821.474, 'text': "Now you're looking at Perlin noise values over time represented as an x position with,", 'start': 2813.71, 'duration': 7.764}, {'end': 2828.053, 'text': 'compared to Random values over time represented as an exposition, so see the difference.', 'start': 2821.474, 'duration': 6.579}, {'end': 2830.073, 'text': "I'm not looking at that graph anymore.", 'start': 2828.073, 'duration': 2}, {'end': 2833.874, 'text': "I'm just looking at a single value, but I'm looking at it each moment in time.", 'start': 2830.073, 'duration': 3.801}, {'end': 2841.596, 'text': 'so hopefully this gives you the idea of Perlin noise, of how Perlin noise works and core level.', 'start': 2833.874, 'duration': 7.722}], 'summary': 'Comparing perlin noise and random values over time to demonstrate their differences.', 'duration': 27.886, 'max_score': 2813.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A2813710.jpg'}], 'start': 2292.451, 'title': 'Understanding perlin noise in coding', 'summary': "Discusses the use of perlin noise in p5.js, including its calculation over multiple octaves, calling the noise function in p5.js, and the characteristics of the noise values, such as their distribution and range. it also introduces the concept of perlin noise in coding, demonstrating its implementation using p5.js and its different behavior compared to random values, highlighting the significance of the parameter 'x offset' and its impact on the speed and behavior of the generated values.", 'chapters': [{'end': 2611.988, 'start': 2292.451, 'title': 'Understanding perlin noise in p5.js', 'summary': 'Discusses the use of perlin noise in p5.js, including its calculation over multiple octaves, calling the noise function in p5.js, and the characteristics of the noise values, such as their distribution and range.', 'duration': 319.537, 'highlights': ['The chapter explains the calculation of Perlin noise over multiple octaves, demonstrating how to call the noise function in p5.js, and the characteristics of the noise values, such as their distribution and range.', 'The nature of the noise values is discussed, revealing that they do not have a uniform distribution and tend to cluster around the mean or the center 0.5.', 'The use of the random function in p5.js is compared to the use of Perlin noise, highlighting the differences in providing arguments and the resulting values.', 'The chapter delves into the comparison between using the random function and Perlin noise, emphasizing the different arguments required and the nature of the resulting values.', 'The speaker demonstrates calling the random function with different arguments and showcases the resulting values, providing a practical comparison to the use of Perlin noise.']}, {'end': 3003.455, 'start': 2611.988, 'title': 'Understanding perlin noise in coding', 'summary': "Introduces the concept of perlin noise in coding, demonstrating its implementation using p5.js and its different behavior compared to random values, highlighting the significance of the parameter 'x offset' and its impact on the speed and behavior of the generated values.", 'duration': 391.467, 'highlights': ["The significance of the parameter 'x offset' and its impact on the speed and behavior of the generated values, demonstrated by changing the value of 'x offset' and observing the corresponding changes in the behavior of Perlin noise values.", 'The difference between Perlin noise values over time represented as an x position and random values over time represented as an x position, showing the smooth randomness of Perlin noise compared to the erratic randomness of random values.', 'The explanation of how the Perlin noise function always returns values between 0 and 1, and the subsequent mapping of these values to a desired range, such as 0 to width, to manipulate the output.', "The demonstration of the impact of changing the parameter 'x offset' on the speed of traversal through the Perlin noise graph, illustrating how smaller values result in slower traversal, while larger values lead to faster traversal and the loss of the characteristic clustering of Perlin noise values.", 'The intention to cover one-dimensional and two-dimensional Perlin noise, and the creation of procedural textures using Perlin noise, as well as the acknowledgment of the need to address the y-axis in the upcoming content.']}], 'duration': 711.004, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A2292451.jpg', 'highlights': ['The chapter explains the calculation of Perlin noise over multiple octaves, demonstrating how to call the noise function in p5.js, and the characteristics of the noise values, such as their distribution and range.', 'The nature of the noise values is discussed, revealing that they do not have a uniform distribution and tend to cluster around the mean or the center 0.5.', 'The difference between Perlin noise values over time represented as an x position and random values over time represented as an x position, showing the smooth randomness of Perlin noise compared to the erratic randomness of random values.', 'The explanation of how the Perlin noise function always returns values between 0 and 1, and the subsequent mapping of these values to a desired range, such as 0 to width, to manipulate the output.', "The significance of the parameter 'x offset' and its impact on the speed and behavior of the generated values, demonstrated by changing the value of 'x offset' and observing the corresponding changes in the behavior of Perlin noise values."]}, {'end': 4577.724, 'segs': [{'end': 3699.971, 'src': 'embed', 'start': 3672.715, 'weight': 1, 'content': [{'end': 3683.443, 'text': 'This is what Perlin noise looks like when I graph it, smooth randomness as compared to Random.', 'start': 3672.715, 'duration': 10.728}, {'end': 3685.104, 'text': 'So you can really see the difference now.', 'start': 3683.743, 'duration': 1.361}, {'end': 3686.705, 'text': 'Now I want to do a few more things with this.', 'start': 3685.124, 'duration': 1.581}, {'end': 3688.946, 'text': "There's a couple things I want to do.", 'start': 3688.065, 'duration': 0.881}, {'end': 3695.509, 'text': 'One thing is I just want to show you what happens when I change this particular parameter.', 'start': 3689.546, 'duration': 5.963}, {'end': 3698.49, 'text': 'So let me make this 0.01 instead of 0.02.', 'start': 3695.809, 'duration': 2.681}, {'end': 3699.971, 'text': "And actually, let's do something.", 'start': 3698.49, 'duration': 1.481}], 'summary': 'Perlin noise graph shows smooth randomness compared to random.', 'duration': 27.256, 'max_score': 3672.715, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A3672715.jpg'}, {'end': 3778.449, 'src': 'heatmap', 'start': 3672.715, 'weight': 0.751, 'content': [{'end': 3683.443, 'text': 'This is what Perlin noise looks like when I graph it, smooth randomness as compared to Random.', 'start': 3672.715, 'duration': 10.728}, {'end': 3685.104, 'text': 'So you can really see the difference now.', 'start': 3683.743, 'duration': 1.361}, {'end': 3686.705, 'text': 'Now I want to do a few more things with this.', 'start': 3685.124, 'duration': 1.581}, {'end': 3688.946, 'text': "There's a couple things I want to do.", 'start': 3688.065, 'duration': 0.881}, {'end': 3695.509, 'text': 'One thing is I just want to show you what happens when I change this particular parameter.', 'start': 3689.546, 'duration': 5.963}, {'end': 3698.49, 'text': 'So let me make this 0.01 instead of 0.02.', 'start': 3695.809, 'duration': 2.681}, {'end': 3699.971, 'text': "And actually, let's do something.", 'start': 3698.49, 'duration': 1.481}, {'end': 3701.311, 'text': "Oh, the other thing, let's loop it.", 'start': 3700.051, 'duration': 1.26}, {'end': 3708.883, 'text': "So you can see I'm adding the loop back in, it's animating, but remember the Perlin noise values are fixed.", 'start': 3703.959, 'duration': 4.924}, {'end': 3713.928, 'text': "So if x offset always starts at zero, I'm going to get the same values.", 'start': 3709.284, 'duration': 4.644}, {'end': 3720.674, 'text': "So let me do something where I make an increment variable and I say that's 0.01.", 'start': 3714.188, 'duration': 6.486}, {'end': 3725.118, 'text': "So I'm going to increase by that increment variable.", 'start': 3720.674, 'duration': 4.444}, {'end': 3730.226, 'text': 'And now I can do things like say, what if increment is 1? You can see what that looks like.', 'start': 3726.044, 'duration': 4.182}, {'end': 3734.328, 'text': 'What if increment is 0.001? You can see how smooth that is.', 'start': 3730.486, 'duration': 3.842}, {'end': 3736.468, 'text': 'And I could easily tie this to a slider.', 'start': 3734.548, 'duration': 1.92}, {'end': 3738.089, 'text': 'That would be a nice thing to do.', 'start': 3736.509, 'duration': 1.58}, {'end': 3745.792, 'text': 'And you can see how the graph changes based on that increment value.', 'start': 3741.631, 'duration': 4.161}, {'end': 3749.574, 'text': "Now there's another thing I could do to this, which I think would be kind of interesting.", 'start': 3746.333, 'duration': 3.241}, {'end': 3753.516, 'text': 'What if I want to kind of scan across the Perlin noise space?', 'start': 3750.414, 'duration': 3.102}, {'end': 3758.747, 'text': "What if I don't always want x offset to start at 0??", 'start': 3754.744, 'duration': 4.003}, {'end': 3772.817, 'text': 'So in this case I could say start equals 0, x offset equals start, and then I could say the start also changes by that increment.', 'start': 3758.747, 'duration': 14.07}, {'end': 3774.988, 'text': 'now look at this.', 'start': 3774.008, 'duration': 0.98}, {'end': 3778.449, 'text': "now I'm sort of seeing and this is basically exactly what I did.", 'start': 3774.988, 'duration': 3.461}], 'summary': 'Demonstrating perlin noise graph with varying parameters and animations.', 'duration': 105.734, 'max_score': 3672.715, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A3672715.jpg'}, {'end': 3823.577, 'src': 'embed', 'start': 3796.554, 'weight': 2, 'content': [{'end': 3801.435, 'text': "i'm moving across this space of moving across the Perlin noise space over time.", 'start': 3796.554, 'duration': 4.881}, {'end': 3804.719, 'text': "Boy, there's so many things I want to add to this.", 'start': 3803.117, 'duration': 1.602}, {'end': 3806.201, 'text': 'Let me think about it.', 'start': 3805.56, 'duration': 0.641}, {'end': 3814.871, 'text': 'OK, one thing I think I should mention here, by the way, this kind of looks like a wave form, right? Like a sine wave.', 'start': 3806.221, 'duration': 8.65}, {'end': 3820.178, 'text': 'I could easily just, by the way, change the noise function to sine.', 'start': 3815.252, 'duration': 4.926}, {'end': 3822.516, 'text': 'And notice what I get.', 'start': 3821.775, 'duration': 0.741}, {'end': 3823.577, 'text': 'I get a sine wave.', 'start': 3822.536, 'duration': 1.041}], 'summary': 'Exploring perlin noise space, considering changes to create a sine wave.', 'duration': 27.023, 'max_score': 3796.554, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A3796554.jpg'}, {'end': 4045.797, 'src': 'embed', 'start': 4016.777, 'weight': 0, 'content': [{'end': 4018.278, 'text': 'This will be a weird edit cut.', 'start': 4016.777, 'duration': 1.501}, {'end': 4032.303, 'text': "So in a moment I'm almost ready to look at two-dimensional Perlin noise and what happens when we get to two-dimensional Perlin noise.", 'start': 4022.52, 'duration': 9.783}, {'end': 4036.067, 'text': 'But I want to briefly record one additional video, which will be next in this sequence.', 'start': 4032.303, 'duration': 3.764}, {'end': 4038.79, 'text': "I'm just looking at the noise detail function and how that?", 'start': 4036.067, 'duration': 2.723}, {'end': 4044.876, 'text': 'no, no, no, no, no, the noise detail function is going to make so much more sense once I already have the two-dimensional noise.', 'start': 4038.79, 'duration': 6.086}, {'end': 4045.797, 'text': "So I'm going to.", 'start': 4044.876, 'duration': 0.921}], 'summary': 'Exploring two-dimensional perlin noise and its impact on noise detail function.', 'duration': 29.02, 'max_score': 4016.777, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A4016777.jpg'}, {'end': 4269.758, 'src': 'embed', 'start': 4243.004, 'weight': 3, 'content': [{'end': 4251.327, 'text': 'P5.js, while has a lot, a lot of the same stuff as processing Java, is actually not a port.', 'start': 4243.004, 'duration': 8.323}, {'end': 4253.909, 'text': "It's really a reimagining of processing for the web.", 'start': 4251.327, 'duration': 2.582}, {'end': 4255.669, 'text': "So there's a lot of differences in how the ape,", 'start': 4253.909, 'duration': 1.76}, {'end': 4261.392, 'text': "there's a lot of subtle differences how the API works and a lot of new functionality That's based on web functionality.", 'start': 4255.669, 'duration': 5.723}, {'end': 4269.758, 'text': "um Yeah, so it's tricky, because processing Java used to be referred to as P5 for short.", 'start': 4261.392, 'duration': 8.366}], 'summary': 'P5.js is a web-based reimagining of processing java, with new web-based functionality.', 'duration': 26.754, 'max_score': 4243.004, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A4243004.jpg'}], 'start': 3003.455, 'title': 'Perlin noise and graphing', 'summary': 'Explores the concept of perlin noise, graphing its values over time, and the potential of two-dimensional perlin noise, aiming to achieve varying x and y values using perlin noise for diverse visual effects. it also demonstrates the use of perlin noise to generate smooth random values, showcasing the difference between perlin noise and random values, discusses the use of perlin noise and sine wave functions to create visual effects, and compares processing java, processing python, and p5.js.', 'chapters': [{'end': 3290.223, 'start': 3003.455, 'title': 'Perlin noise and graphing', 'summary': 'Explores the concept of perlin noise, graphing its values over time, and the potential of two-dimensional perlin noise, aiming to achieve varying x and y values using perlin noise for more diverse visual effects.', 'duration': 286.768, 'highlights': ['The chapter delves into understanding and graphing the values of Perlin noise over time, enhancing the visual representation and exploring the potential of two-dimensional Perlin noise.', 'The speaker plans to incorporate the y-axis into the Perlin noise visualization and aims to demonstrate graphing the values of Perlin noise over time for enhanced visualization.', 'The speaker discusses the need for two x offsets to achieve varying x and y values using Perlin noise for diverse visual effects.']}, {'end': 3796.554, 'start': 3290.483, 'title': 'Perlin noise graph demonstration', 'summary': 'Demonstrates the use of perlin noise to generate smooth random values, with a visual representation of the graph showcasing the difference between perlin noise and random values, along with the impact of changing parameters and increment values.', 'duration': 506.071, 'highlights': ['Demonstrated visual representation of the Perlin noise graph showcasing the difference between Perlin noise and random values. The visual representation of the graph illustrates the difference between Perlin noise and random values, providing a clear demonstration of the smooth randomness generated by Perlin noise.', 'Showcased the impact of changing parameters and increment values on the Perlin noise graph. The demonstration illustrated how changing parameters and increment values can significantly impact the appearance and smoothness of the Perlin noise graph.', 'Explained the concept of wandering sporadic bee buzzing-like behavior in relation to the mouse movement. The speaker mentioned the wandering sporadic bee buzzing-like behavior and its relation to mouse movement, showcasing an element of randomness and spontaneity.']}, {'end': 4130.321, 'start': 3796.554, 'title': 'Perlin noise functions', 'summary': 'Discusses the use of perlin noise and sine wave functions to create visual effects, showcasing how to manipulate the noise and add randomness to create varied outcomes, ultimately leading to a transition from one-dimensional to two-dimensional perlin noise.', 'duration': 333.767, 'highlights': ['Using Perlin noise and sine wave functions to manipulate visual effects and adding randomness to generate varied outcomes.', 'Demonstrating the process of transitioning from one-dimensional to two-dimensional Perlin noise.', 'Exploring the potential of adding Perlin noise to letter forms to simulate handwriting.']}, {'end': 4577.724, 'start': 4134.229, 'title': 'Processing java, processing python, and p5.js', 'summary': 'Discusses the differences between processing java, processing python, and p5.js, emphasizing the distinctions in their apis and underlying languages, as well as plans for guest presenters and upcoming tutorials.', 'duration': 443.495, 'highlights': ['The chapter discusses the differences between processing Java, Processing Python, and p5.js. It covers the distinctions in their APIs and underlying languages.', 'Plans for guest presenters and upcoming tutorials are mentioned, with a focus on inviting individuals who look different from the presenter, particularly those with more diversity. The chapter emphasizes the desire for guest presenters who bring diversity, particularly individuals who are Python programmers, and outlines plans for inviting them to create tutorials for the Coding Rainbow feed.', 'The chapter briefly mentions the upcoming topic of two-dimensional Perlin noise and the need for a diagram to explain it. It notes the intention to cover two-dimensional Perlin noise and acknowledges the need for diagrams for better understanding.', 'The presenter acknowledges the request for functional programming content and hints at future plans for more JavaScript-related programming with a focus on text and language, and server-side programming. It acknowledges the awareness of functional programming, plans for more JavaScript-related programming, and a focus on text and language, and server-side programming.', 'The chapter briefly compares processing.js and p5.js, highlighting that processing.js is a direct port of processing to JavaScript, while p5.js is a new framework meant for writing native JavaScript. It provides a comparison between processing.js and p5.js, emphasizing their differences and the intended use of p5.js for writing native JavaScript.']}], 'duration': 1574.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A3003455.jpg', 'highlights': ['The chapter explores the potential of two-dimensional Perlin noise for diverse visual effects.', 'Demonstrates the difference between Perlin noise and random values, showcasing the smooth randomness generated by Perlin noise.', 'Uses Perlin noise and sine wave functions to manipulate visual effects and add randomness to generate varied outcomes.', 'Discusses the distinctions in APIs and underlying languages of processing Java, Processing Python, and p5.js.']}, {'end': 6371.202, 'segs': [{'end': 4837.555, 'src': 'embed', 'start': 4804.102, 'weight': 0, 'content': [{'end': 4812.107, 'text': "It's come to move from one-dimensional Perlin noise, which I have a graph of here behind me from my previous video, to two-dimensional Perlin noise.", 'start': 4804.102, 'duration': 8.005}, {'end': 4820.192, 'text': "So what does it mean for Perlin noise to exist in one dimension versus two dimensions? So let's come over here to the trusty whiteboard.", 'start': 4812.447, 'duration': 7.745}, {'end': 4822.192, 'text': "let's take a look.", 'start': 4821.112, 'duration': 1.08}, {'end': 4837.555, 'text': 'so this is a graph of Perlin noise values in one dimension, the singular dimension being the x-axis, and in p5, or processing,', 'start': 4822.192, 'duration': 15.363}], 'summary': 'Transitioning from 1d to 2d perlin noise graphically explained.', 'duration': 33.453, 'max_score': 4804.102, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A4804102.jpg'}, {'end': 5014.177, 'src': 'embed', 'start': 4975.134, 'weight': 3, 'content': [{'end': 4978.055, 'text': 'Anyway, so this is now a two-dimensional grid.', 'start': 4975.134, 'duration': 2.921}, {'end': 4987.359, 'text': 'What if instead of a particular noise value, let me come back to this.', 'start': 4980.436, 'duration': 6.923}, {'end': 4998.107, 'text': 'I am going to Staples and I am buying a box of fresh whiteboard markers as soon as I finish making videos today.', 'start': 4988.658, 'duration': 9.449}, {'end': 5003.632, 'text': 'noise, what if I say x off comma y off?', 'start': 4998.107, 'duration': 5.525}, {'end': 5014.177, 'text': "what I'm saying here is give me a particular noise value at a particular x location and y location in this space.", 'start': 5003.632, 'duration': 10.545}], 'summary': 'Discussing two-dimensional grid and noise values in a space.', 'duration': 39.043, 'max_score': 4975.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A4975134.jpg'}, {'end': 5559.109, 'src': 'embed', 'start': 5530.272, 'weight': 5, 'content': [{'end': 5532.393, 'text': "there's more changes I could make.", 'start': 5530.272, 'duration': 2.121}, {'end': 5541.675, 'text': 'the increment is something even smaller And you can see how this noise field appears.', 'start': 5532.393, 'duration': 9.282}, {'end': 5549.322, 'text': 'So this is a literal visualization of the two-dimensional Perlin noise values.', 'start': 5541.996, 'duration': 7.326}, {'end': 5559.109, 'text': 'And, as you might imagine, you could take those values and map them to lots of other things, like bumpy terrain or a flow field,', 'start': 5549.922, 'duration': 9.187}], 'summary': 'Visualizes two-dimensional perlin noise values for potential changes and mappings.', 'duration': 28.837, 'max_score': 5530.272, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A5530272.jpg'}, {'end': 6151.294, 'src': 'embed', 'start': 6119.482, 'weight': 1, 'content': [{'end': 6121.983, 'text': 'results in some nice Perlin noise.', 'start': 6119.482, 'duration': 2.501}, {'end': 6124.765, 'text': 'This is how the Perlin noise algorithm works.', 'start': 6122.183, 'duration': 2.582}, {'end': 6133.811, 'text': 'now, Over here, we have a visualization of Perlin noise in two dimensions, which I just talked about in my previous video Smooth randomness,', 'start': 6124.765, 'duration': 9.046}, {'end': 6138.735, 'text': 'each pixel having a similar grayscale value to the pixels around it.', 'start': 6133.811, 'duration': 4.924}, {'end': 6141.51, 'text': 'now what we can actually?', 'start': 6138.735, 'duration': 2.775}, {'end': 6151.294, 'text': 'so this is the default visualization of two-dimensional Perlin noise, but we can look at how the changes based on this noise detail function.', 'start': 6141.51, 'duration': 9.784}], 'summary': 'Perlin noise algorithm creates smooth randomness in 2d visualization.', 'duration': 31.812, 'max_score': 6119.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A6119482.jpg'}], 'start': 4579.785, 'title': 'Perlin noise in two dimensions', 'summary': 'Introduces the transition to two-dimensional perlin noise, explains visual representation, and discusses its application in creating flow fields and visual effects. it also delves into the perlin noise algorithm and its impact on noise quality and behavior.', 'chapters': [{'end': 5036.944, 'start': 4579.785, 'title': 'Two-dimensional perlin noise', 'summary': 'Introduces the transition from one-dimensional to two-dimensional perlin noise, explaining the concept and visual representation of noise values in two dimensions and the use of x and y offsets to retrieve noise values at specific locations, preparing to create a flow field.', 'duration': 457.159, 'highlights': ['The chapter explains the transition from one-dimensional to two-dimensional Perlin noise, emphasizing the visual representation and retrieval of noise values in two dimensions using x and y offsets.', 'The speaker discusses the concept of obtaining noise values at specific x and y locations in a two-dimensional grid, preparing to utilize this concept for creating a flow field.', 'The speaker demonstrates the challenges faced with using a marker and humorously comments on the need to purchase new whiteboard markers after the session.']}, {'end': 5252.797, 'start': 5039.406, 'title': 'Perlin noise visual representation', 'summary': 'Explains the process of using perlin noise to color every pixel with a grayscale value, while adjusting for high density display, resulting in a visual representation of perlin noise in two dimensions.', 'duration': 213.391, 'highlights': ['The chapter demonstrates coloring every pixel with a grayscale value according to a Perlin noise value, resulting in a visual representation of Perlin noise in two dimensions.', 'The speaker adjusts for high density display by setting the pixel density to one pixel per pixel, resolving the display issue and enabling a clear visual representation.', 'The process involves calculating an index for the pixel array and setting the red, green, blue, and alpha values for each pixel to create a visual representation of Perlin noise in two dimensions.']}, {'end': 6089.903, 'start': 5252.797, 'title': 'Understanding perlin noise', 'summary': 'Explains the concept of perlin noise, demonstrating its application in generating random and smooth values to create visual effects like blurring and flow fields, while also discussing the noise detail function and its impact on the algorithm.', 'duration': 837.106, 'highlights': ['Perlin noise used to generate random and smooth values for visual effects like blurring and flow fields Demonstrates the application of Perlin noise in creating visual effects like blurring and flow fields, utilizing random and smooth values to achieve the desired outcomes.', 'Discussion on the noise detail function and its impact on the algorithm Explains the noise detail function and its impact on the Perlin noise algorithm, discussing the adjustment of parameters such as octaves and falloff to modify the generated noise.', 'Visualization of two-dimensional Perlin noise values for creating bumpy terrain or a flow field Visualizes two-dimensional Perlin noise values, showcasing their application in creating bumpy terrain or a flow field for further visual effects.']}, {'end': 6371.202, 'start': 6091.264, 'title': 'Understanding perlin noise algorithm', 'summary': 'Explains the perlin noise algorithm, visualizes it in two dimensions, and demonstrates how the noise detail function controls the number of octaves and the falloff, affecting the quality and behavior of the noise.', 'duration': 279.938, 'highlights': ['The Perlin noise algorithm involves picking random values with varying amplitudes, interpolating between them, and adding them together to produce smooth randomness. Perlin noise is generated by combining random values with varying amplitudes.', 'The visualization of two-dimensional Perlin noise demonstrates smooth grayscale values in each pixel, with the noise detail function controlling the number of octaves and the quality of the noise. The noise detail function controls the number of octaves and impacts the quality of the Perlin noise.', 'The noise detail function takes two arguments: the number of octaves and the falloff factor, which determines the amplitude shrinkage of the waves. The noise detail function takes two arguments: number of octaves and falloff factor.']}], 'duration': 1791.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A4579785.jpg', 'highlights': ['The chapter explains the transition from one-dimensional to two-dimensional Perlin noise, emphasizing the visual representation and retrieval of noise values in two dimensions using x and y offsets.', 'Perlin noise used to generate random and smooth values for visual effects like blurring and flow fields Demonstrates the application of Perlin noise in creating visual effects like blurring and flow fields, utilizing random and smooth values to achieve the desired outcomes.', 'The Perlin noise algorithm involves picking random values with varying amplitudes, interpolating between them, and adding them together to produce smooth randomness. Perlin noise is generated by combining random values with varying amplitudes.', 'The speaker discusses the concept of obtaining noise values at specific x and y locations in a two-dimensional grid, preparing to utilize this concept for creating a flow field.', 'The chapter demonstrates coloring every pixel with a grayscale value according to a Perlin noise value, resulting in a visual representation of Perlin noise in two dimensions.', 'Visualization of two-dimensional Perlin noise values for creating bumpy terrain or a flow field Visualizes two-dimensional Perlin noise values, showcasing their application in creating bumpy terrain or a flow field for further visual effects.']}, {'end': 7124.296, 'segs': [{'end': 6599.457, 'src': 'embed', 'start': 6559.512, 'weight': 0, 'content': [{'end': 6561.874, 'text': "And yet, I'm going to do it anyway.", 'start': 6559.512, 'duration': 2.362}, {'end': 6566.937, 'text': "Maybe I shouldn't though.", 'start': 6565.856, 'duration': 1.081}, {'end': 6572.36, 'text': 'Should I do it? Hold on, I have..', 'start': 6567.717, 'duration': 4.643}, {'end': 6573.54, 'text': "It's not that bad.", 'start': 6572.36, 'duration': 1.18}, {'end': 6575.822, 'text': "It's gonna be fine.", 'start': 6575.001, 'duration': 0.821}, {'end': 6577.603, 'text': "I'm gonna do it anyway.", 'start': 6576.782, 'duration': 0.821}, {'end': 6585.794, 'text': "so what I'm going to do is I'm going to do now this is going to be it's one o'clock.", 'start': 6578.832, 'duration': 6.962}, {'end': 6589.535, 'text': 'this is probably going to take anywhere between 10 minutes and a half an hour.', 'start': 6585.794, 'duration': 3.741}, {'end': 6599.457, 'text': "I'm going to just start from this example and I'm going to finish.", 'start': 6589.535, 'duration': 9.922}], 'summary': 'Task to be completed at 1 pm, expected to take 10-30 minutes.', 'duration': 39.945, 'max_score': 6559.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A6559512.jpg'}, {'end': 6680.595, 'src': 'embed', 'start': 6642.551, 'weight': 2, 'content': [{'end': 6661.961, 'text': 'Adam, You know, I can always just do stuff low resolution if need be, and Okay, as long as I use variables, I can change the correctly.', 'start': 6642.551, 'duration': 19.41}, {'end': 6663.662, 'text': 'I can change the resolution whenever I want.', 'start': 6661.961, 'duration': 1.701}, {'end': 6675.231, 'text': 'Okay, hold on.', 'start': 6664.743, 'duration': 10.488}, {'end': 6680.595, 'text': "So here it comes, this is gonna be my, I'm gonna try to make this good.", 'start': 6677.252, 'duration': 3.343}], 'summary': 'Ability to change resolution using variables for better quality.', 'duration': 38.044, 'max_score': 6642.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A6642551.jpg'}, {'end': 6856.638, 'src': 'embed', 'start': 6826.979, 'weight': 1, 'content': [{'end': 6829.161, 'text': 'Streaky, hairy was just like a not..', 'start': 6826.979, 'duration': 2.182}, {'end': 6830.042, 'text': 'Not a good way to start.', 'start': 6829.161, 'duration': 0.881}, {'end': 6836.848, 'text': 'Okay Hello and welcome to another coding challenge.', 'start': 6830.162, 'duration': 6.686}, {'end': 6840.571, 'text': "In this coding challenge, I'm going to program a visualization that looks just like this.", 'start': 6836.988, 'duration': 3.583}, {'end': 6843.351, 'text': 'That was for the thumbnail.', 'start': 6842.29, 'duration': 1.061}, {'end': 6848.874, 'text': "And I'm going to do it in P5.js using JavaScript in the browser.", 'start': 6844.011, 'duration': 4.863}, {'end': 6853.716, 'text': "What's running over here is an example that I made previously in processing, which will give you higher performance.", 'start': 6849.054, 'duration': 4.662}, {'end': 6856.638, 'text': "So at the end of this video, perhaps I'll take a look at that very briefly.", 'start': 6853.756, 'duration': 2.882}], 'summary': 'Coding challenge to program a visualization using p5.js in the browser.', 'duration': 29.659, 'max_score': 6826.979, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A6826979.jpg'}, {'end': 6920.933, 'src': 'embed', 'start': 6890.363, 'weight': 4, 'content': [{'end': 6894.985, 'text': 'Each pixel gets a grayscale value according to two-dimensional Perlin noise.', 'start': 6890.363, 'duration': 4.622}, {'end': 6896.586, 'text': 'But I want to do something different.', 'start': 6894.985, 'duration': 1.601}, {'end': 6902.077, 'text': 'what I want to do is in the kind of grid of pixels This is my very,', 'start': 6896.586, 'duration': 5.491}, {'end': 6908.382, 'text': 'very low resolution grid of pixels instead of having a grayscale value for each Pixel, so to speak.', 'start': 6902.077, 'duration': 6.305}, {'end': 6910.925, 'text': 'what I want to have is a vector.', 'start': 6908.382, 'duration': 2.543}, {'end': 6920.933, 'text': 'I want to have an arrow pointing in some direction and I want that direction to To be a direction set according to Perlin noise.', 'start': 6910.925, 'duration': 10.008}], 'summary': 'Using perlin noise to assign directional vectors to a grid of pixels.', 'duration': 30.57, 'max_score': 6890.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A6890363.jpg'}, {'end': 6973.05, 'src': 'embed', 'start': 6933.622, 'weight': 3, 'content': [{'end': 6939.185, 'text': 'okay?. So the first thing that I need to do is start revising the code to make vectors instead of pixels.', 'start': 6933.622, 'duration': 5.563}, {'end': 6942.227, 'text': "So let's take a look about how, let's take a look at how that might work.", 'start': 6939.185, 'duration': 3.042}, {'end': 6950.958, 'text': "so I'm going to work with a very low resolution canvas just 200 by 200, just to kind of get things kind of started here.", 'start': 6942.227, 'duration': 8.731}, {'end': 6960.383, 'text': 'and one thing that I also need to think about as a core variable here is, I need to think about what is the ratio of kind of cell to width.', 'start': 6950.958, 'duration': 9.425}, {'end': 6963.265, 'text': "so I don't want to have an arrow for every pixel.", 'start': 6960.383, 'duration': 2.882}, {'end': 6964.145, 'text': "it's not going to be.", 'start': 6963.265, 'duration': 0.88}, {'end': 6969.929, 'text': "it's going to be unreasonable for me to have 200 vectors instead of, maybe I want to vector every 10 pixels or every 20 pixels.", 'start': 6964.145, 'duration': 5.784}, {'end': 6973.05, 'text': "So let's make that a variable called like scale.", 'start': 6970.789, 'duration': 2.261}], 'summary': 'Revising code to use vectors instead of pixels for a low resolution canvas of 200x200, considering a scale variable for vector density.', 'duration': 39.428, 'max_score': 6933.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A6933622.jpg'}], 'start': 6373.783, 'title': 'Coding challenge visualization in p5.js and 2d perlin noise', 'summary': "Documents the creator's process of deciding to do a coding challenge in p5.js, estimating the task duration, and exploring 2d perlin noise and flow fields while optimizing performance.", 'chapters': [{'end': 6848.874, 'start': 6373.783, 'title': 'Coding challenge visualization in p5.js', 'summary': "Documents the creator's process of deciding to do a coding challenge in p5.js despite potential performance issues, estimating the task to take between 10 minutes and half an hour and aiming for a high-resolution output.", 'duration': 475.091, 'highlights': ['The creator discusses the decision-making process of doing a coding challenge in P5.js despite potential performance issues. The creator mentions the potential performance issues of doing the coding challenge in P5.js, despite being advised against it, and decides to proceed with the task.', 'The creator estimates the coding challenge to take between 10 minutes and half an hour. The creator estimates the duration of the coding challenge to be between 10 minutes and half an hour, indicating the expected time commitment for the task.', 'The creator aims for a high-resolution output despite potential performance issues. The creator expresses the goal of achieving a high-resolution output despite potential performance issues, highlighting a specific target for the coding challenge.']}, {'end': 7124.296, 'start': 6849.054, 'title': '2d perlin noise and flow field', 'summary': 'Explores the concept of 2d perlin noise and flow fields, transitioning from grayscale values to vectors, and implementing a low-resolution grid to visualize the flow field, with a focus on optimizing the performance by adjusting scale and observing the frame rate.', 'duration': 275.242, 'highlights': ['Implemented low-resolution grid visualization The code is modified to work with a 200x200 low-resolution canvas and a scale factor to optimize the visualization of flow field.', 'Transitioned from grayscale values to vectors The focus shifts from assigning grayscale values to each pixel to having a vector pointing in a direction set according to Perlin noise, aimed at creating a flow field for particles to follow.', 'Optimized performance by adjusting scale The scale factor is introduced to control the number of vectors, aiming to improve the performance by reducing the total count of vectors.']}], 'duration': 750.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A6373783.jpg', 'highlights': ['The creator estimates the coding challenge to take between 10 minutes and half an hour.', 'The creator discusses the decision-making process of doing a coding challenge in P5.js despite potential performance issues.', 'The creator aims for a high-resolution output despite potential performance issues.', 'Implemented low-resolution grid visualization The code is modified to work with a 200x200 low-resolution canvas and a scale factor to optimize the visualization of flow field.', 'Transitioned from grayscale values to vectors The focus shifts from assigning grayscale values to each pixel to having a vector pointing in a direction set according to Perlin noise, aimed at creating a flow field for particles to follow.', 'Optimized performance by adjusting scale The scale factor is introduced to control the number of vectors, aiming to improve the performance by reducing the total count of vectors.']}, {'end': 9679.57, 'segs': [{'end': 7357.755, 'src': 'heatmap', 'start': 7256.341, 'weight': 0.896, 'content': [{'end': 7263.805, 'text': 'and So now, if I run this, you can see, look, I have a whole bunch of lines pointing directly across.', 'start': 7256.341, 'duration': 7.464}, {'end': 7271.49, 'text': 'Now what if I were to say from angle pi divided by 2? Now I have a whole lot of lines pointing down.', 'start': 7264.665, 'duration': 6.825}, {'end': 7277.493, 'text': 'What if I were to say pi divided by 6? Now I have a whole bunch of lines pointing that way.', 'start': 7272.29, 'duration': 5.203}, {'end': 7278.654, 'text': "We're getting somewhere right?", 'start': 7277.633, 'duration': 1.021}, {'end': 7279.675, 'text': "You see where I'm getting at?", 'start': 7278.714, 'duration': 0.961}, {'end': 7285.318, 'text': 'Because what I can do now is I could say what if I have a random angle between 0 and 2 pi?', 'start': 7279.975, 'duration': 5.343}, {'end': 7293.883, 'text': 'Okay, first of all, I should probably clear the background So you can see.', 'start': 7287.097, 'duration': 6.786}, {'end': 7298.447, 'text': 'now this is just a random vector for every spot in that grid, every frame.', 'start': 7293.883, 'duration': 4.564}, {'end': 7304.252, 'text': 'so one way I could stop it from like Changing all the time is, I could say a random seed 10.', 'start': 7298.447, 'duration': 5.805}, {'end': 7308.196, 'text': 'so if I reset the random seed, you can see this is a whole bunch of random vectors.', 'start': 7304.252, 'duration': 3.944}, {'end': 7316.825, 'text': 'Now, ultimately, what I want to do is show you how to make this field of vectors, this flow field, with noise values.', 'start': 7309.42, 'duration': 7.405}, {'end': 7318.927, 'text': 'But I could come up with other ideas.', 'start': 7317.006, 'duration': 1.921}, {'end': 7320.108, 'text': 'I could use sine waves.', 'start': 7318.967, 'duration': 1.141}, {'end': 7322.47, 'text': 'I could get a data input.', 'start': 7320.568, 'duration': 1.902}, {'end': 7328.134, 'text': 'Ooh, I could get wind data from various geolocations through some kind of weather API.', 'start': 7322.51, 'duration': 5.624}, {'end': 7331.156, 'text': "And there's a great project, which I've shown in other videos, which does that.", 'start': 7328.454, 'duration': 2.702}, {'end': 7332.817, 'text': "But I'm going to just use Perlin noise.", 'start': 7331.396, 'duration': 1.421}, {'end': 7340.056, 'text': "So let's go back and say the angle is the noise value times 2 pi.", 'start': 7333.137, 'duration': 6.919}, {'end': 7346.88, 'text': 'So when I wanted to get a grayscale value between 0 and 255, I took the noise value times 255.', 'start': 7340.957, 'duration': 5.923}, {'end': 7348.041, 'text': 'Now I want a random angle.', 'start': 7346.88, 'duration': 1.161}, {'end': 7349.782, 'text': 'I want the noise value times 2 pi.', 'start': 7348.221, 'duration': 1.561}, {'end': 7352.684, 'text': "I don't need the random seed anymore from angle.", 'start': 7350.042, 'duration': 2.642}, {'end': 7355.614, 'text': 'particular angle.', 'start': 7354.074, 'duration': 1.54}, {'end': 7357.755, 'text': 'and now you can see there we go.', 'start': 7355.614, 'duration': 2.141}], 'summary': 'Creating a field of vectors with random and noise values for various directions and potential applications like weather data.', 'duration': 101.414, 'max_score': 7256.341, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A7256341.jpg'}, {'end': 7348.041, 'src': 'embed', 'start': 7298.447, 'weight': 0, 'content': [{'end': 7304.252, 'text': 'so one way I could stop it from like Changing all the time is, I could say a random seed 10.', 'start': 7298.447, 'duration': 5.805}, {'end': 7308.196, 'text': 'so if I reset the random seed, you can see this is a whole bunch of random vectors.', 'start': 7304.252, 'duration': 3.944}, {'end': 7316.825, 'text': 'Now, ultimately, what I want to do is show you how to make this field of vectors, this flow field, with noise values.', 'start': 7309.42, 'duration': 7.405}, {'end': 7318.927, 'text': 'But I could come up with other ideas.', 'start': 7317.006, 'duration': 1.921}, {'end': 7320.108, 'text': 'I could use sine waves.', 'start': 7318.967, 'duration': 1.141}, {'end': 7322.47, 'text': 'I could get a data input.', 'start': 7320.568, 'duration': 1.902}, {'end': 7328.134, 'text': 'Ooh, I could get wind data from various geolocations through some kind of weather API.', 'start': 7322.51, 'duration': 5.624}, {'end': 7331.156, 'text': "And there's a great project, which I've shown in other videos, which does that.", 'start': 7328.454, 'duration': 2.702}, {'end': 7332.817, 'text': "But I'm going to just use Perlin noise.", 'start': 7331.396, 'duration': 1.421}, {'end': 7340.056, 'text': "So let's go back and say the angle is the noise value times 2 pi.", 'start': 7333.137, 'duration': 6.919}, {'end': 7346.88, 'text': 'So when I wanted to get a grayscale value between 0 and 255, I took the noise value times 255.', 'start': 7340.957, 'duration': 5.923}, {'end': 7348.041, 'text': 'Now I want a random angle.', 'start': 7346.88, 'duration': 1.161}], 'summary': 'Demonstrating creation of flow field with perlin noise for vectors.', 'duration': 49.594, 'max_score': 7298.447, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A7298447.jpg'}, {'end': 7429.62, 'src': 'embed', 'start': 7393.97, 'weight': 3, 'content': [{'end': 7395.41, 'text': 'Meet me over here at this other camera.', 'start': 7393.97, 'duration': 1.44}, {'end': 7396.631, 'text': 'We need to talk.', 'start': 7395.951, 'duration': 0.68}, {'end': 7397.351, 'text': 'Actually, never mind.', 'start': 7396.711, 'duration': 0.64}, {'end': 7399.371, 'text': "Let's talk over here.", 'start': 7398.531, 'duration': 0.84}, {'end': 7405.172, 'text': 'There is Perlin noise.', 'start': 7403.732, 'duration': 1.44}, {'end': 7406.712, 'text': "I've shown you one dimensional Perlin noise.", 'start': 7405.212, 'duration': 1.5}, {'end': 7409.893, 'text': "Though I've shown you two dimensional Perlin noise.", 'start': 7407.713, 'duration': 2.18}, {'end': 7413.074, 'text': 'I have yet to show you three-dimensional Perlin noise.', 'start': 7410.609, 'duration': 2.465}, {'end': 7416.701, 'text': 'And in fact, Perlin noise can exist in any n dimensions.', 'start': 7413.094, 'duration': 3.607}, {'end': 7421.95, 'text': "But here is an opportunity where we might decide, let's do something with three-dimensional Perlin noise.", 'start': 7417.141, 'duration': 4.809}, {'end': 7429.62, 'text': 'the one dimension is the x-axis, another dimension is the y-axis.', 'start': 7424.036, 'duration': 5.584}], 'summary': 'Introduction to perlin noise in multiple dimensions.', 'duration': 35.65, 'max_score': 7393.97, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A7393970.jpg'}, {'end': 7593.922, 'src': 'embed', 'start': 7561.644, 'weight': 4, 'content': [{'end': 7565.365, 'text': "I'm going to add the particle object from scratch here.", 'start': 7561.644, 'duration': 3.721}, {'end': 7578.329, 'text': "So what I'm going to do is I'm going to make a new file, I'm going to call it particle dot Js, and I'm going to use a JavaScript constructor function,", 'start': 7565.365, 'duration': 12.964}, {'end': 7584.815, 'text': "and My particle needs to have a position, Which I'm going to just make it zero, zero.", 'start': 7578.329, 'duration': 6.486}, {'end': 7593.922, 'text': 'it needs to have a velocity, Which is going to be an zero, zero vector, and it needs to have an acceleration.', 'start': 7584.815, 'duration': 9.107}], 'summary': 'Creating a particle object in javascript with initial position, velocity, and acceleration.', 'duration': 32.278, 'max_score': 7561.644, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A7561644.jpg'}, {'end': 7852.705, 'src': 'heatmap', 'start': 7743.603, 'weight': 0.708, 'content': [{'end': 7748.007, 'text': 'here the array is called particles.', 'start': 7743.603, 'duration': 4.404}, {'end': 7750.63, 'text': "There we go, so you can see, there's that particle up there in the corner.", 'start': 7748.007, 'duration': 2.623}, {'end': 7751.911, 'text': 'so I have one single particle.', 'start': 7750.63, 'duration': 1.281}, {'end': 7752.932, 'text': "That's good.", 'start': 7751.911, 'duration': 1.021}, {'end': 7758.396, 'text': 'now what I want to do is add a whole bunch of particles.', 'start': 7752.932, 'duration': 5.464}, {'end': 7767.721, 'text': "So let me make this a for loop and is less than 100, let's add 100 particles.", 'start': 7758.396, 'duration': 9.325}, {'end': 7781.485, 'text': "And just say particles index i, and then let's write another for loop, iterating over the entire length of the array.", 'start': 7771.442, 'duration': 10.043}, {'end': 7789.467, 'text': 'And having each particle, okay.', 'start': 7781.505, 'duration': 7.962}, {'end': 7792.067, 'text': 'So now particle pi.', 'start': 7789.807, 'duration': 2.26}, {'end': 7792.948, 'text': 'I typed something wrong.', 'start': 7792.067, 'duration': 0.881}, {'end': 7798.155, 'text': 'particles. okay, there should be a hundred particles there.', 'start': 7792.948, 'duration': 5.207}, {'end': 7801.496, 'text': "let's make sure all the particles are everywhere.", 'start': 7798.155, 'duration': 3.341}, {'end': 7814.382, 'text': "let's, let's give the particles random positions, to start so you can see there's a hundred particles around randomly.", 'start': 7801.496, 'duration': 12.886}, {'end': 7819.624, 'text': "and then, just to make sure they're like doing something, let's say pvector.", 'start': 7814.382, 'duration': 5.242}, {'end': 7822.685, 'text': 'sorry, p5, vector dot, random.', 'start': 7819.624, 'duration': 3.061}, {'end': 7824.526, 'text': 'so this gives them all a random velocity.', 'start': 7822.685, 'duration': 1.841}, {'end': 7828.699, 'text': 'ok, so the particles are moving around with a random velocity.', 'start': 7825.638, 'duration': 3.061}, {'end': 7829.179, 'text': "they're doing so.", 'start': 7828.699, 'duration': 0.48}, {'end': 7833, 'text': 'ok, one thing I need to do, I just realized is that I need to have the particles wrap around.', 'start': 7829.179, 'duration': 3.821}, {'end': 7835.601, 'text': 'when they get to an edge they should come back on the screen.', 'start': 7833, 'duration': 2.601}, {'end': 7837.621, 'text': 'so I need to let me add that really quickly.', 'start': 7835.601, 'duration': 2.02}, {'end': 7852.705, 'text': "so I'm just going to add a function called edges and I'm going to say if this dot pos dot x is greater than with this dot pos dot, dot dot x equals 0,", 'start': 7837.621, 'duration': 15.084}], 'summary': 'Creating an array of 100 particles, giving them random positions and velocities, and ensuring they wrap around when reaching edges.', 'duration': 109.102, 'max_score': 7743.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A7743603.jpg'}, {'end': 8526.352, 'src': 'heatmap', 'start': 8420.323, 'weight': 0.74, 'content': [{'end': 8423.224, 'text': "And now I could add some separation so that they don't get on top of each other as much.", 'start': 8420.323, 'duration': 2.901}, {'end': 8424.845, 'text': 'But you get the idea here.', 'start': 8423.585, 'duration': 1.26}, {'end': 8427.567, 'text': 'Now, I basically have all the way done.', 'start': 8425.225, 'duration': 2.342}, {'end': 8431.308, 'text': 'I now have this flow field where I can drop particles in it.', 'start': 8427.987, 'duration': 3.321}, {'end': 8438.552, 'text': 'And I could sort of push the performance here and say well, what if I try to drop 500 particles in?', 'start': 8431.368, 'duration': 7.184}, {'end': 8444.033, 'text': "you can see, it's running a little bit slower, but I've got more stuff happening.", 'start': 8441.072, 'duration': 2.961}, {'end': 8448.555, 'text': 'but what if, instead of drawing the particles as dots, what if I drew them?', 'start': 8444.033, 'duration': 4.522}, {'end': 8454.257, 'text': 'what if I allowed them to blend their alpha, to be sort of like alpha blended across the screen for a while?', 'start': 8448.555, 'duration': 5.702}, {'end': 8457.518, 'text': 'so let me to kind of create that visualization.', 'start': 8454.257, 'duration': 3.261}, {'end': 8459.519, 'text': 'so really now one thing.', 'start': 8457.518, 'duration': 2.001}, {'end': 8467.122, 'text': 'if I were you, I would stop this video and just go to this show function and play, make rainbow colors, add alpha values,', 'start': 8459.519, 'duration': 7.603}, {'end': 8469.243, 'text': 'but let me do a couple things to try to get that effect.', 'start': 8467.122, 'duration': 2.121}, {'end': 8478.549, 'text': "So one thing I'm gonna return the stroke weight back to one and I'm gonna give it quite a bit of alpha and in the sketch I'm also gonna draw the background,", 'start': 8469.563, 'duration': 8.986}, {'end': 8480.05, 'text': 'now only once in setup.', 'start': 8478.549, 'duration': 1.501}, {'end': 8482.071, 'text': "So let's see what we get here with this.", 'start': 8480.41, 'duration': 1.661}, {'end': 8485.794, 'text': "so now you can start to see what I'm getting here.", 'start': 8483.052, 'duration': 2.742}, {'end': 8488.655, 'text': "I'm getting this kind of nice alpha blend pattern.", 'start': 8485.794, 'duration': 2.861}, {'end': 8495.238, 'text': "now, if I were to zoom into this, you can see there's actually like the particles move faster than one pixel per frame,", 'start': 8488.655, 'duration': 6.583}, {'end': 8496.999, 'text': "so they're actually skipping pixels.", 'start': 8495.238, 'duration': 1.761}, {'end': 8504.843, 'text': 'so something that could actually be quite useful here would be to have each particle store, at the very least.', 'start': 8496.999, 'duration': 7.844}, {'end': 8514.045, 'text': "a previous Position, which I'm going to say is To start with, is a copy of its original position.", 'start': 8504.843, 'duration': 9.202}, {'end': 8523.71, 'text': 'so it, when it starts, it, has its current position in its previous position and Then, every time it moves Right after update,', 'start': 8514.045, 'duration': 9.665}, {'end': 8526.352, 'text': "it's actually let's do this every time after we.", 'start': 8523.71, 'duration': 2.642}], 'summary': 'Creating a flow field to visualize particle movement with alpha blending, showing performance with 500 particles.', 'duration': 106.029, 'max_score': 8420.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A8420323.jpg'}, {'end': 8879.801, 'src': 'embed', 'start': 8857.486, 'weight': 5, 'content': [{'end': 8866.168, 'text': 'One thing that I think you probably would notice is this is running reasonably at 30 frames per second, but if I were to go back and try to add,', 'start': 8857.486, 'duration': 8.682}, {'end': 8879.801, 'text': "you know, to make this run over like a much larger canvas and have something like 2500 particles, you're going to see that right.", 'start': 8866.168, 'duration': 13.633}], 'summary': 'Program runs at 30 frames per second, struggles with 2500 particles.', 'duration': 22.315, 'max_score': 8857.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A8857486.jpg'}, {'end': 8959.242, 'src': 'embed', 'start': 8937.3, 'weight': 6, 'content': [{'end': 8946.851, 'text': 'so what I would need to do to like pull the most performance out of the web browser would be to probably render this somehow with WebGL in a kind of hardware accelerated way,', 'start': 8937.3, 'duration': 9.551}, {'end': 8949.174, 'text': "which maybe I'll continue and look at at some point.", 'start': 8946.851, 'duration': 2.323}, {'end': 8951.697, 'text': 'but hopefully this video gives you the basic idea.', 'start': 8949.174, 'duration': 2.523}, {'end': 8959.242, 'text': "and What I would love to see and I'm just going to let you know what I love to see you do is, first I'll make this like rainbow colored.", 'start': 8951.697, 'duration': 7.545}], 'summary': 'Optimize web browser performance using webgl for hardware acceleration, aiming for rainbow color effect.', 'duration': 21.942, 'max_score': 8937.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A8937300.jpg'}, {'end': 9198.056, 'src': 'heatmap', 'start': 9002.59, 'weight': 0.946, 'content': [{'end': 9008.074, 'text': "Yeah, I should do the not a part of that video, but yeah, let's add the.", 'start': 9002.59, 'duration': 5.484}, {'end': 9014.74, 'text': "Let's get back to something reasonable that will run fast enough.", 'start': 9008.074, 'duration': 6.666}, {'end': 9040.567, 'text': "and let's, very quickly, let's add some rainbow colors, just because we can Sketch.", 'start': 9014.74, 'duration': 25.827}, {'end': 9044.894, 'text': 'Color mode.', 'start': 9043.271, 'duration': 1.623}, {'end': 9047.038, 'text': "Let's play the rainbow music maybe.", 'start': 9045.475, 'duration': 1.563}, {'end': 9107.351, 'text': "I'm too tired, my voice is gone, I have a cold.", 'start': 9092.728, 'duration': 14.623}, {'end': 9123.985, 'text': 'I feel like the alpha is too light Got to get this happening faster.', 'start': 9107.371, 'duration': 16.614}, {'end': 9125.726, 'text': 'OK, there we go.', 'start': 9124.005, 'duration': 1.721}, {'end': 9129.147, 'text': 'This is the rainbow Perlin noise flow field.', 'start': 9125.846, 'duration': 3.301}, {'end': 9131.448, 'text': 'This will be a good thumbnail.', 'start': 9130.327, 'duration': 1.121}, {'end': 9134.429, 'text': 'OK, so I am going to leave.', 'start': 9131.468, 'duration': 2.961}, {'end': 9137.39, 'text': "Oh my god, it's 1.45.", 'start': 9136.249, 'duration': 1.141}, {'end': 9139.41, 'text': 'This has been 2 and 1 half hours.', 'start': 9137.39, 'duration': 2.02}, {'end': 9153.255, 'text': 'And I said I was going to go over nature of code and magic book.', 'start': 9146.454, 'duration': 6.801}, {'end': 9155.776, 'text': "I'm going to just talk about that in the Slack channel.", 'start': 9153.335, 'duration': 2.441}, {'end': 9159.196, 'text': "So I'm just going to plug for a second my Patreon.", 'start': 9156.116, 'duration': 3.08}, {'end': 9166.598, 'text': "If you're interested in supporting the work that I do with this Coding Rainbow channel, you can go to codingrainbow.com.", 'start': 9159.996, 'duration': 6.602}, {'end': 9168.278, 'text': 'Right here.', 'start': 9167.778, 'duration': 0.5}, {'end': 9172.381, 'text': 'There is a link become a patron you can subscribe on patreon.', 'start': 9168.338, 'duration': 4.043}, {'end': 9175.662, 'text': "This is, I'm Getting a little bit of extra income for the channel,", 'start': 9172.421, 'duration': 3.241}, {'end': 9179.804, 'text': 'Which actually the first thing I want to do is just use that money to pay for closed captioning.', 'start': 9175.662, 'duration': 4.142}, {'end': 9182.886, 'text': "But I haven't reached a sort of high enough threshold to have enough to do that.", 'start': 9179.804, 'duration': 3.082}, {'end': 9186.007, 'text': 'and then I have a slack with a, with a subscription.', 'start': 9182.886, 'duration': 3.121}, {'end': 9188.029, 'text': 'here you can, you can.', 'start': 9186.007, 'duration': 2.022}, {'end': 9195.514, 'text': "I have a slack channel where we discuss topics and various things and and we've had a discussion about the JavaScript version of the nature of code book,", 'start': 9188.029, 'duration': 7.485}, {'end': 9198.056, 'text': 'which I meant to also discuss on the live stream today.', 'start': 9195.514, 'duration': 2.542}], 'summary': 'Live stream coding session, discussing coding concepts and promoting patreon for support.', 'duration': 195.466, 'max_score': 9002.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A9002590.jpg'}, {'end': 9186.007, 'src': 'embed', 'start': 9159.996, 'weight': 8, 'content': [{'end': 9166.598, 'text': "If you're interested in supporting the work that I do with this Coding Rainbow channel, you can go to codingrainbow.com.", 'start': 9159.996, 'duration': 6.602}, {'end': 9168.278, 'text': 'Right here.', 'start': 9167.778, 'duration': 0.5}, {'end': 9172.381, 'text': 'There is a link become a patron you can subscribe on patreon.', 'start': 9168.338, 'duration': 4.043}, {'end': 9175.662, 'text': "This is, I'm Getting a little bit of extra income for the channel,", 'start': 9172.421, 'duration': 3.241}, {'end': 9179.804, 'text': 'Which actually the first thing I want to do is just use that money to pay for closed captioning.', 'start': 9175.662, 'duration': 4.142}, {'end': 9182.886, 'text': "But I haven't reached a sort of high enough threshold to have enough to do that.", 'start': 9179.804, 'duration': 3.082}, {'end': 9186.007, 'text': 'and then I have a slack with a, with a subscription.', 'start': 9182.886, 'duration': 3.121}], 'summary': 'Support coding rainbow at codingrainbow.com to fund closed captioning and reach subscription threshold.', 'duration': 26.011, 'max_score': 9159.996, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A9159996.jpg'}, {'end': 9301.113, 'src': 'embed', 'start': 9281.056, 'weight': 9, 'content': [{'end': 9291.305, 'text': "Because one of the things that I'm doing tomorrow in this space is actually recording programming tutorials for hearing impaired with somebody who does sign language,", 'start': 9281.056, 'duration': 10.249}, {'end': 9296.97, 'text': 'which is a project that is being spearheaded by Tae-yoon Choi called Signing Coders.', 'start': 9291.305, 'duration': 5.665}, {'end': 9298.891, 'text': "But I'm just gonna show you guys this.", 'start': 9297.31, 'duration': 1.581}, {'end': 9301.113, 'text': "I'm gonna look Signing Coders.", 'start': 9298.931, 'duration': 2.182}], 'summary': 'Recording programming tutorials for hearing impaired with signing coders.', 'duration': 20.057, 'max_score': 9281.056, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A9281056.jpg'}, {'end': 9347.108, 'src': 'embed', 'start': 9322.542, 'weight': 7, 'content': [{'end': 9328.963, 'text': "So I might have some time around doing that to do a quick live stream, but typically I've been doing these Tuesday and Friday.", 'start': 9322.542, 'duration': 6.421}, {'end': 9335.605, 'text': "This Friday is my son's eighth birthday, so I have commitments at his school to help with a bunch of things.", 'start': 9329.423, 'duration': 6.182}, {'end': 9339.446, 'text': "So I won't be able to be down here at my video recording studio.", 'start': 9336.325, 'duration': 3.121}, {'end': 9340.746, 'text': 'So thanks.', 'start': 9339.926, 'duration': 0.82}, {'end': 9344.467, 'text': 'There is a..', 'start': 9341.546, 'duration': 2.921}, {'end': 9347.108, 'text': "I'll show you just briefly what's coming next.", 'start': 9344.467, 'duration': 2.641}], 'summary': "The speaker plans to do a live stream on tuesdays and fridays, but this friday is his son's eighth birthday, so he won't be available.", 'duration': 24.566, 'max_score': 9322.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A9322542.jpg'}, {'end': 9620.712, 'src': 'embed', 'start': 9591.218, 'weight': 11, 'content': [{'end': 9593.681, 'text': 'Thank you for keeping it friendly in the chat.', 'start': 9591.218, 'duration': 2.463}, {'end': 9595.783, 'text': 'It seemed to have worked pretty well today.', 'start': 9594.261, 'duration': 1.522}, {'end': 9599.086, 'text': 'And we had some little glitches at the beginning.', 'start': 9596.483, 'duration': 2.603}, {'end': 9600.967, 'text': "But that's that.", 'start': 9599.546, 'duration': 1.421}, {'end': 9602.649, 'text': 'OK Yes.', 'start': 9601.067, 'duration': 1.582}, {'end': 9606.412, 'text': '10, 11, 12 AM and PM.', 'start': 9602.669, 'duration': 3.743}, {'end': 9606.973, 'text': "I don't remember.", 'start': 9606.432, 'duration': 0.541}, {'end': 9613.068, 'text': "yeah, okay, so I'll see you guys.", 'start': 9611.166, 'duration': 1.902}, {'end': 9614.288, 'text': 'later is on.', 'start': 9613.068, 'duration': 1.22}, {'end': 9617.61, 'text': 'the next live stream will most likely be next Monday or Tuesday.', 'start': 9614.288, 'duration': 3.322}, {'end': 9619.952, 'text': 'actually next Tuesday, mostly a week from today.', 'start': 9617.61, 'duration': 2.342}, {'end': 9620.712, 'text': "so it's possible.", 'start': 9619.952, 'duration': 0.76}], 'summary': 'The chat was friendly, with minor glitches. next live stream likely next tuesday.', 'duration': 29.494, 'max_score': 9591.218, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A9591218.jpg'}], 'start': 7125.016, 'title': 'Creating vector grid and particle movement', 'summary': 'Covers creating a vector grid with noise values and implementing flow fields for particle movement, optimizing particle movement in processing, achieving 30 frames per second with 1500 particles in the web browser and over 50 frames per second with 10,000 particles in processing, and live stream updates and future plans.', 'chapters': [{'end': 7392.55, 'start': 7125.016, 'title': 'Creating vector grid with noise values', 'summary': 'Demonstrates the process of creating a vector grid using noise values, showcasing the generation of random vectors and their visualization as lines, with the potential for incorporating other data sources such as weather api.', 'duration': 267.534, 'highlights': ['The chapter demonstrates the process of creating a vector grid using noise values The speaker explores the generation of random vectors from noise values and their visualization as lines, illustrating the concept of a flow field.', 'Showcasing the generation of random vectors and their visualization as lines The speaker illustrates the process of creating vectors from noise values and visually representing them as lines, demonstrating the dynamic nature of the flow field.', 'Potential for incorporating other data sources such as weather API The speaker mentions the potential utilization of other data sources, such as weather API or sine waves, to enhance the vector grid, showcasing the versatility of the approach.']}, {'end': 7881.267, 'start': 7393.97, 'title': '3d perlin noise and particle object', 'summary': 'Discusses the concept of three-dimensional perlin noise and its application in creating a flow field, followed by the implementation of a simple particle object in javascript for a coding challenge.', 'duration': 487.297, 'highlights': ['The chapter discusses the concept of three-dimensional Perlin noise and its application in creating a flow field. The speaker introduces the concept of three-dimensional Perlin noise and describes how it can be utilized to create a flow field that changes over time.', 'Implementation of a simple particle object in JavaScript for a coding challenge. The speaker demonstrates the creation of a simple particle object in JavaScript, including defining its position, velocity, acceleration, and methods for updating and displaying the particle.']}, {'end': 8488.655, 'start': 7881.267, 'title': 'Implementing flow field for particle movement', 'summary': 'Explains the process of implementing a flow field to influence the movement of particles, utilizing arrays to store vectors and applying them as forces, with considerations for vector magnitude and particle speed limits. the performance is optimized by skipping vector rendering and exploring visual effects like alpha blending.', 'duration': 607.388, 'highlights': ['Utilizing arrays to store vectors and applying them as forces to influence particle movement. N/A', 'Considering vector magnitude and implementing a maximum speed variable to limit particle speed. N/A', 'Optimizing performance by skipping vector rendering and achieving a frame rate of 60 frames per second. Frame rate: 60 frames per second', 'Exploring visual effects such as alpha blending for particle visualization. N/A']}, {'end': 9129.147, 'start': 8488.655, 'title': 'Optimizing particle movement in processing', 'summary': 'Discusses optimizing particle movement in processing, demonstrating the implementation of storing previous positions to draw continuous lines, and highlights the performance differences between running the code in a web browser and the processing environment, achieving 30 frames per second with 1500 particles in the web browser and over 50 frames per second with 10,000 particles in processing.', 'duration': 640.492, 'highlights': ['The performance differences between running the code in a web browser and the Processing environment, achieving 30 frames per second with 1500 particles in the web browser and over 50 frames per second with 10,000 particles in Processing.', 'Demonstrating the implementation of storing previous positions to draw continuous lines, ensuring that each particle stores a previous position and drawing a line between its current and previous position after updating, leading to the visualization of continuous lines.', 'The potential for optimizing performance in the web browser by rendering the code with WebGL in a hardware accelerated manner, as the current implementation runs slow with 1500 particles and not as high resolution.']}, {'end': 9679.57, 'start': 9130.327, 'title': 'Live stream updates and future plans', 'summary': 'Discusses updates on live stream content, future plans for tutorials and challenges, patreon support for closed captioning, and a potential schedule change, with mentions of the upcoming july 4th coding challenge and a coding challenge in french for bastille day.', 'duration': 549.243, 'highlights': ['The chapter discusses updates on live stream content, including potential schedule changes, future tutorials, and challenges, and mentions the upcoming July 4th coding challenge and a coding challenge in French for Bastille Day.', 'The Patreon support for closed captioning on the Coding Rainbow channel is mentioned, but the threshold for sufficient funds has not been reached yet.', "The speaker mentions plans to record programming tutorials for the hearing impaired with a focus on sign language, as part of the 'Signing Coders' project led by Tae-yoon Choi.", "The speaker briefly discusses the possibility of doing a live stream on a different day due to other commitments, such as his son's birthday and out-of-town plans for July 4th.", 'The chapter ends with the speaker expressing gratitude to the audience and mentioning potential future live stream dates.', 'The speaker briefly considers doing a coding challenge in French for Bastille Day due to the presence of French listeners, expressing hesitancy due to lack of proficiency in the language.']}], 'duration': 2554.554, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/sor1nwNIP9A/pics/sor1nwNIP9A7125016.jpg', 'highlights': ['The chapter demonstrates creating a vector grid using noise values and implementing flow fields.', 'The speaker explores the generation of random vectors from noise values and their visualization as lines.', 'The potential for incorporating other data sources such as weather API is mentioned.', 'The chapter discusses the concept of three-dimensional Perlin noise and its application in creating a flow field.', 'Implementation of a simple particle object in JavaScript for a coding challenge is demonstrated.', 'Optimizing performance by achieving a frame rate of 60 frames per second is discussed.', 'The performance differences between running the code in a web browser and the Processing environment are highlighted.', 'The chapter discusses updates on live stream content, including potential schedule changes, future tutorials, and challenges.', 'The Patreon support for closed captioning on the Coding Rainbow channel is mentioned.', 'The speaker mentions plans to record programming tutorials for the hearing impaired with a focus on sign language.', 'The speaker briefly discusses the possibility of doing a live stream on a different day due to other commitments.', 'The chapter ends with the speaker expressing gratitude to the audience and mentioning potential future live stream dates.']}], 'highlights': ["The live stream episode discusses perlin noise fields, javascript version of 'the nature of code' book, and programming updates.", 'The speaker plans to start a sequence of videos to explain the Perlin noise algorithm, its calculation, and applications in processing and p5js.', 'Perlin noise provides smooth random numbers, creating a visual approximation of smooth random values related over time.', 'The chapter explains the calculation of Perlin noise over multiple octaves, demonstrating how to call the noise function in p5.js, and the characteristics of the noise values, such as their distribution and range.', 'The chapter explores the potential of two-dimensional Perlin noise for diverse visual effects.', 'The chapter explains the transition from one-dimensional to two-dimensional Perlin noise, emphasizing the visual representation and retrieval of noise values in two dimensions using x and y offsets.', 'The creator estimates the coding challenge to take between 10 minutes and half an hour.', 'The chapter demonstrates creating a vector grid using noise values and implementing flow fields.', 'The potential for incorporating other data sources such as weather API is mentioned.', 'The chapter discusses the concept of three-dimensional Perlin noise and its application in creating a flow field.', 'Optimizing performance by achieving a frame rate of 60 frames per second is discussed.', 'The performance differences between running the code in a web browser and the Processing environment are highlighted.']}