Let's add a little color to our drawing. We'll create a new behavior, DrawerColor, that updates our Drawer behavior. Here's that behavior:
/DrawerColor
//Draw a line the follows the mouse's movement when you click down
//Randomly change the color of the line with each click
var DrawerColor = function(drawerArgsColor) {
"use strict";
if (!drawerArgsColor) {
drawerArgsColor = {};
}
this.mouseDownCallback = drawerArgsColor.mouseDownCallback || function(){};
this.mouseUpCallback = drawerArgsColor.mouseUpCallback || function(){};
this.evtMgr = MyEventManager.getInstance();
this.evtMgr.addMouseListener(this);
this.mouseLoc = null;
this.name = "drawer";
return this;
};
DrawerColor.prototype.execute = function(sprite, context, time) {
"use strict";
if (this.mouseLoc !== null) {
sprite.mouseLoc = this.mouseLoc;
sprite.mouseIsDown = this.mouseIsDown;
}
};
DrawerColor.prototype.mouseMove = function(mouseLoc, mouseVelocity) {
"use strict";
this.mouseLoc = mouseLoc;
};
DrawerColor.prototype.mouseDown = function(mouseLoc) {
"use strict";
var randomColor = "rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")";
this.mouseIsDown = true;
this.mouseDownCallback(randomColor);
};
DrawerColor.prototype.mouseUp = function(mouseLoc) {
"use strict";
this.mouseIsDown = false;
this.mouseUpCallback();
};
Almost everything in this behavior is the same as the original Drawer behavior. We've made just a small change to the mouseDown method. Look at the first line within that method:
var randomColor = "rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")";
This line of code generates an rgb color string using random numbers. We'll use that color string to set the color of each line we draw. Because the numbers are random, we'll likely get a different color each time we click down and draw.
So how do we generate those random numbers? An rgb color string has three values, one for each red, green, and blue color channel. Those values range from 0 to 255; the higher the number, the lighter the color.
Let's look at our random numbers. Math.random() returns a random number between 0 and up to but not including 1.0. Multiply that random number by 256 and we could get a number somewhere between 0 and less than 256. Multiply 0.5 by 256, for example, and we get 128.
The Math.floor() method that surrounds Math.random() * 256, lops off any decimal fraction and leaves us with a whole number. Imagine Math.random gave us a number of 0.96. We multiply that by 256 and get 245.76. Apply Math.floor to that number and we're left with 245 and that becomes our color number.
We calculate three random numbers, one for each color channel, store our rgb color string in a variable, and pass the color string as an argument to the mouseDownCallback function.
Let's look at that mouseDownCallback inside our setup script.
Let's look at our setup script. It's only slightly different than our first setup script, draw-lines-setup.js. Open up js/project/drawing/draw-colorful-lines-setup.js. Here's the script:
/DrawColorfulLinesSetup
//Click down to start drawing a line, release the mouse to stop drawing
//Each click down generates a new color for the line
var DrawColorfulLinesSetup = function (setupArgs) {
"use strict";
//setupArgs passes in a reference to the project instantiation of the Main class
if (!setupArgs) {
setupArgs = {};
}
//store a reference to "this" drawShapeSetUp object to use in callbacks below
var myDrawing = this;
this.myMain = setupArgs.myMain || {}; //store a reference to the Main object
//create a second canvas to draw on
this.canvasDimensions = {w:1200, h:800}; //set default canvas dimensions
if(setupArgs.myMain) { //if reference to Main object was passed, get the canvas dimensions from Main
this.canvasDimensions = setupArgs.myMain.getCanvasDimensions();
}
this.drawCanvas = document.createElement("canvas");
this.drawContext = this.drawCanvas.getContext("2d");
this.drawCanvas.width = this.canvasDimensions.w;
this.drawCanvas.height = this.canvasDimensions.h;
//line has it own particular Painter setupPaint method, you call it whenever you click down to draw a line
//see behaviors Drawer's mouseDownCallback below
this.lineDrawer = {
spriteProps:{name:'lineDrawer', x: 0, y:0, w: 0, h: 0, type:"line", mouseLoc:null, mouseIsDown: false, strokeColor: 'rgb(0,0,0', lineWidth: 2, visible:true},
painters:[new DrawLinePainter({canvas: this.drawCanvas, context: this.drawContext})],
behaviors:[new DrawerColor({mouseDownCallback: function(aStrokeColor){myDrawing.lineDrawer.spriteProps.strokeColor = aStrokeColor; myDrawing.lineDrawer.painters[0].setupPaint(myDrawing.lineDrawer.spriteProps);}})]
};
this.lineDrawerSprite = new ShapeLineGraphic(this.lineDrawer);
this.sprites = [this.lineDrawerSprite];
return this;
};
DrawColorfulLinesSetup.prototype.getSprites = function() {
"use strict";
return this.sprites;
};Focus on this.lineDrawer's behaviors array. We're instantiating a DrawerColor behavior this time and passing it a mouseDownCallback function. Let's look at that function with a couple line breaks added to make it easier to read:
function(aStrokeColor){
myDrawing.lineDrawer.spriteProps.strokeColor = aStrokeColor;
myDrawing.lineDrawer.painters[0].setupPaint(myDrawing.lineDrawer.spriteProps);
}This time our anonymous function has a parameter, aStrokeColor. That's the random number we passed to the mouseDownCallback in the DrawerColor behavior.
Our first line of code sets the strokeColor of lineDrawer to the random rgb color string. The second line is similar to our first example. We call the sprite's painter, DrawLinePainter, and start up the setupPaint method. Remember we run this method just once at the beginning of each line we draw.
With just a few changes in the code, we can draw colorful lines eveytime we click down and move the mouse.
Next up, we'll look at a way to create a drawing app, adding a variety of shapes to draw on the screen.