Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: winwu/nko2013.tw
base: 963fd2be6e
...
head fork: winwu/nko2013.tw
compare: 7f652e423b
  • 2 commits
  • 4 files changed
  • 0 commit comments
  • 1 contributor
View
117 public/js/drawing_array.js
@@ -0,0 +1,117 @@
+
+// all_array_x = []
+// one_stroke_x = []
+// all_array_y = []
+// one_stroke_y = []
+
+function init_drawing_array(){
+ all_array_x = []
+ one_stroke_x = []
+ all_array_y = []
+ one_stroke_y = []
+}
+
+function save_one_point(x,y){
+ // one_stroke_x.push(x);
+ // one_stroke_y.push(y);
+ all_array_x.push(x);
+ all_array_y.push(y);
+ //console.log(x);
+ //console.log(y);
+}
+
+function save_one_stroke(){
+ // var one_stroke_x_copy = one_stroke_x.slice();
+ // var one_stroke_y_copy = one_stroke_y.slice();
+
+ // all_array_x.push(one_stroke_x_copy);
+ // all_array_y.push(one_stroke_y_copy);
+ one_stroke_x = [];
+ one_stroke_y = [];
+}
+
+function save_all_array(){
+ socket.emit('all_array', {all_array_x: all_array_x, all_array_y: all_array_y});
+ init_drawing_array();
+}
+
+// function play_from_all_array(img_dom_element){
+
+// var all_x = img_dom_element.getAttribute('data-x');
+// var all_y = img_dom_element.getAttribute('data-y');
+
+// console.log(all_x);
+// console.log(all_y);
+
+// var delay = 0; // play one note every quarter second
+// var velocity = 127; // how hard the note hits
+// // play the note
+// MIDI.setVolume(0, audio_volume);
+// for(var i=0;i<all_x.length;i++){
+// var x = parseInt(all_x[i]);
+// var y = parseInt(all_y[i]);
+// if((typeof x == 'number') && (typeof y == 'number')){
+// var num = 40;
+// x = num+Math.floor(x/20);
+// y = num+Math.floor(y/20);
+// var note = Math.floor(x/y*50);
+// //console.log(note);
+
+// note = normalize(note);
+
+// check_volume();
+
+// //console.log(note);
+// var random_num = Math.random();
+// if(random_num>0.5)
+// play(note)
+
+// }
+// }
+
+// }
+
+
+function play_from_all_array(img_dom_element){
+
+ var all_x = img_dom_element.getAttribute('data-x');
+ var all_y = img_dom_element.getAttribute('data-y');
+
+ play_all(all_x,all_y);
+
+}
+
+function play_all(all_x,all_y){
+ if(all_x.length>0){
+ var delay = 0; // play one note every quarter second
+ var velocity = 127; // how hard the note hits
+ // play the note
+ MIDI.setVolume(0, audio_volume);
+ var x = parseInt(all_x[0]);
+ var y = parseInt(all_y[0]);
+ if((typeof x == 'number') && (typeof y == 'number')){
+ var num = 40;
+ // x = num+Math.floor(x/20);
+ // y = num+Math.floor(y/20);
+ // //var note = Math.floor(x/y*50);
+
+ console.log(x);
+
+ var note = Math.floor(x);
+
+ //console.log(note);
+ note = normalize(note);
+ check_volume();
+
+ var random_num = Math.random();
+ //if(random_num>0.8)
+ MIDI.noteOn(0, note, velocity, delay);
+
+ setTimeout(function(){
+ play_all(all_x.slice(1),all_y.slice(1));
+ },1);
+ }
+ }
+}
+
+
View
56 public/js/midi_test.js
@@ -2,6 +2,8 @@
window.onload = init;
function init(){
+ init_drawing_array();
+
audio_volume = 127;
MIDI.loadPlugin({
soundfontUrl: "./midi/soundfont/",
@@ -30,19 +32,24 @@
console.log('x: ' + (num+event.clientX/20));
console.log('y: ' + (num+event.clientY/20));
+ console.log('original x: ' + event.clientX);
+ console.log('original y: ' + event.clientY);
+
var x = num+Math.floor(event.clientX/20);
var y = num+Math.floor(event.clientY/20);
//note = Math.floor(x*Math.random()+y*Math.random());
- var note = Math.floor(x/y*50);
+ //var note = Math.floor(x/y*50);
//var note = Math.floor(x*y/50);
+ var note = Math.floor(x);
+
note = normalize(note);
check_volume();
- console.log(note);
+ //console.log(note);
var random_num = Math.random();
- if(random_num>0.9)
+ //if(random_num>0.8)
play(note)
}
}
@@ -68,25 +75,44 @@
function play(note) {
+ //console.log('played');
var delay = 0; // play one note every quarter second
var velocity = 127; // how hard the note hits
// play the note
MIDI.setVolume(0, audio_volume);
MIDI.noteOn(0, note, velocity, delay);
- //MIDI.noteOff(0, note, delay + 0.75);
- };
+ MIDI.noteOff(0, note, delay + 0.75);
+ }
+
+
+ function play_delayed(note) {
+ setTimeout(function(){
+
+ var delay = 0.2; // play one note every quarter second
+ var velocity = 127; // how hard the note hits
+ // play the note
+ MIDI.setVolume(0, audio_volume);
+ MIDI.noteOn(0, note, velocity, delay);
+ //MIDI.noteOff(0, note, delay + 0.75);
+ //MIDI.noteOff(0, note, delay + 0.75);
+
+ },100)
+
+
+ }
function check_volume(){
- audio_volume = Math.round(200 * parseInt(document.getElementById('choose_range').value) / 15);
+ audio_volume = Math.round(200 * (0.5 + parseInt(document.getElementById('choose_range').value) / 15));
}
- function play_series(arr) {
- var delay = 0; // play one note every quarter second
- var velocity = 127; // how hard the note hits
- // play the note
- MIDI.setVolume(0, audio_volume);
- for(var i=0;i<arr.length;i++){
- MIDI.noteOn(0, arr[i], velocity, delay);
- }
- };
+ // function play_series(arr) {
+ // var delay = 0; // play one note every quarter second
+ // var velocity = 127; // how hard the note hits
+ // // play the note
+ // MIDI.setVolume(0, audio_volume);
+ // for(var i=0;i<arr.length;i++){
+ // MIDI.noteOn(0, arr[i], velocity, delay);
+ // }
+ // };
+
View
37 public/js/style.js
@@ -108,16 +108,20 @@ var saved_dataURL;
sessionStorage.setItem('image', saved_dataURL );
//var data_obj = {name : '', pic:'',music:''};
- socket.emit('message', {name: user_name, pic: saved_dataURL, music: ''});
+ socket.emit('message', {name: user_name, pic: saved_dataURL, music: '', all_array_x: JSON.stringify(all_array_x), all_array_y: JSON.stringify(all_array_y)});
//load.disabled = false;
// set canvasImg image src to dataURL
// so it can be saved as an image
// A.自己畫的圖片要自己 append
var author_talking_dom = '<p><code>'+ user_name +'</code>\'s works:</p>'
- var new_saved_dom = '<img src="' + saved_dataURL + '"/>';
+ var new_saved_dom = '<img src="' + saved_dataURL + '" onclick="play_from_all_array(this);"'
+ +' data-x=' + all_array_x + ' data-y=' + all_array_y +
+ +' data-z="aaa" />';
+
console.log(new_saved_dom);
$('#paint_saved_history').prepend('<div class="clearfix">'+ author_talking_dom + new_saved_dom + '</div>');
+
prop_msg('Broadcase Your Works!');
@@ -125,6 +129,8 @@ var saved_dataURL;
$('#myCanvas').css('cursor','not-allowed');
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
+
+
return false;
});
@@ -133,7 +139,12 @@ var saved_dataURL;
//console.log( data_obj.name );
//console.log('理我一下');
var author_talking_dom = '<p><code>'+ data_obj.name +'</code>\'s works:</p>'
- var new_saved_dom = '<img src="' + data_obj.pic + '"/>';
+ //var new_saved_dom = '<img src="' + data_obj.pic + '"/>';
+
+ var new_saved_dom = '<img src="' + data_obj.pic + '" onclick="play_from_all_array(this);"'
+ +' data-x=' + data_obj.all_array_x + ' data-y=' + data_obj.all_array_y +
+ +' data-z="aaa" />';
+
console.log(new_saved_dom);
$('#paint_saved_history').prepend('<div class="clearfix">'+ author_talking_dom + new_saved_dom + '</div>');
});
@@ -187,6 +198,8 @@ var saved_dataURL;
history.pushState(prev_state, null);
// console.log(prev_state);
//audio.pause();
+
+ save_one_stroke();
}
function drawing(e){
@@ -196,11 +209,16 @@ var saved_dataURL;
e.pageY - canvas.offsetTop
);
ctx.stroke();
- }
-
+
+ // var temp_x = e.pageX - canvas.offsetLeft;
+ // var temp_y = e.pageY - canvas.offsetTop;
+ var temp_x = e.pageX;
+ var temp_y = e.pageY;
+ save_one_point(temp_x, temp_y);
+ }
}
function startDarw(e){
@@ -216,6 +234,15 @@ var saved_dataURL;
e.pageY - canvas.offsetTop
);
//audio.play();
+
+ // var temp_x = e.pageX - canvas.offsetLeft;
+ // var temp_y = e.pageY - canvas.offsetTop;
+
+ var temp_x = e.pageX;
+ var temp_y = e.pageY;
+
+ save_one_point(temp_x, temp_y);
+
}
View
6 views/index.ejs
@@ -34,7 +34,7 @@
</script>
<script src="/js/midi_test.js"></script>
-
+ <script src="/js/drawing_array.js"></script>
<script src="/js/style.js"></script>
</head>
@@ -63,7 +63,7 @@
<button id="undo_canvas" class="pure-button pure-button-xlarge"><i class="icon-undo"></i> Undo</button>
<button id="redo_canvas" class="pure-button pure-button-xlarge"><i class="icon-rotate-right"></i> Redo</button>
<button id="save_canvas" class="pure-button pure-button-warning pure-button-xlarge "><i class="icon-bullhorn"></i> Broadcast</button>
- <div id="msg" class="alert alert-success">Hi, You had Broadcase Your Works</div>
+ <div id="msg" class="alert alert-success">Hi, You had Broadcast Your Works</div>
</div>
</div><!--hd-->
@@ -108,7 +108,7 @@
</div>
<div id="show_history" class="pure-u-1-5">
- <h4 class="title"><i class="icon-bullhorn"></i> Broadcase </h4>
+ <h4 class="title"><i class="icon-bullhorn"></i> Broadcast </h4>
<div id="paint_saved_history">
<!--img class="canvasImg"/--><!--will insert img by js-->

No commit comments for this range

Something went wrong with that request. Please try again.