mardi 14 novembre 2017

Random city


<center>
<svg id="svgDemo" xmlns="http://www.w3.org/2000/svg" width="400" height="300"></svg>
<br>
<button onclick="myFunctionP()">City</button>
</center>

<script>
function myFunctionP() {
var svgns = "http://www.w3.org/2000/svg";
var o0 = Math.random();
var o1 = Math.random();

var rectf = document.createElementNS(svgDemo.namespaceURI, 'rect');
    rectf.setAttributeNS(null, 'x', 0);
    rectf.setAttributeNS(null, 'y', 0);
    rectf.setAttributeNS(null, 'width', 400);
    rectf.setAttributeNS(null, 'height', 300);
    rectf.setAttributeNS(null, 'fill', '#FFFFFF');

var rect0 = document.createElementNS(svgDemo.namespaceURI, 'rect');
    rect0.setAttributeNS(null, 'x', 0);
    rect0.setAttributeNS(null, 'y', 0);
    rect0.setAttributeNS(null, 'width', 400);
    rect0.setAttributeNS(null, 'height', 300);
    rect0.setAttributeNS(null, 'fill', '#000000');
    rect0.setAttributeNS(null, 'opacity', o0);

var rect1 = document.createElementNS(svgDemo.namespaceURI, 'rect');
    rect1.setAttributeNS(null, 'x', 0);
    rect1.setAttributeNS(null, 'y', 200);
    rect1.setAttributeNS(null, 'width', 400);
    rect1.setAttributeNS(null, 'height', 100);
    rect1.setAttributeNS(null, 'fill', '#000000');
    rect1.setAttributeNS(null, 'opacity', o1);

var a0 =  Math.floor(180*Math.random());
var r0 =  Math.floor(80*Math.random()+20);

var circle0 = document.createElementNS(svgDemo.namespaceURI, 'circle');
    circle0.setAttributeNS(null, 'cx', 50);
    circle0.setAttributeNS(null, 'cy', 200);
    circle0.setAttributeNS(null, 'r', r0);
    circle0.setAttributeNS(null, 'fill', '#FFFFFF');
    circle0.setAttributeNS(null, 'transform', 'rotate('+a0+' 200 200)');

    svgDemo.appendChild(rectf);
    svgDemo.appendChild(rect0);
    svgDemo.appendChild(circle0);
    svgDemo.appendChild(rect1);

var n0 =  Math.floor(99*Math.random())+1;
for (var i = 0; i < n0; i++) {

var x2 = Math.floor(400*Math.random());
var w2 = Math.floor(20*Math.random())+10;
var h2 = Math.floor(100*Math.random())+10;
var o2 = Math.random();

var rect2 = document.createElementNS(svgDemo.namespaceURI, 'rect');
    rect2.setAttributeNS(null, 'x', x2);
    rect2.setAttributeNS(null, 'y', 200-h2);
    rect2.setAttributeNS(null, 'width', w2);
    rect2.setAttributeNS(null, 'height', h2);
    rect2.setAttributeNS(null, 'fill', '#000000');
    rect2.setAttributeNS(null, 'opacity', o2);

    svgDemo.appendChild(rect2);

}}
</script>