Coding with Chrome is a new Google application that's built to help people learn how to code. It supports Blockly, CoffeeScript, Pencil Code, and JavaScript. It's free to download and works right your the Chrome browser.
I've been working on some educational material for the new application. One of the things I really like about it is that it provides a really simple drawing API so you can easily code shapes and drawings instead of starting off with the command line. Since the application gives you an immediate response, you're able to experiment and see how changing your code affects the picture on the screen.
Here's what I've learned about the basic drawing API. You can download this file and try experimenting with the code yourself.
/*
* draw.clear() clears the screen.
*/
draw.clear();
/*
* draw.point(x, y, color, size) draws the specified point on the screen in the
* specified color.
*
* @param {number} The Xcoordinate for the point.
* @param {number} The Ycoordinate for the point.
* @param {string} The color for the point. Can be specified as a named color
* or as a hexadecimal color code.
* @param {number} The size of the point (extends downward and to the right).
*/
draw.point(2, 2, 'purple', 10);
/*
* draw.rectangle(x, y, width, height, fillcolor, strokecolor, stroke) draws a
* rectangle on the screen. The (x, y) coordinate specifies the topleft corner
* of the rectangle.
*
* @param {number} The Xcoordinate for the rectangle.
* @param {number} The Ycoordinate for the rectangle.
* @param {number} The width of the rectangle.
* @param {number} The height of the rectangle.
* @param {string} The fill color of the rectangle. Can be specified as a named
* color or as a hexadecimal color code.
* @param {string} The stroke color of the rectangle.
* @param {number} The width of the stroke line.
*/
draw.rectangle(20, 200, 200, 300, 'red', 'green', 5);;
draw.rectangle(100, 400, 40, 100, 'gray', 'black', 1);
/*
* draw.triangle(x1, y1, x2, y2, x3, y3, fillcolor, strokecolor, stroke) draws
* a triangle connecting the three points specified.
*
* @param {number} The first Xcoordinate for the rectangle.
* @param {number} The first Ycoordinate for the rectangle.
* @param {number} The second Xcoordinate for the rectangle.
* @param {number} The second Ycoordinate for the rectangle.
* @param {number} The third Xcoordinate for the rectangle.
* @param {number} The third Ycoordinate for the rectangle.
* @param {number} The width of the triangle.
* @param {number} The height of the triangle.
* @param {string} The fill color of the triangle. Can be specified as a named
* color or as a hexadecimal color code.
* @param {string} The stroke color of the rectangle.
* @param {number} The width of the stroke line.
*/
draw.triangle(20, 200, 220, 200, 120, 20, 'blue', 'green', 5);
/*
* draw.ellipse(x, y, width, height, fillcolor, strokecolor, stroke) draws a
* ellipse on the screen, with the (x, y) coordinate at the topleft corner of a
* a hypothetical rectangle that encloses the ellipse.
*
* @param {number} The Xcoordinate for the ellipse.
* @param {number} The Ycoordinate for the ellipse.
* @param {number} The width of the ellipse.
* @param {number} The height of the ellipse.
* @param {string} The fill color of the ellipse. Can be specified as a named
* color or as a hexadecimal color code.
* @param {string} The stroke color of the ellipse.
* @param {number} The width of the stroke line.
*/
draw.ellipse(70, 260, 40, 60, 'cyan', 'white', 2);
draw.ellipse(170, 260, 40, 60, 'cyan', 'white', 2);
/*
* draw.circle(x, y, radius, fillcolor, strokecolor, stroke) draws a
* circle on the screen, with the (x, y) coordinate at the center of the circle.
*
* @param {number} The Xcoordinate for the circle.
* @param {number} The Ycoordinate for the circle.
* @param {number} The radius of the circle.
* @param {string} The fill color of the circle. Can be specified as a named
* color or as a hexadecimal color code.
* @param {string} The stroke color of the circle.
* @param {number} The width of the stroke line.
*/
draw.circle(132, 450, 5, 'white', 'black', 1);
/*
* draw.line(x1, y1, x2, y2, strokecolor, stroke) draws a line connecting the
* two specified points.
*
* @param {number} The first Xcoordinate for the line.
* @param {number} The first Ycoordinate for the line.
* @param {number} The second Xcoordinate for the line.
* @param {number} The second Ycoordinate for the line.
* @param {string} The stroke color of the line. Can be specified as a named
* color or as a hexadecimal color code.
* @param {number} The width of the stroke line.
*/
draw.line(100, 500, 80, 700, 'black', 1);
draw.line(140, 500, 160, 700, 'black', 1);
/*
* draw.text(text, x, y, color, drawSmall, drawOutline) draws text on the screen
* at the specified point. The point marks the bottomleft corner of the text
* to be drawn.
*
* @param {string} The text to be drawn on the screen.
* @param {number} The Xcoordinate for the text.
* @param {number} The Ycoordinate for the text.
* @param {string} The color of the text. Can be specified as a named
* color or as a hexadecimal color code.
* @param {boolean} If true, draw smaller text.
* @param {boolean} If true, draw only an outline of the text (no fill).
*/
draw.text('HOUSE', 300, 200, 'black', false, true);
Tuesday, June 7, 2016
Wednesday, June 1, 2016
Final Exam, Question 16: Star Boars
This has become a routine now: I don't give extra credit but on final exams I usually include a gimme question that involves something absurd. I've done it a few times before (pigs in hats / hippos thinking about tacos / happy rabbits). For my web development class's final exam, question 16 was: "Illustrate what a warthog would look like if it were piloting a spaceship. Title your drawing Star Boars." These are the finest submissions.
I tried to time this one with the release of the new Star Wars movie but I'm not so good at getting this kind of thing done so you get it 5 months late.
Disclaimer: the dark side would have won if they had more porcine TIE Fighter pilots.
As usual, click the small images to see the bigger images.
Even after sustaining significant damage, this pig perseveres. Star Boars are dedicated.
Not sure if this is a pig or a normal guy with a big mustache. Also the Pig Box was way better than the Pig Box 360.
This one looks angry and can swing a lightsaber while piloting the spaceship. I don't think I've seen any other characters do that.
SPACE BOARS C'MON PEOPLE
See, this pig is more sophisticated than 90% of the PHP programmers out there.
I like this pig because it kind of looks like a squirrel.
That's either a rhino or Rocksteady from TMNT.
BOAR WARS?
COME ON PEOPLE THE INSTRUCTIONS WERE CLEAR
Great point.
This one looks like he'd be the first to stick somebody with a broken bottle in a bar fight.
I'm really surprised there weren't more Lion King references.
Subscribe to:
Posts (Atom)

Last spring I decided to have some fun on the final exam for my Computer Data Structures class. I was happy with the way it turned out , so...

This term I was teaching a Computer Data Structures class and I needed 5 more points for my final exam. I decided to have some fun. These ...

If you want to access each node in a binary tree in sorted order, how would you go about doing this? Describe the procedure. Draw t...