Friday, 17 February 2017

My Pong's so Wrong!


Ok, so here's my first little program that I've tried to do. I decided to choose something easy, with a lot of references to.

Obviously this isn't finished I still have to remove the sides, make the scoring if the ball goes past the paddles, and probably some kinda change in acceleration and/or angle depending on what speed the contact is... if that is how it works, I might have to research it.

Hopefully this works in blogger, I've been trying to find something where I can embed it in so that it would work right here. W and S controls the left paddle, O and L controls the right one. Its super simple I know, but gimmie a break I've just been coding for a month and a half!

Clicking on the </> will show you the code if your interested, how much is needed for such a simple game?


On [electronic] paper this seemed simple enough. Rectangle, Rectangle, Ball, Win. EZ.

However, this was not the case. Motion is quite annoying to deal with, but it was motion + interaction between the objects that killed me omg. Having to make the ball bounce of the paddles was a lot harder then I had realised. 

Basically I broke down my plan like this;
  1. Draw the stuff, paddles and ball.
  2. Make the stuff move, paddles up and down, ball bouncing around.
  3. Have a bunch of IF statements to what would happen when ball hit paddle.
  4. Scoring, spawn new balls, maybe some super old skool retro sounds, and other misc if I want.
  5. PONG!

No.3 took me absolutely ages in my noob mind. First of all, trying to define a bounce area was a huge pain the ass. This is because in order to make the program know that there is intersection happening, it needed a formula;

Middle of ball (radius) co ordinates + Middle of Paddle = Distance between both objects.

If Current distance, which is a constantly changing number because the ball is moving, is less then the above formula, then must be overlapping and therefore intersecting. 

But remember, the paddles are rectangles, so the middle of each of the sides are different, so you needed seperate if statements for x and y co ordinates. Lost? Yeah I was too for like 4 days lol. Basically if the ball came from below or top, the middle of the paddle is way shorter width-wise. So the distance might be way shorter then it should be.

The biggest reason for taking so long was that I used an OR statements instead of AND to check whether it was intersecting the rectangle or not.

Another funny thing was that I decided to have a go at Pong to take a break from the videos. However, the next set of videos was talking about vectors, forces, motion, oscillation etc etc. Basically a whole bunch of shit that would have been super useful, and watching it now I'm seeing how I could have done some things differently, ie better lol.


One of the biggest things I've learned through these videos, is that Object Orientated Programming (OOP) is really important and so I decided to make Pong that way which made it much harder. 

Basically OOP is a way of writing the code which makes it easier to read, but has a lot of groups and referrals back to them. So this allows the main page to have all the actions so to speak, and they refer to the objects which is on another page.

This also allows for easier customisation. For example if I wanted to change the size of the ball or paddles, I just change one number and everything else would still work without needing to go through the whole thing and change up whatever they effected.

If circle is written as "ellipse([draw at location x],[draw at location y],[radius of circle]);"

We can just go "x = 100, y = 100 r= 25", then "ellipse(x, y, r);"

This is a much longer way of writing it, but we can see that down the line its way better.

Hopefully this post isn't too dense. I kinda watch and learn this stuff with a lot of if going over my head, but enjoying the process and seeing the potential of how some ideas of mine can be implemented...

Zomg Math!

Monday, 6 February 2017

Hello, World

print("hello, world");

Usually anyone who starts out in learning coding will have this be one of the first things shown. It simply put the text "hello, world" on the screen.

I think that is quite a fitting start to my first programming blog post.

Since Jan 7th after coming back from a family holiday in Cornwall, I've been learning coding through this channel called "The Coding Train".  You can always tell the difference when there is a teacher who loves his subject and loves teaching it to others. Great teachers are so underrated and underappreciated these days, but yet they are the most influential people to shape kids' future career choices.

I started up with Processing, which is Java. Then moved onto Javascript. They are similar in many ways, but Java is local and Javascript is for the web. This allows programs to work within any browser, and therefore has a great potential for sharing and collaboration.

As a graduate in Interactive Design, one of my biggest annoyances during that period was the number of ideas I had that I couldn't implement. I really regret not learning coding earlier, as I see the potential for so many things now.

Potential paths I'm interested in is making desktop programs or apps, and now with what I have seen with Javascript, maybe some full blown games right within a browser! My niche is that I have a better understanding of good user interfaces, and that itself will improve a lot of programs tenfold. Too many times I have seen tons of apps and programs that are designed awfully, with no consideration for the interface, customisation or ease of use.

Right now there is so much to learn, its quite overwhelming actually, and starting out feels like you just copy the code and see it work. Understanding it fully will take time, but more importantly at the beginning it just gets you to embrace the code editor (Atom), and handling the errors you inevitably will get.

What got me started with finding The Coding Train was his Coding Challenges series, where he shows him making certain things through code. There isn't really that much stuff out there for people to see how things can actually be made so this is a great idea and basically got me hooked.

So in honour of that, I want to make my own Coding Challenges to test out what I've learned and see if I can do them. I'd like to record them to see how long it'll take but I might be embarrased at my complete noobishness about it. Here's the list I have so far;

1. Space Invaders
2. Pong
3. Uno
4. Blackjack
5. Poker
6. Snake
7. Hearthstone!?
8. Working with Poker Data, eg HEM
9. Snooker/Pool Game
10.Track and Field
11.Super Meat Boy
12.Heads Up AI
13.Live Infographic Related to Online Data
15.Lava Lamp
16.Chess/Chinese Chess
21.Tic Tac Toe
22.2D Overwatch

Its really important to have a portfolio of work to show for potential future employers. What I've learned in the creative industry, whether it be graphic design or coding or writing, is to keep and archive all work good or bad and record the process. Nothing advertises you better then showing your talent off through your work.

Of course, these are different in difficulty and I probably wont do them in this order but I'll keep things posted here.

Committing and playing poker has helped me learn to work in my own time. Try and do some learning and reviewing every day, watch a video, take notes. I've written down about 70 pages worth of this stuff, watched about 200 videos and some live streams, and enjoying the process.

There's nothing more frustrating then getting errors sometimes. This is especially annoying as I am copying down code a lot of the time, so more often then not its a missing semi colon or bracket. I wonder how many hours/days coders have spent in their careers looking for the tiniest mistype within their code.

Anyways til next time, I'll leave you with some circular beats! Need to figure a way of sharing this stuff but for now a link will have to do! :D