Programming For Beginners

By: William Engler

Coding is a beautiful thing if used correctly. By the end of this book you will be able to make some of your own code and possibly use it to change the world. Now let's get out there and code!

Beginning

For this article we should be using a website called Scratch.mit.edu or for short scratch. It is easier than java script and is great for beginners. Let’s get started, shall we. To get started we need to go to scratch; remember it should end with .mit.edu not .com. When you first get there click “Join Scratch” and a box should pop up. Just fill out the questions as it asks. Remember not to use your real name, age, or location. Once you are signed up click on the picture of a folder with an S on it. Then proceed to click new project. We are going to start with the appearance of your character. Click on where it says “sprite 1” and then click on “costumes” on the top of the page, next click “convert to bitmap” in the lower right hand corner. Then draw a top hat on top of the cat thing. In order to change colors, you will have to click on the colors you want. Click on “Costume 2” and draw the same thing. Now to code, click on “script” and then “events”. The events are for when you need to start your codes. We will start with the “When Green Flag Button Clicked” Click the green flag to start your codes. When you were drawing your guy you had to switch your costumes and we are going to switch the costumes automatically to make him dance. go to “control” and drag the “Forever” to the “When green flag button clicked”. Then go to “looks” and drag “next costumes” into the “forever”. Finally click the flag and watch your guy dance.
Scratch

Click on this to go to Scratch and start coding

More Advanced

The code on scratch is for beginners, and now that you have gotten a taste of the beginner stuff let's dive into the real code! The programming resource we will be using is ICE code editor. It is a great source for simple java scripts, and if you mess up on the code it will tell you what you did wrong. When you get into ice code editor go into the right hand corner and click on the box with three lines, and create a new project, while naming it shapes then add in the code:

var shape = new THREE.SphereGeometry(100);

var cover = new THREE.MeshNormalMaterial();

var ball = new THREE.Mesh(shape, cover);

scene.add(ball);

Then change the number 100 to 250. What you see now should be cool, if you did it right the ball you made should be much bigger. Now let's make it a cube by changing the code to var shape = new THREE.CubeGeometry(100, 100, 100); var cover = new THREE.MeshNormalMaterial(); var box = new THREE.Mesh(shape, cover); scene.add(box)

When you do so, it shouldn't look like a cube, but it should look like a square. It is a cube, but the camera isn't looking at it from the right angle to see it. To change the camera in the right direction add the code: box.rotation.set(0.5, 0.5, 0);
Ice Code Editor

Click on this to go to Ice code editor and start coding.

Comparison

Now you can make a Cube, a Sphere (In Ice code editor) and a Dancing cat in a top hat and cane. (In Scratch.) Now let's compare Scratch and Ice code editor.



Scratch

  • Directed towards ALL ages.

  • Simple drag and drop code.

  • For inexperienced and experienced coders.







In between


  • Both are great coding sources.

  • Both can be used to make AWESOME games and animations.


Ice code editor

  • Directed towards adults.

  • Typing all code.

  • For experienced coders.

  • Can be used to make web pages.





As you can see, both of them are great coding resources and are easy to use. Why don't you go out there and experiment? You could change the world one day.

Changing The WORLD!

We have learned how to use scratch and how to use ice code editor, now let's make a game combining both ice code editor and scratch! To make this game we will use scratch, for the sake of saving time. The animation we will be making is a tutorial for using ice code editor. To start log onto your scratch account and make a new project and name it “Ice code editor tutorial” and click on events then drag the “when flag button clicked” to the coding area. Then drag the cat to the bottom right hand corner of the screen. Then drag the “say_Hello World_For _2_ secs” from the looks category; under the “When Flag Button clicked” code. Then type “The code on scratch is for beginners, and now that you have gotten a taste of the beginner stuff let's dive into the real code! The programming resource we will be using is ICE code editor. It is a great source for simple javascripts, and if you mess up on the code it will tell you what you did wrong.” after the word “say”. Next change the number 2 to 8. Then drag the “say_Hello World_For _2_ secs” and make it say: When you get into ice code editor go into the right hand corner and click on the box with three lines, and create a new project, while naming it shapes then add in the code: var shape = new THREE.SphereGeometry(100); var cover = new THREE.MeshNormalMaterial(); var ball = new THREE.Mesh(shape, cover); scene.add(ball); Next change the number 2 to 8. Then drag the “say_Hello World_For _2_ secs” and make it say: Then change the number 100 to 250. What you see now should be cool, if you did it right the ball you made should be much bigger. Now let's make it a cube by changing the code to var shape = new THREE.CubeGeometry(100, 100, 100); var cover = new THREE.MeshNormalMaterial(); var box = new THREE.Mesh(shape, cover); scene.add(box) Next change the number 2 to 8. Then drag the “say_Hello World_For _2_ secs” and make it say: When you do so, it shouldn't look like a cube, but it should look like a square. It is a cube, but the camera isn't looking at it from the right angle to see it.To change the camera in the right direction add the code: box.rotation.set(0.5, 0.5, 0);

Next change the number 2 to 8. Then drag the “say_Hello World_For _2_ secs” and make it say: That’s all we have for today folks but We/I hope you enjoy.

Finally change the number 2 into 8.
I hope you like my feature article on code, to learn more find a book called “Game Programming For Kids” or “Beautiful Code” those are the resources I used to make this feature article. Now that you know the basics so why don't you go out and try it yourself?!

RESOURCES


  • Strom, Chris. 3D Game Programming for Kids: Create Interactive Worlds with JavaScript. Dallas, TX: Pragmatic shelf, 2013. Print.


  • Oram, Andrew, and Greg Wilson. Beautiful Code: Leading Programmers Explain How They Think. 1st ed. Vol. 1. Beijing: O'Reilly, 2007. 621. Print.

  • Scratch - Imagine, Program, Share. (2003, March 5). Retrieved from https://scratch.mit.edu/ This is one website that we coded in.