With BarkArt you can track your dog’s barking and turn it into a unique work of art, while discovering ways to ease his/her anxiety. It’s bark therapy for the whole family.

Whether it is separation anxiety or other triggers, dogs can suffer from emotional distress just like humans. BarkArt can help you find daily patterns and track the times of high anxiety for your pup, which will allow you the opportunity to find a way to ease the stress.

Before leaving your house, set up BarkArt on a computer in a location near your dog’s favorite spot. When your dog barks, BarkArt will add a paw on the canvas, with the size based on duration of the bark.

You will arrive home to a full painted canvas of paws of all sizes and colors. Click on an individual paw to find out the time of the bark. You can end the sketch by clicking on “end.”  Check out BarkData to see a linear visual of the day’s barking and track patterns over time.

On the lighter side, you can save the unique daily artwork by “saving BarkArt.”  And don’t forget to share your pup’s BarkArt on Instagram!

Try BarkArt HERE!

#BarkArt

Sample BarkArt

Special thanks to Jason Sigal & Dan Shiffman.

BarkArt

	//Credit goes to Dan Shiffman and Jason Sigal for their help with making this project possbile
	//p5js.com
	var barks = [];
	var graphbarks = [];
	var barking;
	var barkLevel = 0.3;
	var threshold = 0.05;
	var threshold2 = 0.01;
	var barkingNow = false;
	var txt;
	var lastBark;
	var startTime = 0;
	var stopTime = 0;
	var howlong = 0;
	var button1;
	var barkGraph = false;
	var canvas;
	var button2;
	var saveClick = false;
	var button3;
	var pausePause = false;
	var frame;
	var paintcan;
	var globalTime;
	var graphMove = true;
	function preload() {
	frame = loadImage("Frame.png");
	paintcan = loadImage("paintcan.png");
	}
	// var d = new Date();
	// var newX = d.getTime();
	function setup() {
	canvas = createCanvas(1000, 700);
	//background(0, 100, 229);
	button1 = createButton('bark data');
	button1.mousePressed(seeData);
	button1.position(895, 585);
	//microph on
	button2 = createButton('save BarkArt');
	button2.mousePressed(saveBarkArt);
	button2.position(890, 650);
	button3 = createButton('end');
	button3.mousePressed(stopAction);
	button3.position(915, 675);
	barking = new p5.AudioIn
	barking.start();
	}
	function draw() {
	background(255);
	var vol = barking.getLevel();
	if (graphMove) {
	globalTime = millis();}
	if (vol > threshold && !barkingNow) {
	var newBark = new BarkMark(random(25, 975), random(25, 675), vol);
	barks.push(newBark); //a new bark is being pushed out into/added into the array
	barkingNow = true;
	startTime = millis();
	} else if (barkingNow && vol < threshold2) {
	barkingNow = false;
	stopTime = millis();
	howlong = stopTime - startTime;
	// look at last bark object in array
	// give it the data with howlong
	var lastBark = barks.length - 1;
	//console.log(howlong);
	}
	if (barkGraph) {
	background(0);
	for (i = 0; i < barks.length; i++) {
	barks[i].drawGraph();
	barks[i].clickedgraph();
	}
	} else {
	for (i = 0; i < barks.length; i++) {
	barks[i].display();
	barks[i].clicked();
	}
	image(frame, 0, 0);
	image(paintcan, 845, 462)
	}
	}
	//create button that goes to graph data
	function seeData() {
	if (barkGraph == true) {
	barkGraph = false;
	button1.html('bark data');
	} else if (barkGraph == false) {
	barkGraph = true;
	button1.html('bark art');
	}
	}
	function saveBarkArt() {
	saveCanvas(canvas, 'BarkArt', 'jpg');
	}
	function stopAction() {
	barking.stop();
	graphMove = false;
	// if (pausePause == true) {
	// pausePause = false;
	// button3.html('pause')
	// } else if (pausePause == false) {
	// pausePause = true;
	// button3.html('resume')
	// }
	//END
	}

view raw barkart sketch hosted with by GitHub

BarkMark.js

	//Credit goes to Dan Shiffman and Jason Sigal for their help with making this project possbile
	//p5js.com
	function BarkMark(x, y, vol) {
	// var vol = barking.getLevel();
	this.x = x;
	this.y = y;
	this.vol = vol;
	this.col = color(random(255), random(255), random(255));
	this.r = howlong / 10;
	this.txt = "bark time:" + hour() + ":" + minute() + ":" + second();
	//this.graphX = hour() + minute();
	// later maybe use this to map to x?
	this.time = millis();
	//console.log(this.r/10);
	this.drawGraph = function() {
	// button3 = createButton('stop');
	// button3.mousePressed(stopAction);
	// button3.position(910, 610); //canvas2 = createCanvas (width, h);
	//var x = map(this.time, 0, 1000*60*5, 0, width);
	// var y = map(this.r, 0, howlong / 10, 0, 25);
	var x = map(this.time, 0, globalTime, 0, width);
	//var h = map(height, 0, howlong / 10, howlong / 10, 0);
	var h = map(this.r, 0, 200, height, 0);
	//canvas = map(height, 0, howlong / 10, howlong / 10, 0);
	fill(255);
	// var y = use map() with this.r!
	//var y = map(this.r, 0, howlong / 10, 0, 25);
	//ellipse(x, y, 15, 15);
	//i dont like how it changes the Y...i want that to stay
	ellipse(x, h, 15, 15);
	}
	this.clickedgraph = function() {
	var x = map(this.time, 0, globalTime, 0, width);
	var h = map(this.r, 0, 200, height, 0);
	var e = dist(mouseX, mouseY, x, h);
	if (e < 7.5 && mouseIsPressed) {
	fill(0, 99, 99);
	textAlign(CENTER);
	text(this.txt, x, h);
	}
	}
	//DRAW BARK ART
	this.display = function() {
	noStroke();
	fill(this.col);
	ellipse(this.x, this.y, this.r + this.r / 15, this.r);
	//paw fingers
	ellipse(this.x - (this.r / 2), this.y - (this.r / 1.8), this.r * .35, this.r * .40);
	ellipse(this.x, this.y - (this.r / 1.3), this.r * .35, this.r * .40);
	ellipse(this.x + (this.r / 2), this.y - (this.r / 1.8), this.r * .35, this.r * .40);
	}
	this.clicked = function() {
	var d = dist(mouseX, mouseY, this.x, this.y);
	if (d < this.r * .40 && mouseIsPressed) {
	fill(0);
	textAlign(CENTER);
	text(this.txt, this.x, this.y);
	}
	}
	}

view raw BarkMark.js hosted with by GitHub