{"id":298,"date":"2024-04-09T06:50:39","date_gmt":"2024-04-09T05:50:39","guid":{"rendered":"https:\/\/vivertido.com\/?p=298"},"modified":"2024-04-09T07:07:55","modified_gmt":"2024-04-09T06:07:55","slug":"playing-with-p5-js-in-wp","status":"publish","type":"post","link":"https:\/\/vivertido.com\/?p=298","title":{"rendered":"Playing with P5.js in WP"},"content":{"rendered":"<div data-beyondwords-player=\"true\" contenteditable=\"false\"><\/div>\n<p data-beyondwords-marker=\"03fa3ba1-713c-4eb6-b99c-67eb3c90c086\">This is a demo of the P5.js plugin. There should be content below and stuff happening. Maybe even interactive. <\/p>\n\n\n\n<p data-beyondwords-marker=\"186e1df2-251b-4333-af83-34eb8adf694a\"><\/p>\n\n\n\n<div data-beyondwords-marker=\"9f5fbba8-0e53-4d53-8a23-914c41196c85\" class=\"wp-block-gutenbergp5-p5js gutenbergp5-block-p5js gutenbergp5-align-center\"><iframe frameborder=\"0\" srcdoc=\"\n        <!DOCTYPE html&gt;\n        <html&gt;\n            <head&gt;\n            <script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/1.6.0\/p5.min.js&quot; integrity=&quot;sha512-3RlxD1bW34eFKPwj9gUXEWtdSMC59QqIqHnD8O\/NoTwSJhgxRizdcFVQhUMFyTp5RwLTDL0Lbcqtl8b7bFAzog==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;<\/script&gt;\n            <\/head&gt;\n            <body style=&quot;padding: 0; margin: 0;&quot;&gt;<\/body&gt;\n            <footer&gt;\n                <script&gt;\n                    let objs = [];\nlet colors = ['#084b83', '#42bfdd', '#ff7700', '#ed254e', '#f9dc5c', '#5b1865','#5688c7'];\n\nfunction setup() {\n\tcreateCanvas(900, 900);\n\trectMode(CENTER);\n\tlet side = width*0.8;\n\tlet c = 12;\n\tlet w = side \/ c;\n\tfor (let i = 0; i < c; i++) {\n\t\tfor (let j = 0; j < c; j++) {\n\t\t\tlet x = i * w + (w \/ 2) + (width - side)\/2;\n\t\t\tlet y = j * w + (w \/ 2) + (width - side)\/2;\n\t\t\tobjs.push(new OBJ(x, y, w * 0.5));\n\t\t}\n\t}\n}\n\nfunction draw() {\n\tbackground(255);\n\tfor (let i of objs) {\n\t\ti.run();\n\t}\n}\n\nfunction easeInOutCirc(x) {\n\treturn x < 0.5\n\t\t? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) \/ 2\n\t\t: (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) \/ 2;\n}\n\nclass OBJ {\n\tconstructor(x, y, w) {\n\t\tthis.x = x;\n\t\tthis.y = y;\n\t\tthis.w = w;\n\t\tthis.cw = this.w;\n\t\tthis.init();\n\t\tthis.t = -dist(width\/2, height\/2, this.x, this.y)\/10;\n\t\tthis.t0 = -20;\n\t\tthis.t1 = 80;\n\t\tthis.t2 = this.t1 + 20;\n\t\tthis.t3 = this.t2 + 80;\n\t}\n\n\tshow() {\n\t\tlet ww = this.w - this.cw;\n\t\tpush();\n\t\ttranslate(this.x, this.y);\n\t\tnoStroke();\n\t\tfill(this.col1);\n\t\tcircle(ww \/ 2, -ww \/ 2, this.w * 0.75);\n\t\tfill(this.col2);\n\t\tcircle(-ww \/ 2, ww \/ 2, this.w * 0.75);\n\t\tfill('#ffffff');\n\t\tcircle(0, 0, this.cw+1);\n\t\tpop();\n\t}\n\n\tmove() {\n\t\tif (0 < this.t &amp;&amp; this.t < this.t1) {\n\t\t\tlet n = norm(this.t, 0, this.t1 - 1);\n\t\t\tthis.cw = lerp(this.w, 0, easeInOutCirc(n));\n\t\t}\n\t\telse if (this.t2 < this.t &amp;&amp; this.t < this.t3) {\n\t\t\tlet n = norm(this.t, this.t2, this.t3 - 1);\n\t\t\tthis.cw = lerp(0, this.w, easeInOutCirc(n));\n\t\t}\n\t\tif (this.t &gt; this.t3) {\n\t\t\tthis.init();\n\t\t}\n\t\tthis.t++;\n\t}\n\n\tinit(){\n\t\tthis.col1 = this.col2 = '\ud83d\udc32'\n\t\twhile (this.col1 == this.col2) {\n\t\t\tthis.col1 = random(colors);\n\t\t\tthis.col2 = random(colors);\n\t\t}\n\t\tthis.t = this.t0;\n\t}\n\n\trun() {\n\t\tthis.show();\n\t\tthis.move();\n\t}\n}\n                <\/script&gt;\n            <\/footer&gt;\n        <\/html&gt;\n        \" sandbox=\"allow-scripts allow-same-origin allow-presentation\" scrolling=\"no\" style=\"width:100%;height:1000px;overflow:hidden;\" width=\"100%\" height=\"1000px\" class=\"gutenbergp5-noresize\"><\/iframe><\/div>\n\n\n\n<p data-beyondwords-marker=\"a56656c5-493f-45da-a978-5a6d7834cdb5\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a demo of the P5.js plugin. There should be content below and stuff happening. Maybe even interactive.<\/p>\n","protected":false},"author":1,"featured_media":307,"comment_status":"open","ping_status":"open","sticky":false,"template":"single-wide.php","format":"standard","meta":{"newspack_popups_has_disabled_popups":false,"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"newspack_featured_image_position":"hidden","newspack_post_subtitle":"","newspack_article_summary_title":"Overview:","newspack_article_summary":"","newspack_hide_updated_date":false,"newspack_show_updated_date":false,"footnotes":"","beyondwords_generate_audio":"1","beyondwords_project_id":"40426","beyondwords_content_id":"913a99a8-5b03-48b0-8f53-48c4b2cbc777","beyondwords_player_style":"","beyondwords_language_id":"","beyondwords_title_voice_id":"","beyondwords_body_voice_id":"","beyondwords_summary_voice_id":"","beyondwords_error_message":"","beyondwords_disabled":"","beyondwords_delete_content":"","beyondwords_podcast_id":"913a99a8-5b03-48b0-8f53-48c4b2cbc777","beyondwords_hash":"","publish_post_to_speechkit":"","speechkit_hash":"","speechkit_generate_audio":"","speechkit_project_id":"","speechkit_podcast_id":"","speechkit_error_message":"","speechkit_disabled":"","speechkit_access_key":"","speechkit_error":"","speechkit_info":"","speechkit_response":"","speechkit_retries":"","speechkit_updated_at":"","_speechkit_link":"","_speechkit_text":""},"categories":[1],"tags":[],"class_list":["post-298","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","entry"],"aioseo_notices":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Playing with P5.js in WP - Vivertido<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vivertido.com\/?p=298\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Playing with P5.js in WP - Vivertido\" \/>\n<meta property=\"og:description\" content=\"This is a demo of the P5.js plugin. There should be content below and stuff happening. Maybe even interactive.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vivertido.com\/?p=298\" \/>\n<meta property=\"og:site_name\" content=\"Vivertido\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-09T05:50:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-09T06:07:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vivertido.com\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-08-at-10.58.18\u202fPM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1450\" \/>\n\t<meta property=\"og:image:height\" content=\"1108\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"vivertido.com\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"vivertido.com\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vivertido.com\/?p=298#article\",\"isPartOf\":{\"@id\":\"https:\/\/vivertido.com\/?p=298\"},\"author\":{\"name\":\"vivertido.com\",\"@id\":\"https:\/\/vivertido.com\/#\/schema\/person\/2e183ccad2e49913b43081da4f61d98c\"},\"headline\":\"Playing with P5.js in WP\",\"datePublished\":\"2024-04-09T05:50:39+00:00\",\"dateModified\":\"2024-04-09T06:07:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vivertido.com\/?p=298\"},\"wordCount\":26,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/vivertido.com\/#organization\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/vivertido.com\/?p=298#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vivertido.com\/?p=298\",\"url\":\"https:\/\/vivertido.com\/?p=298\",\"name\":\"Playing with P5.js in WP - Vivertido\",\"isPartOf\":{\"@id\":\"https:\/\/vivertido.com\/#website\"},\"datePublished\":\"2024-04-09T05:50:39+00:00\",\"dateModified\":\"2024-04-09T06:07:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vivertido.com\/?p=298#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vivertido.com\/?p=298\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vivertido.com\/?p=298#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/vivertido.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Playing with P5.js in WP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vivertido.com\/#website\",\"url\":\"https:\/\/vivertido.com\/\",\"name\":\"Vivertido\",\"description\":\"Visualize dead fascists\",\"publisher\":{\"@id\":\"https:\/\/vivertido.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vivertido.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vivertido.com\/#organization\",\"name\":\"Vivertido\",\"url\":\"https:\/\/vivertido.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/vivertido.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/vivertido.com\/wp-content\/uploads\/2024\/01\/cropped-vivertido.png?fit=783%2C286&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/vivertido.com\/wp-content\/uploads\/2024\/01\/cropped-vivertido.png?fit=783%2C286&ssl=1\",\"width\":783,\"height\":286,\"caption\":\"Vivertido\"},\"image\":{\"@id\":\"https:\/\/vivertido.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vivertido.com\/#\/schema\/person\/2e183ccad2e49913b43081da4f61d98c\",\"name\":\"vivertido.com\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/vivertido.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c9468890a01702b00dbb125c96668050d3deb688186e11ab70928489a930683?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c9468890a01702b00dbb125c96668050d3deb688186e11ab70928489a930683?s=96&d=mm&r=g\",\"caption\":\"vivertido.com\"},\"sameAs\":[\"http:\/\/vivertido.com\"],\"url\":\"https:\/\/vivertido.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Playing with P5.js in WP - Vivertido","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vivertido.com\/?p=298","og_locale":"en_US","og_type":"article","og_title":"Playing with P5.js in WP - Vivertido","og_description":"This is a demo of the P5.js plugin. There should be content below and stuff happening. Maybe even interactive.","og_url":"https:\/\/vivertido.com\/?p=298","og_site_name":"Vivertido","article_published_time":"2024-04-09T05:50:39+00:00","article_modified_time":"2024-04-09T06:07:55+00:00","og_image":[{"width":1450,"height":1108,"url":"https:\/\/vivertido.com\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-08-at-10.58.18\u202fPM.png","type":"image\/png"}],"author":"vivertido.com","twitter_card":"summary_large_image","twitter_misc":{"Written by":"vivertido.com","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vivertido.com\/?p=298#article","isPartOf":{"@id":"https:\/\/vivertido.com\/?p=298"},"author":{"name":"vivertido.com","@id":"https:\/\/vivertido.com\/#\/schema\/person\/2e183ccad2e49913b43081da4f61d98c"},"headline":"Playing with P5.js in WP","datePublished":"2024-04-09T05:50:39+00:00","dateModified":"2024-04-09T06:07:55+00:00","mainEntityOfPage":{"@id":"https:\/\/vivertido.com\/?p=298"},"wordCount":26,"commentCount":0,"publisher":{"@id":"https:\/\/vivertido.com\/#organization"},"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vivertido.com\/?p=298#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vivertido.com\/?p=298","url":"https:\/\/vivertido.com\/?p=298","name":"Playing with P5.js in WP - Vivertido","isPartOf":{"@id":"https:\/\/vivertido.com\/#website"},"datePublished":"2024-04-09T05:50:39+00:00","dateModified":"2024-04-09T06:07:55+00:00","breadcrumb":{"@id":"https:\/\/vivertido.com\/?p=298#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vivertido.com\/?p=298"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vivertido.com\/?p=298#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vivertido.com\/"},{"@type":"ListItem","position":2,"name":"Playing with P5.js in WP"}]},{"@type":"WebSite","@id":"https:\/\/vivertido.com\/#website","url":"https:\/\/vivertido.com\/","name":"Vivertido","description":"Visualize dead fascists","publisher":{"@id":"https:\/\/vivertido.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vivertido.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/vivertido.com\/#organization","name":"Vivertido","url":"https:\/\/vivertido.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vivertido.com\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/vivertido.com\/wp-content\/uploads\/2024\/01\/cropped-vivertido.png?fit=783%2C286&ssl=1","contentUrl":"https:\/\/i0.wp.com\/vivertido.com\/wp-content\/uploads\/2024\/01\/cropped-vivertido.png?fit=783%2C286&ssl=1","width":783,"height":286,"caption":"Vivertido"},"image":{"@id":"https:\/\/vivertido.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vivertido.com\/#\/schema\/person\/2e183ccad2e49913b43081da4f61d98c","name":"vivertido.com","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vivertido.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c9468890a01702b00dbb125c96668050d3deb688186e11ab70928489a930683?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c9468890a01702b00dbb125c96668050d3deb688186e11ab70928489a930683?s=96&d=mm&r=g","caption":"vivertido.com"},"sameAs":["http:\/\/vivertido.com"],"url":"https:\/\/vivertido.com\/?author=1"}]}},"parsely":{"version":"1.1.0","meta":{"@context":"https:\/\/schema.org","@type":"NewsArticle","headline":"Playing with P5.js in WP","url":"http:\/\/vivertido.com\/?p=298","mainEntityOfPage":{"@type":"WebPage","@id":"http:\/\/vivertido.com\/?p=298"},"thumbnailUrl":"https:\/\/i0.wp.com\/vivertido.com\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-08-at-10.58.18\u202fPM.png?resize=150%2C150&ssl=1","image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/vivertido.com\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-08-at-10.58.18\u202fPM.png?fit=1450%2C1108&ssl=1"},"articleSection":"Blog","author":[{"@type":"Person","name":"vivertido.com"}],"creator":["vivertido.com"],"publisher":{"@type":"Organization","name":"Vivertido","logo":""},"keywords":[],"dateCreated":"2024-04-09T05:50:39Z","datePublished":"2024-04-09T05:50:39Z","dateModified":"2024-04-09T06:07:55Z"},"rendered":"<script type=\"application\/ld+json\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@type\":\"NewsArticle\",\"headline\":\"Playing with P5.js in WP\",\"url\":\"http:\\\/\\\/vivertido.com\\\/?p=298\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/vivertido.com\\\/?p=298\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/vivertido.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Screenshot-2024-04-08-at-10.58.18\\u202fPM.png?resize=150%2C150&ssl=1\",\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/vivertido.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Screenshot-2024-04-08-at-10.58.18\\u202fPM.png?fit=1450%2C1108&ssl=1\"},\"articleSection\":\"Blog\",\"author\":[{\"@type\":\"Person\",\"name\":\"vivertido.com\"}],\"creator\":[\"vivertido.com\"],\"publisher\":{\"@type\":\"Organization\",\"name\":\"Vivertido\",\"logo\":\"\"},\"keywords\":[],\"dateCreated\":\"2024-04-09T05:50:39Z\",\"datePublished\":\"2024-04-09T05:50:39Z\",\"dateModified\":\"2024-04-09T06:07:55Z\"}<\/script>","tracker_url":"https:\/\/cdn.parsely.com\/keys\/vivertido.com\/p.js"},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/vivertido.com\/wp-content\/uploads\/2024\/04\/Screenshot-2024-04-08-at-10.58.18\u202fPM.png?fit=1450%2C1108&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/vivertido.com\/index.php?rest_route=\/wp\/v2\/posts\/298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vivertido.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vivertido.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vivertido.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vivertido.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=298"}],"version-history":[{"count":8,"href":"https:\/\/vivertido.com\/index.php?rest_route=\/wp\/v2\/posts\/298\/revisions"}],"predecessor-version":[{"id":306,"href":"https:\/\/vivertido.com\/index.php?rest_route=\/wp\/v2\/posts\/298\/revisions\/306"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vivertido.com\/index.php?rest_route=\/wp\/v2\/media\/307"}],"wp:attachment":[{"href":"https:\/\/vivertido.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vivertido.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vivertido.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}