title
Coding Challenge #116: Lissajous Curve Table
description
In this Coding Challenge, I visualize a "Lissajous Curve Table" with Processing (Java). Code: https://thecodingtrain.com/challenges/116-lissajous-curve-table
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/BJbj5l3Y7
đĨ Previous video: https://youtu.be/OMoVcohRgZA?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Next video: https://youtu.be/MlRlgbrAVOs?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
đ Lissajous Curve on Wikipedia: https://en.wikipedia.org/wiki/Lissajous_curve
đĻ Panlepan Twitter: https://twitter.com/panlepan/status/954694464697720833
đĻ Julio Mulero Twitter: https://twitter.com/juliomulero/status/1039456605736185856
Videos:
đĨ Lissajous Curves with p5.js: https://youtu.be/glDU8Nsyidg
đĨ Lissajous Curve by standupmaths: https://youtu.be/4CbPksEl51Q
đĨ Polar Coordinates: https://youtu.be/O5wjXoFrau4
đĨ Harmonic motion: https://youtu.be/m463X1cqV6s
đĨ 2D Arrays in JavaScript: https://www.youtube.com/watch?v=OTNpiLUSiB4
đ´ Coding Train Live 152: https://youtu.be/Adk4LjmYyYg?t=732s
Related Coding Challenges:
đ #55 Mathematical Rose Patterns: https://youtu.be/f5QBExMNB1I
đ #60 Butterfly Generator: https://youtu.be/O_0fRV4MTZo
đ #81 Circle Morphing: https://youtu.be/u2D4sxh3MTs
đ #133 Times Tables Cardioid Visualization: https://youtu.be/bl3nc_a1nvs
đ #134 Heart Curve: https://youtu.be/oUBAi9xQ2X4
đ #C1 Maurer Rose: https://youtu.be/4uU9lZ-HSqA
Timestamps:
0:00 Introducing today's topic
0:30 Inspiration
1:53 Important elements
4:28 Size of the boxes
5:09 Add circles at top of canvas
7:08 Use polar to cartesian coordinates to determine the offset
8:05 Draw a point on the circles
9:17 Add a line
9:52 Adjust speed of rotation based the circle's index
10:40 Add circles along left of canvas
12:05 Create a Curve class
13:24 Draw the path of the curve
15:00 2D arrays
16:06 Matrices are expressed as "row by column"
19:07 Set x and y points for all row and column combination
20:52 Draw the points
21:52 Highlight the points
23:30 Refinements: reverse direction of rotation and reset the circles
27:27 Thank you for watching!
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
đ Website: http://thecodingtrain.com/
đž Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
đŠ Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
đĄ GitHub: https://github.com/CodingTrain
đŦ Discord: https://thecodingtrain.com/discord
đ Membership: http://youtube.com/thecodingtrain/join
đ Store: https://standard.tv/codingtrain
đī¸ Twitter: https://twitter.com/thecodingtrain
đ¸ Instagram: https://www.instagram.com/the.coding.train/
đĨ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
đ p5.js: https://p5js.org
đ p5.js Web Editor: https://editor.p5js.org/
đ Processing: https://processing.org
đ Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new
#lissajouscurve #polarcoordinates #processing
detail
{'title': 'Coding Challenge #116: Lissajous Curve Table', 'heatmap': [{'end': 491.171, 'start': 461.686, 'weight': 1}], 'summary': "Covers the development of a lissajous table inspired by 19th-century patterns and gifs from matt parker's youtube channel, using processing to create graphics for an 800x800 window. it discusses oscillating patterns, cartesian and polar coordinate systems, circular motion visualization, debugging, two-dimensional arrays, refactoring code, and optimizing p2d renderer for high density display.", 'chapters': [{'end': 117.689, 'segs': [{'end': 29.289, 'src': 'embed', 'start': 0.689, 'weight': 0, 'content': [{'end': 2.21, 'text': 'Hello, welcome to a coding challenge.', 'start': 0.689, 'duration': 1.521}, {'end': 4.152, 'text': "In this coding challenge, I'm going to make this.", 'start': 2.25, 'duration': 1.902}, {'end': 4.992, 'text': 'I actually already made it.', 'start': 4.172, 'duration': 0.82}, {'end': 5.653, 'text': "That's what I made.", 'start': 5.032, 'duration': 0.621}, {'end': 7.134, 'text': "It's called a LisaJu table.", 'start': 5.713, 'duration': 1.421}, {'end': 10.896, 'text': "I got inspired by this by some things I'll talk about in a second.", 'start': 8.375, 'duration': 2.521}, {'end': 13.798, 'text': 'This one was made with processing, which is the Java-based environment.', 'start': 11.176, 'duration': 2.622}, {'end': 18.201, 'text': "But I've also made a JavaScript version of it that you can watch in a separate video where I port it.", 'start': 14.018, 'duration': 4.183}, {'end': 26.086, 'text': 'So I hope you enjoy this coding challenge where I program this thing and make some exciting, cool, weird, wacky, beautiful,', 'start': 18.281, 'duration': 7.805}, {'end': 28.508, 'text': 'strange animated art with it.', 'start': 26.086, 'duration': 2.422}, {'end': 29.289, 'text': 'OK, goodbye.', 'start': 28.528, 'duration': 0.761}], 'summary': 'Coding challenge creating a lisaju table with java-based and javascript environments.', 'duration': 28.6, 'max_score': 0.689, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY689.jpg'}, {'end': 65.763, 'src': 'embed', 'start': 36.651, 'weight': 1, 'content': [{'end': 37.852, 'text': 'This is not a new idea.', 'start': 36.651, 'duration': 1.201}, {'end': 45.134, 'text': "this is like a 19th century idea, but I was reminded of it by this wonderful video from Stand Up Math's YouTube channel, Matt Parker.", 'start': 37.852, 'duration': 7.282}, {'end': 55.438, 'text': "I actually created a mechanical version of this particular pattern, and Matt Parker's video referenced these two wonderful GIFs.", 'start': 45.154, 'duration': 10.284}, {'end': 62.301, 'text': 'one from Julio Mulara on Twitter, and then this one here from Vincent Panteloni.', 'start': 55.958, 'duration': 6.343}, {'end': 65.763, 'text': 'And these are really satisfying, fun patterns.', 'start': 63.242, 'duration': 2.521}], 'summary': "19th century pattern inspired by stand up math's video, mechanical version created, referenced in gifs from julio mulara and vincent panteloni.", 'duration': 29.112, 'max_score': 36.651, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY36651.jpg'}], 'start': 0.689, 'title': 'Lisaju table coding challenge', 'summary': "Discusses the development of a lisaju table inspired by 19th-century patterns and gifs from stand up math's youtube channel, matt parker, using processing and planning to create graphics for a 800x800 window.", 'chapters': [{'end': 117.689, 'start': 0.689, 'title': 'Lisaju table coding challenge', 'summary': "Discusses the development of a lisaju table inspired by 19th-century patterns and gifs from stand up math's youtube channel, matt parker, using processing and planning to create graphics for a 800x800 window.", 'duration': 117, 'highlights': ["The chapter discusses the development of a LisaJu table inspired by 19th-century patterns and GIFs from Stand Up Math's YouTube channel, Matt Parker, using Processing and planning to create graphics for a 800x800 window.", 'The LisaJu table was created with processing, a Java-based environment, and a JavaScript version was also made.', "The idea for the LisaJu table was inspired by a wonderful video from Stand Up Math's YouTube channel, Matt Parker, referencing satisfying and fun patterns from GIFs by Julio Mulara on Twitter and Vincent Panteloni."]}], 'duration': 117, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY689.jpg', 'highlights': ['The LisaJu table was created with processing, a Java-based environment, and a JavaScript version was also made.', "The idea for the LisaJu table was inspired by a wonderful video from Stand Up Math's YouTube channel, Matt Parker, referencing satisfying and fun patterns from GIFs by Julio Mulara on Twitter and Vincent Panteloni.", "The chapter discusses the development of a LisaJu table inspired by 19th-century patterns and GIFs from Stand Up Math's YouTube channel, Matt Parker, using Processing and planning to create graphics for a 800x800 window."]}, {'end': 839.736, 'segs': [{'end': 185.295, 'src': 'embed', 'start': 163.046, 'weight': 0, 'content': [{'end': 170.808, 'text': "Just learning to program and processing is an exercise in kind of understanding Cartesian coordinate systems because that's what you're drawing into.", 'start': 163.046, 'duration': 7.762}, {'end': 177.729, 'text': 'But a polar coordinate system is a way of saying okay, I want to.', 'start': 171.268, 'duration': 6.461}, {'end': 185.295, 'text': 'if I have a radius of a circle and an angle, how can I describe a point outside the circle?', 'start': 177.729, 'duration': 7.566}], 'summary': 'Learning programming and processing involves understanding cartesian and polar coordinate systems.', 'duration': 22.249, 'max_score': 163.046, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY163046.jpg'}, {'end': 458.846, 'src': 'embed', 'start': 430.138, 'weight': 3, 'content': [{'end': 435.179, 'text': 'Where is this point along the circle? And this is this idea of polar coordinates to Cartesian coordinates.', 'start': 430.138, 'duration': 5.041}, {'end': 443.301, 'text': 'So if I know the radius of this circle and I know this angle, I can use a formula which says x equals r times cosine of the angle,', 'start': 435.399, 'duration': 7.902}, {'end': 444.742, 'text': 'y equals r times sine of the angle.', 'start': 443.301, 'duration': 1.441}, {'end': 445.482, 'text': "I'm going to write that down.", 'start': 444.762, 'duration': 0.72}, {'end': 454.604, 'text': "x equals r times cosine of the angle, theta being a Greek letter that's often used to signify an angle, y equals r times sine of the angle.", 'start': 446.062, 'duration': 8.542}, {'end': 458.846, 'text': 'Where do these come from? A reference to some other video where I go through this in more detail.', 'start': 455.045, 'duration': 3.801}], 'summary': 'Using polar coordinates to convert to cartesian coordinates with x = r * cos(θ) and y = r * sin(θ).', 'duration': 28.708, 'max_score': 430.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY430138.jpg'}, {'end': 491.171, 'src': 'heatmap', 'start': 461.686, 'weight': 1, 'content': [{'end': 470.189, 'text': "So I'm going to say x equals r times cosine of the angle and y equals r times sine of the angle.", 'start': 461.686, 'duration': 8.503}, {'end': 470.509, 'text': "and what's r??", 'start': 470.189, 'duration': 0.32}, {'end': 474.362, 'text': 'r equals d, divided by two.', 'start': 472.701, 'duration': 1.661}, {'end': 475.303, 'text': "that's kind of useful.", 'start': 474.362, 'duration': 0.941}, {'end': 487.95, 'text': "And then I'm going to say draw, I'm going to say stroke, stroke stays the same, I'm going to make the stroke weight, stroke weight eight.", 'start': 476.403, 'duration': 11.547}, {'end': 491.171, 'text': "So I'm going to just draw like a thicker point by just using point.", 'start': 488.15, 'duration': 3.021}], 'summary': 'Demonstrating drawing with specific equations and stroke weight.', 'duration': 29.485, 'max_score': 461.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY461686.jpg'}, {'end': 745.623, 'src': 'embed', 'start': 722.385, 'weight': 2, 'content': [{'end': 729.271, 'text': "So the curve class is an object, and the idea for that object is to store the curve that's going to go in each one of these spots.", 'start': 722.385, 'duration': 6.886}, {'end': 733.654, 'text': 'So what does it need to store that curve? I need to store a path.', 'start': 730.031, 'duration': 3.623}, {'end': 740.98, 'text': 'So where am I? Curve, I need to say, what do I need? I need an array list.', 'start': 735.455, 'duration': 5.525}, {'end': 743.281, 'text': 'An array list is a flexibly sized array.', 'start': 741.24, 'duration': 2.041}, {'end': 745.623, 'text': 'If I do this in JavaScript, I could just make a plain array.', 'start': 743.321, 'duration': 2.302}], 'summary': 'Curve class stores curves for each spot using array list.', 'duration': 23.238, 'max_score': 722.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY722385.jpg'}], 'start': 117.729, 'title': 'Oscillating patterns, coordinate systems, and circular motion visualization', 'summary': 'Discusses oscillating patterns using the sine function, and the importance of understanding cartesian and polar coordinate systems for programming and processing. it also covers creating circular motion visualization using processing, including the algorithm for calculating the position of points on circles and the concept of object-oriented programming for creating a curve class.', 'chapters': [{'end': 185.295, 'start': 117.729, 'title': 'Oscillating patterns and coordinate systems', 'summary': 'Discusses oscillating patterns using the sine function, and the importance of understanding cartesian and polar coordinate systems for programming and processing.', 'duration': 67.566, 'highlights': ['The sine function oscillates a number between -1 and 1, and its significance lies in trigonometry.', 'Understanding Cartesian coordinate systems is essential for programming and processing, while polar coordinate systems describe points outside a circle based on radius and angle.', 'The sine function represents the ratio of the opposite angle over the hypotenuse in a right triangle.']}, {'end': 839.736, 'start': 185.616, 'title': 'Creating circular motion visualization', 'summary': 'Covers creating circular motion visualization by using processing, discussing the algorithm to calculate the position of points on the circles, and the concept of object-oriented programming for creating a curve class.', 'duration': 654.12, 'highlights': ['The algorithm to calculate the position of points on the circles using polar coordinates to Cartesian coordinates is discussed. Discussion on using the formula x = r * cos(angle) and y = r * sin(angle) to calculate the position of points on the circles.', 'The concept of object-oriented programming for creating a curve class to store the curve for each spot in the visualization is introduced. Introduction of a curve class to store the curve for each spot in the visualization using an array list to hold p vectors and functions like add point and draw.', 'The process of creating circular motion visualization using Processing and the details of drawing circles, points, and paths are explained. Explanation of the process of creating circular motion visualization using Processing, including drawing circles, points, and paths to show the motion.']}], 'duration': 722.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY117729.jpg', 'highlights': ['Understanding Cartesian coordinate systems is essential for programming and processing, while polar coordinate systems describe points outside a circle based on radius and angle.', 'The process of creating circular motion visualization using Processing and the details of drawing circles, points, and paths are explained.', 'The concept of object-oriented programming for creating a curve class to store the curve for each spot in the visualization is introduced.', 'The algorithm to calculate the position of points on the circles using polar coordinates to Cartesian coordinates is discussed.']}, {'end': 1034.43, 'segs': [{'end': 933.833, 'src': 'embed', 'start': 840.618, 'weight': 0, 'content': [{'end': 847.323, 'text': "Okay, oh, someone's telling me that the vertical lines are not visible, and I'm not in the Slack channel here.", 'start': 840.618, 'duration': 6.705}, {'end': 851.986, 'text': "Okay, the vertical lines are not, okay, two quick fixes I'll make.", 'start': 847.423, 'duration': 4.563}, {'end': 857.49, 'text': 'Alka is telling me that half pi is a global constant in processing.', 'start': 852.146, 'duration': 5.344}, {'end': 863.254, 'text': 'so if I wanted to be, I could use that instead of saying pi divided by two, and you cannot see the lines.', 'start': 857.49, 'duration': 5.764}, {'end': 866.937, 'text': "Oh, that's so sad, the lines are like my favorite part.", 'start': 864.235, 'duration': 2.702}, {'end': 869.229, 'text': "Let's do 150.", 'start': 867.317, 'duration': 1.912}, {'end': 870.95, 'text': 'Just make them much more obvious.', 'start': 869.229, 'duration': 1.721}, {'end': 873.571, 'text': 'Okay, that makes them much more obvious.', 'start': 871.91, 'duration': 1.661}, {'end': 879.413, 'text': "Hopefully it looks reasonable in the sort of YouTube compression stuff, but we'll see, we'll see.", 'start': 874.771, 'duration': 4.642}, {'end': 881.593, 'text': "Okay, so I'm going back to the curve.", 'start': 879.633, 'duration': 1.96}, {'end': 883.474, 'text': 'And I just hit the debugger by accident.', 'start': 882.114, 'duration': 1.36}, {'end': 886.395, 'text': 'All right, so let me auto-format the code.', 'start': 883.534, 'duration': 2.861}, {'end': 888.516, 'text': 'So this should draw me the path.', 'start': 886.615, 'duration': 1.901}, {'end': 890.588, 'text': 'And then, oh, tricky.', 'start': 889.588, 'duration': 1}, {'end': 892.99, 'text': 'So now, where do I want to store all these curves?', 'start': 890.749, 'duration': 2.241}, {'end': 901.133, 'text': 'Well, one of the reasons why I wanted to use processing for this is I just feel so comfortable whenever I have a grid-like structure like this,', 'start': 893.93, 'duration': 7.203}, {'end': 902.374, 'text': 'using a two-dimensional array.', 'start': 901.133, 'duration': 1.241}, {'end': 905.195, 'text': "And a two-dimensional array isn't really two-dimensional.", 'start': 902.394, 'duration': 2.801}, {'end': 906.656, 'text': "It's just a list of lists.", 'start': 905.255, 'duration': 1.401}, {'end': 909.057, 'text': 'But we can think of it as a two-dimensional matrix.', 'start': 907.016, 'duration': 2.041}, {'end': 914.24, 'text': "See my other videos about two-dimensional arrays? It's kind of tricky to make those things in Java, though absolutely possible.", 'start': 909.097, 'duration': 5.143}, {'end': 917.882, 'text': "JavaScript, that is, but in Java, it's not so tough.", 'start': 914.78, 'duration': 3.102}, {'end': 924.447, 'text': "So what I can actually do is I can declare, I'm going to call it curves,", 'start': 918.303, 'duration': 6.144}, {'end': 933.833, 'text': 'and I can now just say curves equals a new two-dimensional array with columns by rows.', 'start': 924.447, 'duration': 9.386}], 'summary': 'Discussing coding debugging and using two-dimensional arrays in processing.', 'duration': 93.215, 'max_score': 840.618, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY840618.jpg'}], 'start': 840.618, 'title': 'Debugging and using two-dimensional arrays', 'summary': "Discusses debugging code issues with visible lines and using global constants, like 'half pi' instead of 'pi divided by two' in processing. it also explores the use of two-dimensional arrays in processing, including declaring a new array and considering the array structure's rows and columns, emphasizing the challenges and considerations of using two-dimensional arrays in programming.", 'chapters': [{'end': 886.395, 'start': 840.618, 'title': 'Debugging and code optimization', 'summary': "Discusses debugging code issues with visible lines and using global constants, specifically 'half pi' instead of 'pi divided by two' in processing, as well as the accidental hit of the debugger and auto-formatting the code.", 'duration': 45.777, 'highlights': ["The use of 'half pi' as a global constant in processing is discussed as a code optimization strategy, offering a more concise alternative to 'pi divided by two'.", 'Debugging issues with visible lines and the accidental hit of the debugger are mentioned, indicating the troubleshooting process in the coding environment.', 'Auto-formatting the code is briefly touched upon, showcasing the maintenance aspect of code development.']}, {'end': 1034.43, 'start': 886.615, 'title': 'Using two-dimensional arrays in processing', 'summary': 'Discusses the use of two-dimensional arrays in processing, declaring a new two-dimensional array, and the consideration of rows and columns in the array structure, highlighting the challenges and considerations of using two-dimensional arrays in programming.', 'duration': 147.815, 'highlights': ['The chapter discusses the consideration of rows and columns in the array structure, highlighting the challenges and considerations of using two-dimensional arrays in programming.', 'The speaker explains the process of declaring a new two-dimensional array in processing, emphasizing the use of a grid-like structure and the comfort in working with two-dimensional arrays.', 'The speaker explores the challenges and considerations of using two-dimensional arrays in programming, including the expression of Cartesian coordinates and matrices, and the potential for mistakes and bugs in the process.']}], 'duration': 193.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY840618.jpg', 'highlights': ["The use of 'half pi' as a global constant in processing is discussed as a code optimization strategy, offering a more concise alternative to 'pi divided by two'.", 'Debugging issues with visible lines and the accidental hit of the debugger are mentioned, indicating the troubleshooting process in the coding environment.', 'The chapter discusses the consideration of rows and columns in the array structure, highlighting the challenges and considerations of using two-dimensional arrays in programming.', 'The speaker explains the process of declaring a new two-dimensional array in processing, emphasizing the use of a grid-like structure and the comfort in working with two-dimensional arrays.']}, {'end': 1279.888, 'segs': [{'end': 1085.545, 'src': 'embed', 'start': 1036.007, 'weight': 2, 'content': [{'end': 1040.589, 'text': 'So I really do want to refactor this and put these two blocks of code together in one loop.', 'start': 1036.007, 'duration': 4.582}, {'end': 1041.77, 'text': "I'm not going to though.", 'start': 1040.848, 'duration': 0.922}, {'end': 1043.17, 'text': "Here's what I'll do.", 'start': 1042.569, 'duration': 0.601}, {'end': 1060.429, 'text': "I'm going to, if I change this function to like void, add x, so I make two of them like a separate one for add y And then,", 'start': 1044.211, 'duration': 16.218}, {'end': 1064.171, 'text': 'after I add the x and the y, I can add the point with both of those.', 'start': 1060.429, 'duration': 3.742}, {'end': 1065.772, 'text': 'so I need to store.', 'start': 1064.171, 'duration': 1.601}, {'end': 1068.133, 'text': "I'm going to say p vector current.", 'start': 1065.772, 'duration': 2.361}, {'end': 1075.401, 'text': 'So if I keep a separate variable current equals, create vector, create vector.', 'start': 1068.753, 'duration': 6.648}, {'end': 1078.683, 'text': "it doesn't matter what's in it, just zero, zero or nothing, an empty vector.", 'start': 1075.401, 'duration': 3.282}, {'end': 1082.824, 'text': "Then what I could do, no not create vector, in processing it's new p vector.", 'start': 1079.903, 'duration': 2.921}, {'end': 1085.545, 'text': "In p5 in JavaScript it's create vector.", 'start': 1083.104, 'duration': 2.441}], 'summary': 'Refactoring code to combine two blocks, creating separate functions for adding x and y, and storing in a new variable.', 'duration': 49.538, 'max_score': 1036.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY1036007.jpg'}, {'end': 1170.171, 'src': 'embed', 'start': 1134.819, 'weight': 1, 'content': [{'end': 1137.84, 'text': 'For this row, I need to set the y point for all of these.', 'start': 1134.819, 'duration': 3.021}, {'end': 1143.859, 'text': 'Okay, so in this loop here, where I am going through all the columns now,', 'start': 1139.417, 'duration': 4.442}, {'end': 1147.861, 'text': 'I just need to go through all of the rows for each column and set those X points.', 'start': 1143.859, 'duration': 4.002}, {'end': 1150.383, 'text': 'So I is going through the columns.', 'start': 1148.262, 'duration': 2.121}, {'end': 1156.046, 'text': 'So now J will go through the rows.', 'start': 1151.203, 'duration': 4.843}, {'end': 1161.489, 'text': "And I'm going to say, I forgot what I'm doing, curves.", 'start': 1158.947, 'duration': 2.542}, {'end': 1170.171, 'text': "curves, cannot type curves, j i dot set x, and then what am I doing? I'm setting it to exactly this point.", 'start': 1162.526, 'duration': 7.645}], 'summary': 'Setting x and y points for columns and rows in a loop.', 'duration': 35.352, 'max_score': 1134.819, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY1134819.jpg'}, {'end': 1254.118, 'src': 'embed', 'start': 1224.568, 'weight': 0, 'content': [{'end': 1227.891, 'text': "Like once I've set the x and the y, add to the path, then draw the path.", 'start': 1224.568, 'duration': 3.323}, {'end': 1233.616, 'text': 'So I need a nested loop, do I have that somewhere? Somewhere I have a nested loop, yes, right up here already.', 'start': 1228.411, 'duration': 5.205}, {'end': 1235.663, 'text': "Let's just actually look at this.", 'start': 1234.602, 'duration': 1.061}, {'end': 1238.085, 'text': 'Ah, ah, no, come back to me.', 'start': 1235.943, 'duration': 2.142}, {'end': 1241.468, 'text': "I'm going to copy this because I don't feel like typing it.", 'start': 1238.665, 'duration': 2.803}, {'end': 1254.118, 'text': "I'm going to go all the way to the end and now instead of, this is before I made new curves, now I'm just going to say add point and what else? Show.", 'start': 1241.488, 'duration': 12.63}], 'summary': 'Discussion on implementing nested loops and drawing paths.', 'duration': 29.55, 'max_score': 1224.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY1224568.jpg'}], 'start': 1036.007, 'title': 'Refactoring code and nested loop for setting x and y points', 'summary': 'Discusses the need to refactor code to combine two blocks into one loop and creating a separate function for adding x and y coordinates. it also emphasizes the importance of creating a vector for the current point in p5.js and the process of setting x and y points for each column and row using a nested loop, leading to the completion of a coding challenge.', 'chapters': [{'end': 1085.545, 'start': 1036.007, 'title': 'Refactoring code and creating vector in p5.js', 'summary': 'Discusses the need to refactor code to combine two blocks into one loop, and creating a separate function for adding x and y coordinates. it also emphasizes the importance of creating a vector for current point in p5.js and the difference in syntax for vector creation in processing and p5.js.', 'duration': 49.538, 'highlights': ['The importance of refactoring code to combine two blocks into one loop and creating a separate function for adding x and y coordinates.', 'The need to create a vector for the current point in p5.js.', "The difference in syntax for creating a vector in Processing and p5.js, with 'new p vector' in Processing and 'create vector' in p5.js."]}, {'end': 1279.888, 'start': 1086.125, 'title': 'Nested loop for setting x and y points', 'summary': 'Discusses the process of setting x and y points for each column and row using a nested loop, with the goal of adding points to a path and drawing it, leading to the completion of a coding challenge.', 'duration': 193.763, 'highlights': ['The process involves setting the x point for each column and the y point for each row using a nested loop, ensuring consistency in the use of variables for columns and rows.', 'The completion of the coding challenge is achieved by setting the x and y points, adding them to the path, and then drawing the path.']}], 'duration': 243.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY1036007.jpg', 'highlights': ['The completion of the coding challenge is achieved by setting the x and y points, adding them to the path, and then drawing the path.', 'The process involves setting the x point for each column and the y point for each row using a nested loop, ensuring consistency in the use of variables for columns and rows.', 'The importance of refactoring code to combine two blocks into one loop and creating a separate function for adding x and y coordinates.', 'The need to create a vector for the current point in p5.js.', "The difference in syntax for creating a vector in Processing and p5.js, with 'new p vector' in Processing and 'create vector' in p5.js."]}, {'end': 1666.159, 'segs': [{'end': 1366, 'src': 'embed', 'start': 1329.916, 'weight': 1, 'content': [{'end': 1331.878, 'text': "So that doesn't make a difference.", 'start': 1329.916, 'duration': 1.962}, {'end': 1334.64, 'text': "I would have to unplug it so you can't see it, but that's fine.", 'start': 1332.518, 'duration': 2.122}, {'end': 1337.322, 'text': 'I am going to use, though, the P2D renderer.', 'start': 1334.8, 'duration': 2.522}, {'end': 1346.75, 'text': 'Because what I would like to do now is I would like to use full screen.', 'start': 1341.466, 'duration': 5.284}, {'end': 1351.034, 'text': "So let's just be careful about this for a second.", 'start': 1349.292, 'duration': 1.742}, {'end': 1355.197, 'text': "I'm going to use the P2D renderer, and I'm going to make these much bigger.", 'start': 1351.074, 'duration': 4.123}, {'end': 1355.938, 'text': "Let's see what happens.", 'start': 1355.277, 'duration': 0.661}, {'end': 1366, 'text': 'So we can see this is a small LisaJu table and I probably want this like buffer between them should be a ratio of their size.', 'start': 1358.154, 'duration': 7.846}], 'summary': 'Using p2d renderer for full screen display with larger lisaju table.', 'duration': 36.084, 'max_score': 1329.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY1329916.jpg'}, {'end': 1491.743, 'src': 'embed', 'start': 1463.297, 'weight': 3, 'content': [{'end': 1468.144, 'text': "Oh, you know what? I guess I'm going to have to reset the angle back to zero.", 'start': 1463.297, 'duration': 4.847}, {'end': 1470.507, 'text': 'That was a bug.', 'start': 1468.164, 'duration': 2.343}, {'end': 1475.433, 'text': "So if I do that, now it's going to go all the way around and start over.", 'start': 1471.528, 'duration': 3.905}, {'end': 1480.4, 'text': 'And you know what I really want to do also is when it does that, let me do like save frame.', 'start': 1475.694, 'duration': 4.706}, {'end': 1487.922, 'text': 'you know, Lisa, one, two, three, four, you know, so I can like save it.', 'start': 1481.88, 'duration': 6.042}, {'end': 1491.743, 'text': "Now, they're all going to be the same, so I don't know why I'm doing this over and over again, but that's fine.", 'start': 1488.022, 'duration': 3.721}], 'summary': 'Discusses resetting the angle, saving frames, and dealing with a bug.', 'duration': 28.446, 'max_score': 1463.297, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY1463297.jpg'}, {'end': 1546.043, 'src': 'embed', 'start': 1515.718, 'weight': 0, 'content': [{'end': 1517.998, 'text': 'So you can see I can have a really large table.', 'start': 1515.718, 'duration': 2.28}, {'end': 1527.199, 'text': "And by the way, you should see here, of course, as they're going the same speed, they should be always circles.", 'start': 1518.038, 'duration': 9.161}, {'end': 1531.86, 'text': 'So you can see these interesting like patterns here based on the ratio of the column to the row.', 'start': 1527.46, 'duration': 4.4}, {'end': 1538.801, 'text': 'So this really should be like divisible more nicely so that it fills out and you could do so much more with color and stuff like that.', 'start': 1532.92, 'duration': 5.881}, {'end': 1546.043, 'text': 'I probably should make these dots actually also a ratio of the size to the stroke weight should be a ratio.', 'start': 1539.842, 'duration': 6.201}], 'summary': 'Large table with circles, interesting patterns based on column-to-row ratio, potential for color use and stroke weight ratio.', 'duration': 30.325, 'max_score': 1515.718, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY1515718.jpg'}, {'end': 1598.309, 'src': 'embed', 'start': 1571.182, 'weight': 2, 'content': [{'end': 1574.945, 'text': "Just, what if I don't use, oh, actually, you know what, it runs kind of fine in P2D.", 'start': 1571.182, 'duration': 3.763}, {'end': 1579.59, 'text': 'I thought I might need the hardware acceleration to get it going kind of full screen, but this is fine.', 'start': 1575.005, 'duration': 4.585}, {'end': 1584.855, 'text': 'Save the frame before, oh, before I reset the circles.', 'start': 1581.712, 'duration': 3.143}, {'end': 1590.04, 'text': "Yeah, but you know what, it actually should be fine, because it's okay to reset the circles without redrawing it.", 'start': 1585.195, 'duration': 4.845}, {'end': 1593.844, 'text': "So I'm not redrawing it, so let me make sure it gets all the way through.", 'start': 1590.841, 'duration': 3.003}, {'end': 1598.309, 'text': "And by the way, I also probably don't need to save.", 'start': 1596.188, 'duration': 2.121}], 'summary': 'Discussing performance in p2d, considering hardware acceleration, and optimizing circle resetting in code.', 'duration': 27.127, 'max_score': 1571.182, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY1571182.jpg'}], 'start': 1281.628, 'title': 'Optimizing p2d renderer', 'summary': 'Discusses optimizing p2d renderer for high density display and creating a lisajous table with p2d, covering stroke weight adjustment, pixel density, renderer type, point movement, angle manipulation, patterns formed, potential errors, and required acceleration.', 'chapters': [{'end': 1515.698, 'start': 1281.628, 'title': 'Optimizing p2d renderer for high density display', 'summary': 'Discusses the optimization of p2d renderer for a high density display, including adjusting stroke weight, pixel density, and renderer type, as well as addressing issues with point movement and angle manipulation.', 'duration': 234.07, 'highlights': ['The speaker attempts to optimize the P2D renderer for a high density display by adjusting stroke weight and pixel density, and switching to the P2D renderer in order to use full screen.', 'The chapter highlights the issues encountered with point movement and angle manipulation, including the need to reset the angle and save frames for future reference.']}, {'end': 1666.159, 'start': 1515.718, 'title': 'Creating lisajous table with p2d', 'summary': 'Demonstrates the process of creating a lisajous table using p2d, discussing the patterns formed, potential errors encountered, and the acceleration required.', 'duration': 150.441, 'highlights': ['The chapter discusses the interesting patterns formed in the Lisajous table based on the ratio of the column to the row, illustrating the potential for various designs and color usage.', 'The author encounters an error while running the program in P3D and discusses the potential need for hardware acceleration for full-screen operation.', 'The process of resetting the circles and the potential impact on performance is explored, with consideration for the need to redraw the circles.', 'The author mentions the plan to create a JavaScript version of the Lisajous table in a five-minute video and encourages viewers to share their own versions on social media platforms.']}], 'duration': 384.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/--6eyLO78CY/pics/--6eyLO78CY1281628.jpg', 'highlights': ['The chapter discusses the interesting patterns formed in the Lisajous table based on the ratio of the column to the row, illustrating the potential for various designs and color usage.', 'The speaker attempts to optimize the P2D renderer for a high density display by adjusting stroke weight and pixel density, and switching to the P2D renderer in order to use full screen.', 'The author encounters an error while running the program in P3D and discusses the potential need for hardware acceleration for full-screen operation.', 'The chapter highlights the issues encountered with point movement and angle manipulation, including the need to reset the angle and save frames for future reference.', 'The process of resetting the circles and the potential impact on performance is explored, with consideration for the need to redraw the circles.']}], 'highlights': ['The LisaJu table was created with processing, a Java-based environment, and a JavaScript version was also made.', "The idea for the LisaJu table was inspired by a wonderful video from Stand Up Math's YouTube channel, Matt Parker, referencing satisfying and fun patterns from GIFs by Julio Mulara on Twitter and Vincent Panteloni.", "The chapter discusses the development of a LisaJu table inspired by 19th-century patterns and GIFs from Stand Up Math's YouTube channel, Matt Parker, using Processing and planning to create graphics for a 800x800 window.", 'Understanding Cartesian coordinate systems is essential for programming and processing, while polar coordinate systems describe points outside a circle based on radius and angle.', 'The process of creating circular motion visualization using Processing and the details of drawing circles, points, and paths are explained.', 'The concept of object-oriented programming for creating a curve class to store the curve for each spot in the visualization is introduced.', 'The algorithm to calculate the position of points on the circles using polar coordinates to Cartesian coordinates is discussed.', "The use of 'half pi' as a global constant in processing is discussed as a code optimization strategy, offering a more concise alternative to 'pi divided by two'.", 'Debugging issues with visible lines and the accidental hit of the debugger are mentioned, indicating the troubleshooting process in the coding environment.', 'The chapter discusses the consideration of rows and columns in the array structure, highlighting the challenges and considerations of using two-dimensional arrays in programming.', 'The speaker explains the process of declaring a new two-dimensional array in processing, emphasizing the use of a grid-like structure and the comfort in working with two-dimensional arrays.', 'The completion of the coding challenge is achieved by setting the x and y points, adding them to the path, and then drawing the path.', 'The process involves setting the x point for each column and the y point for each row using a nested loop, ensuring consistency in the use of variables for columns and rows.', 'The importance of refactoring code to combine two blocks into one loop and creating a separate function for adding x and y coordinates.', 'The need to create a vector for the current point in p5.js.', "The difference in syntax for creating a vector in Processing and p5.js, with 'new p vector' in Processing and 'create vector' in p5.js.", 'The chapter discusses the interesting patterns formed in the Lisajous table based on the ratio of the column to the row, illustrating the potential for various designs and color usage.', 'The speaker attempts to optimize the P2D renderer for a high density display by adjusting stroke weight and pixel density, and switching to the P2D renderer in order to use full screen.', 'The author encounters an error while running the program in P3D and discusses the potential need for hardware acceleration for full-screen operation.', 'The chapter highlights the issues encountered with point movement and angle manipulation, including the need to reset the angle and save frames for future reference.', 'The process of resetting the circles and the potential impact on performance is explored, with consideration for the need to redraw the circles.']}