Portfolios are important

Attending the Game Development conference for students at Hull University gave me a little bit more of an idea as to what companies are looking for in perspective graduates (and more importantly interns in my case) that they are thinking of hiring. The thing that came across to me as the most important is the idea of an up to date portfolio. If you haven't come across one of these before, a portfolio is basically a showcase of everything that you've done, presented in a manner that is pleasing to the eye.

In my case my portfolio is my website, so I've just been spending half an hour or so updating it to reflect my current projects and accounts (I've opened an account on Codepen). You should do this too, and if you haven't got a portfolio set up, you can create one for free with Github Pages. If you're feeling particularly adventurous, you could also create a blog using Jekyll - Github pages supports this too, and it lets you create blog posts as markdown documents (like I do for this blog, although I wrote my blog engine myself), and it automatically transforms them into a blog post on your website for you. You can even use the Github web interface to do everything here!

If you comment below or get in touch with me in some other manner, I might feature a selection here on this blog.

Drawing (rotating) shapes

After writing the smooth line class last week I wanted to write another one, and I decided to write a class to aid the drawing regular shapes. While writing the library I found myself with some rather nice looking rotating shapes that I thought would make a good blog post here.

Before I go any further, here's the demo:

See the Pen Rotating shapes by Starbeamrainbowlabs (@sbrl) on CodePen.

The background is a just a set of fancy css3 radial and linear gradients layered on top of one another. The interesting part is the calculating of the points in each shape - let me explain with a hexagon.

In the above, the hexagon I am drawing is shown in red, and a circle in green. In order to work out the co-ordinates for each corner (or vertex) of the hexagon, we can walk around a circle and note down our location at regular intervals (shown by the blue lines). I learnt this trick from this stack overflow answer. They can explain it much better than I probably could:

Let's assume you want to draw an N-sided polygon of radius r, centred at (0,0). Then the n vertices are given by:

x[n] = r * cos(2*pi*n/N)
y[n] = r * sin(2*pi*n/N)

where 0 <= n < N. Note that cos and sin here are working in radians, not degrees (this is pretty common in most programming languages).

If you want a different centre, then just add the coordinates of the centre point to each (x[n], y[n]). If you want a different orientation, you just need to add a constant angle. So the general form is:

x[n] = r * cos(2*pi*n/N + theta) + x_centre
y[n] = r * sin(2*pi*n/N + theta) + y_centre

By Oliver Charlesworth. Source: Stack Overflow

Anyway, here's the code I came up with:

I can't think of anything else I wanted to say, so I think I'll end this post here. Please comment down below if you have anything you want to say :)

Easy Smooth Lines with Bezier Curves

A while ago I wrote a vector class and a bezier curve class for my 2D graphics University ACW (Assessed CourseWork). After packaging them up and posting them here, I thought it a good idea to take a step further and write a smooth line class too, to start building up a library of implementations of various different algorithms.

While I was searching for a good alternative to jsbin (it doesn't let me use tabs instead of spaces), I came across Codepen again, and finally decided to take a look. Apparently you can do quite a bit with a free account, so I signed up and posted about new my account on this blog.

Since the quality of the content on Codepen is considerably high, and you can see who has done what, I've decided to put more time into the visual effects of the things that I put up on there.

Anyway, here's a demo of my SmoothLine class in action:

See the Pen Smooth Lines by Starbeamrainbowlabs (@sbrl) on CodePen.

Click to add a point. A line will show up when you have 3 points. Here's the class itself:

Note that it depends on my earlier Vector and BezierCurve classes (links above).

The code is actually really simple. You create a new instance of the SmoothLine class, add some Vector points with the add() method (it takes both a single vector and an array of vectors), and then call the line() method when you are reading to add the SmoothLine to your drawing context path.

Here's some example code:

// Creation code
var smoothLine = new SmoothLine();
smoothline.add(new Vector(138, 330));
this.smoothLine.add([
    new Vector(161, 10),
    new Vector(561, 111),
    new Vector(890, 254),
    new Vector(1088, 254),
    new Vector(1152, 130),
    new Vector(1186, 55),
    new Vector(1230, 21)
]);

// Rendering code
context.beginPath();
// Do stuff here
smoothline.line(context, 16);
// Do stuff here
context.stroke();

Over the next few months if I can possibly manage it I want to implement a bunch of other useful algorithms in order to build up a library of code that I can just drop into a project and use. Suggestions for the next algorithm are welcome!

Codepen

Hello!

This is a short announcement post to tell you that I've created an account on Codepen. Codepen is a site that lets you experiment with HTML, CSS and Javascript (or their compiled variants) and share your creations with the world.

I've already created something on there - I'll be blogging about that soon.

Right now though I'm rather ill though, so please don't be disappointed if I don't post right away (although I'll certainly try to get it out asap).

Here's a link to my Codepen profile page.

Stacks of Assembly

This morning, before I got to continuing my revision for my upcoming Systems Analysis exam I thought that I would write another quick blog post. This time (again under request), I'm posting about the stack in assembly. I thought that I'd make a short animated gif in order to demonstrate it more clearly, but I under estimate the amount of time that it took to make and ended up working on it all morning...!

Anyway, here's the animated gif that I created. I also uploaded it to youtube if you'd prefer to watch it there instead.

I omitted the base pointer in order to simplify the animation. I also omitted many of the setup and cleanup commands, because including them would have taken literally all day, and they would also have made the stack really large and hard to read.

Here's the code that was demonstrated in the animation:

#include <iostream>
using namespace std;

void swap(int& a, int& b)
{
    int temp = a;
    a = b;
    b = temp;
}

void main(int, char**) {
    int number1 = 10;
    int number2 = 20;
    cout << "number1=" << number1 << ", number2=" << number2 << endl;

    // The animation starts here...
    swap(number1, number2);
    // ...and ends here.

    cout << "number1=" << number1 << ", b=" << number2 << endl;
    system("PAUSE");
}

If you spot any mistakes, please let me know! I'll fix them as soon as I can.

This animation was made thanks to the following software:

• Ascidia
• Gifsicle
• Atom
• column-select package for atom

If you're interested, you can find the source files for the animation here (Yes, there's a mistake in frame 5 but it didn't make it through to the final product).

Happy New Year 2016!

Welcome to 2016!

I wanted to write this post to wish you a very happy new year! I also wanted to thank you for being a part of the first full calendar year for which this website has been live. Out of curiosity, I counted the number of posts I've made on here this year, and the total came to 104, which works out to roughly 1 post every 3½ days.

Just a few of the highlights of 2015 include Rob Miles' Coding Conundrums series, continued website improvements and better spam defences, and the EcmaScript 6: Features and Learning Prolog series.

In this new year I'll be continuing my learning Prolog series, and probably posting a bit about networking and 3D stuff, since I'll be taking a module in each of these areas.

Merry Christmas 2015!

Hello!

This is just a small short post to wish you all a very happy and restful Christmas. I was going to announce a new demo, but I underestimated the amount of time it would take to complete and I don't feel too well :( Rest assured though that I will finish it and have it up soon.

CSVWriter - Easy CSV Generation

Recently I've done a group project at University. As part of this, I wrote a C♯ class specially to make generating CSV files easy. It didn't get used in the end, but I've still kept it since it sounds like the kind of thing that would be rather useful. I also decided to share it here for anyone else who needs to do this kind of thing.

You can find it on GitHub gist: CSVWriter.cs

I have written tests for it in a Visual Studio Unit Testing project, but I can't really fgure out how to include them neatly in a gist.

Here's an example of how you would use it:

CSVWriter c = new CSVWriter("file.csv");
c.WriteHeader(new string[]{ "Number", "Data" });
for(int i = 0; i < 100; i++)
{
    c.WriteRecord(new string[]{ i.ToString(), "data" });
}
c.Close();

The whole thing is fully commented with intellisense comments, so they should help if you get a bit stuck. If you can't figure out how to use it, simply post a comment down below and I'll try and help you as best I can.

Before I go, I want to mention that the animated gif I used at the top of this post is from @liabru's Gears. All credit goes to him for making them - I just recorded the animated gif :)

Learning Prolog: End of Semester 1

It's nearly Christmas (I should have a small Christmas surprise ready for you soon!), which also means that we've reached the end of the first series of Prolog labs. I'll continue posting this series once the labs start up again in semester 2, which starts on the 2nd of February.

The primary reason for writing this post, however, is to provide one central list of posts in this series so far.

• Prolog: First Impressions (or a basic tutorial on the first lab session)
• Learning Prolog: Lab Session #2
• Learning Prolog: Lab Session #3
• Learning Prolog: Lab Session #4 - Reading and Writing
• Learning Prolog: Lab Session #5 - Backtracking
• Learning Prolog: Lab Session #6 - More Looping
• Learning Prolog: Lab #7
• Learning Prolog: Lab #8 - findall/3
• Learning Prolog: Lab #9
• Learning Prolog: Lab #10

A first look a fractals - Shapes

Recently I took a little look at fractals, and in order to get my head around the recursive nature of drawing fractals, I wrote a small demo that draws a fractal like thing with shapes. It starts with a triangle, and draws a square at each corner. Then at the corner of each square, it draws a pentagon, and so the pattern continues. I thought it looked interesting, so I decided to share it here.

You can find it here: fractal shapes

You can also find it under the labs section of my homepage.

If anyone is interested in a more detailed explanation of how it works, I'd be happy to write a blog post about it. Comment below if you would like one.