{"id":156,"date":"2020-09-12T13:00:00","date_gmt":"2020-09-12T07:30:00","guid":{"rendered":"https:\/\/www.codezma.com\/?p=156"},"modified":"2020-09-12T13:10:25","modified_gmt":"2020-09-12T07:40:25","slug":"beginners-guide-to-creative-coding-using-p5js","status":"publish","type":"post","link":"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/","title":{"rendered":"Beginner\u2019s Guide to Creative Coding using p5js"},"content":{"rendered":"\n

Creative coding has emerged as one of the best mediums to learn programming. It offers no barriers and people with different fields of interests can easily learn programming through it. It offers a platform for artists, students and professionals to translate their creativity onto digital medium. You have no experience with coding stuff? Well, creative coding doesn\u2019t require you to!<\/p>\n\n\n\n

\"p5js-showcase\"
Tyler Hobbs<\/a>, Manoloide<\/a>, Kjetil Golid<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

p5js is one such medium to bring out your creativity on the computer. p5js is a client-side JavaScript library for creating graphics and interactive experiences originally based on it\u2019s older cousin Processing (a Java library). Processing was developed by Ben Fry and Casey Reas in 2001 and till date are continuously updating the library. Later on, it got adopted by Lauren McCarthy, an LA based artist, to make it web accessible. Without further ado, let\u2019s get our hands on it.<\/p>\n\n\n\n

Creators of p5js provide us with a web-based editor at editor.p5js.org. If you\u2019re uncomfortable with it, you can add a CDN link to p5js inside the HTML and you\u2019re ready to go. For the sake of simplicity, we\u2019re going to use the web editor. It has got some other advantages too, like saving and loading your sketches. Now you\u2019re just an account away to start coding wonders! Assuming you are already done with the account, let\u2019s understand the interface of the editor.<\/p>\n\n\n\n

\"p5js-interface\"
p5js web editor interface<\/figcaption><\/figure><\/div>\n\n\n\n

So, you\u2019ve got a header with options like New, Save, Reference, etc. It\u2019ll help you with loading your saved sketches or help you find a function you\u2019re looking for. The middle white space with some text is your main space. Your code for the sketch goes here. Above it, there are two buttons for playing and stopping your code execution. The grey area below the main space is your console. If there are any errors with your code, it\u2019ll get logged over here. Beside the main space, there\u2019s a space called preview. It\u2019ll show your code output. That\u2019s it for the interface. Let\u2019s understand the core structure of p5js sketch.<\/p>\n\n\n\n

Any p5js sketch will follow a very simple structure. It is recommended to understand this programming structure to understand what really is happening with your code. As soon as you start the web editor, you\u2019ll get two functions \u2013 setup() and draw(). Whatever you write in the sketch() will get executed once during the code lifetime and the code in draw() will get executed as many times as your display\u2019s refresh rate (which is mostly 60 frames per second).<\/p>\n\n\n\n

To make more sense, add \u2018ellipse(100, 100, 120, 120)\u2019 after the line \u2018background(220)\u2019. It should look like this now.<\/p>\n\n\n\n

function setup() {\n  createCanvas(400, 400);\n}\n\nfunction draw() {\n  background(220);\n  \n  ellipse(100, 100, 120, 120);\n}\n<\/pre>\n\n\n\n
And when you play the sketch, it\u2019ll render like this.<\/p>\n\n\n\n
\"p5js-example\"
output<\/figcaption><\/figure>\n\n\n\n
Now, let\u2019s break down the code to understand it better. In the setup <\/strong>f<\/em>unction, the line createCanvas(400, 400);  <\/em>is executing only once. It basically sets up the blank canvas of width and height 400px on which you can start adding different shapes, lines and what not.<\/p>\n\n\n\n

The function draw<\/strong> is executing 60 times a second. So, whatever you write inside it will get executed 60 times a second. Here, we have two lines. The first line background(220); <\/em>adds background to the canvas every time the draw function is called. After that, the ellipse(100, 100, 120, 120); <\/em> draws an ellipse at coordinates (100, 100) of width 120px and height 120px. And it does this, you guessed it correctly, 60 times a second. Because we are telling the code to draw ellipses at one position, we are not able to see any changes to the canvas. Let\u2019s learn some new functions !<\/p>\n\n\n\n
Modify the code to look like this.<\/p>\n\n\n\n
function setup() {\n  createCanvas(400, 400);\n  \n  noStroke();\n  fill(240, 0, 0);\n}\n\nfunction draw() {\n  background(220);\n  \n  ellipse(mouseX, mouseY, 120, 120);\n<\/pre>\n\n\n\n
Over here, noStroke(); <\/em>removes stroke applied to any elements from there on. fill(240, 0, 0); <\/em>takes 3 arguments as red, blue and green color within the range of 0-255. In this case, it takes 240 as Red value and hence fills elements with red color. You might\u2019ve noticed already that we are using mouseX and mouseY as coordinates for drawing ellipses. mouseX and mouseY are system variables which contain mouse\u2019s X and Y coordinates respectively among the canvas. Go ahead and click the Play button to get more idea on how it works. Now that you\u2019re aware of these functions, can you guess what the code below performs ?<\/p>\n\n\n\n
function setup() {\n  createCanvas(400, 400);\n  \n  fill(4,66,191);\n  strokeWeight(3);\n  stroke(4,75,217);\n  \n  background(242,126,99);\n}\n\nfunction draw() {\n  ellipse(mouseX, mouseY, 120, 120);\n}\n<\/pre>\n\n\n\n
Kudos to you if you guessed it correctly ! Try experimenting as much as possible to get a grasp of which function does what. Head over to the p5js reference page<\/a> to find more such shapes to create. We\u2019ll be going through some advanced p5js coding on the next part of the series. Until then, have fun experimenting !<\/p>\n","protected":false},"excerpt":{"rendered":"
Creative coding has emerged as one of the best mediums to learn programming. It offers no barriers and people with different fields of interests can easily learn programming through it. It offers a platform for artists, students and professionals to translate their creativity onto digital medium. You have no experience with coding stuff? Well, creative […]<\/p>\n","protected":false},"author":2,"featured_media":161,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[21,22,23,26,20,24],"yoast_head":"\nBeginner\u2019s Guide to Creative Coding using p5js | Codezma<\/title>\n<meta name=\"description\" content=\"Want to learn how to get started with creative coding ? This is a guide to quick setup and getting started with creative coding using p5js.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beginner\u2019s Guide to Creative Coding using p5js | Codezma\" \/>\n<meta property=\"og:description\" content=\"Want to learn how to get started with creative coding ? This is a guide to quick setup and getting started with creative coding using p5js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/\" \/>\n<meta property=\"og:site_name\" content=\"Codezma\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-12T07:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-12T07:40:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codezma.com\/blogs\/wp-content\/uploads\/2020\/09\/p5js-cover.png\" \/>\n\t<meta property=\"og:image:width\" content=\"768\" \/>\n\t<meta property=\"og:image:height\" content=\"285\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rajnee Makwana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tech_codezma\" \/>\n<meta name=\"twitter:site\" content=\"@tech_codezma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rajnee Makwana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/\"},\"author\":{\"name\":\"Rajnee Makwana\",\"@id\":\"https:\/\/www.codezma.com\/blogs\/#\/schema\/person\/f0ab2c921dd8c3f8a95c6d3bb1d31eee\"},\"headline\":\"Beginner\u2019s Guide to Creative Coding using p5js\",\"datePublished\":\"2020-09-12T07:30:00+00:00\",\"dateModified\":\"2020-09-12T07:40:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/\"},\"wordCount\":800,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.codezma.com\/blogs\/#organization\"},\"keywords\":[\"canvas\",\"creative coding\",\"generative art\",\"javascript\",\"p5js\",\"processing\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/\",\"url\":\"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/\",\"name\":\"Beginner\u2019s Guide to Creative Coding using p5js | Codezma\",\"isPartOf\":{\"@id\":\"https:\/\/www.codezma.com\/blogs\/#website\"},\"datePublished\":\"2020-09-12T07:30:00+00:00\",\"dateModified\":\"2020-09-12T07:40:25+00:00\",\"description\":\"Want to learn how to get started with creative coding ? This is a guide to quick setup and getting started with creative coding using p5js.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codezma.com\/blogs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beginner\u2019s Guide to Creative Coding using p5js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codezma.com\/blogs\/#website\",\"url\":\"https:\/\/www.codezma.com\/blogs\/\",\"name\":\"Codezma\",\"description\":\"Encode the code\",\"publisher\":{\"@id\":\"https:\/\/www.codezma.com\/blogs\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codezma.com\/blogs\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codezma.com\/blogs\/#organization\",\"name\":\"Codezma\",\"url\":\"https:\/\/www.codezma.com\/blogs\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codezma.com\/blogs\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codezma.com\/blogs\/wp-content\/uploads\/2020\/08\/favicon.png\",\"contentUrl\":\"https:\/\/www.codezma.com\/blogs\/wp-content\/uploads\/2020\/08\/favicon.png\",\"width\":512,\"height\":512,\"caption\":\"Codezma\"},\"image\":{\"@id\":\"https:\/\/www.codezma.com\/blogs\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/twitter.com\/tech_codezma\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codezma.com\/blogs\/#\/schema\/person\/f0ab2c921dd8c3f8a95c6d3bb1d31eee\",\"name\":\"Rajnee Makwana\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codezma.com\/blogs\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c24187f3486a406a1f26873a22cacf4b?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c24187f3486a406a1f26873a22cacf4b?s=96&r=g\",\"caption\":\"Rajnee Makwana\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Beginner\u2019s Guide to Creative Coding using p5js | Codezma","description":"Want to learn how to get started with creative coding ? This is a guide to quick setup and getting started with creative coding using p5js.","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:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/","og_locale":"en_US","og_type":"article","og_title":"Beginner\u2019s Guide to Creative Coding using p5js | Codezma","og_description":"Want to learn how to get started with creative coding ? This is a guide to quick setup and getting started with creative coding using p5js.","og_url":"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/","og_site_name":"Codezma","article_published_time":"2020-09-12T07:30:00+00:00","article_modified_time":"2020-09-12T07:40:25+00:00","og_image":[{"width":768,"height":285,"url":"https:\/\/www.codezma.com\/blogs\/wp-content\/uploads\/2020\/09\/p5js-cover.png","type":"image\/png"}],"author":"Rajnee Makwana","twitter_card":"summary_large_image","twitter_creator":"@tech_codezma","twitter_site":"@tech_codezma","twitter_misc":{"Written by":"Rajnee Makwana","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/#article","isPartOf":{"@id":"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/"},"author":{"name":"Rajnee Makwana","@id":"https:\/\/www.codezma.com\/blogs\/#\/schema\/person\/f0ab2c921dd8c3f8a95c6d3bb1d31eee"},"headline":"Beginner\u2019s Guide to Creative Coding using p5js","datePublished":"2020-09-12T07:30:00+00:00","dateModified":"2020-09-12T07:40:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/"},"wordCount":800,"commentCount":0,"publisher":{"@id":"https:\/\/www.codezma.com\/blogs\/#organization"},"keywords":["canvas","creative coding","generative art","javascript","p5js","processing"],"articleSection":["Frontend"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/","url":"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/","name":"Beginner\u2019s Guide to Creative Coding using p5js | Codezma","isPartOf":{"@id":"https:\/\/www.codezma.com\/blogs\/#website"},"datePublished":"2020-09-12T07:30:00+00:00","dateModified":"2020-09-12T07:40:25+00:00","description":"Want to learn how to get started with creative coding ? This is a guide to quick setup and getting started with creative coding using p5js.","breadcrumb":{"@id":"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.codezma.com\/blogs\/frontend\/beginners-guide-to-creative-coding-using-p5js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codezma.com\/blogs\/"},{"@type":"ListItem","position":2,"name":"Beginner\u2019s Guide to Creative Coding using p5js"}]},{"@type":"WebSite","@id":"https:\/\/www.codezma.com\/blogs\/#website","url":"https:\/\/www.codezma.com\/blogs\/","name":"Codezma","description":"Encode the code","publisher":{"@id":"https:\/\/www.codezma.com\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codezma.com\/blogs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codezma.com\/blogs\/#organization","name":"Codezma","url":"https:\/\/www.codezma.com\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codezma.com\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/www.codezma.com\/blogs\/wp-content\/uploads\/2020\/08\/favicon.png","contentUrl":"https:\/\/www.codezma.com\/blogs\/wp-content\/uploads\/2020\/08\/favicon.png","width":512,"height":512,"caption":"Codezma"},"image":{"@id":"https:\/\/www.codezma.com\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/twitter.com\/tech_codezma"]},{"@type":"Person","@id":"https:\/\/www.codezma.com\/blogs\/#\/schema\/person\/f0ab2c921dd8c3f8a95c6d3bb1d31eee","name":"Rajnee Makwana","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codezma.com\/blogs\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c24187f3486a406a1f26873a22cacf4b?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c24187f3486a406a1f26873a22cacf4b?s=96&r=g","caption":"Rajnee Makwana"}}]}},"_links":{"self":[{"href":"https:\/\/www.codezma.com\/blogs\/wp-json\/wp\/v2\/posts\/156"}],"collection":[{"href":"https:\/\/www.codezma.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codezma.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codezma.com\/blogs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codezma.com\/blogs\/wp-json\/wp\/v2\/comments?post=156"}],"version-history":[{"count":10,"href":"https:\/\/www.codezma.com\/blogs\/wp-json\/wp\/v2\/posts\/156\/revisions"}],"predecessor-version":[{"id":176,"href":"https:\/\/www.codezma.com\/blogs\/wp-json\/wp\/v2\/posts\/156\/revisions\/176"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codezma.com\/blogs\/wp-json\/wp\/v2\/media\/161"}],"wp:attachment":[{"href":"https:\/\/www.codezma.com\/blogs\/wp-json\/wp\/v2\/media?parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codezma.com\/blogs\/wp-json\/wp\/v2\/categories?post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codezma.com\/blogs\/wp-json\/wp\/v2\/tags?post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}