Code challenge Week #01

Posted by adrian on April 15th, 2018

OK, deep breath.

And relax.

I need to code more, it’s just like exercising a muscle but I always seem to pick large projects and even though I am quite good at breaking projects down into manageable chunks I never seem to get things finished.

So to fix this I decided I need to produce some code, any code, every week just to force myself to keep practicing. I was inspired by Daniel Shiffman who makes the YouTube channel The Coding Train he has a coding challenge where folks from his community suggest projects for him to do based around processing and p5.js. Both these tools allow you to create graphics really quickly and I have done some prototyping in Processing myself so thought it would be a good way to get started. So here are the initial conditions for my own challenge:

  • Create a working piece of code (or two if time allows) every week
  • Blog about the results and process
  • Stream some of the development on Twitch when possible
  • Pick projects where I’ll learn something new or reinforce an infrequently used skill
  • It can be any language

From watching a few episodes of The Coding Train I realised that I enjoy mathematics and displaying graphics and so I thought a nice simple project to get me going would be to create a web page using javascript which creates plots of the trigonometric functions sin, cos and tan. Secondary to that I’m not great at presentation in html and css so I thought I could make the second part of the code this week making the presentation better using Bootstrap and CSS.

So that’s the plan, how did it I get on you ask?

Well not as far as I’d hoped but I do have something to show for my efforts and what I personally think is a great start to the project.

You can see the results here or look at the code on Github.


I created a template to work from with basic html, js and css files. I then had a look back at some code I wrote before to understand how to set up a canvas and draw to it. I had to google around a bit as canvas does not support plotting a point, you just need to create a very short line.

What Worked

Creating the axes was fairly straightforward but then some confusion arose when I tried to plot the graphs because I was trying to use the canvas coordinates which do not have the origin in the middle but at the top left. The buttons were easy to set up and I added a quick bit of code to disable the button for the graph that was currently displayed. I got the code into github, sometimes I struggle with this because I don’t do it that often.

What Didn’t Work

My tan() plot is still not working, I’m not sure why this is but that’s a work in progress. I struggled with coordinates to start with. Canvas has the origin at the top left but I needed the origin in the middle of the canvas. I fixed this by adjusting my draw line function so that it took an additional parameter to choose the relevant origin. Of course, my mathematics failed me as I initially started plotting using the x coordinate but the sin and cos functions really only make sense plotted in divisions of pi so I had to create x and y scale factors, initially in the actual plot calculation but then later I separated them out so that the code was easy to read.

Going Forward

Next week I am going to  do two things:

  • Work on the presentation of the trig graphs using Bootstrap
  • Write a list of further small projects that I can work on in the same way

/* */