Box2d/LiquidFun b2EdgeShape
Jeffkillian.com initially started as a Geocities website when I was in 6th grade. Over the years, it has slowly evolved into a place where I can practice and become familiar with web development as it progresses. I started out coding with Microsoft Frontpage, then moved to Dreamweaver. Initially, there was very little coding, and it was all WYSIWYG. However, as I learned more, I could make it more interactive.


I incorporate drawings and blog posts to keep those that are interested updated. Through the evolution of the website, I was forced to learn HTML, PHP, CSS, XML, jQuery, javascript, and the handling of MySQL Databases. I've put online some code samples.
Box2d/LiquidFun b2EdgeShape
In implementing the paintbrush in dangeraffe I found an interesting aspect of b2Edgeshapes: they cannot collide with each other.

My setup for the brush is to continually draw a line from the last point where the mouse was to the current point. Whenever the current point changes, draw a line between the last and current point, and then update the last point to be the current point.

Each of these lines is a b2EdgeShape, and I'd then attach them to a body and things would work. However, I didn't anticipate that b2EdgeShapes can't collide with each other. It also seems like they have some weird properties that are not ideal for creating proper collisions. Though not ideal, rather than drawing a line in box2d it would make more sense to draw a very short/long rectangle. The only tricky part about this is rotating the rectangle correctly.

Below is the commented code for drawing a rectangle from a previous point (this.lastbrushPos) to the current point (currPos):
Drawing.prototype.addBrushStroke = function(point) {
    var color = "#000000"; //make the brushstroke black

    //currPos and this.lastbrushpoint are points relative to the center point of the body
    var currPos = new b2Vec2(point.x - this.start.x, point.y - this.start.y); //Make it relative to where you start

    //the length of the line is the distance between the points
    var width = Point.distance(currPos, this.lastBrushPos);

    if (width < .5) return; //For optimization, only draw lines when it is greater than .5 

    //Drawing a body requires knowing where it's center will be. This midpoint is the center.
    var midPoint = getMidpoint(currPos, this.lastBrushPos);

    //We will rotate around the midpoint to a certain angle.
    var angle = getAngleBetweenPoints(currPos, this.lastBrushPos);

    //Initialize the brushStrokeProperties
    var brushStrokeProps = {
        color: color,
        desc: "brushStroke",
        extDesc: "Custom Object",
        width: width,
        height: .25,
        density: 8,
        angle: angle,
        classID: 1,
        canTrash: 1,
        offSet: midPoint
    };
    //Create the fixture definition
    var brushStrokeFixDef = createFixtureDef(brushStrokeProps);

    //Add the fixture to the body
    addFixtureToBody(brushStrokeFixDef, this.drawing);

    //Update the old position to be the new position.
    this.lastBrushPos = currPos;
    return;
};
The initialization of brushStrokeProps, createFixtureDef, and addFixtureToBody is code specific to me. They allow creation of bodies and fixtures to be a lot easier in the long run. They can be found in BodyGen.js.

getAngleBetweenPoints does exactly what it states-it gets the angle between two points. Keep in mind, this works for my coordinate system which has Y increasing as we get lower on the screen.
function getAngleBetweenPoints(p1,p2){
    var newPoint=new Point(p1.x-p2.x,p1.y-p2.y);
    var pointAngle = Math.atan2(newPoint.y, newPoint.x);//get the point angle
    return pointAngle;
}

Write a comment...
Want more? Check the blog archives
Untitled Document