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);
Subscribe to:
Post Comments (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 ...

Stop. Stop what you're doing and go to Arby's. Right. Now. Have them make you a Gobbler . This is not something you'll regret...
No comments:
Post a Comment