{"id":688,"date":"2025-09-28T19:17:04","date_gmt":"2025-09-28T19:17:04","guid":{"rendered":"https:\/\/www.katelynfreese.art\/?page_id=688"},"modified":"2025-12-23T00:38:37","modified_gmt":"2025-12-23T00:38:37","slug":"p5-js-sketches","status":"publish","type":"page","link":"https:\/\/www.katelynfreese.art\/?page_id=688","title":{"rendered":"P5.JS Sketches"},"content":{"rendered":"\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0\">\n<div style=\"width: 600px; height: 600px; overflow: hidden\">\n<iframe style=\"width: 620px; height: 660px; position: relative; top: -42px\" src=\"https:\/\/editor.p5js.org\/kmfreese\/full\/AjkRPLtS5\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/div><\/p>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\">This sketch includes open-source imagery and a custom cursor image.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-center\">\n<div style=\"width: 600px; height: 600px; overflow: hidden\">\n<iframe style=\"width: 620px; height: 660px; position: relative; top: -42px\" src=\"https:\/\/editor.p5js.org\/kmfreese\/full\/MvyM3pYmm\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/div><\/p>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\">This sketch has a growing circle from the bottom left corner when the mouse is held down. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p style=\"text-align: center;\">\n<div style=\"width: 600px; height: 600px; overflow: hidden\">\n<iframe style=\"width: 620px; height: 660px; position: relative; top: -42px\" src=\"https:\/\/editor.p5js.org\/kmfreese\/full\/snniGvq-9\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/div>\n<\/p>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\">This sketch changes to an animation when the mouse is pressed. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p style=\"text-align: center;\">\n<div style=\"width: 600px; height: 600px; overflow: hidden\">\n<iframe style=\"width: 620px; height: 660px; top:-42px; position:relative;\" src=\"https:\/\/editor.p5js.org\/kmfreese\/full\/JvQ7h1Y7j\" frameborder=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/p>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\">This sketch changes when the mouse is moved from left to right.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p style=\"text-align: center;\">\n<div style=\"width: 600px; height: 400px; overflow: hidden\">\n<iframe style=\"width: 620px; height: 460px; position: relative; top: -42px;\" src=\"https:\/\/editor.p5js.org\/kmfreese\/full\/ksL9km9QN\" frameborder=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/p>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\">This sketch has a sunrise animation, which resets when the mouse is clicked.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p style=\"text-align: center;\">\n<div style=\"width: 600px; height: 600px; overflow: hidden\">\n<iframe style=\"width: 620px; height: 660px; top: -42px; position: relative\" src=\"https:\/\/editor.p5js.org\/kmfreese\/full\/Lfmo0rUIF\" frameborder=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/p>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\">This sketch creates the letter P when the circle is complete. The animation can be reset by clicking the mouse. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p style=\"text-align: center;\">\n<div style=\"width: 600px; height: 600px; overflow: hidden\"><iframe style=\"width: 620px; height: 660px; position: relative; top: -42px\" src=\"https:\/\/editor.p5js.org\/kmfreese\/full\/Cwft_YZmP\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/div><\/p>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\">The first sketch I created in P5.JS, this sketch explores shape placement and stylization using RGBA colors and the Cartesian grid.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p style=\"text-align: center;\">\n<div style=\"width: 600px; height: 600px; overflow: hidden\">\n<iframe style=\"width: 620px; height: 660px; top: -42px; position: relative\" src=\"https:\/\/editor.p5js.org\/kmfreese\/full\/IFVNCS615\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/div><\/p>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\">This sketch includes different stylizations of the placed shapes and lines, further exploring the cartesian grid. <\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.katelynfreese.art\/?page_id=418\">Back to Graphic Design<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This sketch includes open-source imagery and a custom cursor image. This sketch has a growing circle from the bottom left corner when the mouse is held down. This sketch changes to an animation when the mouse is pressed. This sketch changes when the mouse is moved from left to right. This sketch has a sunrise [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-688","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.katelynfreese.art\/index.php?rest_route=\/wp\/v2\/pages\/688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.katelynfreese.art\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.katelynfreese.art\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.katelynfreese.art\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.katelynfreese.art\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=688"}],"version-history":[{"count":31,"href":"https:\/\/www.katelynfreese.art\/index.php?rest_route=\/wp\/v2\/pages\/688\/revisions"}],"predecessor-version":[{"id":769,"href":"https:\/\/www.katelynfreese.art\/index.php?rest_route=\/wp\/v2\/pages\/688\/revisions\/769"}],"wp:attachment":[{"href":"https:\/\/www.katelynfreese.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}