Monday, 31 December 2012
Program update...
Yep, my Copter game is coming along nicely. I've just made the roof and floor lines of the cave move to make it seem as though the bird is flying forwards...
Wednesday, 26 December 2012
Creating a webpage using HTML5, JavaScript and processing.js
OK, so, I've been making some programs using processing.js over the past few weeks and I've been wondering, "OK, so it's all very well making shapes and lines and stuff and combining them to make cute birds and then using a draw() loop to make cheesy animations, but how do you make a webpage which contains a canvas which is then used to draw those birds and cheesy animations on?"
Well, here is a very basic way of doing it (colour-coded as well!)...
Anything in italics must be replaced by the thing described.
<!--The usual HTML tags-->
<!DOCTYPE html>
<html>
<head>
<script src="processing-1.4.1.js"></script>
<!--This "imports" the functions in the processing-1.4.1.js file. THIS FILE MUST BE SAVED IN THE SAME FOLDER AS THIS HTML FILE!-->
</head>
<body>
<script type="application/processing" data-processing-target="id-of-the-canvas">
void setup() {
// "set up" code (e.g. canvas size, canvas background...) here
// e.g.:
// size(400, 400)
// background(0, 0, 0);
}
void draw() {
// include the draw() function if you want an animation. Put all the animation code here
// e.g.:
// fill(random(0, 255), random(0, 255), random(0, 255));
// ellipse(200, 200, 200, 200);
}
</script>
<canvas id="id-of-the-canvas"></canvas>
</body>
</html>
You can download the processing-1.4.1.js file from this webpage - click "processing-1.4.1.js". Remember to save it in the same folder as the HTML file.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>My awesome colour-changing circle!</title>
<style type="text/css">
h1, h2 { font-family:"Comic Sans MS"; font-weight:bold; text-decoration:underline; text-align:center; }
h1 { color:red; }
h2 { color:blue; }
</style>
<script src="processing-1.4.1.js"></script>
</head>
<body>
<h1>Hey, guys - check out my awesome colour-changing circle!!</h1>
<h2>Try mousing over the canvas!</h2>
<script type="application/processing" processing-data-target="canvas">
void setup() {
size(400, 400);
}
void draw() {
background(50, 50, 75);
fill(random(0, 255), random(0, 255), random(0, 255));
ellipse(200, mouseY, 200, 200);
}
</script>
<canvas id="canvas"></canvas>
</body>
</html>
And here's what the webpage looks like:
Just in case you were wondering, yes, I did write all that code myself, and yes, I DID do it all from scratch. :)
Update 09/01/2013: data-processing-type works as well, but it should be data-processing-target, according to the official Processing.js website.
Well, here is a very basic way of doing it (colour-coded as well!)...
Anything in italics must be replaced by the thing described.
<!--The usual HTML tags-->
<!DOCTYPE html>
<html>
<head>
<script src="processing-1.4.1.js"></script>
<!--This "imports" the functions in the processing-1.4.1.js file. THIS FILE MUST BE SAVED IN THE SAME FOLDER AS THIS HTML FILE!-->
</head>
<body>
<script type="application/processing" data-processing-target="id-of-the-canvas">
void setup() {
// "set up" code (e.g. canvas size, canvas background...) here
// e.g.:
// size(400, 400)
// background(0, 0, 0);
}
void draw() {
// include the draw() function if you want an animation. Put all the animation code here
// e.g.:
// fill(random(0, 255), random(0, 255), random(0, 255));
// ellipse(200, 200, 200, 200);
}
</script>
<canvas id="id-of-the-canvas"></canvas>
</body>
</html>
You can download the processing-1.4.1.js file from this webpage - click "processing-1.4.1.js". Remember to save it in the same folder as the HTML file.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>My awesome colour-changing circle!</title>
<style type="text/css">
h1, h2 { font-family:"Comic Sans MS"; font-weight:bold; text-decoration:underline; text-align:center; }
h1 { color:red; }
h2 { color:blue; }
</style>
<script src="processing-1.4.1.js"></script>
</head>
<body>
<h1>Hey, guys - check out my awesome colour-changing circle!!</h1>
<h2>Try mousing over the canvas!</h2>
<script type="application/processing" processing-data-target="canvas">
void setup() {
size(400, 400);
}
void draw() {
background(50, 50, 75);
fill(random(0, 255), random(0, 255), random(0, 255));
ellipse(200, mouseY, 200, 200);
}
</script>
<canvas id="canvas"></canvas>
</body>
</html>
And here's what the webpage looks like:
Just in case you were wondering, yes, I did write all that code myself, and yes, I DID do it all from scratch. :)
Update 09/01/2013: data-processing-type works as well, but it should be data-processing-target, according to the official Processing.js website.
Monday, 24 December 2012
Some things I'd like to say... Copter game!
Firstly, I promise that I will eventually finish my hangman game in both C and Java. I've had a lazy month and I haven't done much to improve the code that currently doesn't work....... *sigh*
Now, what I REALLY wanted to blog about was how my Copter game was doing. Yep - you read it right - I'm making a Copter game! You know, that game on the iPhone where you have to guide a helicopter through a cave-like thing, avoiding obstacles and... Yeah, avoiding obstacles. You know, that game that went out of fashion about 25 years ago? Yeah, well, being the sad and boring person I am, I'm creating a version of that game using functions and variables from Processing.js (Thanks, Ruben) on Khan Academy. At the moment, I've drawn the cave ceiling and floor and a bird which will be the thing you need to guide through the cave. I'm going to give the user an option to either control the bird using the mouse or using the spacebar (which is harder).
This is the code I have written so far:
//start draw loop
var draw = function() {
//set background colour
background(28, 3, 25);
//roof dimension variables
var x1 = 0;
//stroke and fill colours for roof and floor
stroke(0, 0, 0);
fill(255, 255, 0);
//roof of cave
for (var i = 0; i < width/100; i++) {
rect(x1, height-25, 100, 25);
x1 += 100;
}
//floor dimension variables
x1 = 0;
//floor of cave
for (i = 0; i < width/100; i++) {
rect(x1, 0, 100, 25);
x1 += 100;
}
//bird position variables
var x = height/2-15;
//randomly generate bird RGB values
var r = random(0, 255),
g = random(0, 255),
b = random(0, 255);
//draw bird
if (mouseY > 25 && mouseY < height-55) {
x = mouseY;
// legs
strokeWeight(7);
line(125, 240, 125, 320);
line(125, 320, 98, 349);
line(125, 320, 163, 346);
line(125, 320, 139, 361);
line(200, 240, 200, 320);
line(200, 320, 169, 355);
line(200, 320, 238, 346);
line(200, 320, 215, 363);
strokeWeight(1);
// body (I still don't fully understand how Beziers work, but I think they're the only way to make the curved shape of a bird's body)
fill(r, g, b);
bezier(283, 130, 223, 116, 80, 100, 63, 262);
bezier(63, 262, 331, 276, 281, 153, 265, 136);
// beak
triangle(290, 85, 290, 100, 330, 100);
triangle(290, 100, 290, 115, 330, 100);
// head
ellipse(250, 100, 100, 100);
// eye
ellipse(270, 80, 25, 25);
// eyeball
fill(0, 0, 0);
ellipse(275, 75, 10, 10);
noFill();
} else {
textFont(createFont("cursive", 30), 30);
text("You lose! Ha!", 50, height/2);
}
};
And here's what's drawn on the canvas:
Now, what I REALLY wanted to blog about was how my Copter game was doing. Yep - you read it right - I'm making a Copter game! You know, that game on the iPhone where you have to guide a helicopter through a cave-like thing, avoiding obstacles and... Yeah, avoiding obstacles. You know, that game that went out of fashion about 25 years ago? Yeah, well, being the sad and boring person I am, I'm creating a version of that game using functions and variables from Processing.js (Thanks, Ruben) on Khan Academy. At the moment, I've drawn the cave ceiling and floor and a bird which will be the thing you need to guide through the cave. I'm going to give the user an option to either control the bird using the mouse or using the spacebar (which is harder).
This is the code I have written so far:
//start draw loop
var draw = function() {
//set background colour
background(28, 3, 25);
//roof dimension variables
var x1 = 0;
//stroke and fill colours for roof and floor
stroke(0, 0, 0);
fill(255, 255, 0);
//roof of cave
for (var i = 0; i < width/100; i++) {
rect(x1, height-25, 100, 25);
x1 += 100;
}
//floor dimension variables
x1 = 0;
//floor of cave
for (i = 0; i < width/100; i++) {
rect(x1, 0, 100, 25);
x1 += 100;
}
//bird position variables
var x = height/2-15;
//randomly generate bird RGB values
var r = random(0, 255),
g = random(0, 255),
b = random(0, 255);
//draw bird
if (mouseY > 25 && mouseY < height-55) {
x = mouseY;
// legs
strokeWeight(7);
line(125, 240, 125, 320);
line(125, 320, 98, 349);
line(125, 320, 163, 346);
line(125, 320, 139, 361);
line(200, 240, 200, 320);
line(200, 320, 169, 355);
line(200, 320, 238, 346);
line(200, 320, 215, 363);
strokeWeight(1);
// body (I still don't fully understand how Beziers work, but I think they're the only way to make the curved shape of a bird's body)
fill(r, g, b);
bezier(283, 130, 223, 116, 80, 100, 63, 262);
bezier(63, 262, 331, 276, 281, 153, 265, 136);
// beak
triangle(290, 85, 290, 100, 330, 100);
triangle(290, 100, 290, 115, 330, 100);
// head
ellipse(250, 100, 100, 100);
// eye
ellipse(270, 80, 25, 25);
// eyeball
fill(0, 0, 0);
ellipse(275, 75, 10, 10);
noFill();
} else {
textFont(createFont("cursive", 30), 30);
text("You lose! Ha!", 50, height/2);
}
};
And here's what's drawn on the canvas:
Friday, 7 December 2012
*In Progress* My person...
Say hello to Bob :)
Original code:
// arms
stroke(13, 94, 64);
strokeWeight(10);
line(175, 260, 110, 150);
line(225, 260, 290, 150);
noStroke();
// body
fill(28, 5, 71);
triangle(200, 100, 110, 330, 280, 330);
// face
fill(255, 255, 70);
ellipse(200, 100, 150, 150);
// eyes
fill(255, 255, 255);
ellipse(170, 70, 30, 10);
ellipse(230, 70, 30, 10);
// eyeballs
fill(0, 0, 0);
ellipse(170, 70, 10, 10);
ellipse(230, 70, 10, 10);
What it looks like:
What I aim to do next:
Original code:
// arms
stroke(13, 94, 64);
strokeWeight(10);
line(175, 260, 110, 150);
line(225, 260, 290, 150);
noStroke();
// body
fill(28, 5, 71);
triangle(200, 100, 110, 330, 280, 330);
// face
fill(255, 255, 70);
ellipse(200, 100, 150, 150);
// eyes
fill(255, 255, 255);
ellipse(170, 70, 30, 10);
ellipse(230, 70, 30, 10);
// eyeballs
fill(0, 0, 0);
ellipse(170, 70, 10, 10);
ellipse(230, 70, 10, 10);
What it looks like:
- Add more facial features
- Add legs
- Add some animations
- Add some user interaction
Wednesday, 5 December 2012
Some shapes...
We are now learning how to draw shapes using a different programming language (Mr Patel thinks it's something like JavaScript).
Original Code:
// a rectangle
rect(60, 80, 20, 5);
//rect(x-axis, y-axis, width, height);
// a circle/ellipse
ellipse(10, 10, 5, 5);
//ellipse(x-axis-from-centre, y-axis-from-centre, width, height);
// a line
line(100, 100, 206, 200);
//line(x-axis-of-first-point, y-axis-of-first-point, x-axis-of-second-point, y-axis-of-second-point);
What it looks like:
Original Code:
// a rectangle
rect(60, 80, 20, 5);
//rect(x-axis, y-axis, width, height);
// a circle/ellipse
ellipse(10, 10, 5, 5);
//ellipse(x-axis-from-centre, y-axis-from-centre, width, height);
// a line
line(100, 100, 206, 200);
//line(x-axis-of-first-point, y-axis-of-first-point, x-axis-of-second-point, y-axis-of-second-point);
What it looks like:
- x-axis = distance from far left side (of screen, display, etc.)
- y-axis = distance from top (of screen, display, etc.)
Monday, 3 December 2012
And the answer to this week's poll question...
At the time that this post was published, there were still 29 minutes left until the poll closed. If you read this post before the poll closes... You know which answer to pick :)
To find the size of an array in C, you type:
sizeof(array);
Replace 'array' with the name of the array variable you want to find the size of.
By the way, in Java, you have to type:
array.length;
...And whoever voted for:
WTFIsTheSizeOfThisArray(array);
...I salute you. You have an amazing sense of humour.
To find the size of an array in C, you type:
sizeof(array);
Replace 'array' with the name of the array variable you want to find the size of.
By the way, in Java, you have to type:
array.length;
...And whoever voted for:
WTFIsTheSizeOfThisArray(array);
...I salute you. You have an amazing sense of humour.
Subscribe to:
Posts (Atom)