{"id":703,"date":"2021-01-10T22:32:05","date_gmt":"2021-01-10T22:32:05","guid":{"rendered":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/?page_id=703"},"modified":"2021-01-10T22:51:23","modified_gmt":"2021-01-10T22:51:23","slug":"paint-modes","status":"publish","type":"page","link":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/course-topics\/graphics-programming\/paint-modes\/","title":{"rendered":"Paint Modes"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a3f96f79e709\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a3f96f79e709\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/course-topics\/graphics-programming\/paint-modes\/#XOR_Mode_Example\" >XOR Mode Example<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/course-topics\/graphics-programming\/paint-modes\/#Simple_Animation\" >Simple Animation<\/a><\/li><\/ul><\/nav><\/div>\n\n<p class=\"wp-block-paragraph\">Normally, when you draw in the <strong>Graphics<\/strong> context, it draws the color that you have set for the foreground color.&nbsp; In other words, this mode <em>overwrites<\/em> any color that was present before.&nbsp; This is called&nbsp;<strong><em>Paint mode<\/em><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There is also a second mode,&nbsp;<strong><em>XOR mode<\/em><\/strong>, which you select with a call:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>g.setXORMode(xorColor);<\/strong><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">XOR mode changes the behavior in the following ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>If you draw on top of pixels that are already in the current color, then the system changes them to the color specified in the setXORMode call.<\/li><li>If you draw on top of pixels that are already in the color of the setXORMode parameter, then the system changes them to the current color.<\/li><li>Any other colors are also changed by the system.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you draw a shape in XOR mode, with a certain color, and then draw it again in the same position with the same color, the effect is as if you hadn&#8217;t drawn anything in the first place.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"XOR_Mode_Example\"><\/span>XOR Mode Example<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s an example of XOR mode:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: java; auto-links: false; title: ; quick-code: false; notranslate\" title=\"\">\npackage swingExamples;\n\nimport java.awt.Color;\nimport java.awt.Container;\nimport java.awt.Font;\nimport java.awt.Graphics;\n\nimport javax.swing.JFrame;\nimport javax.swing.JPanel;\n\nclass XORModeDisplayPanel extends JPanel\n{\n  public XORModeDisplayPanel()\n  {\n    setBackground(Color.BLACK);\n  }\n  \n  public void paintComponent(Graphics g)\n  {\n    super.paintComponent(g);\n    \n    Font font = new Font(&quot;sansserif&quot;, Font.BOLD, 16);\n    g.setFont(font);\n    g.setColor(Color.WHITE);\n    \n    g.drawString(&quot;Paint mode:&quot;, 5, 20);\n    paintInMode(g, 0, 30, false); \/\/ Use paint mode\n    \n    g.setColor(Color.WHITE);\n    g.fillRect(5, 170, 220, 3);\n    \n    g.drawString(&quot;XOR mode:&quot;, 5, 200);\n    paintInMode(g, 0, 210, true); \/\/ Use XOR mode\n  }\n  \n  private void paintInMode(Graphics g, int x, int y, boolean useXOR)\n  {\n    \/\/ Ensure we start in paint mode.\n    g.setPaintMode();\n    \n    \/\/ Draw a red filled rectangle\n    g.setColor(Color.RED);\n    g.fillRect(x + 10, y + 10, 80, 30);\n    \n    \/\/ Draw a green filled rectangle, overlapping the red rectangle\n    g.setColor(Color.GREEN);\n    g.fillRect(x + 50, y + 20, 80, 30);\n    \n    \/\/ Draw a blue filled rectangle, overlapping the green rectangle\n    g.setColor(Color.BLUE);\n    g.fillRect(x + 130, y + 40, 80, 30);\n    \n    if (useXOR)\n    {\n      \/\/ Set XOR mode, with a green XOR color\n      g.setXORMode(Color.GREEN);\n    }\n    \n    \/\/ Draw another blue filled rectangle, offset from the previous blue one.\n    g.fillRect(x + 90, y + 30, 80, 30);\n    \n    if (useXOR)\n    {\n      \/\/ Return to paint mode.\n      g.setPaintMode();\n    }\n    \n    \/\/ Draw a red filled rectangle\n    g.setColor(Color.RED);\n    g.fillRect(x + 10, y + 80, 80, 30);\n    \n    if (useXOR)\n    {\n      \/\/ Go into XOR mode, with an XOR color of red\n      g.setXORMode(Color.RED);\n    }\n    \n    \/\/ Draw a blue filled rectangle, overlapping the red rectangle\n    g.setColor(Color.BLUE);\n    g.fillRect(x + 50, y + 90, 80, 30);\n    \n    \/\/ Draw another blue filled rectangle slightly offset from the previous\n    \/\/ blue rectangle.\n    g.fillRect(x + 55, y + 95, 80, 30);\n  }\n}\n\nclass XORModeDisplayFrame extends JFrame\n{\n  public XORModeDisplayFrame()\n  {\n    setTitle(&quot;XOR Mode Display&quot;);\n    setSize(250, 400);\n    setDefaultCloseOperation(EXIT_ON_CLOSE);\n    Container contentPane = getContentPane();\n    contentPane.add(new XORModeDisplayPanel());\n  }\n}\n\npublic class XORModeDisplay\n{\n  public static void main(String&#x5B;] args)\n  {\n    XORModeDisplayFrame f = new XORModeDisplayFrame();\n    f.setVisible(true);\n  }\n}\n<\/pre><\/div>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Note that I show the results for regular paint mode, and then for XOR mode.<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">The above program produces the following:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"250\" height=\"400\" src=\"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-content\/uploads\/2021\/01\/XORModeDisplay.gif\" alt=\"\" class=\"wp-image-707\"\/><\/figure><\/div>\n\n\n\n<div style=\"height:43px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Simple_Animation\"><\/span>Simple Animation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s an applet that demonstrates some simple animation.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>We don&#8217;t have applet support here (and you probably don&#8217;t have it in your browser), so we just provide the code.<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s the applet code:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: java; auto-links: false; highlight: [7,8,12,15,20,21,22,27,28,29,30,31,32,33,34,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,62,63,64,65,66,67,68]; title: ; quick-code: false; notranslate\" title=\"\">\npackage swingExamples;\n\nimport java.awt.Color;\nimport java.awt.Container;\nimport java.awt.Graphics;\n\nimport java.awt.event.ActionEvent;\nimport java.awt.event.ActionListener;\n\nimport javax.swing.JApplet;\nimport javax.swing.JPanel;\nimport javax.swing.Timer;\n\nclass SimpleAnimationDisplayPanel extends JPanel\n    implements ActionListener\n{\n  public SimpleAnimationDisplayPanel()\n  {\n    setBackground(Color.BLACK);\n    \/\/ This timer &quot;goes off&quot; every 10 milliseconds\n    Timer timer = new Timer(10, this);\n    timer.start();\n  }\n  \n  public void paintComponent(Graphics g)\n  {\n    super.paintComponent(g);\n    \n    g.setXORMode( getBackground() );\n    g.setColor(Color.RED);\n    g.fillRect(m_squareX, m_squareY, m_squareSize, m_squareSize);\n    g.setColor(Color.GREEN);\n    g.fillOval(m_ballX + m_ballDiameter \/ 2, m_ballY + m_ballDiameter \/ 2,\n        m_ballDiameter, m_ballDiameter);\n  }\n  \n  public void actionPerformed(ActionEvent event)\n  {\n    \/\/ Do the animation by using XOR mode and repeated\n    \/\/ repaints, modifying the coordinates of the shapes\n    \/\/ between repaints.\n    int width = getWidth();\n    repaint();\n    m_ballX++;\n    if (m_ballX &gt; width)\n      m_ballX = 0;\n    m_ballY++;\n    if (m_ballY &gt; width)\n      m_ballY = 0;\n    \n    m_squareX--;\n    if (m_squareX &lt; 0)\n      m_squareX = width;\n    m_squareY++;\n    if (m_squareY &gt; width)\n      m_squareY = 0;\n    repaint();\n  }\n  \n  \/\/\/\/\/ Private data \/\/\/\/\/\n  \n  \/\/ Coordinates of the ball and square to animate.\n  private int m_ballX = 0;\n  private int m_ballY = 0;\n  private int m_ballDiameter = 30;\n  private int m_squareX = 200;\n  private int m_squareY = 0;\n  private int m_squareSize = 50;\n}\n\npublic class SimpleAnimationDisplayApplet extends JApplet\n{\n  public SimpleAnimationDisplayApplet()\n  {\n    Container contentPane = getContentPane();\n    contentPane.add(new SimpleAnimationDisplayPanel());\n  }\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>Normally, when you draw in the Graphics context, it draws the color that you have set for the foreground color.&nbsp; In other words, this mode overwrites any color that was present before.&nbsp; This is called&nbsp;Paint mode. There is also a second mode,&nbsp;XOR mode, which you select with a call: g.setXORMode(xorColor); XOR mode changes the behavior [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":67,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","_uag_custom_page_level_css":"","ocean_post_layout":"left-sidebar","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"ocs-course-topics-sidebar","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","footnotes":""},"class_list":["post-703","page","type-page","status-publish","hentry","entry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"ocean-thumb-m":false,"ocean-thumb-ml":false,"ocean-thumb-l":false},"uagb_author_info":{"display_name":"Bryan Higgs","author_link":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/author\/bryan\/"},"uagb_comment_info":0,"uagb_excerpt":"Normally, when you draw in the Graphics context, it draws the color that you have set for the foreground color.&nbsp; In other words, this mode overwrites any color that was present before.&nbsp; This is called&nbsp;Paint mode. There is also a second mode,&nbsp;XOR mode, which you select with a call: g.setXORMode(xorColor); XOR mode changes the behavior&hellip;","_links":{"self":[{"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages\/703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/comments?post=703"}],"version-history":[{"count":7,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages\/703\/revisions"}],"predecessor-version":[{"id":714,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages\/703\/revisions\/714"}],"up":[{"embeddable":true,"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/pages\/67"}],"wp:attachment":[{"href":"https:\/\/bhiggs.x10hosting.com\/PracticalJavaProgramming\/wp-json\/wp\/v2\/media?parent=703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}