{"id":2153,"date":"2016-10-21T16:42:09","date_gmt":"2016-10-21T16:42:09","guid":{"rendered":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=2153"},"modified":"2018-01-16T01:31:21","modified_gmt":"2018-01-16T01:31:21","slug":"how-to-create-collaborative-digital-art-using-javascript","status":"publish","type":"post","link":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/how-to-create-collaborative-digital-art-using-javascript\/","title":{"rendered":"How To Create Collaborative Digital Art using #JavaScript"},"content":{"rendered":"\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Fhow-to-create-collaborative-digital-art-using-javascript%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen06.png\" rel=\"attachment wp-att-1642\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1642\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen06.png\" alt=\"loop \/ rotate \/ translate\" width=\"500\" height=\"441\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen06.png 500w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2014\/09\/screen06-300x264.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>In this tutorial, we&#8217;ll explore the process of building a digital drawing canvas where artists can simultaneously collaborate.<\/p>\n<p>&nbsp;<\/p>\n<h3>Complete Code Sample<\/h3>\n<p>To explore building a collaborative digital art canvas, we&#8217;ll start with a very simple example. This code is based on the <a href=\"http:\/\/p5js.org\/get-started\/\" target=\"_blank\" rel=\"noopener\">p5 processing js framework.<\/a> You can download this sample code and other 3D art examples <a href=\"https:\/\/github.com\/michaelprosario\/art-with-code-starter-kit\/wiki\/Art-with-Code---Starter-Kit\" target=\"_blank\" rel=\"noopener\">from my github repo.<\/a> In general, this javascript code needs to setup a connection to my Firebase database, setup a list of colors, setup code to react to drawing events, and give the artist a way to contribute drawing events to the system. In the rest of this blog post, we&#8217;ll break this code down.<\/p>\n<p><code><br \/>\nvar database;<br \/>\nvar colorOptions;<\/p>\n<p>function setup() {<br \/>\ncreateCanvas(1024, 768);<\/p>\n<p>\/\/ Initialize Firebase<br \/>\nvar config = {<br \/>\napiKey: \"...\",<br \/>\nauthDomain: \"changeme.firebaseapp.com\",<br \/>\ndatabaseURL: \"https:\/\/changeme.firebaseio.com\",<br \/>\nstorageBucket: \"\",<br \/>\n};<br \/>\nfirebase.initializeApp(config);<br \/>\ndatabase = firebase.database();<\/p>\n<p>\/\/make a list of colors in an array....<br \/>\ncolorOptions = new Array();<br \/>\ncolorOptions[0] = \"#faa916\"<br \/>\ncolorOptions[1] = \"#6d676e\"<br \/>\ncolorOptions[2] = \"#1b1b1e\"<br \/>\ncolorOptions[3] = \"#96031a\"<\/p>\n<p>\/\/pull points from firebase and draw them...<br \/>\nvar pointRef = firebase.database().ref('points');<br \/>\npointRef.on('child_added', function(data) {<\/p>\n<p>\/\/ So... a new point has been added. Get the data.<br \/>\nvar aPoint = data.val();<\/p>\n<p>\/\/set the color based on point<br \/>\nfill(aPoint.color);<\/p>\n<p>\/\/draw the point<br \/>\nellipse(aPoint.x, aPoint.y, 10, 10);<br \/>\n});<\/p>\n<p>}<\/p>\n<p>function draw() {<br \/>\nif (mouseIsPressed) {<br \/>\n\/\/get current time<br \/>\nvar date = new Date();<br \/>\nvar m = date.getMinutes();<\/p>\n<p>\/\/select a color option based on the minutes<br \/>\nvar i = m % 4;<\/p>\n<p>\/\/ make a point capturing location(x,y) and color<br \/>\nvar aPoint = {}<br \/>\naPoint.x = mouseX;<br \/>\naPoint.y = mouseY;<br \/>\naPoint.color = colorOptions[i];<\/p>\n<p>\/\/add point to firebase ...<br \/>\ndatabase.ref(\"points\").push(aPoint);<br \/>\n}<br \/>\n}<br \/>\n<\/code><\/p>\n<h3>Setting up our drawing space and Firebase connection<\/h3>\n<p>P5 is an easy 2D JavaScript framework for drawing stuff. In the &#8220;setup&#8221; function, p5 enables programmers to establish their workspace. In our case, we have 3 jobs: create a canvas, connect to our Firebase database, and tell the system how it should handle drawing events. In the following code, we create a drawing surface called a canvas that&#8217;s 1024 pixels by 768 pixels. The rest of the code establishes a connection to my firebase instance. Firebase is a real-time database in the Google family of products. From a JavaScript programmers point of view, it provides an easy way to capture data and push that new data to other users of your app or experience. In our case, the moment that one user starts drawing, all other users will see the result instantly with no refreshing. Experienced programmers will also notice that you don&#8217;t insert data using SQL, you just ask the system to store JSON.<\/p>\n<p>Make sure to learn more about Google Firebase at <a href=\"https:\/\/firebase.google.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/firebase.google.com\/<\/a>. In my case, I established a database instance that&#8217;s writable to the public. This works great for public wikis or collaborative public art. You can also secure your database instance with authentication and login methods. Check out their documentation for details.<\/p>\n<p><code><br \/>\ncreateCanvas(1024, 768);<\/p>\n<p>\/\/ Initialize Firebase<br \/>\nvar config = {<br \/>\napiKey: \"...\",<br \/>\nauthDomain: \"changeme.firebaseapp.com\",<br \/>\ndatabaseURL: \"https:\/\/changeme.firebaseio.com\",<br \/>\nstorageBucket: \"\",<br \/>\n};<br \/>\nfirebase.initializeApp(config);<br \/>\ndatabase = firebase.database();<br \/>\n<\/code><\/p>\n<p>In this tutorial, let&#8217;s change the drawing colors of our collaborative canvas with time. In this case, we&#8217;ll provide 4 options in the code below.<\/p>\n<p><code><br \/>\ncolorOptions = new Array();<br \/>\ncolorOptions[0] = \"#faa916\"<br \/>\ncolorOptions[1] = \"#6d676e\"<br \/>\ncolorOptions[2] = \"#1b1b1e\"<br \/>\ncolorOptions[3] = \"#96031a\"<br \/>\n<\/code><\/p>\n<h3>Let&#8217;s draw something!<\/h3>\n<p>In the following code, we get the browser to listen for changes from our Firebase database. When changes occur to our points list, we draw stuff. When a child is added, we grab a single point, set the fill color, and draw a small circle at the location.<\/p>\n<p><code><br \/>\nvar pointRef = firebase.database().ref('points');<br \/>\npointRef.on('child_added', function(data) {<br \/>\n\/\/ So... a new point has been added. Get the data.<br \/>\nvar aPoint = data.val();<\/p>\n<p>\/\/set the color based on point<br \/>\nfill(aPoint.color);<\/p>\n<p>\/\/draw the point<br \/>\nellipse(aPoint.x, aPoint.y, 10, 10);<br \/>\n});<br \/>\n<\/code><\/p>\n<h3>How do users draw?<\/h3>\n<p>For our simple collaborative canvas, artists draw on the canvas by simply clicking and dragging their mouse. In the following code, we detect mouse clicks, the location of the mouse click, and pick a color based on time.<\/p>\n<p><code><br \/>\nfunction draw() {<br \/>\nif (mouseIsPressed) {<br \/>\n\/\/get current time<br \/>\nvar date = new Date();<br \/>\nvar m = date.getMinutes();<\/p>\n<p>\/\/select a color option based on the minutes<br \/>\nvar i = m % 4;<\/p>\n<p>\/\/ make a point capturing location(x,y) and color<br \/>\nvar aPoint = {}<br \/>\naPoint.x = mouseX;<br \/>\naPoint.y = mouseY;<br \/>\naPoint.color = colorOptions[i];<\/p>\n<p>\/\/add point to firebase ...<br \/>\ndatabase.ref(\"points\").push(aPoint);<br \/>\n}<br \/>\n}<br \/>\n<\/code><\/p>\n<p>If you enjoyed this tutorial, you&#8217;re going to LOVE the following art and code festival we&#8217;re organizing tomorrow. It&#8217;s an opportunity for artists, designers, and coders in Middle, GA to connect and invent new crowd-sourced art experiences. It&#8217;s going to be a blast! Macon GDG has organized the content and teaching to be accessible to artists and designers interested in growing their coding skills. We&#8217;ll be building amazing 3D collaborative art experiences like the following:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/QKJXh8weHO0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>This prototype piece was presented by Dr. Allen during our last Open Make night at <a href=\"http:\/\/sparkmacon.com\" target=\"_blank\" rel=\"noopener\">SparkMacon Makerspace.<\/a><\/p>\n<p>I want to give a shout out to our friends at <a href=\"http:\/\/www.meetup.com\/Mercer-University-Google-Developers-Group-Meetup\/\">Google Developer Group of Macon<\/a> and Dr. Robert Allen from Mercer. It was a blast brainstorming and implementing Macon&#8217;s first Google DevFest together<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/events\/devfest\/\" target=\"_blank\" rel=\"noopener\">Google DevFest<\/a>: A festival for software developers, artists, and creative thinkers.<br \/>\nExplore CrowdSourced Art using tools like ThreeJS and <a href=\"http:\/\/Firebase.com\" target=\"_blank\" rel=\"noopener\">Firebase.com<\/a>, an amazing realtime database framework.<\/li>\n<li>Learn more at <a href=\"http:\/\/devfest.cs.mercer.edu\/\" target=\"_blank\" rel=\"noopener\">http:\/\/devfest.cs.mercer.edu\/<\/a><\/li>\n<li>When: October 22, 2016 \u2013 9 a.m. \u2013 5 p.m.<\/li>\n<li>Where: Mercer University Science and Engineering Building<\/li>\n<\/ul>\n\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Fhow-to-create-collaborative-digital-art-using-javascript%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we&#8217;ll explore the process of building a digital drawing canvas where artists can simultaneously collaborate. &nbsp; Complete Code Sample To explore building a collaborative digital art canvas, we&#8217;ll start with a very simple example. This code is based on the p5 processing js framework. You can download [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/2153"}],"collection":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/comments?post=2153"}],"version-history":[{"count":7,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/2153\/revisions"}],"predecessor-version":[{"id":2297,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/2153\/revisions\/2297"}],"wp:attachment":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/media?parent=2153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/categories?post=2153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/tags?post=2153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}