Into the third dimension

Last lesson, we generated a few triangles on the screen. This was enough to give us our first demo (last lesson’s demo).

This week, we wrote a function to convert 3D coordinates into 2D coordinates. It was based on a very simple ratio-based math’s function – Bx=(Ax*Bz)/Az. I pointed out the Wikipedia article, 3D Projection. Unfortunately, it’s a bit dense and unreadable, but with a visual demonstration of what the function meant, it was easier to show.

With a little work, we came up with this: this week’s demo

Next time, I’ll be demoing how to use loops to come up with a shape automatically. As a quick taster, I just wrote this: demo of things to come

If any of my students want to email me, please do: kae.verens@gmail.com

3D Graphics 101

In the advanced class, I generally don’t decide what to teach until the class actually starts.

For this class, we were waiting for the key to open the door, and Liam mentioned a 3D demo we’d seen last year showing a car rotated using JavaScript.

So, I decided that this semester, we will learn 3D graphics. There are helper libraries such as three.js which let you skip all the learning and just start creating scenes immediately, but I want the students to understand how 3D graphics actually work. From first principles

The first thing I did was to draw a diagram similar to the following on the board:
Perspective_Transform_Diagram

In the image above, if you imagine the yellow box as being a 3D cube, then the way we draw that on a 2D screen (the black horizontal line below it) is to trace the various nodes and lines from the original point in 3D space, through the 2D screen to the focal point (the eye). The intersection points on the 2D screen is what is drawn. [wikipedia]

After that brief explanation, we then got to the more basic matter of drawing onto a canvas (the screen). This took up the rest of the class.

In the end, we drew a tetrahedron (DEMO), but it is not yet true 3D – we ignore the “z” coordinates of the tetrahedron and simply draw flatly onto the screen.

Next week, we will convert it into true 3D, set it rotating, and maybe come up with an algorithm for automatically generating polyhedrons. Conor mentioned wanting to draw Saturn, for example, including its rings.

If any of my students would like to contact me, please email kae@kvsites.ie

phone app development – week 1

screen1Today,we started up again with the Monaghan Coder Dojo. We introduced ourselves and then asked the kids to break apart into the classes they wanted to attend.

The largest classes, as expected, were Scratch and Advanced Scratch (that one actually sounds very interesting! using Leap Motion to handle actual manual gestures, with no mouse or keyboard needed), and then there were the more advanced classes; Games Development (using Python, I think?), HTML/Web Development, and I’m teaching Phone App Development using Phonegap.

Each class had progressively less students. My own has literally one 😉

We’re holding two class sessions – the first is from now to Christmas, and then from the new year to summer. I expect there will be one or two more students in my class after Christmas.

ANYWAY

To get phone app development up and running, I’m starting off with a Word Chain game.

The first step was to build the user interface and some simple validation, which we did during the first class.

We have not needed to touch any phones yet – all the code was done either online, or locally, in web-pages using HTML, CSS and JavaScript. We’ll probably put the code onto a phone next class (in two weeks).

Here’s what we came up with during this class: Week 1

WebDev: starting jquery

Last week, we started demonstrating how jQuery takes all the “hard” parts out of JavaScript, and came up with an elegant little demonstration:

demo here

If you look at the source code of that page, you can see that what it accomplishes, it accomplishes in only about 10 lines of code.

So, what is it doing?

Firstly, we have a nested list of film categories and film names. Looking in the HTML, you can see the list is like this:

<ul id="menu">
	<li>Horror
		<ul>
			<li>The Cabin In The Woods</li>
		</ul>
	</li>
	<li>Comedy
		<ul>
			<li>Sleeper</li>
		</ul>
	</li>
	...
</ul>

What we initially wanted was to just hide the sub-lists (the inner <ul>s) and have them appear when the category titles were clicked.

To do this, we hid all the sub-lists (ul ul{display:none}), then added this small bit of code:

<script>
	$(function() {
		$('#menu>li').click(function() {
			$(this).find('ul').toggle('slow');
		});
	});
</script>

That tiny piece of code says this in English: “when the page is finished loading, add a trigger to the <li> elements that are directly inside #menu, so that when they are clicked, the <ul> elements inside have their visibility toggled on or off”.

Simples!

After demoing this, one of the students asked whether it would be possible to link the film names to the IMDB entries for that film?

This was a bit of a poser. Unfortunately, JavaScript has a security mechanism which means that we can’t simply grab data from anywhere in the world that we want, so we couldn’t directly query the IMDB website for the right address to direct the user to.

But, programming is all about hacking, and hacking means solving whatever problem you have, with whatever tools you have, so we came up with a solution which I have to say is quite elegant!

Google’s main website has an “I’m feeling lucky” button which redirects the browser to the first result of a search. It’s useful if you’re pretty sure that the first result will be the right one.

In the case of a lot of film names, when you search for the names in Google, the first result /is/ the one you want, and it links directly to the IMDB website.

So, what we did was to write a script which replaced the text of the film names, with a HTML <a> element that would trigger an “I’m feeling lucky” search on Google, redirecting the browser to the IMDB entry.

I have to say that it worked /splendidly/, and in only a few lines of code!

<script>
	var str='http://www.google.com/search?btnI=1&q=';
	$(function() {
		$('li li').each(function() {
			var $this=$(this);
			var filmName=$this.text();
			$this.html(
				'<a target="blank" href="'+str+filmName+'">'
				+filmName+'</a>'
			);
		});
	});
</script>

Now, if only we can keep coming up with inspiring examples, we’ll have very inspired students!

JavaScript and PHP updates

There were hardly any people in the web development class today!

But, we managed to push on and get some interesting work done.

Today, we learned about functions, setTimeout, and the difference between synchronous and asynchronous programming (in particular, we studied how the for block can’t be used for animation).

To demonstrate the concepts, we created an animation, where a HTML element’s position is changed over time such that it orbits a single point. To do this, we discussed some maths. In particular, we discussed how cos() and sin() can be used to translate the position of a point when combined with a radius and a degree offset from a central point.

The demonstration is here, with the JavaScript itself available here.

After writing the script, we discussed some homework.

For the homework, what I would like is for this code to be adapted so it emulates real gravity, using Newton’s gravity equations. The simulation should have the sun, the earth, and the moon.

I’ll be doing this myself as well, so we can compare our solutions next time we meet!

This is a tricky assignment, so remember to think about your solution in plain English before you even attempt to write the script.

Starting JavaScript programming

This week, we started working on JavaScript. The last few classes were for creating a base of HTML and CSS so that the JavaScript that we will be doing makes sense.

So, the first thing we did was a simple “hello world” thing:

var sName=prompt('what is your name');
alert('hello '+name);

Loops

After this, we got around to loops, creating an algorithm which could sum up a “triangle number” line by line:

var iBase=prompt('enter a number');
var iTotal=0;
for (var i=0; i<=iBase; i=i+1) {
  iTotal=iTotal+i;
}
alert(iTotal);

Next, a few challenges were posed, to see if you understood the code. The first was to sum up only the even-numbered lines of the triangle number. Then you were asked to sum up the odd-numbered lines.

Odd or Even

We then created a script using if conditionals, to find odd and even numbers:

var iNum=prompt('enter a number');
var fDivided=iNum/2;
var iDividedInteger=parseInt(fDivided);
if (iDividedInteger == fDivided) {
  alert('even');
}
else {
  alert('odd');
}

I encourage you to read the above one and understand it.

Note, for example, that I named the division results “fDivided” and “iDividedInteger” – why do you think the ‘f’ and ‘i’ prefixes are there? And then why do I compare the two numbers in the conditional?

The final task of the day was a countdown script, which could alert every number from 20 to 1:

for (var i=20; i>=1; i=i-1) {
  alert(i);
}

Homework

Finally, we have two tasks which you are encouraged to try.

The first one is to create a calculator, which asks for three prompts, two numbers and an operation. The operation should be “+”, “-“, “/”, or “*”. The calculator should then perform that operation on the numbers and alert the result.

The second, harder one, is to write a script which can sum up all of the numbers between 1 and 1000, but only those numbers that are not divisible by 3 or 4.

Note that you can do both of the above using parts of the code in the examples in this article – you will not need to learn any new code. You just need to figure out for yourself how you (not your computer) would solve the problem, and then tell the computer that.

If you solve the above problems, leave a comment here. I’m looking forward to seeing the solutions.

Web development track is on track

Hi all; thought I’d update you with what we’re doing over in the web development class.

At first, the class was about HTML, but in web development, there’s a lot more to do than just HTML – that’d be like wanting to build a car, but only learning about the chassis.

In web development, there are a number of different technologies that come together to create what you see:

  • HTML – this is the “skeleton” of a website, on which everything else hangs.
  • CSS – this is the design, including colours, positioning, sizes, fonts, etc.
  • JavaScript – what’s a website if it doesn’t do anything? JavaScript lets you add some movement and interaction to the otherwise-static pages.

In our class, we currently have two tracks going; Gordon is bringing half the class through HTML, while I (Kae) am bringing the others through CSS.

So far, I am really impressed with how quickly everyone is picking up what we’re showing. I have to admit that I am not a patient teacher, but I rarely have to repeat what I say more than two/three times for it to sink in.

For the last class, we went through enough CSS to learn how to add some effects like box-shadows, backgrounds, etc. to elements, and how to change those effects when the mouse hovers over them.

For the next class, I’m going to demonstrate how to create drop-down menus (vertical and horizontal) using just CSS, I’ll walk through how “selectors” work, and I’m sure I can think of a few more interesting tricks to show.