Start Programming Today: Free Tools and No Experience Required (40 min.)

Aug 31, 2012

This is a bit of an experiment – right around the time I was starting to get the swing of those audio-only podcast-style entries, I decided to try another video tutorial like the one I made for Unity. However this time I’m focusing purely on introductory programming, which requires a somewhat different approach than the Unity video which was lots of GUI with only touch-and-go coding.

After much experimentation, I settled on and tried a different process for preparing this video. While it perhaps came out a bit too fast in places, I think that overall it will be useful, and of course readers are always welcome to pause or rewind it as needed. I’ll have a little time to reflect on how this one came out before I move on to the next Processing entry (I’ll be doing a follow up with arrays, classes, function arguments, keyboard controls, and some other handy intro material), and I will likely prepare my PHP tutorial in a somewhat similar fashion.

Here are the little example images I use partway through (download both zipped), though should you choose to make your own that will work just fine too:

Lastly: I want to encourage digressions and experimentation! If, while following along, you ever begin to wonder, “wait, what would happen if…” or “I’ll bet I could find a way to make it do this other thing instead…” then by all means go for it. You’re not being graded, you’re not on a schedule, and you have both the video and full source below to help you get back on track if you dislike the tangent you begin to follow. Much learning about programming happens through experimentation. I realize that’s not everyone’s style though, and so I made this video to provide a tour through just enough functionality to get people going with some code ready to be tweaked or grown into other things:

For reference, here’s the complete source code covered in this entry. But note that there’s a huge difference in learning between following along with the video (good) vs. just reading through this code then copy/pasting it into Processing (bad)! There’s value in the order things get written in, and how.

PImage robotPic;
PImage bgPic;

int healthVal;
float roboTopLeft_X;
float roboTopLeft_Y;
int moveDir;

void resetGame() {
  healthVal = 10;
  roboTopLeft_X = 50.0;
  roboTopLeft_Y = 50.0;
  moveDir = 0;
}

void setup() { // called once when program starts
  size(640,480);
  
  robotPic = loadImage("robot.png");
  bgPic = loadImage("background.png");
  resetGame();
}

void crosshairAtMouse() {
  stroke(255,0,0);
  noFill(); // avoids filling the circle/ellipse
  line(mouseX-30,mouseY,mouseX+30,mouseY);
  line(mouseX,mouseY-30,mouseX,mouseY+30);
  ellipse(mouseX,mouseY,40,40);
}

void redrawBackground() {
  for(int xPos = 0; xPos < width; xPos += bgPic.width) {
    for(int yPos = 0; yPos < height; yPos += bgPic.height) {
      image(bgPic,xPos,yPos);
    }
  }
}

void showHealth() {
  textAlign(LEFT);
  text("Health: " + healthVal,4,13);
}

Boolean gameWonByPlayer() {
  return (healthVal <= 0);
}

Boolean gameWonByRobot() {
  return (roboTopLeft_X+robotPic.width < 0 ||
     roboTopLeft_Y+robotPic.height < 0 ||
     roboTopLeft_X > width ||
     roboTopLeft_Y > height);
}

void mouseReleased() {
  if(gameWonByPlayer() || gameWonByRobot()) {
    resetGame();
    return;
  }
  
  if(mouseX > roboTopLeft_X && 
     mouseY > roboTopLeft_Y &&
     mouseX < roboTopLeft_X+robotPic.width && 
     mouseY < roboTopLeft_Y+robotPic.height) {
       healthVal--;
       moveDir++;
       if(moveDir > 3) {
         moveDir = 0;
       }
  }
}

void drawAndMoveRobot() {
  if(gameWonByPlayer()) {
    return;
  }
  
  float robotMoveSpeed = 0.3;
  
  robotMoveSpeed += (10-healthVal)*0.5;
  
  switch(moveDir) {
    case 0:
      roboTopLeft_X += robotMoveSpeed;
      break;
    case 1:
      roboTopLeft_Y += robotMoveSpeed;
      break;
    case 2:
      roboTopLeft_X -= robotMoveSpeed;
      break;
    case 3:
      roboTopLeft_Y -= robotMoveSpeed;
      break;
  }
  
  image(robotPic,roboTopLeft_X,roboTopLeft_Y);
}

void draw() { // called every frame
  redrawBackground();
  
  drawAndMoveRobot();
  crosshairAtMouse();
  showHealth();
  
  if( gameWonByRobot() ) {
    textAlign(CENTER);
    text("The robot escaped ):",width/2,height/2);
    text("Click to play again",width/2,height/2+15);
  }
  if( gameWonByPlayer() ) {
    textAlign(CENTER);
    text("You stopped the robot! (:",width/2,height/2);
    text("Click to play again",width/2,height/2+15);
  }
  // println(mouseX + "," + mouseY);
}

For more Processing code, check out:

Easier: Processing for Learning Programming – Why Processing is a good place to start when beginning to explore programming

Harder: Platformer Game Source in Processing – Simple platformer, showing tile-based collision detection, simple basic character animation, coin collection, and audio

Advanced: The Making of A-10 Thunderbolt II – Side view plane game, with dropping bombs on tanks and real-time destroyable terrain



Learn and practice team game development with Gamkedo Club.
Membership worldwide. Professional support. Proven process.




Subscribe by e-mail to receive weekly updates with Gamkedo.Community interviews and YouTube training videos for game developers!



3 Comments

  1. […] I recently put together a simple AI example in Processing. If you haven’t heard of Processing, and would like a quick intro to it, I’ve also made a video tutorial on getting started with Processing. […]

  2. Terry Morgan says:

    Hi Chris,
    Thanks for your programming help, few tutorials start at ‘the beginning
    of the movie’. I went through the video 1st (please zoom out so I can
    see more code, where it goes, etc.) then copy paste, got this error

    }

    void redrawBackground() {
    for(int xPos = 0; xPos width || //gives a syntax error line 33
    roboTopLeft_Y > height);
    }

    • Chris DeLeon says:

      Yikes! Good catch, and my apologies for not getting around to fixing this sooner.

      In the source code as it appears in the blog I forgot to replace all less than and greater than signs with their HTML codes, so they were showing up as a blank space (being interpreted as part of an HTML tag) instead of as the correct symbols needed in the code. I’ve fixed these spots in the entry, and I believe it should work better now. Thanks for the heads up!

Leave a comment

Comments Form
  • Your email will not be used for any purpose other than to update you in replies to your comments. Your website address will be shown as a link from your name with your comment. Your profile photo is auto-magically provided by Gravatar.

All contents Copyright ©2017 Chris DeLeon.

Site production by Ryan Burrell.