Tuesday, June 7, 2016

Coding with Chrome's JavaScript API

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 X-coordinate for the point.
 * @param {number} The Y-coordinate 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 top-left corner
 * of the rectangle.
 *
 * @param {number} The X-coordinate for the rectangle.
 * @param {number} The Y-coordinate 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 X-coordinate for the rectangle.
 * @param {number} The first Y-coordinate for the rectangle.
 * @param {number} The second X-coordinate for the rectangle.
 * @param {number} The second Y-coordinate for the rectangle.
 * @param {number} The third X-coordinate for the rectangle.
 * @param {number} The third Y-coordinate 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 top-left corner of a
 * a hypothetical rectangle that encloses the ellipse.
 *
 * @param {number} The X-coordinate for the ellipse.
 * @param {number} The Y-coordinate 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 X-coordinate for the circle.
 * @param {number} The Y-coordinate 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 X-coordinate for the line.
 * @param {number} The first Y-coordinate for the line.
 * @param {number} The second X-coordinate for the line.
 * @param {number} The second Y-coordinate 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 bottom-left corner of the text 
 * to be drawn.
 *
 * @param {string} The text to be drawn on the screen.
 * @param {number} The X-coordinate for the text.
 * @param {number} The Y-coordinate 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);





watch my videos on youtube follow me on twitter view my pictures on instagram view my profile on linkedin view my google+ profile

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.






watch my videos on youtube follow me on twitter view my pictures on instagram view my profile on linkedin view my google+ profile