{"id":478,"date":"2017-09-25T14:36:39","date_gmt":"2017-09-25T19:36:39","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=478"},"modified":"2017-10-08T14:33:41","modified_gmt":"2017-10-08T19:33:41","slug":"processing-py-how-to-draw-lines-and-use-mouse-events","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2017\/09\/25\/processing-py-how-to-draw-lines-and-use-mouse-events\/","title":{"rendered":"Processing.py: How to draw lines and use mouse events"},"content":{"rendered":"<p>Building on the first post about using Processing.py (shown in the table below), this post will demonstrate the basic structure of a Processing.py program, how to draw lines, and understand some other basics of the Processing.py programming language.<\/p>\n<p>For the previous entry in the Processing.py series, see this page:<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"lL9t7nS7Xy\"><p><a href=\"http:\/\/bluegalaxy.info\/codewalk\/2017\/09\/25\/processing-py-getting-started\/\">Processing.py: Getting Started<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"http:\/\/bluegalaxy.info\/codewalk\/2017\/09\/25\/processing-py-getting-started\/embed\/#?secret=lL9t7nS7Xy\" data-secret=\"lL9t7nS7Xy\" width=\"600\" height=\"338\" title=\"&#8220;Processing.py: Getting Started&#8221; &#8212; Chris Nielsen Code Walk\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p><strong>Example 1:<\/strong><\/p>\n<p>Drawing a line is as simple as providing two x, y points, one for each end of the line. So the syntax is <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">line(x1, y1, x2, y2)<\/code> . For example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\">line(15, 25, 70, 90)<\/pre>\n<p>which produces:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-480\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/line.png\" alt=\"\" width=\"129\" height=\"151\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Example 2:<br \/>\n<\/strong><\/p>\n<p>Create a static sketch that contains a line. In this example, we also set the size of the output window using <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">size()<\/code> , the color of the background using <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">background()<\/code>, and the color of the line using <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">stroke()<\/code>.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\">size(400, 400)\r\nbackground(192, 64, 0)\r\nstroke(255)\r\nline(150, 25, 270, 350)<\/pre>\n<p>which produces:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-483 size-full\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/line_on_orange.png\" alt=\"\" width=\"399\" height=\"424\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/line_on_orange.png 399w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/line_on_orange-282x300.png 282w\" sizes=\"auto, (max-width: 399px) 100vw, 399px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Example 3:<br \/>\n<\/strong><\/p>\n<p>Use\u00a0<code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">setup()<\/code> and <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">draw()<\/code> functions to animate the line. Also use\u00a0<code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">mouseX<\/code> and\u00a0<code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">mouseY<\/code> events.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\">def setup():\r\n    size(400, 400)\r\n    stroke(255)\r\n    background(192, 64, 0)\r\n\r\ndef draw():\r\n    line(150, 25, mouseX, mouseY)<\/pre>\n<p>which produces:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-486 size-full\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/line_animated.png\" alt=\"\" width=\"399\" height=\"424\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/line_animated.png 399w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/line_animated-282x300.png 282w\" sizes=\"auto, (max-width: 399px) 100vw, 399px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Example 4:<br \/>\n<\/strong><\/p>\n<p>Animate a single line, where the top of the line is fixed but the bottom of the line moves with the mouse. This is done by moving the background from the setup function to the draw function. This change means that every time the mouse moves, the background is refreshed.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\">def setup():\r\n    size(400, 400)\r\n    stroke(255)\r\n\r\ndef draw():\r\n    background(192, 64, 0)\r\n    line(150, 25, mouseX, mouseY)<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Example 5:<br \/>\n<\/strong><\/p>\n<p>Create a new function, which is based on the <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">mousePressed()<\/code> event, where the background will change only after the mouse button is pressed. The result is that the sketch starts out with a grey background then turns orange when the mouse button is pressed. For example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\">def setup():\r\n    size(400, 400)\r\n    stroke(255)\r\n      \r\ndef draw():\r\n    line(150, 25, mouseX, mouseY)\r\n     \r\ndef mousePressed():\r\n    background(192, 64, 0)<\/pre>\n<p>Outputs:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-491\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/line_animate3-300x158.jpg\" alt=\"\" width=\"499\" height=\"263\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/line_animate3-300x158.jpg 300w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/line_animate3-768x405.jpg 768w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/line_animate3-676x356.jpg 676w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/line_animate3.jpg 795w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/p>\n<p>For more information see:<br \/>\n<a href=\"http:\/\/py.processing.org\/tutorials\/overview\/\">http:\/\/py.processing.org\/tutorials\/overview\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Building on the first post about using Processing.py (shown in the table below), this post will demonstrate the basic structure of a Processing.py program, how to draw lines, and understand some other basics of the Processing.py programming language. For the previous entry in the Processing.py series, see this page: Processing.py: Getting Started Example 1: Drawing &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2017\/09\/25\/processing-py-how-to-draw-lines-and-use-mouse-events\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Processing.py: How to draw lines and use mouse events<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,46],"tags":[36,4],"class_list":["post-478","post","type-post","status-publish","format-standard","hentry","category-processing-language","category-processing-py","tag-processing-py","tag-python"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=478"}],"version-history":[{"count":13,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/478\/revisions"}],"predecessor-version":[{"id":598,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/478\/revisions\/598"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}