03 February 2015

JavaScript Spider Web application

First of all I wanna say thank you all, as I'm receiving this award ... OK, not any award but really thank you all for reading all these years and commenting, this is my post number 300! It's kinda interesting to just be around so many years (started back in 2007) and to be able to see how technologies change over time, some old disappear and some new are created and you can see where things are moving and it's in good direction so you feel OK about what you're doing.

For this occasion I prepared JavaScript version of my previously written ActionScript Spider Web application, thing - whatever. It's been almost five years ago when this app was coded, never to late to recycle.

There are five variables you can play with: Circles, Nodes, Distance, Radius and Tension. They are easy to understand if you just try different values.

here is entire code:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>SpiderWeb App</title>
    </head>
    <body>
    <style type="text/css">
    p {
        font-family:'Lucida Grande',Tahoma,Verdana,Arial,Sans-serif; 
        font-size:11px; 
        font-weight:700;
        width:50px;
    }
    .styled-button-4 { 
        -webkit-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0; 
        -moz-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0; 
        box-shadow:rgba(0,0,0,0.98) 0 1px 0 0; 
        background-color:#EEE; 
        border-radius:0; 
        -webkit-border-radius:0; 
        -moz-border-radius:0; 
        border:1px solid #999; 
        color:#666; 
        font-family:'Lucida Grande',Tahoma,Verdana,Arial,Sans-serif; 
        font-size:11px; 
        font-weight:700; 
        padding:2px 6px; 
        height:28px 
    } 
    .styled-input { 
        -webkit-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0; 
        -moz-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0; 
        box-shadow:rgba(0,0,0,0.98) 0 1px 0 0; 
        background-color:#EEE; 
        border-radius:0; 
        -webkit-border-radius:0; 
        -moz-border-radius:0; 
        border:1px solid #999; 
        color:#666; 
        font-family:'Lucida Grande',Tahoma,Verdana,Arial,Sans-serif; 
        font-size:11px; 
        font-weight:700; 
        padding:1px 3px; 
        height:20px 
    } 
    </style>
    <div id="menu"  style="width:160px;float:left;">
    <p>
        Circles: <input type="text" class="styled-input" id="circles" value="5"><br>
        Nodes: <input type="text" class="styled-input" id="nodes" value="7"><br>
        Distance: <input type="text" class="styled-input" id="distance" value="0.4"><br>
        Radius: <input type="text" class="styled-input" id="radius" value="20"><br>
        Tension: <input type="text" class="styled-input" id="tension" value="0.25"><br><br><br>
        <input type="button" class="styled-button-4" value="Make SpiderWeb" onClick="initWeb()"/>     
    </p>
    </div>
    <div id="content" style="background-color:#EEEEEE;float:left;">
    <canvas id="myCanvas" width="600" height="500" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
    </div>
        <script>
    
            function Point(x, y) {
              this.x = x;
              this.y = y;
            }
            function drawLine(x1, y1, x2, y2) {
                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.lineWidth = 3;
                ctx.strokeStyle = 'black';
                ctx.stroke();
            }
        
            function drawCurves(a, t) {
                var canvas = document.getElementById('myCanvas');
                var context = canvas.getContext('2d');
                var webx = canvas.width / 2;
                var weby = canvas.height / 2;                
                context.beginPath();
                
                for (var m = 0; m < a.length-1; m++)
                {
                    context.moveTo(a[m].x, a[m].y);
                    var pointOnMedianX = (a[m].x + a[m+1].x)/2;
                    var pointOnMedianY = (a[m].y + a[m+1].y)/2;
                    var controlX = t * webx + (1-t) * pointOnMedianX;
                    var controlY = t * weby + (1-t) * pointOnMedianY;
                    context.quadraticCurveTo(controlX, controlY, a[m+1].x, a[m+1].y);
                }
                context.moveTo(a[a.length-1].x, a[a.length-1].y);
                
                var pointOnMedianX = (a[a.length-1].x + a[0].x)/2;
                var pointOnMedianY = (a[a.length-1].y + a[0].y)/2;
                var controlX = t * webx + (1-t) * pointOnMedianX;
                var controlY = t * weby + (1-t) * pointOnMedianY;                                
                
                context.quadraticCurveTo(controlX, controlY, a[0].x, a[0].y);
                
                context.lineWidth = 2;
                context.strokeStyle = 'black';
                context.stroke();            
            }
            
            function trim(num)
            {
                var nstr = parseInt(num*100);
                return Number(nstr/100);
            }            

            function makeWeb(circles, nodes, distance, radius, tension) {
                var canvas = document.getElementById("myCanvas");
                var webx = canvas.width / 2;
                var weby = canvas.height / 2;
                
                var coords = [];
                var angle;
                var currentRadius = radius;
                var angleStep = 360 / nodes;
                
                for (var i=0; i<circles; i++) 
                {
                    currentRadius += currentRadius * distance;
                    for (var j=0; j<nodes; j++)
                    {
                        angle = angleStep * (j + 1);
                        angle = angle * Math.PI / 180;
                        var z1 = webx + trim(currentRadius * Math.cos(angle));
                        var z2 = weby + trim(currentRadius * Math.sin(angle));
                        
                        var point = new Point(z1, z2);
                        coords.push(point);

                    }
                    drawCurves(coords, tension);
                    if (i == circles-1) 
                    {
                        for (var l=0; l<coords.length; l++)
                        {
                            drawLine(webx, weby, coords[l].x, coords[l].y);
                        }
                    }
                    coords.splice(0, nodes);
                }        
            }
            
            function initWeb() {
                var circlesValue = Number(document.getElementById('circles').value);
                var nodesValue = Number(document.getElementById('nodes').value);
                var distanceValue = Number(document.getElementById('distance').value);                
                var radiusValue = Number(document.getElementById('radius').value);
                var tensionValue = Number(document.getElementById('tension').value);
                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");
                ctx.clearRect (0, 0 , c.width , c.height );
                makeWeb(circlesValue, nodesValue, distanceValue, radiusValue, tensionValue);
            }
            
            makeWeb(5, 7, 0.4, 20, 0.25);

        </script>
    </body>
</html>
        



*_*

0 comments:

 

template by blogger templates