Drawing Circles

by tylerbrownhenry

HTML

<div class="circle"></div>
<div class="e" style="width:288px; height:288px"></div>

<span class="console"></span>
<div class="btn tool" id="darken"></div>
<div class="btn tool" id="pencil"></div>
<div class="btn color" id="#23ffff"></div>
<div class="btn" id="eyedropper"></div>

CSS

.circle{
    width:30px;
    height:30px;
    border-radius:15px;
    background-color:#440000;
}

.e{
    border:1px solid #ccc;
}

.btn{
    width:10px;
    height:10px;
    display:block;
    border:1px solid #000;
}

.pixel{
    width:9px;
    height:9px;
    display:block;
    float:left;
    outline:1px dotted #444;  
}

JavaScript

function intersects(x, y, cx, cy, r) {
    var dx = x-cx
    var dy = y-cy
//    return dx*dx+dy*dy <= r*r //true/false
    return dx*dx+dy*dy+'|'+r*r; // gives the numbers compared
    //can find some 'fuzzy' math to round the corners?
}

//cx, cy are the center of the circles (mouse click)
//x, y are the pixels that we are looking for (surrounding)
//r is the radius
console.log(intersects(15,13,10,10,6));


function createDivs(){
    
    appendToDivs = '';
    
    for(i=0,r=1,e=1;i < (32*32);i++){
       
        if(e == 33){
            e=1;
            r++
        };
        appendToDivs += '<div x='+e+'  y='+r+' class="pixel" style="background-color:#666666"></div>';
         e++
    };
    
    $('.e').html(appendToDivs);
};

brush = {size:6,shape:'square'};


createDivs();