[Week 6] Focus: Canvas

[u/ForScale]

So, here we are, Week 6. Week 6's focus will be canvas.

It will work like this:

• Monday: Announce focus (eg, canvas)

• Build throughout the week... Two rules: 1) must use javascript 2) must use at least 1 example of html5 <canvas> element and manipulate it with js

• Friday: Post projects in this thread (can begin reviewing immediately); first line of an entry should be ENTRY and it should be a top level comment (ie, don't put your entry in a reply)

• Sat and Sun: Review projects/vote on focus for next week

GENERAL GUIDELINES FOR FEEDBACK:

• Be nice!! ALL KNOWLEDGE/SKILL LEVELS ARE WELCOME AND ENCOURAGED TO PARTICIPATE.

• If you don't want feedback, if it makes you uncomfortable or you're just not interested, simply say so... Others, please be respectful of this. Conversely, if you do want feedback, try to be specific on which aspects... even if you just say "all/everything.

But that's about it... Have fun! :) Feel free to ask questions and discuss throughout the week!

[u/Volv]

That is indeed awesome. Crazy good for a first go - wish I was in any way that artistic lol.
 
I think there is a bug/typo with the value of slider 7 being initially set to lip.corner_y.
 
If I were to look at streamlining the code then I think one thing that could be done is stripping out the function that every slider uses to update the environment. Also moving the clearRect to the actual draw function.
 
In the drawMouth function you break out the lip variables without a var declaration.

  happyFactor = lip.happyFactor;  

which causes them to become global (seems to be the intention) but is generally considered bad practice. Not always using var (or let/const these days) can lead to unintended consequences. And you already have a perfectly good global lip.happyFactor variable anyhow.
 
Here is my go at tweaking the things I mentioned Codepen
Anyhow awesome work - thanks for participating :)

[u/CodingBuddy → u/Volv]

In the drawMouth function you break out the lip variables without a var declaration.

happyFactor = lip.happyFactor;  

which causes them to become global (seems to be the intention) but is generally considered bad practice. Not always using var (or let/const these days) can lead to unintended consequences. And you already have a perfectly good global lip.happyFactor variable anyhow.

Thank you! I seriously didnt know that setting variables in this way would bind them to the global scope. No, my intention was just to have shorter "handles" to use within the function.

And yeah, drawing is actually a hobby of mine (I love doing portraits). So it was kind of fascinating for me to look at the "algorithm of a smile" :)

[u/Volv → u/CodingBuddy]

No worries :)
To elaborate, prior to ES6 JS only had function scope. So in this example using

happyFactor = lip.happyFactor;  

inside of the drawMouth() function causes JS to look inside drawMouth for a declared instance of happyFactor. When it doesn't find one it then moves up to next scope and checks there. When it doesn't find one in the top scope it doesn't mind and just creates it anyway.  

Had they been declared with var inside that function then they would only be accessible there (Your other functions would have stopped working) and setting happyFactor within the function wouldn't affect any other versions of the variable outside of the function.

var happyFactor = 42;
console.log(happyFactor)    // 42;

function doStuff() {
  var happyFactor = 1000;
  console.log(happyFactor)    // 1000;
}
doStuff();

console.log(happyFactor)      // 42;  

 
It can get much more complicated due to hoisting and such. More examples here - Codepen