JavaScript Challenge #3 (Turtle Drawing)

Frameworks & Extensions

Fiddle Options

http://mootools.net/blog/2012/08/08/javascript-challenge-3/ The challenge for this week is to design a turtle drawing program that accepts any form of user input in order to move, rotate and style a “pen” across a canvas. It should resemble the functionality demonstrated in the following diagram… The important things we are looking for are the ability to change direction and then to move forward in a straight line. You can do this with HTML elements (and some interesting CSS) but we encourage the use of SVG or canvas in your solutions as they are more suited to the task. Hint: you don’t have to have the labels on the left and you can use text fields (or even keyboard navigation) instead of links. What is important is how you maintain and modify direction and position of the “pen” (the point at the “front” of the line).

Normalized CSS

Body tag

DTD

Framework <script> attribute

External Resources

Languages

Results

Ajax Requests

Echo apis are created to simulate Ajax calls: /echo/json/ for JSON, http://jsfiddle.net/echo/jsonp/ for JSONP, /echo/html/ for HTML and /echo/xml/ for XML.

Please read API documentation and follow examples.

Examples

Legal, Credits and Links

Created and maintained by Piotr and Oskar.

Hosted by DigitalOcean.

Special thanks to MooTools community.

License

All code belongs to the poster and no license is enforced.

JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.

Links

Please read the documentation.
For updates please follow our blog, tweets or become a fan.

Tip JSFiddle

Keyboard shortcuts

<div class="wrapper">
    <h2>Turtle Drawing</h2>

<div class="controls">
        <label for="color">Color:&nbsp;</label>
        <select id="color">
            <option value="#000000">Black</option>
            <option value="#ff0000">Red</option>
            <option value="#00ff00">Green</option>
            <option value="#0000ff">Blue</option>
        </select>

<label for="length">Length:&nbsp;</label>
        <select id="length">
            <option value="100">100px</option>
            <option value="50">50px</option>
            <option value="25">25px</option>
            <option value="10">10px</option>
        </select>

<label for="angle" title="Add degree to current">Angle:&nbsp;</label>
        <input id="angle" type="text" value="0" class="direction" /><span>&deg;</span>

<div class="info">
        <span>Current Angle:&nbsp;</span><strong id="current-angle">0</strong><strong >&deg;</strong >
    </div>
</div>

HTML

var td = new Object({
    'canvas': document.getElementById('canvas'),
    'x': 0, 'y': 0, // coordinates
    'a': 0, // angle
    'ctx': document.getElementById('canvas').getContext('2d'), // 2D context
    'pen': document.getElementById('pen'), // pen image

'init': function() {
        this.ctx.lineWidth = 2;
        this.ctx.translate(200, 120); // (0,0) = (200,120);
        this.positionPen();
    },

'positionPen': function() {
        this.pen.style.top = this.y + 104 + 'px';
        this.pen.style.left = this.x + 200 + 'px';
    },

'showAngle': function() {
        document.getElementById('current-angle').innerHTML = this.a % 360;
    },

'drawLine': function(length, angle, color) {
        this.a += angle;
        // calculate new end points
        var x = Math.round(this.x + length * Math.cos(this.a * Math.PI / 180)),
            y = Math.round(this.y + length * Math.sin(this.a * Math.PI / 180));

// create line
        var ctx = this.ctx;

ctx.beginPath();
        ctx.strokeStyle = color;
        ctx.moveTo(this.x, this.y);
        ctx.lineTo(x, y);
        ctx.stroke();

// set new star point
        this.x = x;
        this.y = y;

// reposition pen and update current angle
        this.positionPen();
        this.showAngle();
    },

'draw': function() {
        var c = document.getElementById('color').value,
            l = document.getElementById('length').value,
            a = parseInt(document.getElementById('angle').value);
        this.drawLine(l, a, c);
    }
});

td.init();

JavaScript

CSS

Result

Frameworks & Extensions

Fiddle Options

External Resources

Languages

Ajax Requests

Examples

jQuery

Dojo

Mootools

YUI

Processing.js

ExtJS

Legal, Credits and Links