title
Java 2D graphics 🖍️

description
Java 2d graphics GUI swing tutorial for beginners #Java #2D #graphics #tutorial #beginners #shapes #paint() // --------------------------------------------- public class Main{ public static void main(String[] args) { new MyFrame(); } } // ---------------------------------------------- import javax.swing.*; public class MyFrame extends JFrame{ MyPanel panel; MyFrame(){ panel = new MyPanel(); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.add(panel); this.pack(); this.setLocationRelativeTo(null); this.setVisible(true); } } // ---------------------------------------------- import java.awt.*; import javax.swing.*; public class MyPanel extends JPanel{ //Image image; MyPanel(){ //image = new ImageIcon("sky.png").getImage(); this.setPreferredSize(new Dimension(500,500)); } public void paint(Graphics g) { Graphics2D g2D = (Graphics2D) g; //g2D.drawImage(image, 0, 0, null); g2D.setPaint(Color.blue); g2D.setStroke(new BasicStroke(5)); g2D.drawLine(0, 0, 500, 500); //g2D.setPaint(Color.pink); //g2D.drawRect(0, 0, 100, 200); //g2D.fillRect(0, 0, 100, 200); //g2D.setPaint(Color.orange); //g2D.drawOval(0, 0, 100, 100); //g2D.fillOval(0, 0, 100, 100); //g2D.setPaint(Color.red); //g2D.drawArc(0, 0, 100, 100, 0, 180); //g2D.fillArc(0, 0, 100, 100, 0, 180); //g2D.setPaint(Color.white); //g2D.fillArc(0, 0, 100, 100, 180, 180); //int[] xPoints = {150,250,350}; //int[] yPoints = {300,150,300}; //g2D.setPaint(Color.yellow); //g2D.drawPolygon(xPoints, yPoints, 3); //g2D.fillPolygon(xPoints, yPoints, 3); //g2D.setPaint(Color.magenta); //g2D.setFont(new Font("Ink Free",Font.BOLD,50)); //g2D.drawString("U R A WINNER! :D", 50, 50); } }

detail
{'title': 'Java 2D graphics 🖍️', 'heatmap': [{'end': 344.24, 'start': 292.4, 'weight': 0.733}, {'end': 401.029, 'start': 349.6, 'weight': 0.744}, {'end': 1133.76, 'start': 1101.679, 'weight': 1}], 'summary': 'Tutorial on java 2d graphics covers creating 2d graphics, gui components, drawing shapes, text, circles, ovals, and pokeballs, changing font and color, and adding custom images, aiming to provide a comprehensive guide for beginners in java programming.', 'chapters': [{'end': 264.8, 'segs': [{'end': 42.48, 'src': 'embed', 'start': 0, 'weight': 0, 'content': [{'end': 2.08, 'text': "hey, what's going on everybody? it's your bro here.", 'start': 0, 'duration': 2.08}, {'end': 7.52, 'text': "hope you're doing well and in this video i'm going to teach you guys how we can paint some simple 2d graphics in java.", 'start': 2.08, 'duration': 5.44}, {'end': 11.99, 'text': 'so sit back, relax and enjoy the show.', 'start': 7.52, 'duration': 4.47}, {'end': 16.64, 'text': 'if you find this video helpful, please remember to like, comment and subscribe.', 'start': 12, 'duration': 4.64}, {'end': 19.51, 'text': 'your support will help keep this channel running.', 'start': 16.64, 'duration': 2.87}, {'end': 22.08, 'text': "okay, everybody, let's create some 2d graphics.", 'start': 19.52, 'duration': 2.56}, {'end': 25.109, 'text': "but before we begin, here's my setup that i have so far.", 'start': 22.08, 'duration': 3.029}, {'end': 32.31, 'text': 'i have two classes a class called main that just contains my main method, and an instance of my other class called my frame.', 'start': 25.119, 'duration': 7.191}, {'end': 38.32, 'text': 'and this class, my frame, extends jframe, so it behaves exactly like a jframe within the constructor.', 'start': 32.32, 'duration': 6}, {'end': 42.48, 'text': 'for my frame i have this dot set default close operation, jframe exit.', 'start': 38.32, 'duration': 4.16}], 'summary': 'Teaching 2d graphics in java with simple setup and class structure.', 'duration': 42.48, 'max_score': 0, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs02000.jpg'}, {'end': 86.789, 'src': 'embed', 'start': 62.48, 'weight': 2, 'content': [{'end': 68.23, 'text': 'the component class is a parent class to many of the java gui components that we work with.', 'start': 62.48, 'duration': 5.75}, {'end': 75.6, 'text': 'there is a paint method underneath the component class and this has a parameter of graphics g.', 'start': 68.24, 'duration': 7.36}, {'end': 83.59, 'text': 'it takes a graphics object, and what this paint method does is that this method is called when the contents of the component should be painted,', 'start': 75.6, 'duration': 7.99}, {'end': 86.789, 'text': 'such as when the component is first being shown.', 'start': 83.6, 'duration': 3.189}], 'summary': 'The component class in java gui components has a paint method with a graphics parameter that is called when the component should be painted, such as when it is first shown.', 'duration': 24.309, 'max_score': 62.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs062480.jpg'}, {'end': 158.309, 'src': 'embed', 'start': 107.04, 'weight': 1, 'content': [{'end': 117.84, 'text': "so we'll say public void paint, and this has a parameter of graphics, a graphics object, and we'll just call this graphics g.", 'start': 107.04, 'duration': 10.8}, {'end': 124.96, 'text': 'so g is going to be our graphics object and this paint method is actually called behind the scenes.', 'start': 117.84, 'duration': 7.12}, {'end': 130.479, 'text': "it's invoked automatically when we instantiate a component such as a j frame.", 'start': 124.96, 'duration': 5.519}, {'end': 133.84, 'text': 'so we do not need to explicitly invoke this paint method.', 'start': 130.479, 'duration': 3.361}, {'end': 136.309, 'text': "it'll do so for us behind the scenes.", 'start': 133.84, 'duration': 2.469}, {'end': 139.03, 'text': "now, with graphics, it's somewhat outdated.", 'start': 136.319, 'duration': 2.711}, {'end': 144.15, 'text': "we're actually better off using something called graphics 2d, which is an updated version.", 'start': 139.04, 'duration': 5.11}, {'end': 155.11, 'text': "graphics 2d is a child class or subclass of the graphics class, and what we're going to be doing is casting our graphics g as a 2d graphic.", 'start': 144.16, 'duration': 10.95}, {'end': 158.309, 'text': 'so for the very first line, after we call the paint method.', 'start': 155.12, 'duration': 3.189}], 'summary': "The paint method is automatically invoked when a component is instantiated, and it's recommended to use graphics2d instead of graphics.", 'duration': 51.269, 'max_score': 107.04, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0107040.jpg'}], 'start': 0, 'title': '2d graphics and gui components in java', 'summary': 'Covers creating 2d graphics in java, including setting up classes and a frame, and explains the paint method in java gui components, along with the transition to graphics 2d for enhanced drawing capabilities, aiming to provide a comprehensive guide for beginners.', 'chapters': [{'end': 62.48, 'start': 0, 'title': 'Creating 2d graphics in java', 'summary': 'Covers the process of creating simple 2d graphics in java, including setting up classes and a frame, and utilizing specific methods and properties, aiming to provide a comprehensive guide for beginners.', 'duration': 62.48, 'highlights': ['The chapter covers the process of creating simple 2D graphics in Java, including setting up classes and a frame, and utilizing specific methods and properties, aiming to provide a comprehensive guide for beginners.', "The speaker sets up two classes, 'main' and 'my frame', with the latter extending 'jframe' and containing specific settings like size, location, and visibility.", "The speaker emphasizes the importance of support by encouraging viewers to like, comment, and subscribe, highlighting the impact on the channel's sustainability and growth."]}, {'end': 107.03, 'start': 62.48, 'title': 'Java gui components: paint method', 'summary': 'Explains the importance of the paint method in the component class, which acts as a parent class for many java gui components, and how it is used to paint the contents of the component when it is first being shown.', 'duration': 44.55, 'highlights': ['The paint method in the Component class is crucial for painting the contents of GUI components, and it takes a graphics object as a parameter.', 'The paint method is called when the component is first being shown, making it a key part of the initialization process for GUI components.', 'The my frame class will be overriding the paint method to define and declare the desired painting behavior within the GUI component.']}, {'end': 264.8, 'start': 107.04, 'title': 'Graphics 2d drawing in java', 'summary': 'Discusses using the paint method to draw graphics in java, including the transition to graphics 2d for enhanced drawing capabilities, and demonstrates drawing a line from the top left corner to the bottom right corner of a 500x500 frame, highlighting the issue with the window bar overlapping the graphics area.', 'duration': 157.76, 'highlights': ['The paint method is automatically invoked when a component such as a j frame is instantiated. The paint method is automatically called behind the scenes when a component like j frame is instantiated, eliminating the need for explicit invocation.', 'Graphics 2D offers more drawing options compared to the outdated Graphics class. Graphics 2D provides more drawing options and capabilities compared to the outdated Graphics class, offering enhanced functionality for drawing and manipulating graphics.', 'Demonstrates drawing a line from the top left corner to the bottom right corner of a 500x500 frame. The demonstration involves drawing a line from the top left corner to the bottom right corner of a 500x500 frame, utilizing the coordinates (0,0) and (500,500) for the starting and ending points.', 'Highlights the issue with the window bar overlapping the graphics area in the frame. The issue arises from the window bar at the top of the frame overlapping the graphics area, affecting the expected starting position for drawing.']}], 'duration': 264.8, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs02000.jpg', 'highlights': ['The chapter covers the process of creating simple 2D graphics in Java, including setting up classes and a frame, and utilizing specific methods and properties, aiming to provide a comprehensive guide for beginners.', 'Graphics 2D offers more drawing options compared to the outdated Graphics class. Graphics 2D provides more drawing options and capabilities compared to the outdated Graphics class, offering enhanced functionality for drawing and manipulating graphics.', 'The paint method in the Component class is crucial for painting the contents of GUI components, and it takes a graphics object as a parameter.', "The speaker sets up two classes, 'main' and 'my frame', with the latter extending 'jframe' and containing specific settings like size, location, and visibility.", 'The paint method is automatically invoked when a component such as a j frame is instantiated. The paint method is automatically called behind the scenes when a component like j frame is instantiated, eliminating the need for explicit invocation.']}, {'end': 405.51, 'segs': [{'end': 292.4, 'src': 'embed', 'start': 264.8, 'weight': 0, 'content': [{'end': 272.31, 'text': 'so it may be better for us if we were to create a panel, draw on the panel and then add the panel to the frame.', 'start': 264.8, 'duration': 7.51}, {'end': 278.32, 'text': "so let's actually create a class called my panel, which will extend jpanel.", 'start': 272.32, 'duration': 6}, {'end': 282.8, 'text': "so let's create one more class and then we're going to draw on this panel.", 'start': 278.32, 'duration': 4.48}, {'end': 284.72, 'text': 'so file new class.', 'start': 282.8, 'duration': 1.92}, {'end': 289.28, 'text': "we'll call this my panel and then click finish.", 'start': 284.72, 'duration': 4.56}, {'end': 292.4, 'text': 'my panel extends jpanel.', 'start': 289.28, 'duration': 3.12}], 'summary': "Creating a class 'my panel' extending jpanel to draw on a panel.", 'duration': 27.6, 'max_score': 264.8, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0264800.jpg'}, {'end': 344.24, 'src': 'heatmap', 'start': 292.4, 'weight': 0.733, 'content': [{'end': 303.909, 'text': "so it will behave exactly like a jpanel, and then we'll need to import something as well, and then we'll need a constructor for my panel.", 'start': 292.4, 'duration': 11.509}, {'end': 305.68, 'text': 'okay, now, going back to my frame.', 'start': 303.919, 'duration': 1.761}, {'end': 307.43, 'text': "we're going to change a few things.", 'start': 305.68, 'duration': 1.75}, {'end': 317.749, 'text': "we're going to get rid of this paint method and since a panel, a jpanel, is considered a component, we can actually call the paint method.", 'start': 307.44, 'duration': 10.309}, {'end': 325.909, 'text': "so take the paint method from my frame and paste it within my panel, and then we'll want to create an instance of my panel.", 'start': 317.759, 'duration': 8.15}, {'end': 344.24, 'text': "so let's declare this outside of the constructor my panel and we'll call this panel and then instantiate it within the constructor panel equals new my panel and we'll need to add this panel to the frame.", 'start': 325.919, 'duration': 18.321}], 'summary': 'Moving paint method from frame to panel, adding panel to frame', 'duration': 51.84, 'max_score': 292.4, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0292400.jpg'}, {'end': 405.51, 'src': 'heatmap', 'start': 349.6, 'weight': 1, 'content': [{'end': 358.71, 'text': "we're adding our panel and we no longer need a size and we should probably pack this.", 'start': 349.6, 'duration': 9.11}, {'end': 364.4, 'text': 'so after you add all the components that you want, follow this with this dot pack.', 'start': 358.72, 'duration': 5.68}, {'end': 367.12, 'text': 'so this should fit nicely.', 'start': 364.4, 'duration': 2.72}, {'end': 373.84, 'text': "now what's going to happen is that this is going to create a panel for us and then we should probably set a size for this panel too.", 'start': 367.12, 'duration': 6.72}, {'end': 388.07, 'text': "before i forget this dot set preferred size, new dimension and we'll make this 500 by 500.", 'start': 373.84, 'duration': 14.23}, {'end': 391.99, 'text': 'what ends up happening now is that this panel is fully visible.', 'start': 388.08, 'duration': 3.91}, {'end': 397.35, 'text': 'before we were drawing directly on the frame and this window bar at the top is part of the frame.', 'start': 392, 'duration': 5.35}, {'end': 401.029, 'text': 'so it was overlapping a portion of the visible area.', 'start': 397.36, 'duration': 3.669}, {'end': 405.51, 'text': 'so now this entire panel is fully visible to us.', 'start': 401.039, 'duration': 4.471}], 'summary': 'Adding a panel and setting its size to 500x500 to ensure full visibility.', 'duration': 31.67, 'max_score': 349.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0349600.jpg'}], 'start': 264.8, 'title': 'Creating jpanel and adding to frame', 'summary': 'Discusses creating a custom jpanel named mypanel, extending jpanel, adding it to the frame, and setting its preferred size to 500 by 500, ensuring the panel is fully visible.', 'chapters': [{'end': 405.51, 'start': 264.8, 'title': 'Creating jpanel and adding to frame', 'summary': 'Discusses creating a custom jpanel named mypanel, extending jpanel, adding it to the frame, and setting its preferred size to 500 by 500, ensuring the panel is fully visible.', 'duration': 140.71, 'highlights': ['Creating a custom JPanel named MyPanel extending JPanel The chapter explains the creation of a custom JPanel named MyPanel, which extends JPanel to behave exactly like JPanel.', 'Adding the MyPanel to the frame and setting its preferred size to 500 by 500 It discusses adding the MyPanel to the frame and setting its preferred size to 500 by 500 to ensure the entire panel is fully visible.']}], 'duration': 140.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0264800.jpg', 'highlights': ['Creating a custom JPanel named MyPanel extending JPanel', 'Adding the MyPanel to the frame and setting its preferred size to 500 by 500']}, {'end': 600.56, 'segs': [{'end': 504.469, 'src': 'embed', 'start': 405.52, 'weight': 0, 'content': [{'end': 410.55, 'text': "let's head back to our my panel class and draw a few things within the paint method.", 'start': 405.52, 'duration': 5.03}, {'end': 412.319, 'text': 'so we drew one line.', 'start': 410.56, 'duration': 1.759}, {'end': 414.88, 'text': "let's change the width of the line.", 'start': 412.319, 'duration': 2.561}, {'end': 419.36, 'text': "this is kind of like the stroke, the brush size that we're using.", 'start': 414.88, 'duration': 4.48}, {'end': 425.11, 'text': 'so we can actually change that g2d dot set.', 'start': 419.36, 'duration': 5.75}, {'end': 427.039, 'text': "there's actually all sorts of things that you can set,", 'start': 425.12, 'duration': 1.919}, {'end': 437.039, 'text': "but we're looking for set stroke and we can pass in a new basic stroke and then we set the size of the stroke.", 'start': 427.039, 'duration': 10}, {'end': 446.479, 'text': "so if we want this to be 5 pixels, we'll pass in 5 and what we get is an extra thick line and it's not just a 1 pixel brush stroke.", 'start': 437.039, 'duration': 9.44}, {'end': 448.39, 'text': 'you can also change the color too.', 'start': 446.479, 'duration': 1.911}, {'end': 457.199, 'text': 'so g to d, and this would be dot set paint and you pass in a color.', 'start': 448.4, 'duration': 8.799}, {'end': 461.919, 'text': "so let's say we want this line to be blue color, dot blue.", 'start': 457.199, 'duration': 4.72}, {'end': 469.589, 'text': "you can also pass in, uh, some hex values or some rgb values too, but we'll just stick with simple colors.", 'start': 461.919, 'duration': 7.67}, {'end': 473.759, 'text': 'so now we have a blue line going across the screen.', 'start': 469.599, 'duration': 4.16}, {'end': 475.51, 'text': "let's draw a few other shapes.", 'start': 473.759, 'duration': 1.751}, {'end': 479.919, 'text': "for now i'm just going to comment out this line where we draw a line.", 'start': 475.52, 'duration': 4.399}, {'end': 489.12, 'text': "let's draw a rectangle, we type in the name of our 2d graphic, which is g2d dot draw, and there's all sorts of things that we can draw.", 'start': 479.919, 'duration': 9.201}, {'end': 494.55, 'text': "let's draw a rectangle, and this is draw rect, like get rekt.", 'start': 489.12, 'duration': 5.43}, {'end': 500.869, 'text': 'so we place starting coordinates as arguments as well as a width and height for this rectangle.', 'start': 494.56, 'duration': 6.309}, {'end': 504.469, 'text': "let's say we want this to begin in the top left corner of the panel.", 'start': 500.879, 'duration': 3.59}], 'summary': 'In java panel class, demonstrating drawing lines and shapes with varied width, color, and size.', 'duration': 98.949, 'max_score': 405.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0405520.jpg'}, {'end': 550, 'src': 'embed', 'start': 524.32, 'weight': 3, 'content': [{'end': 531.19, 'text': 'so if you need to draw another graphic, you can actually set the paint color to something else before you actually draw this.', 'start': 524.32, 'duration': 6.87}, {'end': 533.76, 'text': "let's set this to pink.", 'start': 531.2, 'duration': 2.56}, {'end': 536.31, 'text': "i don't know why i just picked a random color.", 'start': 533.76, 'duration': 2.55}, {'end': 543.03, 'text': "and now we have a pink rectangle and if you need to fill this, that's actually a different method.", 'start': 536.32, 'duration': 6.71}, {'end': 545.519, 'text': 'that would be fill rect.', 'start': 543.04, 'duration': 2.479}, {'end': 550, 'text': 'so that would be g2d dot fill and you can fill all sorts of shapes.', 'start': 545.519, 'duration': 4.481}], 'summary': 'In java, set paint color to pink before drawing a rectangle, then use fill rect to fill shapes.', 'duration': 25.68, 'max_score': 524.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0524320.jpg'}, {'end': 600.56, 'src': 'embed', 'start': 578.32, 'weight': 5, 'content': [{'end': 587.279, 'text': "so if we were to draw this line and then draw our rectangle, the rectangle is going to overlap this line kind of like there's a z-axis.", 'start': 578.32, 'duration': 8.959}, {'end': 593.59, 'text': 'so anything that is more recently created is going to overlap any previous items or graphics.', 'start': 587.279, 'duration': 6.311}, {'end': 598.8, 'text': "let's draw a circle next and i'll get rid of our rectangle that we have as well as this line.", 'start': 593.6, 'duration': 5.2}, {'end': 600.56, 'text': "we'll just turn these into comments.", 'start': 598.8, 'duration': 1.76}], 'summary': 'Graphics overlap on z-axis: rectangle, circle, line.', 'duration': 22.24, 'max_score': 578.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0578320.jpg'}], 'start': 405.52, 'title': 'Drawing 2d graphics in java', 'summary': 'Explains how to draw rectangles, change colors, and fill shapes using the g2d library in java, with specific coordinates provided.', 'chapters': [{'end': 479.919, 'start': 405.52, 'title': 'Drawing shapes and lines with java graphics', 'summary': 'Explains how to draw shapes and lines using java graphics, discussing how to change the width, color, and style of the lines and shapes within the paint method of the panel class, including setting the stroke size to 5 pixels and changing the color to blue.', 'duration': 74.399, 'highlights': ['Changing the width of the line by setting the stroke size to 5 pixels The chapter explains how to change the width of the line by setting the stroke size to 5 pixels, resulting in an extra thick line.', 'Changing the color of the line to blue It discusses changing the color of the line to blue using the set paint method, resulting in a blue line being drawn.', 'Setting stroke and color for drawing lines and shapes It covers setting the stroke and color for drawing lines and shapes within the paint method of the panel class, including using simple colors like blue.']}, {'end': 600.56, 'start': 479.919, 'title': 'Drawing 2d graphics in java', 'summary': 'Explains how to draw rectangles, change colors, and fill shapes using the g2d library in java, with examples and specific coordinates provided.', 'duration': 120.641, 'highlights': ['Drawing a rectangle using g2d dot draw rect with starting coordinates 0, 0 and dimensions 100 by 200, or 100 by 100 for a square.', 'Explaining the concept of overlapping graphics as anything more recently created will overlap previous items or graphics, resembling a z-axis.', 'Showing how to change the paint color to pink and fill the rectangle using g2d dot fill rect with the same coordinates as before.']}], 'duration': 195.04, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0405520.jpg', 'highlights': ['Drawing a rectangle using g2d dot draw rect with starting coordinates 0, 0 and dimensions 100 by 200, or 100 by 100 for a square.', 'Changing the width of the line by setting the stroke size to 5 pixels The chapter explains how to change the width of the line by setting the stroke size to 5 pixels, resulting in an extra thick line.', 'Changing the color of the line to blue It discusses changing the color of the line to blue using the set paint method, resulting in a blue line being drawn.', 'Showing how to change the paint color to pink and fill the rectangle using g2d dot fill rect with the same coordinates as before.', 'Setting stroke and color for drawing lines and shapes It covers setting the stroke and color for drawing lines and shapes within the paint method of the panel class, including using simple colors like blue.', 'Explaining the concept of overlapping graphics as anything more recently created will overlap previous items or graphics, resembling a z-axis.']}, {'end': 798.71, 'segs': [{'end': 625.76, 'src': 'embed', 'start': 600.56, 'weight': 0, 'content': [{'end': 608.24, 'text': 'if you need to draw a circle, you use either draw or fill oval g2d dot.', 'start': 600.56, 'duration': 7.68}, {'end': 611.76, 'text': "let's draw an oval first, so this will be just an outline.", 'start': 608.24, 'duration': 3.52}, {'end': 615.279, 'text': 'draw oval now.', 'start': 611.76, 'duration': 3.519}, {'end': 620.389, 'text': 'the coordinates are the top left of the drawable area for this oval.', 'start': 615.279, 'duration': 5.11}, {'end': 625.76, 'text': 'so if we want this to start in the top left corner of the panel, that would be where x is zero, y is zero,', 'start': 620.399, 'duration': 5.361}], 'summary': 'Using draw or fill oval g2d to draw an outline of an oval with coordinates starting at (0,0).', 'duration': 25.2, 'max_score': 600.56, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0600560.jpg'}, {'end': 798.71, 'src': 'embed', 'start': 691.36, 'weight': 1, 'content': [{'end': 695.04, 'text': "so we're actually going to use draw arc to draw a pokeball.", 'start': 691.36, 'duration': 3.68}, {'end': 699.279, 'text': 'for practice, g2d dot.', 'start': 695.04, 'duration': 4.239}, {'end': 708.88, 'text': "let's draw arc first, then fill arc, draw arc and there's a few more arguments starting coordinates, a width and a height,", 'start': 699.279, 'duration': 9.601}, {'end': 712.16, 'text': 'a starting angle and an arc angle.', 'start': 708.88, 'duration': 3.28}, {'end': 714.079, 'text': "so we'll place this in the top left corner.", 'start': 712.16, 'duration': 1.919}, {'end': 720.639, 'text': "just to keep things simple, for the width, let's make this 100 and the height 100.", 'start': 714.079, 'duration': 6.56}, {'end': 724.88, 'text': "so for the starting angle, let's set this to zero and the arc angle will make this 180.", 'start': 720.639, 'duration': 4.241}, {'end': 731.67, 'text': "so this will be a half circle because it's 180 degrees.", 'start': 724.88, 'duration': 6.79}, {'end': 736.79, 'text': "now if we were to change the starting angle, let's say 180.", 'start': 731.68, 'duration': 5.11}, {'end': 740.15, 'text': "it's going to flip counterclockwise.", 'start': 736.8, 'duration': 3.35}, {'end': 741.68, 'text': "let's practice drawing a pokeball.", 'start': 740.16, 'duration': 1.52}, {'end': 760.079, 'text': "so let's set the paint to red for the top i would say hemisphere and set this to zero, and we're going to use fill arc and we'll get rid of draw arc.", 'start': 741.68, 'duration': 18.399}, {'end': 764.389, 'text': 'actually we should, uh, get rid of the stroke size too.', 'start': 760.079, 'duration': 4.31}, {'end': 773.91, 'text': "all right, so we should have a red half circle and the bottom is going to be white, but i'm not sure how well this is going to display.", 'start': 764.399, 'duration': 9.511}, {'end': 783.67, 'text': "so let's set the paint after we fill the first arc and color this white color.white, and we'll have the starting angle be 180,", 'start': 773.92, 'duration': 9.75}, {'end': 787.36, 'text': "but we'll keep the full extent of the arc at 180..", 'start': 783.68, 'duration': 3.68}, {'end': 795.279, 'text': "so it's another half circle and we should have a pokeball or at least something that slightly resembles a pokeball.", 'start': 787.36, 'duration': 7.919}, {'end': 798.71, 'text': "i would say that's close enough, since we're just beginners at this.", 'start': 795.279, 'duration': 3.431}], 'summary': 'Using draw arc to create a pokeball, with dimensions 100x100 and colors red and white.', 'duration': 107.35, 'max_score': 691.36, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0691360.jpg'}], 'start': 600.56, 'title': 'Drawing circles, ovals, and pokeballs in java', 'summary': 'Covers drawing an orange circle or oval with a 100x100 dimension and a 5px stroke, introducing the draw arc function, creating a practice pokeball using draw arc method, and demonstrating the process of creating a pokeball in java.', 'chapters': [{'end': 691.36, 'start': 600.56, 'title': 'Drawing circles and ovals in java', 'summary': "Explains how to draw an orange circle or oval with a 100x100 dimension and a 5px stroke in the top left corner of the panel using java's graphics2d. it also introduces the draw arc function.", 'duration': 90.8, 'highlights': ["The chapter covers drawing an orange circle or oval with a 100x100 dimension and a 5px stroke in the top left corner of the panel using Java's Graphics2D.", 'It introduces the draw arc function for drawing arcs in Java.']}, {'end': 741.68, 'start': 691.36, 'title': 'Drawing pokeball with draw arc', 'summary': 'Demonstrates using the draw arc method to create a practice pokeball, specifying the starting coordinates, width, height, starting angle, and arc angle, resulting in a half circle with a starting angle of 0 and an arc angle of 180.', 'duration': 50.32, 'highlights': ['The draw arc method is used to create a practice pokeball, specifying starting coordinates, width, height, starting angle, and arc angle, resulting in a half circle with a starting angle of 0 and an arc angle of 180.', 'The width and height of the pokeball are set to 100 units each for practice.', 'Changing the starting angle to 180 results in the pokeball flipping counterclockwise.']}, {'end': 798.71, 'start': 741.68, 'title': 'Creating pokeball in java', 'summary': 'Demonstrates the process of creating a pokeball using java, involving setting the paint to red for the top hemisphere, using fill arc to create a red half circle, then setting the paint to white for the bottom hemisphere, resulting in a creation that resembles a pokeball.', 'duration': 57.03, 'highlights': ['The process involves setting the paint to red for the top hemisphere and using fill arc to create a red half circle.', 'Then, setting the paint to white for the bottom hemisphere and using fill arc to create another half circle, resulting in a creation that slightly resembles a pokeball.']}], 'duration': 198.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0600560.jpg', 'highlights': ["The chapter covers drawing an orange circle or oval with a 100x100 dimension and a 5px stroke in the top left corner of the panel using Java's Graphics2D.", 'It introduces the draw arc function for drawing arcs in Java.', 'The draw arc method is used to create a practice pokeball, specifying starting coordinates, width, height, starting angle, and arc angle, resulting in a half circle with a starting angle of 0 and an arc angle of 180.', 'The process involves setting the paint to red for the top hemisphere and using fill arc to create a red half circle.', 'Then, setting the paint to white for the bottom hemisphere and using fill arc to create another half circle, resulting in a creation that slightly resembles a pokeball.', 'Changing the starting angle to 180 results in the pokeball flipping counterclockwise.', 'The width and height of the pokeball are set to 100 units each for practice.']}, {'end': 972.399, 'segs': [{'end': 972.399, 'src': 'embed', 'start': 860.8, 'weight': 0, 'content': [{'end': 876.55, 'text': "let's set this to 300, 150 and 300 and we should have the outline of a triangle.", 'start': 860.8, 'duration': 15.75}, {'end': 879.75, 'text': "let's set this to yellow.", 'start': 876.56, 'duration': 3.19}, {'end': 889.03, 'text': "so that would be g2d dot set paint and we'll pass in color dot yellow.", 'start': 879.76, 'duration': 9.27}, {'end': 892.87, 'text': "now we'll fill the polygon.", 'start': 889.04, 'duration': 3.83}, {'end': 903.279, 'text': "it's the same process as before, but replace straw with fill and we have a yellow triangle.", 'start': 892.88, 'duration': 10.399}, {'end': 907.269, 'text': "it's kind of like a piece of the triforce from the legend of zelda series.", 'start': 903.279, 'duration': 3.99}, {'end': 909.68, 'text': 'well, one of them at least.', 'start': 907.279, 'duration': 2.401}, {'end': 919.11, 'text': 'we also have the capability of drawing a string of text on our graphic g2d dot draw string.', 'start': 909.68, 'duration': 9.43}, {'end': 923.839, 'text': 'we pass in a string as an argument as well as coordinates for the string.', 'start': 919.12, 'duration': 4.719}, {'end': 931.91, 'text': "let's say, you are a winner.", 'start': 923.839, 'duration': 8.071}, {'end': 938.47, 'text': "so for now let's set the x coordinate to zero and the y coordinate to zero.", 'start': 931.92, 'duration': 6.55}, {'end': 942.47, 'text': 'but when we compile and run this we actually cannot see the string.', 'start': 938.48, 'duration': 3.99}, {'end': 950.55, 'text': "that's because it's hidden right now let's change this to 50 by 50 and you'll see why.", 'start': 942.48, 'duration': 8.07}, {'end': 952.16, 'text': 'so now the string is visible.', 'start': 950.56, 'duration': 1.6}, {'end': 961.189, 'text': "that's because when we display the string, the starting position of our string of text is the bottom left corner.", 'start': 952.16, 'duration': 9.029}, {'end': 967.839, 'text': "since we set this to 0, 0, well, that's going to be the very top left corner of our panel.", 'start': 961.199, 'duration': 6.64}, {'end': 972.399, 'text': "so it's actually not being displayed because it's kind of off screen.", 'start': 967.839, 'duration': 4.56}], 'summary': 'Draw yellow triangle and display text on graphic panel.', 'duration': 111.599, 'max_score': 860.8, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0860800.jpg'}], 'start': 798.72, 'title': 'Drawing shapes and text', 'summary': 'Covers drawing a triangle using an array of coordinates, filling it with color, and displaying a string of text on a graphic panel.', 'chapters': [{'end': 972.399, 'start': 798.72, 'title': 'Drawing shapes and text', 'summary': 'Covers drawing a triangle using an array of coordinates and filling it with color, then drawing and displaying a string of text on a graphic panel.', 'duration': 173.679, 'highlights': ['Drawing a yellow triangle using draw and fill polygon methods with given coordinates (150, 250, 350) and (300, 150, 300) The process of drawing and filling a yellow triangle with coordinates (150, 250, 350) and (300, 150, 300) using draw and fill polygon methods.', "Displaying a string 'You are a winner' at coordinates (50, 50) Demonstrating the display of a string 'You are a winner' at coordinates (50, 50) on the graphic panel.", 'Explanation of string display positioning based on coordinates Explaining the positioning of displayed string based on the coordinates and the starting position of the string of text.']}], 'duration': 173.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0798720.jpg', 'highlights': ['Drawing a yellow triangle using draw and fill polygon methods with given coordinates (150, 250, 350) and (300, 150, 300)', "Displaying a string 'You are a winner' at coordinates (50, 50)", 'Explanation of string display positioning based on coordinates']}, {'end': 1213.039, 'segs': [{'end': 1036.789, 'src': 'embed', 'start': 972.399, 'weight': 0, 'content': [{'end': 984.55, 'text': "now let's change the font and the font color of the string g2d dot set font and you can pass in a new font and pass whatever font you want.", 'start': 972.399, 'duration': 12.151}, {'end': 989.839, 'text': 'i will pick ink free because i like that font.', 'start': 984.56, 'duration': 5.279}, {'end': 991.269, 'text': "that's a font family.", 'start': 989.839, 'duration': 1.43}, {'end': 997.519, 'text': "then we can pick a font style, let's say bold, and a size.", 'start': 991.279, 'duration': 6.24}, {'end': 999.44, 'text': 'i will make this 50.', 'start': 997.519, 'duration': 1.921}, {'end': 1006.24, 'text': 'i suppose you are a winner.', 'start': 999.44, 'duration': 6.8}, {'end': 1009.199, 'text': 'and changing the font color is the same process as before.', 'start': 1006.24, 'duration': 2.959}, {'end': 1012.72, 'text': 'we just set paint to whatever color we want.', 'start': 1009.199, 'duration': 3.521}, {'end': 1022.32, 'text': "what color do we not pick? yet let's pick why not magenta? and the font color is now magenta.", 'start': 1012.72, 'duration': 9.6}, {'end': 1026.16, 'text': "let's say that you want to add your own image to this graphic.", 'start': 1022.32, 'duration': 3.84}, {'end': 1031.199, 'text': "i have this png file and it's called sky and i just created this myself.", 'start': 1026.16, 'duration': 5.039}, {'end': 1036.789, 'text': 'so i want to add this image to my graphic, my 2d graphic.', 'start': 1031.199, 'duration': 5.59}], 'summary': 'Changing font to ink free, bold, size 50. font color: magenta. adding own image to graphic.', 'duration': 64.39, 'max_score': 972.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0972399.jpg'}, {'end': 1133.76, 'src': 'heatmap', 'start': 1065.6, 'weight': 2, 'content': [{'end': 1070.549, 'text': 'now we need to create an image out of this file that we have within our project folder.', 'start': 1065.6, 'duration': 4.949}, {'end': 1075.19, 'text': "let's call this image and we're going to declare and instantiate this.", 'start': 1070.559, 'duration': 4.631}, {'end': 1084.799, 'text': "so let's say image image, and then, within the constructor, we'll instantiate this image.", 'start': 1075.2, 'duration': 9.599}, {'end': 1087.43, 'text': 'equals, and this is a little bit different.', 'start': 1084.799, 'duration': 2.631}, {'end': 1098.43, 'text': "we're going to create image equals, new image icon and list the file name or the file path.", 'start': 1087.44, 'duration': 10.99}, {'end': 1101.669, 'text': 'sky.png is my file name.', 'start': 1098.44, 'duration': 3.229}, {'end': 1105.12, 'text': 'follow this with dot, get image.', 'start': 1101.679, 'duration': 3.441}, {'end': 1114.87, 'text': 'this will create an image out of the image icon and then we follow this with draw image and then add your image here,', 'start': 1105.12, 'duration': 9.75}, {'end': 1119.029, 'text': 'and we should have our image added to our graphic.', 'start': 1114.88, 'duration': 4.149}, {'end': 1120.88, 'text': 'and then you can draw on top of this image.', 'start': 1119.039, 'duration': 1.841}, {'end': 1122.789, 'text': 'this could be a background image.', 'start': 1120.88, 'duration': 1.909}, {'end': 1133.76, 'text': "let's say so i'm going to move this and place this near the top and let's draw i don't know, maybe the triforce that we have.", 'start': 1122.799, 'duration': 10.961}], 'summary': 'Creating and adding an image to graphic using java, with sky.png as the file name.', 'duration': 57.189, 'max_score': 1065.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs01065600.jpg'}, {'end': 1213.039, 'src': 'embed', 'start': 1172.32, 'weight': 4, 'content': [{'text': "but yeah, that's the basics of creating 2d graphics in java.", 'start': 1172.32, 'duration': 4.39}, {'text': "hey you, yeah, i'm talking to you.", 'start': 1176.72, 'duration': 2.4}, {'text': 'if you learn something new, then you can help me help you in three easy steps by smashing that like button.', 'start': 1179.12, 'duration': 7.28}, {'text': "drop a comment down below and subscribe if you'd like to become a fellow bro.", 'start': 1186.4, 'duration': 9.01}, {'text': '[Music], [Music] you.', 'start': 1195.42, 'duration': 17.619}], 'summary': 'Basics of creating 2d graphics in java, encourage interaction through likes, comments, and subscriptions.', 'duration': 40.719, 'max_score': 1172.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs01172320.jpg'}], 'start': 972.399, 'title': '2d graphics in java', 'summary': 'Covers changing font and color in 2d graphics with examples like ink free font, size 50, and magenta color, and adding custom images. it also explains creating 2d graphics in java, including drawing and adding images with practical examples and instructions.', 'chapters': [{'end': 1036.789, 'start': 972.399, 'title': 'Changing font and color in 2d graphics', 'summary': 'Explains how to change the font and font color in 2d graphics, using examples such as setting the font to ink free, size 50, and color to magenta, as well as adding a custom image to the graphic.', 'duration': 64.39, 'highlights': ["Adding a custom image to a 2D graphic, such as the example of adding a self-created PNG file named 'sky' to the graphic.", 'Changing the font and font color in 2D graphics by setting the font to Ink Free, size 50, and color to magenta.']}, {'end': 1213.039, 'start': 1036.799, 'title': 'Creating 2d graphics in java', 'summary': 'Covers the basics of creating 2d graphics in java, including drawing images and adding them to a graphic, with examples of code and instructions for the process.', 'duration': 176.24, 'highlights': ['The chapter covers the basics of creating 2D graphics in Java, including drawing images and adding them to a graphic. The chapter provides an overview of the basics of creating 2D graphics in Java, focusing on drawing images and adding them to a graphic.', "Instructions for creating an image out of a file within the project folder are given, using the 'new ImageIcon' method and specifying the file name or path. The method for creating an image out of a file within the project folder is explained, using the 'new ImageIcon' method and specifying the file name or path.", 'The process of adding the created image to the graphic and using it as a background image is demonstrated. The demonstration illustrates the process of adding the created image to the graphic and using it as a background image.']}], 'duration': 240.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KcEvHq8Pqs0/pics/KcEvHq8Pqs0972399.jpg', 'highlights': ['Covers changing font and font color in 2D graphics with examples like Ink Free font, size 50, and magenta color.', "Adding a custom image to a 2D graphic, such as the example of adding a self-created PNG file named 'sky' to the graphic.", "Instructions for creating an image out of a file within the project folder are given, using the 'new ImageIcon' method and specifying the file name or path.", 'The process of adding the created image to the graphic and using it as a background image is demonstrated.', 'The chapter covers the basics of creating 2D graphics in Java, including drawing images and adding them to a graphic.']}], 'highlights': ['Graphics 2D offers more drawing options compared to the outdated Graphics class, providing enhanced functionality for drawing and manipulating graphics.', 'The paint method in the Component class is crucial for painting the contents of GUI components, and it takes a graphics object as a parameter.', 'The process involves setting the paint to red for the top hemisphere and using fill arc to create a red half circle.', "Adding a custom image to a 2D graphic, such as the example of adding a self-created PNG file named 'sky' to the graphic."]}