12-minute presentation about the constrain()<\/em> and map()<\/em> functions in p5.js:<\/p>\n<\/iframe><\/p>\n<p>12-minute presentation about shaping functions (tweens) in p5.js:<\/p>\n<p><iframe title=\"Shaping Functions in p5.js\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/wJRgAs6rbUY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>12-minute presentation on how to export frames for the loop: <\/p>\n<p><iframe title=\"How to export frames (to make an animated GIF loop) from p5.js\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/-HPjv-KVUe0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<hr \/>\n<p>Let’s dig in to some specifics of creative graphics programming.<\/p>\n<ul>\n<li>Time: <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/millis\">millis<\/a>()<\/li>\n<li>The transformation matrix; pushMatrix(), popMatrix(), scale, translate, etc.<\/li>\n<li><a href=\"https:\/\/p5js.org\/reference\/#\/p5\/random\">random<\/a>() vs. Perlin\u00a0<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/noise\">noise()<\/a>. p5’s\u00a0<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/randomGaussian\">randomGaussian()<\/a>. Random seeds.<\/li>\n<li>The\u00a0<a href=\"https:\/\/gist.github.com\/golanlevin\/0909e9208fc6abd1307e8021a1995e1b\">modulus operator<\/a>;\u00a0<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/map\">map<\/a>(),\u00a0<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/constrain\">constrain<\/a>()<\/li>\n<li>Simple sinusoids; circular motion.\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Lissajous_curve\">Lissajous figures<\/a>!<\/li>\n<li>Here’s a demonstration of\u00a0<em>looping noise <\/em>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/BJVHGGJO7\">p5.js<\/a>)<\/li>\n<\/ul>\n<p><em>If you’d like more information, here are some\u00a0<strong>Coding Train<\/strong>\u00a0videos that might be helpful for you:<\/em><\/p>\n<ul>\n<li><em><a href=\"https:\/\/www.youtube.com\/watch?v=Qf4dIN99e2w\">Perlin Noise in p5.js<\/a><\/em><\/li>\n<li><em><a href=\"https:\/\/www.youtube.com\/watch?v=r5Iy3v1co0A\">The modulo operator<\/a>\u00a0(featuring the Professor…)<\/em><\/li>\n<li><em><a href=\"https:\/\/www.youtube.com\/watch?v=o9sgjuh-CBM\">push\/pop in p5.js<\/a><\/em><\/li>\n<li><em><a href=\"https:\/\/www.youtube.com\/watch?v=nicMAoW6u1g\">the map() function in p5.js<\/a><\/em><\/li>\n<\/ul>\n<hr \/>\n<h3>Shaping Functions<\/h3>\n<p>Shaping functions (also called easing functions, tweens, and unit generators) can be used to create nonlinear movement.<\/p>\n<ul>\n<li>Luke DuBois’\u00a0<a href=\"https:\/\/idmnyu.github.io\/p5.js-func\/\"><em>p5.js-func<\/em><\/a>\u00a0(JavaScript) is a proper p5.js library which you can include into your project.<\/li>\n<li>My\u00a0<em><a href=\"https:\/\/github.com\/golanlevin\/Pattern_Master\">Pattern_Master<\/a><\/em>\u00a0(Processing\/Java) is just a collection of functions. You’ll have to copy\/paste code directly to use the functions you want.<\/li>\n<\/ul>\n<p><strong>Here’s a how-to-use-p5func in the Editor:\u00a0<\/strong><\/p>\n<ul>\n<li>Go to\u00a0<a href=\"https:\/\/idmnyu.github.io\/p5.js-func\/\">https:\/\/idmnyu.github.io\/p5.js-func\/<\/a>. Download the zip.<\/li>\n<li>Unzip the archive. Locate\u00a0<em>p5.func.min.js<\/em>\u00a0in its ‘lib’ folder.<\/li>\n<li>At the https:\/\/editor.p5js.org\/, create a new sketch (File > New).<\/li>\n<li>In your sketch, click on the small > character to open up your files.<\/li>\n<li>Click the V character, select ‘Add file’.<\/li>\n<li>Drag the p5.func.min.js into the indicated region.<\/li>\n<li>In your index.html file, add the p5.func.min.js script to the head. (See the image below.)<\/li>\n<li>Win!<\/li>\n<li>See Luke’s\u00a0<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/OycW5EdIs\">animation demo<\/a><\/li>\n<li>Golan’s <a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/hgWwANeyG\">ultra-minimal demo<\/a><\/li>\n<li>Golan’s <a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/_D7c9PM2-\">plot demo<\/a><\/li>\n<li>Golan’s <a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/RxPzkdQjg\">color gradient demo<\/a><\/li>\n<\/ul>\n<p>Your index.html and project should look like this:<\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-07-at-1.14.28-AM.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-4642\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-07-at-1.14.28-AM-640x400.png\" alt=\"\" width=\"640\" height=\"400\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-07-at-1.14.28-AM-640x400.png 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-07-at-1.14.28-AM-768x481.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-07-at-1.14.28-AM.png 978w\" sizes=\"(max-width: 640px) 85vw, 640px\" \/><\/a><\/p>\n<p> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Some creative coding basics 12-minute presentation about the constrain() and map() functions in p5.js: 12-minute presentation about shaping functions (tweens) in p5.js: 12-minute presentation on how to export frames for the loop: Let’s dig in to some specifics of creative graphics programming. Time: millis() The transformation matrix; pushMatrix(), popMatrix(), scale, translate, etc. random() vs. Perlin\u00a0noise(). … <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/daily-notes\/september\/09-02-loops\/technical-lectures-09-02\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Technical Lectures 09-02”<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":4421,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4463"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/comments?post=4463"}],"version-history":[{"count":10,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4463\/revisions"}],"predecessor-version":[{"id":4693,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4463\/revisions\/4693"}],"up":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4421"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/media?parent=4463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/iframe><\/p>\n<p>12-minute presentation about shaping functions (tweens) in p5.js:<\/p>\n<p><iframe title=\"Shaping Functions in p5.js\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/wJRgAs6rbUY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>12-minute presentation on how to export frames for the loop: <\/p>\n<p><iframe title=\"How to export frames (to make an animated GIF loop) from p5.js\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/-HPjv-KVUe0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<hr \/>\n<p>Let’s dig in to some specifics of creative graphics programming.<\/p>\n<ul>\n<li>Time: <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/millis\">millis<\/a>()<\/li>\n<li>The transformation matrix; pushMatrix(), popMatrix(), scale, translate, etc.<\/li>\n<li><a href=\"https:\/\/p5js.org\/reference\/#\/p5\/random\">random<\/a>() vs. Perlin\u00a0<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/noise\">noise()<\/a>. p5’s\u00a0<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/randomGaussian\">randomGaussian()<\/a>. Random seeds.<\/li>\n<li>The\u00a0<a href=\"https:\/\/gist.github.com\/golanlevin\/0909e9208fc6abd1307e8021a1995e1b\">modulus operator<\/a>;\u00a0<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/map\">map<\/a>(),\u00a0<a href=\"https:\/\/p5js.org\/reference\/#\/p5\/constrain\">constrain<\/a>()<\/li>\n<li>Simple sinusoids; circular motion.\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Lissajous_curve\">Lissajous figures<\/a>!<\/li>\n<li>Here’s a demonstration of\u00a0<em>looping noise <\/em>(<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/BJVHGGJO7\">p5.js<\/a>)<\/li>\n<\/ul>\n<p><em>If you’d like more information, here are some\u00a0<strong>Coding Train<\/strong>\u00a0videos that might be helpful for you:<\/em><\/p>\n<ul>\n<li><em><a href=\"https:\/\/www.youtube.com\/watch?v=Qf4dIN99e2w\">Perlin Noise in p5.js<\/a><\/em><\/li>\n<li><em><a href=\"https:\/\/www.youtube.com\/watch?v=r5Iy3v1co0A\">The modulo operator<\/a>\u00a0(featuring the Professor…)<\/em><\/li>\n<li><em><a href=\"https:\/\/www.youtube.com\/watch?v=o9sgjuh-CBM\">push\/pop in p5.js<\/a><\/em><\/li>\n<li><em><a href=\"https:\/\/www.youtube.com\/watch?v=nicMAoW6u1g\">the map() function in p5.js<\/a><\/em><\/li>\n<\/ul>\n<hr \/>\n<h3>Shaping Functions<\/h3>\n<p>Shaping functions (also called easing functions, tweens, and unit generators) can be used to create nonlinear movement.<\/p>\n<ul>\n<li>Luke DuBois’\u00a0<a href=\"https:\/\/idmnyu.github.io\/p5.js-func\/\"><em>p5.js-func<\/em><\/a>\u00a0(JavaScript) is a proper p5.js library which you can include into your project.<\/li>\n<li>My\u00a0<em><a href=\"https:\/\/github.com\/golanlevin\/Pattern_Master\">Pattern_Master<\/a><\/em>\u00a0(Processing\/Java) is just a collection of functions. You’ll have to copy\/paste code directly to use the functions you want.<\/li>\n<\/ul>\n<p><strong>Here’s a how-to-use-p5func in the Editor:\u00a0<\/strong><\/p>\n<ul>\n<li>Go to\u00a0<a href=\"https:\/\/idmnyu.github.io\/p5.js-func\/\">https:\/\/idmnyu.github.io\/p5.js-func\/<\/a>. Download the zip.<\/li>\n<li>Unzip the archive. Locate\u00a0<em>p5.func.min.js<\/em>\u00a0in its ‘lib’ folder.<\/li>\n<li>At the https:\/\/editor.p5js.org\/, create a new sketch (File > New).<\/li>\n<li>In your sketch, click on the small > character to open up your files.<\/li>\n<li>Click the V character, select ‘Add file’.<\/li>\n<li>Drag the p5.func.min.js into the indicated region.<\/li>\n<li>In your index.html file, add the p5.func.min.js script to the head. (See the image below.)<\/li>\n<li>Win!<\/li>\n<li>See Luke’s\u00a0<a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/OycW5EdIs\">animation demo<\/a><\/li>\n<li>Golan’s <a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/hgWwANeyG\">ultra-minimal demo<\/a><\/li>\n<li>Golan’s <a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/_D7c9PM2-\">plot demo<\/a><\/li>\n<li>Golan’s <a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/RxPzkdQjg\">color gradient demo<\/a><\/li>\n<\/ul>\n<p>Your index.html and project should look like this:<\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-07-at-1.14.28-AM.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-4642\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-07-at-1.14.28-AM-640x400.png\" alt=\"\" width=\"640\" height=\"400\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-07-at-1.14.28-AM-640x400.png 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-07-at-1.14.28-AM-768x481.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-07-at-1.14.28-AM.png 978w\" sizes=\"(max-width: 640px) 85vw, 640px\" \/><\/a><\/p>\n<p> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Some creative coding basics 12-minute presentation about the constrain() and map() functions in p5.js: 12-minute presentation about shaping functions (tweens) in p5.js: 12-minute presentation on how to export frames for the loop: Let’s dig in to some specifics of creative graphics programming. Time: millis() The transformation matrix; pushMatrix(), popMatrix(), scale, translate, etc. random() vs. Perlin\u00a0noise(). … <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/daily-notes\/september\/09-02-loops\/technical-lectures-09-02\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Technical Lectures 09-02”<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":4421,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4463"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/comments?post=4463"}],"version-history":[{"count":10,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4463\/revisions"}],"predecessor-version":[{"id":4693,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4463\/revisions\/4693"}],"up":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4421"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/media?parent=4463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}