{"id":3028,"date":"2021-01-30T22:02:29","date_gmt":"2021-01-30T22:02:29","guid":{"rendered":"http:\/\/mycours.es\/digitalmedia\/?page_id=3028"},"modified":"2025-03-24T12:57:00","modified_gmt":"2025-03-24T12:57:00","slug":"p5-drawing-primitives-colors-attributes","status":"publish","type":"page","link":"https:\/\/mycours.es\/digitalmedia\/p5-drawing-primitives-colors-attributes\/","title":{"rendered":"p5: drawing, primitives, colors, attributes"},"content":{"rendered":"<p>Watch these two videos<\/p>\n<p><iframe loading=\"lazy\" title=\"p5 coordinates and primitives\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/x8GaUDvT-bE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"fill stroke colors and attributes\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/AQizBNKkWyo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Check the <a href=\"https:\/\/bmoren.github.io\/p5js-cheat-sheet\/\">p5 cheatsheet<\/a> and bookmark it<br \/>\nBookmark the <a href=\"https:\/\/p5js.org\/reference\/\">official p5 reference<\/a> and always keep it open when you work<\/p>\n<p>Search <a href=\"https:\/\/www.google.com\/search?q=color+picker&amp;rlz=1C1CHBF_enUS910US910&amp;oq=color+picker&amp;aqs=chrome..69i57j0i20i263j0j0i433l2j0i20i263i395j0i395l2.2644j1j7&amp;sourceid=chrome&amp;ie=UTF-8\">Color picker<\/a> on google and copy paste the rgb values in your background, fill and stroke functions.<\/p>\n<p><strong>Optional videos<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=hISICBkFa4Q\">1.2 2D Primitives<\/a>\u00a0(Xin Xin)<\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=fTEvHLLwSBE\">1.3 RGB Color &amp; Blendmode<\/a>\u00a0(Xin Xin)<\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=c3TeLi6Ns1E&amp;t=23s\">1.3 Shapes &amp; Drawing<\/a>\u00a0(Coding Train)<\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=riiJTF5-N7c&amp;t=6s\">1.4 Color<\/a>\u00a0(Coding Train)<\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=vNjobQiQZns\">9.18 p5.js with OpenProcessing<\/a>\u00a0(Coding Train)<\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=Oj3DGSCMAOQ\">Basics of OpenProcessing<\/a>\u00a0(Dane Webster)<\/li>\n<\/ul>\n<h2>Exercises<\/h2>\n<p>Try to reproduce the images below using p5.<br \/>\nThey don&#8217;t have to be 100% accurate in terms of color and positions, try to approximate the same forms.<br \/>\nPost them to the <a href=\"https:\/\/openprocessing.org\/class\/83294\">openprocessing collection<\/a>.<br \/>\n<strong>Remember to save your sketches with non-random names and to create a new sketch for each image<\/strong>. If you modify the same sketch over and over I won&#8217;t be able to see all the assignments!<\/p>\n<p>The canvas is 400 x 400 px and these are two ellipses (or circles).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3043\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/0.png\" alt=\"\" width=\"800\" height=\"800\" srcset=\"https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/0.png 800w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/0-600x600.png 600w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/0-150x150.png 150w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/0-768x768.png 768w\" sizes=\"auto, (max-width: 800px) 85vw, 800px\" \/><\/p>\n<p>These are not 5 squares but 2 semi-transparent rectangles.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3031\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/1.png\" alt=\"\" width=\"800\" height=\"800\" srcset=\"https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/1.png 800w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/1-600x600.png 600w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/1-150x150.png 150w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/1-768x768.png 768w\" sizes=\"auto, (max-width: 800px) 85vw, 800px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>You&#8217;ll have to look at the reference for the function &#8220;arc&#8221;. Keep in mind that by default the angles are expressed in radians.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3033\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/2.png\" alt=\"\" width=\"800\" height=\"800\" srcset=\"https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/2.png 800w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/2-600x600.png 600w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/2-150x150.png 150w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/2-768x768.png 768w\" sizes=\"auto, (max-width: 800px) 85vw, 800px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>There are various ways to recreate this image, the easiest is with two circles and a thick line.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3037\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/3-1.png\" alt=\"\" width=\"800\" height=\"800\" srcset=\"https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/3-1.png 800w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/3-1-600x600.png 600w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/3-1-150x150.png 150w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/3-1-768x768.png 768w\" sizes=\"auto, (max-width: 800px) 85vw, 800px\" \/><\/p>\n<p>This one uses 3 rectangles with selectively rounded corners and a line.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3039\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/4.png\" alt=\"\" width=\"800\" height=\"800\" srcset=\"https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/4.png 800w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/4-600x600.png 600w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/4-150x150.png 150w, https:\/\/mycours.es\/digitalmedia\/files\/2021\/01\/4-768x768.png 768w\" sizes=\"auto, (max-width: 800px) 85vw, 800px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Watch these two videos Check the p5 cheatsheet and bookmark it Bookmark the official p5 reference and always keep it open when you work Search Color picker on google and copy paste the rgb values in your background, fill and stroke functions. Optional videos 1.2 2D Primitives\u00a0(Xin Xin) 1.3 RGB Color &amp; Blendmode\u00a0(Xin Xin) 1.3 &hellip; <a href=\"https:\/\/mycours.es\/digitalmedia\/p5-drawing-primitives-colors-attributes\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;p5: drawing, primitives, colors, attributes&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":35,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3028","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages\/3028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/comments?post=3028"}],"version-history":[{"count":14,"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages\/3028\/revisions"}],"predecessor-version":[{"id":3702,"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages\/3028\/revisions\/3702"}],"wp:attachment":[{"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/media?parent=3028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}