In this tutorial, we’ll explore the process of building a digital drawing canvas where artists can simultaneously collaborate.
Complete Code Sample
To explore building a collaborative digital art canvas, we’ll start with a very simple example. This code is based on the p5 processing js framework. You can download this sample code and other 3D art examples from my github repo. 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’ll break this code down.
var database;
var colorOptions;
function setup() {
createCanvas(1024, 768);
// Initialize Firebase
var config = {
apiKey: "...",
authDomain: "changeme.firebaseapp.com",
databaseURL: "https://changeme.firebaseio.com",
storageBucket: "",
};
firebase.initializeApp(config);
database = firebase.database();
//make a list of colors in an array....
colorOptions = new Array();
colorOptions[0] = "#faa916"
colorOptions[1] = "#6d676e"
colorOptions[2] = "#1b1b1e"
colorOptions[3] = "#96031a"
//pull points from firebase and draw them...
var pointRef = firebase.database().ref('points');
pointRef.on('child_added', function(data) {
// So... a new point has been added. Get the data.
var aPoint = data.val();
//set the color based on point
fill(aPoint.color);
//draw the point
ellipse(aPoint.x, aPoint.y, 10, 10);
});
}
function draw() {
if (mouseIsPressed) {
//get current time
var date = new Date();
var m = date.getMinutes();
//select a color option based on the minutes
var i = m % 4;
// make a point capturing location(x,y) and color
var aPoint = {}
aPoint.x = mouseX;
aPoint.y = mouseY;
aPoint.color = colorOptions[i];
//add point to firebase ...
database.ref("points").push(aPoint);
}
}
Setting up our drawing space and Firebase connection
P5 is an easy 2D JavaScript framework for drawing stuff. In the “setup” 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’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’t insert data using SQL, you just ask the system to store JSON.
Make sure to learn more about Google Firebase at https://firebase.google.com/. In my case, I established a database instance that’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.
createCanvas(1024, 768);
// Initialize Firebase
var config = {
apiKey: "...",
authDomain: "changeme.firebaseapp.com",
databaseURL: "https://changeme.firebaseio.com",
storageBucket: "",
};
firebase.initializeApp(config);
database = firebase.database();
In this tutorial, let’s change the drawing colors of our collaborative canvas with time. In this case, we’ll provide 4 options in the code below.
colorOptions = new Array();
colorOptions[0] = "#faa916"
colorOptions[1] = "#6d676e"
colorOptions[2] = "#1b1b1e"
colorOptions[3] = "#96031a"
Let’s draw something!
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.
var pointRef = firebase.database().ref('points');
pointRef.on('child_added', function(data) {
// So... a new point has been added. Get the data.
var aPoint = data.val();
//set the color based on point
fill(aPoint.color);
//draw the point
ellipse(aPoint.x, aPoint.y, 10, 10);
});
How do users draw?
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.
function draw() {
if (mouseIsPressed) {
//get current time
var date = new Date();
var m = date.getMinutes();
//select a color option based on the minutes
var i = m % 4;
// make a point capturing location(x,y) and color
var aPoint = {}
aPoint.x = mouseX;
aPoint.y = mouseY;
aPoint.color = colorOptions[i];
//add point to firebase ...
database.ref("points").push(aPoint);
}
}
If you enjoyed this tutorial, you’re going to LOVE the following art and code festival we’re organizing tomorrow. It’s an opportunity for artists, designers, and coders in Middle, GA to connect and invent new crowd-sourced art experiences. It’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’ll be building amazing 3D collaborative art experiences like the following:
This prototype piece was presented by Dr. Allen during our last Open Make night at SparkMacon Makerspace.
I want to give a shout out to our friends at Google Developer Group of Macon and Dr. Robert Allen from Mercer. It was a blast brainstorming and implementing Macon’s first Google DevFest together
- Google DevFest: A festival for software developers, artists, and creative thinkers.
Explore CrowdSourced Art using tools like ThreeJS and Firebase.com, an amazing realtime database framework. - Learn more at http://devfest.cs.mercer.edu/
- When: October 22, 2016 – 9 a.m. – 5 p.m.
- Where: Mercer University Science and Engineering Building
