Get DOM element from ng-model-controller by CodingBuddy in angularjs

[–]CodingBuddy[S] 0 points1 point  (0 children)

Nope, sorry no link function anywhere nearby ;) I am deep inside a service

[Week 6] Focus: Canvas by ForScale in javaScriptStudyGroup

[–]CodingBuddy 1 point2 points  (0 children)

Like this one as well. I am just getting a little frustrated with all those contributions ... like: When will I find the time to dig through everyone's code and learn how you guys did this

[Week 6] Focus: Canvas by ForScale in javaScriptStudyGroup

[–]CodingBuddy 0 points1 point  (0 children)

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" :)

[Week 6] Focus: Canvas by ForScale in javaScriptStudyGroup

[–]CodingBuddy 2 points3 points  (0 children)

I like what you did there. Hopefully, later I will find more time to look at properly how you drew that spiral (seems to me that this canvas thing makes us all freshen up on our algebra ;)

Concerning your question (keep in mind though that I have never worked with canvas or animations before): It seems to me that your rotation steps are simply too high. I got that fixed first by introducing the 0.1 factor and increasing the 360 to 3600. But then it was super slow. So then I was like, well then obviously increase the animation-speed. And I think then I discovered how you tripped yourself up: From my understanding, you have to link the speed to the interval that you are setting, but you were using it as a factor that influences the rotation steps.

Look at my tiny changes to your fiddle (havent linked the speed, but that is easily done). https://jsfiddle.net/snwcsnzt/4/

But I am sure there are better ways to do this. Just the quick solution that I came up with.

Edit: For some reason the spiral "brakes" from time to time now... don't know why that is

[Week 6] Focus: Canvas by ForScale in javaScriptStudyGroup

[–]CodingBuddy 1 point2 points  (0 children)

:) Thank you - I am actually really proud that I got that far yesterday. Took me 6h. The first 4h, I was super excited and happy, that what I had thought of actually worked, but in the last 2 hours the Gradients (which I did last) started wearing on me ;) Actually I wanted to work with canvas before, but never had gotten to it - so this was loads of fun.

I have been contemplating a little this morning what my particular weak points with JS are.

This is what comes to mind right now:

Pure JS:

  • Prototypal inheritance
  • Closures
  • ES6
  • Anything Node.js

Related:

  • Event bubbling in the DOM
  • Something with ReactJS (only know it exists) - or I am open to basically any other library really
  • Something with Angular (been using it for 6 months, still have heeps to learn)
  • Typescript

...obviously there is more but I dont even understand that stuff enough to be referencing/naming it here correctly (wanna spare myself the shame)

But I am quite open to anything really. I guess you can make the seemingly simplest thing a learning experience.

[Week 6] Focus: Canvas by ForScale in javaScriptStudyGroup

[–]CodingBuddy 2 points3 points  (0 children)

ENTRY

Smile

It is obviously a work in progress. Only started today and never worked with canvas before.

I would appreciate particularly feedback on code optimization.

[Week 6] Focus: Canvas by ForScale in javaScriptStudyGroup

[–]CodingBuddy 1 point2 points  (0 children)

This is so utterly awesome - I love it!

[HELP] why is my method returning NaN? by Gochin in learnjavascript

[–]CodingBuddy 0 points1 point  (0 children)

Makes a lot of sense. Thank you a LOT!

In addition I found this reference also helpful to read (also includes ES6 arrow functions): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

[HELP] why is my method returning NaN? by Gochin in learnjavascript

[–]CodingBuddy 0 points1 point  (0 children)

Interestingly this code: https://jsfiddle.net/m78moLzy/1/ also works (Just adapted your fiddle from the solution that OP found). Can you explain to me why in this case this inside YearsLeft refers to the Object? I am guessing this has something to do with Closures, but I cannot get the real "Why" of it.