learn2code lesson 4

by dirkcuys

HTML

<svg id="canvas"></svg>

JavaScript

/******* Stuff you don't need to understand *******/
function rect(x, y, width, height, color){
    var draw = SVG('canvas').size(600, 400);
    var rect = draw.rect(width, height);
    rect.transform({x: x, y: y});
    if (color){
        rect.fill(color);
    }
}

function circle(x, y, radius){
    var draw = SVG('canvas').size(600, 400);
    var circle = draw.circle(radius);
    circle.transform({x: x-radius/2.0, y: y-radius/2.0});
}

function text(x, y, text){
    var draw = SVG('canvas').size(600, 400);
    var txt = draw.text(text);
    txt.transform(x, y);
}

/******* Your code below this line *******/

function tree(x, y, width, height){
    rect(x+width/2 - width/10, y-height, width/5, height);
    rect(x+width/2 - width/3, y-height+height/10, width/1.5, height/10*7);
    rect(x, y-height+height/5, width, height/5*2);
}

tree(10, 200, 50, 50);

/*var base = 200;
var left = 0;
var height = 40;
var width = 40;
var gap = 10;
for ( counter=1; counter<20; counter++ ){
    width = 20 + Math.random()*40;
    height = 20 + Math.random()*180;
    
    type = Math.round(Math.random()*3);
    if (type == 1){
        // building with big windows
            
    }
    if (type == 2){
    }
    if (type == 3){
    }
    rect(left, base - height, width, height);
    left = left + width + gap;
}*/

/*left = 0;
for ( counter=1; counter<20; counter++ ){
    width = 20 + Math.random()*50;
    height = 20 + Math.random()*180;
    rect(left, base - height, width, height, 'grey');
    left = left + width + gap;
}*/