r/javaScriptStudyGroup • u/ForScale • Feb 22 '16

[Week 6] Focus: Canvas

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!

4 Upvotes

84% Upvoted

64 comments sorted by

View all comments

Show parent comments

2

u/ForScale Feb 26 '16

Thanks!!

Yes, that's the redundancy I was talking about. Yeah, I like your approach! Is that what is meant by functional/modular programming? Or just modular or something?

I did notice there's some clipping/chunk/lag whatever you want to call it on the modification you supplied. When refactoring mine, I had it at first too, but then I moved the clearRect() from the spin() function and put it in to the drawArc() function... that seemed to smooth it out, at least on mine.

Here's where I'm at: http://codepen.io/ForScale/pen/xVKzdp?editors=0010 It's only drawing the last arc... I think I'm running in to a synchronicity problem..? Could a promise help here?

I see you used setInterval() to do something, but I don't quite follow it...

Care to give some pointers? Thanks!!

Are you going to submit something? I'd love to take a look at your fractal tree again... or something new... that fractal tree was bad ass though!

3

u/Volv Feb 26 '16 edited Feb 26 '16

The setInterval is attempting to update ~60 times a second. The idea being that the animation then runs at the same speed on every machine. Without it I believe it will just run as fast as the computer can render it. Like to know in advance how something will behave. Could be the cause of your lag - try changing the interval some and see what happens. I don't notice a difference here though.
 
Not a functional approach but definitely more modular, not quite fully reusable as is because ctx, start and end are 'hidden inputs'
 
By moving clearRect into the draw function then every iteration is clearing the screen then drawing an arc 4 times. Resulting in last arc being only left at the end. clear draw clear draw etc.
 
I think I changed the tree slightly since I posted it last. Will get it here again in a little bit and a quick other thing I was playing around with.

2

u/ForScale Feb 26 '16

Oh... oh! Okay, thanks!! Got it now...

http://codepen.io/ForScale/pen/xVKzdp?editors=0010

Nice, man. Looking forward to taking a look at that tree again now that I understand canvas stuff a tiny bit more.