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!



All contents Copyright ©2017 Chris DeLeon.

Site production by Ryan Burrell.