Category Archives: Project 7

SOUND FARTS COLOR project 7 kiss kiss

Posted on by

http://www.kathleenpdurkin.com/sound-farts-color/

Firebase Counter Demo

button {
width:100px;
padding:30px 30px;
margin-bottom:5px;
}
.target {
border:3px solid red;
width:70px;
padding:10px 10px;
margin-bottom:10px;
margin-left:15px;
margin-right:15px;

}

body {
font-size:100%;
font-family: sans-serif;
color: red;
position: sticky;
padding-left:30%;
padding-top:20%;
padding-right:20%;
padding-bottom:20%;
background-image: url(http://www.smithfit.com.au/wp-content/uploads/2014/12/o-GUT-BACTERIA-facebook.jpg);
background-position: center;

}

var config = {
apiKey: “AIzaSyD2g1372iZ3nvUSytcznmx0qEXmsG_5rAk”,
authDomain: “sounds-1baad.firebaseapp.com”,
databaseURL: “https://sounds-1baad.firebaseio.com”,
projectId: “sounds-1baad”,
storageBucket: “sounds-1baad.appspot.com”,
messagingSenderId: “894514338958”
};

firebase.initializeApp(config);
var j = jQuery.noConflict();

//COUNTER STUFF FROM BEN
var db = firebase.database();
var dbCount = db.ref(‘count’);
var userCount = db.ref(“userCount”);
var seenUserCount = 0;
var trueUserCount = false;

userCount.on(‘value’,function() {
seenUserCount++;
if(seenUserCount > 3) trueUserCount = true;
console.log(“suc: “+seenUserCount);
console.log(“tuc: “+trueUserCount);
});

// on startup, grab the current value from ‘count’
// and stick it in the #count div using jQuery
dbCount.once(‘value’).then(function(dataSnapshot) {
var data = dataSnapshot.val();
j(‘#count’).text(data);
});

// whenever ‘count’ gets changed (by someone else)
// this function receives the change and updates #count
dbCount.on(‘value’,function(dataSnapshot) {
var data = dataSnapshot.val();
j(‘#count’).text(data);
});

// once document is loaded, assign click functions to
// +/- buttons that call changeVal()
//j(document).ready(function() {
// j(‘#plus’).click(function() { changeVal(1); });
//j(‘#minus’).click(function() { changeVal(-1); });
//});
//function changeVal(value) {
//dbCount.transaction(function(current) {
// return parseInt(current) + value;
//});
//}
//var canvas = document.getElementById(“container”),
// context = canvas.getContext(“2d”);
//var randomColor = Math.floor(Math.randomColor);
//var primaryColorValues = (‘#3f51b5’, ‘#03a9f4’);
//var primaryColors = primaryColorValues(Math.floor(Math.random()));

//return Math.floor(Math.random());
//};
//j(‘#target1’).click(synth1) });
//j(“container”).click(function() {

//j(“container”).click(function() {
//j(‘button’).each(function() {
//j(‘button’).css(‘background-color’,primaryColorValues);
//});
//});

//FUCK WITH THIS STUFF
var fart1 = db.ref(“fart1”);
var fart2 = db.ref(“fart2”);
var fart3 = db.ref(“fart3”);
var fart4 = db.ref(“fart4”);
var fart5 = db.ref(“fart5”);
var fart6 = db.ref(“fart6”);
var fart7 = db.ref(“fart7”);
var fart8 = db.ref(“fart8”);
var fart9 = db.ref(“fart9”);
var color1 = db.ref(“color1”);
var color2 = db.ref(“color2”);
var color3 = db.ref(“color3”);
var color4 = db.ref(“color4”);
var color5 = db.ref(“color5”);
var color6 = db.ref(“color6”);
var color7 = db.ref(“color7”);
var color8 = db.ref(“color8”);
var color9 = db.ref(“color9”);

fart1.on(‘value’,synth1);
fart2.on(‘value’,synth2);
fart3.on(‘value’,synth3);
fart4.on(‘value’,synth4);
fart5.on(‘value’,synth5);
fart6.on(‘value’,synth6);
fart7.on(‘value’,synth7);
fart8.on(‘value’,synth8);
fart9.on(‘value’,synth9);
color1.on(‘value’,colorchange1);
color2.on(‘value’,colorchange2);
color3.on(‘value’,colorchange3);
color4.on(‘value’,colorchange4);
color5.on(‘value’,colorchange5);
color6.on(‘value’,colorchange6);
color7.on(‘value’,colorchange7);
color8.on(‘value’,colorchange8);
color9.on(‘value’,colorchange9);

function colorchange1(){
j(‘#target1’).css(‘background-color’,getPrimaryColor);
console.log(‘color changed’);
};
function colorchange2(){
j(‘#target2’).css(‘background-color’,getPrimaryColor);
console.log(‘color changed’);
};
function colorchange3(){
j(‘#target3’).css(‘background-color’,getPrimaryColor);
console.log(‘color changed’);
};
function colorchange4(){
j(‘#target4’).css(‘background-color’,getPrimaryColor);
console.log(‘color changed’);
};
function colorchange5(){
j(‘#target5’).css(‘background-color’,getPrimaryColor);
console.log(‘color changed’);
};
function colorchange6(){
j(‘#target6’).css(‘background-color’,getPrimaryColor);
console.log(‘color changed’);
};
function colorchange7(){
j(‘#target7’).css(‘background-color’,getPrimaryColor);
console.log(‘color changed’);
};
function colorchange8(){
j(‘#target8’).css(‘background-color’,getPrimaryColor);
console.log(‘color changed’);
};
function colorchange9(){
j(‘#target9’).css(‘background-color’,getPrimaryColor);
console.log(‘color changed’);
};

// function colorchange(){
// j(‘.target’).click(function(e) {
// j(this).css(‘background-color’,getPrimaryColor);
// });
// console.log(‘color changed’);
// }

var primaryColorValues = [‘#3f51b5’, ‘#03a9f4’, ‘#B0C4DE’, ‘#CD853F’, ‘#BC8F8F’, ‘#87CEEB’, ‘#8B008B’, ‘#F5F5DC’, ‘#B8860B’, ‘#BDB76B’, ‘#FFA500’, ‘#A9A9A9’];

var getPrimaryColor = function() {
return primaryColorValues[Math.round(Math.random() * (primaryColorValues.length – 1))];
}

// runs when the page is fully loaded
j(document).ready(function() {
j(‘#target1’).click(function() {
fart1.set(Math.random());
j(‘#target1’).click(function(e) {
j(this).css(‘background-color’,getPrimaryColor);
});
j(‘#target1’).click(function() {
color1.set(Math.random());
});
});

j(‘#target2’).click(function() {
fart2.set(Math.random());
j(‘#target2’).click(function(e) {
j(this).css(‘background-color’,getPrimaryColor);
});
j(‘#target2’).click(function() {
color2.set(Math.random());
});
});

j(‘#target3’).click(function() {
fart3.set(Math.random());
j(‘#target3’).click(function(e) {
j(this).css(‘background-color’,getPrimaryColor);
});
j(‘#target3’).click(function() {
color3.set(Math.random());
});
});

j(‘#target4’).click(function() {
fart4.set(Math.random());
j(‘#target4’).click(function(e) {
j(this).css(‘background-color’,getPrimaryColor);
});
j(‘#target4’).click(function() {
color4.set(Math.random());
});
});

j(‘#target5’).click(function() {
fart5.set(Math.random());
j(‘#target5’).click(function(e) {
j(this).css(‘background-color’,getPrimaryColor);
});
j(‘#target5’).click(function() {
color5.set(Math.random());
});
});

j(‘#target6’).click(function() {
fart6.set(Math.random());
j(‘#target6’).click(function(e) {
j(this).css(‘background-color’,getPrimaryColor);
});
j(‘#target6’).click(function() {
color6.set(Math.random());
});
});

j(‘#target7’).click(function() {
fart7.set(Math.random());
j(‘#target7’).click(function(e) {
j(this).css(‘background-color’,getPrimaryColor);
});
j(‘#target7’).click(function() {
color7.set(Math.random());
});
});

j(‘#target8’).click(function() {
fart8.set(Math.random());
j(‘#target8’).click(function(e) {
j(this).css(‘background-color’,getPrimaryColor);
});
j(‘#target8’).click(function() {
color8.set(Math.random());
});
});

j(‘#target9’).click(function() {
fart9.set(Math.random());
j(‘#target9’).click(function(e) {
j(this).css(‘background-color’,getPrimaryColor);
});
j(‘#target9’).click(function() {
color9.set(Math.random());
});
});

userCount.transaction(function(current) {
return current+1;
});

if(trueUserCount == true)j(‘.target’).off(‘click’);
console.log(“kicked off”);
;

});

var primaryColorValues = [‘#3f51b5’, ‘#03a9f4’, ‘#B0C4DE’, ‘#CD853F’, ‘#BC8F8F’, ‘#87CEEB’, ‘#8B008B’, ‘#F5F5DC’, ‘#B8860B’, ‘#BDB76B’, ‘#FFA500’, ‘#A9A9A9’];

var getPrimaryColor = function() {
return primaryColorValues[Math.round(Math.random() * (primaryColorValues.length – 1))];
}
//var myPrimaryColor = getPrimaryColor();
//target1.click(‘background-color’ , myPrimaryColor)
//j(‘#target1’).click(function(e) {
//j(this).css(‘background-color’,getPrimaryColor);
//})
//});
//j(‘button’).each(function() {
// j(this).css(‘background-color’, primaryColorValues[Math.floor(Math.random() * colors.length)]);
//});
//j(‘button’).click(function(‘color’, primaryColorValues));

//EXPAND SYNTHS FOR TONE CHANGES
function synth1(){
// console.log(“here”);
// if(seenUserCount == true) return;
// else { console.log(“play sound”); }
var osc = new Tone.FMSynth({
“harmonicity” : 1.17,
“modulationIndex” : 10,
“oscillator” : {
“type” : “square”
},
“envelope” : {
“attack” : 2,
“decay” : .9,
},
“modulation” : {
“type” : “square”
},
“modulationEnvelope” : {
“attack” : 0.1,
“decay” : 0.02,

}
}).toMaster();
osc.triggerAttackRelease(60, “4m”);
}
function synth2(){
var osc = new Tone.FMSynth({
“harmonicity” : 1.17,
“modulationIndex” : 10,
“oscillator” : {
“type” : “square”
},
“envelope” : {
“attack” : 2,
“decay” : .9,
},
“modulation” : {
“type” : “square”
},
“modulationEnvelope” : {
“attack” : 0.1,
“decay” : 0.02,

}
}).toMaster();
osc.triggerAttackRelease(80, “4m”);
}
function synth3(){
var osc = new Tone.FMSynth({
“harmonicity” : 1.17,
“modulationIndex” : 10,
“oscillator” : {
“type” : “square”
},
“envelope” : {
“attack” : 2,
“decay” : .9,
},
“modulation” : {
“type” : “square”
},
“modulationEnvelope” : {
“attack” : 0.1,
“decay” : 0.02,

}
}).toMaster();
osc.triggerAttackRelease(110, “4m”);
}
function synth4(){
var osc = new Tone.FMSynth({
“harmonicity” : 1.17,
“modulationIndex” : 10,
“oscillator” : {
“type” : “square”
},
“envelope” : {
“attack” : 2,
“decay” : .9,
},
“modulation” : {
“type” : “square”
},
“modulationEnvelope” : {
“attack” : 0.1,
“decay” : 0.02,

}
}).toMaster();
osc.triggerAttackRelease(140, “4m”);
}
function synth5(){
var osc = new Tone.FMSynth({
“harmonicity” : 1.17,
“modulationIndex” : 10,
“oscillator” : {
“type” : “square”
},
“envelope” : {
“attack” : 2,
“decay” : .9,
},
“modulation” : {
“type” : “square”
},
“modulationEnvelope” : {
“attack” : 0.1,
“decay” : 0.02,

}
}).toMaster();
osc.triggerAttackRelease(180, “4m”);
}
function synth6(){
var osc = new Tone.FMSynth({
“harmonicity” : 1.17,
“modulationIndex” : 10,
“oscillator” : {
“type” : “square”
},
“envelope” : {
“attack” : 2,
“decay” : .9,
},
“modulation” : {
“type” : “square”
},
“modulationEnvelope” : {
“attack” : 0.1,
“decay” : 0.02,

}
}).toMaster();
osc.triggerAttackRelease(230, “4m”);
}
function synth7(){
var osc = new Tone.FMSynth({
“harmonicity” : 1.17,
“modulationIndex” : 10,
“oscillator” : {
“type” : “square”
},
“envelope” : {
“attack” : 2,
“decay” : .9,
},
“modulation” : {
“type” : “square”
},
“modulationEnvelope” : {
“attack” : 0.1,
“decay” : 0.02,

}
}).toMaster();
osc.triggerAttackRelease(290, “4m”);
}
function synth8(){
var osc = new Tone.FMSynth({
“harmonicity” : 1.17,
“modulationIndex” : 10,
“oscillator” : {
“type” : “square”
},
“envelope” : {
“attack” : 2,
“decay” : .9,
},
“modulation” : {
“type” : “square”
},
“modulationEnvelope” : {
“attack” : 0.1,
“decay” : 0.02,

}
}).toMaster();
osc.triggerAttackRelease(360, “4m”);
}
function synth9(){
var osc = new Tone.FMSynth({
“harmonicity” : 1.17,
“modulationIndex” : 10,
“oscillator” : {
“type” : “square”
},
“envelope” : {
“attack” : 2,
“decay” : .9,
},
“modulation” : {
“type” : “square”
},
“modulationEnvelope” : {
“attack” : 0.1,
“decay” : 0.02,

}
}).toMaster();
osc.triggerAttackRelease(440, “4m”);
}

j(document).ready(function() {
j(‘#target1’).click(synth1);
j(‘#target2’).click(synth2);
j(‘#target3’).click(synth3);
j(‘#target4’).click(synth4);
j(‘#target5’).click(synth5);
j(‘#target6’).click(synth6);
j(‘#target7’).click(synth7);
j(‘#target8’).click(synth8);
j(‘#target9’).click(synth9);
});










Project 7 Ideas

Posted on by

dots where you click that other people can see

limited character one time messenger

Counter when you click something

Every time you share something your counter would go up

website that changes pictures of dogs whenever you click

only emoji communication

Every time you like something, the background color changes

text box that is like a mini game with one other person from friend list

Ideas for Project 7

Posted on by

Mitch has expressed interest in click generated or possibly hovering generated tones. For this I know we need to create a tone library. While we are figuring this out, I’m brainstorming ideas as to how this can be blended into something poetic or silly:

  1. holding down the mouse or even just hovering in a blank color field would cause a note to play and the note would only play if the person on the other end were also holding down their mouse or hovering in the same area. There would be a small text line or some color shift which would indicate when another person is present.
  2. The tones in this first concept could be randomly spaced throughout the page leading the participants to be able to play a song should they work out the invisible scale (could this be done using invisible divs as buttons)?
  3. Could tones be associated with key strokes? or even random sounds or random words? Could you find your way around a new language to try to communicate with another participant? Random questions could pop up on the screen for you to ask each other (envisioning Darmok and Jalad at Tanagra type language).
  4. Can this be site specific? If so, I’d love to take the FBI surveillance state to the level of wildlife monitoring. The camera would always be on but you’d need to turn on a spotlight at night.
  5. The button could also turn on my big read dot spotlight and project it onto my room. It could be in my kitchen or bedroom. If the spotlight comes on, I can’t leave the room but I have to stay in the room with it but I don’t have to let it hit me. I’m gonna do this possibly for my final now that I am writing this out.
  6. The buttons could go between Mitchell’s and my room and play a terrible song in each other’s room whenever we want it to. This idea might be my favorite collaborative idea.