(1) Where to start....

I grew up first without computers at all, but at age ~11 or so, I got a Commodore 20 (VIC-20). Such a (simple) computer came with an instruction book and power supply. I did not initially get an games or any other software. So the "only" fun one had was to turn it on and try to enter some BASIC programs and learn to program.

Today, one is presented with a very different initial exposure to computers. Once I had kids myself, I wondered how they could be introduced to the fun of programming, without having a large initial step to take. Scratch of course is an easy and quite fun way to go, but when trying this with my kids and doing some programs myself, I found it sometimes hard and cumbersome to express programs graphically.

My older son got introduced in school recently to a new attempt to tech programming. The course/program is called You++. In the background it is using processing as the language. When I looked at what he was doing, I tried it myself and then I downloaded the stand-alone processing package. Now, that seemed both fun and easy to start with.

This blog is an attempt to show you how to start with processing, from scratch, and focus on the "fun" of it, with not a huge focus on knowing exactly on every detail of the language and functions it has and I use. Hope it is helpful to someone.

The video below is going to be an example that will be explained later. But it will be later. A few things needs to be explained first. Enjoy (hopefully)!

(19) Snake - a version of the classic game - written in processing

This is my quick version of the classic game "Snake". Instead of posting step-by-step, here is the full game as it was "finished". I think the worst part is that a poison (red triangle) can randomly be generated right infront of the snake. That's not fair! Enjoy!

The game and game play looks like this. Try to get a good score. It turns hard quickly.

https://youtu.be/cuMnNwavf0A

In this game the screen content is kept in a 50x50 grid similar to pixels. Each grid point contains a value that is then a shape and color.

int[][] grid = new int[50][50];
int dirX = 0;
int dirY = 0;
char dir = ' ';

int[] snakeX = {25, 25, 25, 25, 25};
int[] snakeY = {25, 24, 23, 22, 21};

String msg = "";
String msg2 = "";
int score = 0;
int hiScore = 0;
int gameOver = 0;

void setup() {
  int x, y;

  size(500, 550);

  for (x=0; x<50; x++)
    for (y=0; y<50; y++)
      grid[x][y] = 0;

  frameRate(5);
}


void draw() {

  int x, y, i;
  frameRate(5+score/4);

  background(255, 255, 255);
  stroke(0, 0, 0);
  text("Score:", 10, 525);
  text(score, 60, 525);
  text(msg, 100, 515);
  text(msg2, 100, 545);
  text("Hiscore:", 420, 525);
  text(hiScore, 470, 525);
  stroke(255, 0, 0);
  noFill();
  rect(0, 0, 499, 499);
  if (gameOver==1024) {
    text("Press spacebar to restart", 200, 200);
    if (dir==' ') {
      score = 0;
      msg = "";
      msg2 = "";
      for (x=0; x<50; x++)
        for (y=0; y<50; y++)
          grid[x][y] = 0;
      snakeX = new int[] {25, 25, 25, 25, 25};
      snakeY = new int[] {25, 24, 23, 22, 21};
      gameOver=0;
      dirX=0;
      dirY=0;
    }
  } else {
    // Draw grid 
    for (x=0; x<50; x++) {
      for (y=0; y<50; y++) {
        if (grid[x][y] == 0) {
          //fill(255,255,255);
          //stroke(230,230,230);
          //rect(x*10+1, y*10+1, 7, 7);
        } else if (grid[x][y]>0 && grid[x][y]<50) {
          stroke(0, 100, 0);
          fill(0, 100+grid[x][y]++*4, 0);
          rect(x*10+1, y*10+1, 7, 7);
          if (grid[x][y] == 50) grid[x][y] = 0;
        } else if (grid[x][y]>50 && grid[x][y]<100) {
          // Poison
          stroke(100, 0, 0);
          fill(200+(grid[x][y]++-50)*2, 0, 0);
          triangle(x*10+5, y*10+1, x*10+9, y*10+8, x*10+1, y*10+8);
          if (grid[x][y] == 100) grid[x][y] = 0;
        }
      }
    }
    // Mark snake
    for (i=0; i<snakeX.length; i++) {
      // mark in grid
      grid[snakeX[i]][snakeY[i]] = 255;
    }
    if (score>hiScore) {
      hiScore = score;
      if (gameOver>0) 
        msg2 = "You got a new Hiscore. Nice!";
      else 
      msg2 = "GG - Hiscore record run underway..";
    }

    // Update snake
    x = snakeX[0];
    y = snakeY[0];
    if ((dir!=' ') && gameOver==0) {
      if (dir=='U') {
        y = snakeY[0]-1;
      } else if (dir=='D') {
        y = snakeY[0]+1;
      } else if (dir=='L') {
        x = snakeX[0]-1;
      } else if (dir=='R') {
        x = snakeX[0]+1;
      }
      // Check if we are outside
      if (x<0 || x>49 || y<0 || y>49) {
        msg = "GAME OVER! You went outside the snake pit!"; 
        gameOver = 1;
      } else if (grid[x][y]==255) {
        // 
        msg = "GAME OVER! You ate yourself!";
        gameOver = 1;
      } else if (grid[x][y]>50) {
        msg = "GAME OVER! You ate poison and died!";
        gameOver = 1;
      } else if (grid[x][y]<50) {
        // Check what is on the location
        // Food or nothing there, ok to update
        i=snakeX.length;
        snakeX = splice(snakeX, x, 0);
        snakeY = splice(snakeY, y, 0);
        if (grid[x][y]==0) {
          grid[snakeX[i]][snakeY[i]] = 0;
          snakeX = shorten(snakeX);
          snakeY = shorten(snakeY);
        } else {
          score++;
          grid[x][y] = 0;
        }
      }
    }
    gameOver = gameOver + gameOver;
    // Print snake
    for (i=0; i<snakeX.length; i++) {
      if (i==0) {
        // Head
        stroke(50, 150, 150);
        if (gameOver>0)
          fill(250, 0, 0);
        else 
        fill(50, 150, 200);
        ellipseMode(CORNER);
        ellipse(snakeX[i]*10+1, snakeY[i]*10+1, 8, 8);
      } else {
        stroke(0, 0, 200);
        if (gameOver>0)
          fill(250, 0, 0);
        else 
        fill(0, 0, 250);
        rect(snakeX[i]*10+1, snakeY[i]*10+1, 8, 8);
      }
      // mark in grid
      grid[snakeX[i]][snakeY[i]] = 255;
    }
    // New food
    if (random(0, 255)>100) {
      // Generate new food
      x=int(random(0, 49));
      y=int(random(0, 49));
      grid[x][y]=1;
    }
    // New poison
    if (random(0, 255)>200) {
      // Generate new poison
      x=int(random(0, 49));
      y=int(random(0, 49));
      grid[x][y]=51;
    }
  }
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP) {
      dir = 'U';
    } else if (keyCode == DOWN) {
      dir = 'D';
    } else if (keyCode == LEFT) {
      dir = 'L';
    } else if (keyCode == RIGHT) {
      dir = 'R';
    }
  } else if (key == ' ') {
    // space
    dir = ' ';
  }
}