Made a duet and a game

Posted by markhwebster on January 26th, 2018 • 0 Comments

I learned some filmmaking skills 3 years ago and I like to dust the rust off every now and then. I enjoy the technology and the tools of the trade: DSLR cameras, lenses, lights, clapper boards and double system sound recording. Editing is also a lot of fun. Making something beautiful that didn’t exist before appeals to the creative side of my personality. Premier is a fine piece of software. I like the challenge of perfectly syncing multiple tracks, and then playing director in the multi-cam window.

In the video below, I set up lights, tripods and cameras, white balanced everything, recruited talent (my wife), performed and recorded 4 video tracks, 2 audio files. Then blended them all together.

The challenging part was syncing the second shoot with the first shoot. They happened a half hour apart, so there was no way to sync with a clapper board sound. The earpiece I’m wearing is playing the audio from the first take, while I’m recording the second take. I’d never done this before but I think it’s called dubbing. I had to sync the two takes together by looking at the audio waves in Premiere, while listening to the two takes playing simultaneously as layers in the sequence. There were 4 video layers and 6 audio layers. Four of the audio layers would later be deleted as they were from the cameras. But the two Tascam DR-40 digital audio recorder files had to match perfectly with their video files. Long story short, I was able to get the harmonica sound close, then nudge the audio file left and right one frame at a time until it synced, using the keyboard shortcut of Alt + left or right arrow keys.

My other challenge was setting up the multi-cam sequence. It’s too complicated to explain here, but once it’s set up and running, editing multiple cameras into one final cut is a breeze. A common problem you will face if you try this is that multi-cam window likes to have the audio follow the video. Meaning, if you click camera 3, the sound switches to the audio from camera 3. In double system sound, this doesn’t work, because you delete all the camera audio tracks after syncing, they are low quality.

Instead, you bring in audio from your digital sound recorder, in my case, a Tascam DR-40, which had feed from two real microphones seen in the video below. So I had 4 video tracks, and two audio tracks. When I went to multi-cam window, it would only play the top audio track, which was the guitar and ukulele. It ignored the harp audio track. Even with ‘audio follows video’ unchecked. My solution was to copy the synced audio track from the main layered sequence and paste it into the multi-cam sequence in a new audio layer. So now I had one video layer and two audio layers, plus I had all 4 videos displaying at the same time, in little thumbnails. All I had to do then was play the video, and click thumbnails in realtime, director style. If you’ve never seen it, go to youtube and search for premiere multi-cam window. It’s awesome.

I also like to listen to music the old fashioned way, by making it myself or with friends. I come from a long line of amateur musicians. Making music was a tradition anytime our family got together for as long as I can remember. Grandma used to teach piano, but when she became blind in her nineties she still wanted to participate in our sing alongs. Me and my cousin would sit on either side of her. My cousin would sing, and I would play songs on my harmonica, the one in this video. Actually, that 1967 Hohner harmonica got old, so I recently replaced it with a Suzuki SCX-48 Chromatic in the key of C. It is a lovely instrument, but you can be the judge.

My Javascript studies are going well. I learned how to build a number guessing game here:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash

I’ve got it embedded in an iframe, but if that doesn’t work, here is a direct link. Hint: if you turn on developer tools, I console.log out the random number…so you can cheat.

The tutorial was fun, but as I was working it occurred to me that it could form the backbone of an animated hangman game. I don’t play computer games, life seems to short. But I wanted this game to work, and I wanted it to be pretty. A lot of what I wanted in the game was functionality that I didn’t know how to program. I found the answers with simple google searches. It is 600 lines of code, including the html, css and JavaScript. I wrote every.single.line.

Here is the game on codepen.

While I was programming the game, I fell in love with a new free code editor called Atom. I like it better than both brackets and sublime. I need to get back to studying Javascript. But if you are curious how I built my hangman game, here is the Javascript code:

  document.querySelector('.dropmenu a').addEventListener('click', toggleMenu); 
  
  function toggleMenu(){
    //e.preventDefault;//fixes safari ios bug
    document.querySelector('.leveltwo').classList.toggle('fold');
    //document.querySelector('.boxMinus').style.visibility = 'visible';
    document.querySelector('.boxMinus').classList.toggle('boxHide');
    document.querySelector('.boxPlus').classList.toggle('boxHide');
  }



//create variables from svg id elements
  var skyBlue = document.getElementById('skyBlue');
  var niteSky = document.getElementById('niteSky');

  var base1 = document.getElementById('base1');
  var base2 = document.getElementById('base2');
  var base3 = document.getElementById('base3');
  var base4 = document.getElementById('base4');
  var base5 = document.getElementById('base5');//mans face
  var base6 = document.getElementById('base6');//mans spine
  var base7 = document.getElementById('base7');
  var base8 = document.getElementById('base8');
  var base9 = document.getElementById('base9');
  var base10 = document.getElementById('base10');
  var man = document.getElementById('man');
//group of the entire hanging man
  var happy = document.getElementById('happy');// hidden group 
  /*
make an array from the svg parts variables so they 
can be called numerically via hangman[0], hangman[1], etc
   hangman[0] = base1 ; hangman[9] = base10 ; hangman.length = 10
*/
  var hangman = [
base1, base2, base3, base4, base5, base6, base7, base8, base9, base10
];
  //console.log(hangman);
  /*******************
    below = create variables from each keyPadButton
  *****************/
  var k1 = document.getElementById('k1');
  var k2 = document.getElementById('k2');
  var k3 = document.getElementById('k3');
  var k4 = document.getElementById('k4');
  var k5 = document.getElementById('k5');
  var k6 = document.getElementById('k6');
  var k7 = document.getElementById('k7');
  var k8 = document.getElementById('k8');
  var k9 = document.getElementById('k9');
  var k0 = document.getElementById('k0');
  var backUp = document.getElementById('backUp');
  /***** begin number pad function ******/
  var keyPad = [k1, k2, k3, k4, k5, k6, k7, k8, k9, k0]
//make keyPad array from keyPad buttons
/************* 
create eventListeners for each keyPad button that fire 
the keyPadPress function 
**************/
  for (var kp = 0; kp < keyPad.length; kp++){
    keyPad[kp].addEventListener('click', keyPadPress);
  }
  /**************
capture number on button and put it into guessField
******/
  function keyPadPress(mw) {
   //console.log('button pressed');
    mw.preventDefault();
   guessField.innerHTML += this.textContent;
/*
permits multiple digit numbers using = what it what plus what was added
*/
   var guessFieldLength = guessField.innerHTML.length;
   /*
console.log('total characters in guess field is: ' + guessFieldLength);
*/
  }
  backUp.addEventListener('click', backUpCursor);
  function backUpCursor(bw){
    //console.log ('backup cursor function fired');tag.innerText.length
    bw.preventDefault();
    let totalNumbers = guessField.innerText.length;
    /*
console.log('length of guess field during backup  is ' + totalNumbers);
*/
 guessField.innerHTML = guessField.innerHTML.substring(0,totalNumbers-1);
//strips off last number
  }
/**********end number pad function***********/
  var randomNumber = Math.floor(Math.random() * 100) +1;

  var guesses = document.querySelector('.guesses');
  var guessesRemaining = document.querySelector('.guessesRemaining');
  var lastResult = document.querySelector('.lastResult');
  var lowOrHi = document.querySelector('.lowOrHi');
  var theArrowUp= document.querySelector('.theArrowUp');
  var theArrowDown= document.querySelector('.theArrowDown');
  var guessSubmitButton = document.querySelector('#guessSubmitButton');
//the submit button
  //var guessField = document.querySelector('.guessField');
//the div  where they enter guesses
  //console.log(hangman[9]);//reads base10
  var guessCount = 1;
    //console.log("guessCount before game is = " + guessCount);
  var resetButton;//creates empty variable
  var guessesRemainingCount = 11;

  //button eventListeners:
  guessSubmitButton.addEventListener('click', checkGuess);
//if they click submit button, run the checkGuess()
  //document eventListeners:
  window.addEventListener('keydown', enterKey);
//has to be keydown!!!!!!! 
//https://www.kirupa.com/html5/keyboard_events_in_javascript.htm
  function enterKey(e){
    e.preventDefault();
      if (e.which === 13) { 
    // if they pressed a key...which one? 13 is enter key
          checkGuess();//fire the checkGuess function
         //console.log("enter key fired checkguess");
        }
  }


  function checkGuess(){
    var userGuess = Number(guessField.innerText);
//captures what ever they guess into userGuess, makes sure it's a number
    if (guessCount === 1){
/*is it their first guess? this is true at the point 
they click it first time*/
      guesses.textContent = 'Guesses: ';
//this text only gets written once.
    }
    guesses.textContent += userGuess + ', ';
//add latest userGuess to list of guesses.
    //console.log('non enter key fired checkguess')
    if (userGuess === randomNumber) {//they nailed it!
      lastResult.textContent = 'Correct!';
      lastResult.style.backgroundColor = 'green';
      for(let i = 0; i < hangman.length; i++ ) {//loops 10 times
        hangman[i].style.visibility = "hidden";//hides each
      }
      skyBlue.style.visibility = 'visible';
      happy.style.visibility = 'visible';

      happy.classList.add('happyBounce');
      //lowOrHi.textContent = '';//empty out Previous 'you are too low!'
      setGameOver();
    } else if (guessCount === 11) {
//they played it 11 times...we counted each time
      lastResult.textContent = 'GAME OVER! ' + guessCount + ' guesses.' ;
      man.classList.add('manBounce');
      guessesRemaining.textContent = '0 guesses left.';
      setGameOver();
    } else {//****************** they guessed wrong
      lastResult.textContent = 'Wrong!';
      lastResult.style.backgroundColor = 'red';
      lowOrHi.style.backgroundColor = 'rgb(2, 120, 157)';
      if (userGuess < randomNumber) {//guess was low

        lowOrHi.textContent = 'Too Low';

      } else if (userGuess > randomNumber){// guess was high


        lowOrHi.textContent = 'Too High';
      }
      /*
console.log("guessCount during game 
before incrementing = " + (guessCount));
     */
      guessesRemainingCount--;//incrementing down remaining guesses
      guessesRemaining.textContent =  'Guesses left: ' + guessesRemainingCount;
      guessCount++;//incrementing up the times they guessed

      hangman[guessCount-2].style.visibility = 'visible';
//turns on hangman artwork parts incrementally
      //console.log(hangman[guessCount-2]);
      guessField.innerHTML = '';
      //guessField.focus();//returns blinking cursor to guessField
    }//end if(userGuess ===)
  }


  console.log(randomNumber);


  function setGameOver(){
//gray out functionality so they can't keep playing
    //guessSubmitButton.removeEventListener('click', checkGuess);
    guessField.style.visibility = 'hidden';
    document.querySelector('.guessSubmitButton a').style.visibility = 'hidden';
    //guessField.disabled = true;
    /******** below may not workvc!******/
//console.log ('set game over is running');
    //guessSubmit.disabled = true;
    resetButton = document.createElement('button');
    resetButton.textContent = 'Start new game';
    //resetButton.classList.add('guessSubmit');
    document.querySelector('.guessSubmitButton').appendChild(resetButton);
    resetButton.classList.add('playAgain');
    resetButton.addEventListener('click', resetGame);
  }

  function resetGame(){//put game back to starting condition
    guessCount = 1;
    guessesRemainingCount = 11;
    if(man.classList.contains('manBounce')){
/*
check to see if man is bouncing, if so  remove the manBounce 
class.Note, he may not be bouncing if they won before 10 guesses
*/
      man.classList.remove('manBounce');
    }
    if(happy.classList.contains('happyBounce')){
      happy.classList.remove('happyBounce');
    }

    for(let i = 0; i < hangman.length; i++ ) {//loops 10 times
      hangman[i].style.visibility = 'hidden';//hides each
    }
    happy.style.visibility = 'hidden';
    var resetParas = document.querySelectorAll('.resultParas p');
//creates an array from the 3 <p>s

    for (var i = 0; i < resetParas.length ; i++){
//for f3 loops, go thru th p's [i] and empty them
      resetParas[i].textContent = '';
    }

    resetButton.parentNode.removeChild(resetButton);
//son tells the parent to remove the son, himself
    skyBlue.style.visibility = 'hidden';
    guessField.style.visibility = 'visible';
      guessSubmitButton.style.visibility = 'visible';
    //guessSubmitButton.addEventListener('click', checkGuess);
    guessField.innerHTML = '';
    //guessField.focus();
    lowOrHi.style.backgroundColor = 'rgba(116, 118, 119, 0)';
//make it invisible
    lastResult.style.backgroundColor = 'rgba(255, 255, 255, 0)';
    randomNumber = Math.floor(Math.random() * 100) +1;
    console.log('New reset random number: ' + randomNumber);
  }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

document.querySelector('.dropmenu a').addEventListener('click', toggleMenu);

function toggleMenu(){

//e.preventDefault;//fixes safari ios bug

document.querySelector('.leveltwo').classList.toggle('fold');

//document.querySelector('.boxMinus').style.visibility = 'visible';

document.querySelector('.boxMinus').classList.toggle('boxHide');

document.querySelector('.boxPlus').classList.toggle('boxHide');

}

//create variables from svg id elements

var skyBlue = document.getElementById('skyBlue');

var niteSky = document.getElementById('niteSky');

var base1 = document.getElementById('base1');

var base2 = document.getElementById('base2');

var base3 = document.getElementById('base3');

var base4 = document.getElementById('base4');

var base5 = document.getElementById('base5');//mans face

var base6 = document.getElementById('base6');//mans spine

var base7 = document.getElementById('base7');

var base8 = document.getElementById('base8');

var base9 = document.getElementById('base9');

var base10 = document.getElementById('base10');

var man = document.getElementById('man');

//group of the entire hanging man

var happy = document.getElementById('happy');// hidden group

make an array from the svg parts variables so they

can be called numerically via hangman[0], hangman[1], etc

hangman[0] = base1 ; hangman[9] = base10 ; hangman.length = 10

var hangman = [

base1, base2, base3, base4, base5, base6, base7, base8, base9, base10

];

//console.log(hangman);

/*******************

below = create variables from each keyPadButton

*****************/

var k1 = document.getElementById('k1');

var k2 = document.getElementById('k2');

var k3 = document.getElementById('k3');

var k4 = document.getElementById('k4');

var k5 = document.getElementById('k5');

var k6 = document.getElementById('k6');

var k7 = document.getElementById('k7');

var k8 = document.getElementById('k8');

var k9 = document.getElementById('k9');

var k0 = document.getElementById('k0');

var backUp = document.getElementById('backUp');

/***** begin number pad function ******/

var keyPad = [k1, k2, k3, k4, k5, k6, k7, k8, k9, k0]

//make keyPad array from keyPad buttons

/*************

create eventListeners for each keyPad button that fire

the keyPadPress function

**************/

for (var kp = 0; kp < keyPad.length; kp++){

keyPad[kp].addEventListener('click', keyPadPress);

}

/**************

capture number on button and put it into guessField

******/

function keyPadPress(mw) {

//console.log('button pressed');

mw.preventDefault();

guessField.innerHTML += this.textContent;

permits multiple digit numbers using = what it what plus what was added

var guessFieldLength = guessField.innerHTML.length;

console.log('total characters in guess field is: ' + guessFieldLength);

}

backUp.addEventListener('click', backUpCursor);

function backUpCursor(bw){

//console.log ('backup cursor function fired');tag.innerText.length

bw.preventDefault();

let totalNumbers = guessField.innerText.length;

console.log('length of guess field during backup is ' + totalNumbers);

guessField.innerHTML = guessField.innerHTML.substring(0,totalNumbers-1);

//strips off last number

}

/**********end number pad function***********/

var randomNumber = Math.floor(Math.random() * 100) +1;

var guesses = document.querySelector('.guesses');

var guessesRemaining = document.querySelector('.guessesRemaining');

var lastResult = document.querySelector('.lastResult');

var lowOrHi = document.querySelector('.lowOrHi');

var theArrowUp= document.querySelector('.theArrowUp');

var theArrowDown= document.querySelector('.theArrowDown');

var guessSubmitButton = document.querySelector('#guessSubmitButton');

//the submit button

//var guessField = document.querySelector('.guessField');

//the div where they enter guesses

//console.log(hangman[9]);//reads base10

var guessCount = 1;

//console.log("guessCount before game is = " + guessCount);

var resetButton;//creates empty variable

var guessesRemainingCount = 11;

//button eventListeners:

guessSubmitButton.addEventListener('click', checkGuess);

//if they click submit button, run the checkGuess()

//document eventListeners:

window.addEventListener('keydown', enterKey);

//has to be keydown!!!!!!!

//https://www.kirupa.com/html5/keyboard_events_in_javascript.htm

function enterKey(e){

e.preventDefault();

if (e.which === 13) {

// if they pressed a key...which one? 13 is enter key

checkGuess();//fire the checkGuess function

//console.log("enter key fired checkguess");

}

function checkGuess(){

var userGuess = Number(guessField.innerText);

//captures what ever they guess into userGuess, makes sure it's a number

if (guessCount === 1){

/*is it their first guess? this is true at the point

they click it first time*/

guesses.textContent = 'Guesses: ';

//this text only gets written once.

}

guesses.textContent += userGuess + ', ';

//add latest userGuess to list of guesses.

//console.log('non enter key fired checkguess')

if (userGuess === randomNumber) {//they nailed it!

lastResult.textContent = 'Correct!';

lastResult.style.backgroundColor = 'green';

for(let i = 0; i < hangman.length; i++ ) {//loops 10 times

hangman[i].style.visibility = "hidden";//hides each

}

skyBlue.style.visibility = 'visible';

happy.style.visibility = 'visible';

happy.classList.add('happyBounce');

//lowOrHi.textContent = '';//empty out Previous 'you are too low!'

setGameOver();

} else if (guessCount === 11) {

//they played it 11 times...we counted each time

lastResult.textContent = 'GAME OVER! ' + guessCount + ' guesses.' ;

man.classList.add('manBounce');

guessesRemaining.textContent = '0 guesses left.';

setGameOver();

} else {//****************** they guessed wrong

lastResult.textContent = 'Wrong!';

lastResult.style.backgroundColor = 'red';

lowOrHi.style.backgroundColor = 'rgb(2, 120, 157)';

if (userGuess < randomNumber) {//guess was low

lowOrHi.textContent = 'Too Low';

} else if (userGuess > randomNumber){// guess was high

lowOrHi.textContent = 'Too High';

}

console.log("guessCount during game

before incrementing = " + (guessCount));

guessesRemainingCount--;//incrementing down remaining guesses

guessesRemaining.textContent = 'Guesses left: ' + guessesRemainingCount;

guessCount++;//incrementing up the times they guessed

hangman[guessCount-2].style.visibility = 'visible';

//turns on hangman artwork parts incrementally

//console.log(hangman[guessCount-2]);

guessField.innerHTML = '';

//guessField.focus();//returns blinking cursor to guessField

}//end if(userGuess ===)

}

console.log(randomNumber);

function setGameOver(){

//gray out functionality so they can't keep playing

//guessSubmitButton.removeEventListener('click', checkGuess);

guessField.style.visibility = 'hidden';

document.querySelector('.guessSubmitButton a').style.visibility = 'hidden';

//guessField.disabled = true;

/******** below may not workvc!******/

//console.log ('set game over is running');

//guessSubmit.disabled = true;

resetButton = document.createElement('button');

resetButton.textContent = 'Start new game';

//resetButton.classList.add('guessSubmit');

document.querySelector('.guessSubmitButton').appendChild(resetButton);

resetButton.classList.add('playAgain');

resetButton.addEventListener('click', resetGame);

}

function resetGame(){//put game back to starting condition

guessCount = 1;

guessesRemainingCount = 11;

if(man.classList.contains('manBounce')){

check to see if man is bouncing, if so remove the manBounce

class.Note, he may not be bouncing if they won before 10 guesses

man.classList.remove('manBounce');

}

if(happy.classList.contains('happyBounce')){

happy.classList.remove('happyBounce');

}

for(let i = 0; i < hangman.length; i++ ) {//loops 10 times

hangman[i].style.visibility = 'hidden';//hides each

}

happy.style.visibility = 'hidden';

var resetParas = document.querySelectorAll('.resultParas p');

//creates an array from the 3 <p>s

for (var i = 0; i < resetParas.length ; i++){

//for f3 loops, go thru th p's [i] and empty them

resetParas[i].textContent = '';

}

resetButton.parentNode.removeChild(resetButton);

//son tells the parent to remove the son, himself

skyBlue.style.visibility = 'hidden';

guessField.style.visibility = 'visible';

guessSubmitButton.style.visibility = 'visible';

//guessSubmitButton.addEventListener('click', checkGuess);

guessField.innerHTML = '';

//guessField.focus();

lowOrHi.style.backgroundColor = 'rgba(116, 118, 119, 0)';

//make it invisible

lastResult.style.backgroundColor = 'rgba(255, 255, 255, 0)';

randomNumber = Math.floor(Math.random() * 100) +1;

console.log('New reset random number: ' + randomNumber);

}

« Great resource for learning JavaScript | Programming in JavaScript »

Webster Art

Creative

Made a duet and a game

Leave a Reply Cancel reply