Bookmark this on Hatena Bookmark
Hatena Bookmark - Super Easy Programming #1: Turtle Graphics
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed

Greetings! Alan here.

We’ve been hearing from a lot of folks who want to try programming but don’t know where to start. Allow me to go back to the basics and explain from step one.

There are lots of programming languages out there, but let’s start with one that’s popular and free: JavaScript.

You’ll need:

・A web browser (Chrome or Safari, NOT Internet Explorer)

Download the latest web browser; it’s absolutely free. If you’re using Windows, you can still download Apple’s Safari browser. Google’s Chrome browser also works. None of them cost a dime.

Windows’ Internet Explorer works a bit differently, so we’ll leave it for later.

・A text editor you’re comfortable with. Unfortunately, Windows’ standard Microsoft Word, Note Pad, and Wordpad won’t work here. For Windows, try Apsaly (http://www.vector.co.jp/soft/win95/writing/se423509.html). For Mac, you can download mi (http://www.mimikaki.net/). Both are free and easy to use.

And that’s all you need!

There are multiple ways to start programming, but let’s begin with the most traditional.

We’ll proceed with the following steps.

1. Enter a model program.

2. Execute the model program.

3. Revise the model program.

4. Execute the revised program and check it.

5. Try something harder!

In general, you learn faster with a model to start from.

This is a shortcut to learning computer programming. It works for most any programming language. Now then, what should we use as our model?

Something too basic will be dull, and something too advanced might scare you off. Lots of people are interested in programming but quickly get turned away by the long strings of strange symbols. Who cares about all that math?

With that in mind, why don’t we start with some computer graphics?

When beginning to program, one must first remember something called a source code.

Source code is also simply called code for short (however, be aware that “code” can have other meanings as well). This refers to the programming language a program is written in.

Programming languages are special languages to give commands to computers. Special commands require special “grammar.” However, these are manmade languages, and far simpler than any foreign language that humans speak.

Let’s jump right in. Copy the following codes into a text editor, and save under the designated file names.

File name: start.html

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<script type=”text/javascript” src=”wiselogo.js”></script>
<script type=”text/javascript” src=”main.js”></script>
</head>
<body onload=”onLoad()”>
<canvas id=”canvas0″ width=”500″ height=”500″
style=”border:1px black solid”>
</canvas>
</body>
</html>

File name: wiselogo.js

var Vector = function(x,y){
this.x = x;
this.y =y;
this.plus = function(v){
this.x += v.x;
this.y += v.y;
},
this.times = function(t){
return new Vector(this.x*t,this.y*t);
}
};

var logo = {
canvas:null,
context:null,
cursor:new Vector(250,250),
direction:new Vector(0,1),
rotate :0,
pen : false,
penDown:function(){this.pen = true;},
penUp:function(){this.pen = false;},
init:function(){
this.canvas =document.getElementById(“canvas0″);
this.context=this.canvas.getContext(“2d”);
},
turn:function(r){
this.rotate += r;
this.direction.x = Math.sin(this.rotate*3.14159/180);
this.direction.y = Math.cos(this.rotate*3.14159/180);
},
move :function(t){
if(this.pen){
this.context.beginPath();
this.context.moveTo(this.cursor.x,this.cursor.y);
}
this.cursor.plus(this.direction.times(t));
if(this.pen){
this.context.lineTo(this.cursor.x,this.cursor.y);
this.context.stroke();
}
},
printpos :function(){
alert(‘hoge: ‘+this.cursor.x+”,”+this.cursor.y);
}
};

var move = function(t){logo.move(t)};
var turn= function(r){logo.turn(r)};
var penDown= function(){logo.penDown()};
var penUp = function(){logo.penUp()};

File name: main.js

function onLoad() { // We’ll deal with this later.
logo.init(); // This too.

penDown(); // Lower pen.
move(50); // Move 50.
penUp(); // Raise pen.

}

After saving these source codes under the correct file names, open start.html in Safari or Chrome.

For Mac, simply double-click start.html. For Windows, if Chrome is not set as your default browser, simply open a new window in Chrome and drag and drop start.html into the browser.

How’d it go?

You should be seeing a screen that looks like this.

If you aren’t, check the following.

  • Make sure that start.html, wiselogo.js, and main.js aren’t all in the same file.
  • Are you using Chrome or Safari? (remember, Internet Explorer doesn’t work)

So, what exactly does this program do? Most programs have one main element. For this basic program, that element is of course main.js.

What does main.js do? Let’s ignore “function” and “init” for the time being and focus on “penDown().”

As it turns out, this is a drawing tool. You need a pen to draw, right?

Imagine that the screen is a piece of paper, and you’re holding a pen. Lower the pen to the paper. “penDown()” does just that.

“move(50)” moves the lowered pen by 50 dots.

Lastly, “penUp()” raises the lowered pen.

That’s why you see a straight line in the middle of the screen. You can grasp a lot of the basics of programming language in this one short program.

Let’s go into a bit more depth.

In JavaScript, the text after a double slash (//) is called a comment and can be filled out freely. It’s usually used for memos to make the program easier to understand.

The blue areas are commands. However, in JavaScript commands are referred to as functions (there’s a slight technical difference but we’ll ignore it for the time being.

penDown is a command for lowering the pen.

The parenthesis after a command define that command’s parameter. “penDown” doesn’t have any parameters set, but “move” is set to 50.

The final semicolon (;) indicates the end of a phrase. It’s analogous to the period at the end of a sentence.

Computers get confused without a semicolon and don’t know where a sentence ends. Be sure to remember your semicolons from here on out!

This is all pretty dull, isn’t it?

Let’s rewrite main.js and see what happens.

Using your text editor, change main.js to the following:

function onLoad() { // We’ll deal with this later.
logo.init(); // This too.

penDown(); // Lower pen.
move(50); // Move 50.
penUp(); // Raise pen.
move(50);
penDown();
move(50);
penUp();

}

How’d it go? Did you get the following screen?

Are you starting to get the hang of it?

We lowered the pen once, moved it 50 dots, raised it, moved it another 50 dots, lowered it again, moved it 50 dots, and raised it once more.

Hence, the two lines on your screen.

Since you can only make straight lines with penDown, move, and penUp, let’s introduce a new command: turn.

As the name suggests, “turn” changes direction.

Change main.js to the following:

function onLoad() { // We’ll deal with this later.
logo.init(); // This too.

penDown();
move(100);
turn(90);
move(100);
turn(90);
move(100);
turn(90);
move(100);
penUp();
}

“turn,” like “move,” requires a parameter.

The parameter for move was distance of movement. The parameter for turn is angle. We moved 100 dots, turned 90 degrees, moved 100 dots, turned 90 degrees, and repeated four times.

What happens? Give it a try and find out!

Next time we’ll try something a little harder!