cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="outside">
    <div class="outer">
        <div class="wrapper front">
        </div>
        <div class="wrapper back">
        </div>
        <div class="wrapper top">
        </div>
        <div class="wrapper bottom">
        </div>
        <div class="wrapper left">
        </div>
        <div class="wrapper right">
        </div>
        <div id="earth">
            <div class="ground front">
            </div>
            <div class="ground back">
            </div>
            <div class="ground top">
            </div>
            <div class="ground bottom">
            </div>
            <div class="ground left">
            </div>
            <div class="ground right">
            </div>
        </div>
    </div>
</div>
            
          
!
            
              @keyframes day2dusk {
    from {
        background-image: linear-gradient(to bottom, rgba(0,127,255,1) 0%,rgba(240,255,255,1) 100%);
    }

    to {
        background-image: linear-gradient(to bottom, rgba(150,0,2,1) 0%,rgba(255,170,0,1) 20%,rgba(255,255,0,1) 47%,rgba(135,128,133,1) 79%,rgba(35,33,35,1) 100%);
    }
}

@keyframes dusk2night {
    from {
        background-image: linear-gradient(to bottom, rgba(0,127,255,1) 0%,rgba(240,255,255,1) 100%);
    }

    to {
        background-image: linear-gradient(to bottom, rgba(150,0,2,1) 0%,rgba(255,170,0,1) 20%,rgba(255,255,0,1) 47%,rgba(135,128,133,1) 79%,rgba(35,33,35,1) 100%);
    }
}

@keyframes night2dawn {
    from {
        background-image: linear-gradient(to bottom, rgba(0,127,255,1) 0%,rgba(240,255,255,1) 100%);
    }

    to {
        background-image: linear-gradient(to bottom, rgba(150,0,2,1) 0%,rgba(255,170,0,1) 20%,rgba(255,255,0,1) 47%,rgba(135,128,133,1) 79%,rgba(35,33,35,1) 100%);
    }
}

@keyframes dawn2day {
    from {
        background-image: linear-gradient(to bottom, rgba(0,127,255,1) 0%,rgba(240,255,255,1) 100%);
    }

    to {
        background-image: linear-gradient(to bottom, rgba(150,0,2,1) 0%,rgba(255,170,0,1) 20%,rgba(255,255,0,1) 47%,rgba(135,128,133,1) 79%,rgba(35,33,35,1) 100%);
    }
}

html, .day {
    background-image: linear-gradient(to bottom, rgba(0,127,255,1) 0%,rgba(240,255,255,1) 100%);
    padding-bottom: 100px;
    background-attachment: fixed;
}

body {
    zoom: .40;
}

.timeOfDay {
    background-attachment: fixed;
    transition: background-image 5s ease-in;
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    z-index: -10;
    opacity: 0;
}

.dusk {
    background-image: linear-gradient(to bottom, rgba(150,0,2,1) 0%,rgba(255,170,0,1) 20%,rgba(255,255,0,1) 47%,rgba(135,128,133,1) 79%,rgba(35,33,35,1) 100%);
}

.night {
    background-image: linear-gradient(to bottom, rgba(0,12,68,1) 0%,rgba(0,0,0,1) 50%,rgba(52,52,68,1) 100%);
}

.dawn {
    background-image: linear-gradient(to bottom, rgba(96,0,109,1) 1%,rgba(183,0,42,1) 20%,rgba(183,119,0,1) 47%,rgba(225,222,234,1) 79%,rgba(35,33,35,1) 100%);
}

.ground {
}

body {
    background-color: transparent;
}

.container {
    margin-top: 100px;
    min-height: 900px;
    background-color: transparent;
}




.building {
    position: relative;
    margin: 0 auto;
    width: 200px;
    transform: translateY(1000px) translateX(350px);
    transform-style: preserve-3d;
}


    .building:hover .face {
        outline: solid 1px goldenrod;
        box-shadow: inset 0 0 20px goldenrod;
        transition: all .01s linear;
    }



.face {
    position: absolute;
    display: block;
    background: rgba(175,175,175,1);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.2);
    font-size: 10px;
    text-align: center;
    color: rgba(0,0,0,0.5);
    font-family: sans-serif;
    text-transform: uppercase;
    word-wrap: hyphenate;
    transition: all 1s linear;
    overflow: hidden;
}

.sideFace {
}


.back {
    bottom: 0px;
}

.right {
    transform-origin: top right;
    bottom: 0px;
}

.left {
    transform-origin: center left;
    bottom: 0px;
}

.top {
    transform-origin: top center;
    background-color: #232525;
    box-shadow: inset 0 0 30px rgba(175,175,175,2);
    overflow: visible;
}

.bottom {
    transform-origin: bottom center;
    bottom: 0px;
    margin-left: -50px;
    background-color: #040404;
    border: dashed 2px yellow;
}

.front {
    transform: translateZ(100px);
    bottom: 0px;
}

.w {
    height: 30px;
    width: 18px;
    background-color: slategray;
    display: block;
    /*margin: 7px 0px 0px 6px;*/
    border: solid 1px grey;
    box-shadow: inset 0 0 5px black;
    position:absolute;
}

.lighted {
    background-color: antiquewhite;
    box-shadow: 0 0 5px yellow;
    animation: blinky 10s infinite;
}

.ledLighted {
    background-color: aliceblue;
    box-shadow: 0 0 5px aqua;
    animation: blinky 10s infinite;
}


@keyframes blinky {
    21%, 39%, 45%, 47%, 53% {
        background-color: antiquewhite;
        box-shadow: 0 0 5px yellow;
        animation: blinky 10s infinite;
    }

    26%, 38%, 40%, 44%, 46%, 48% {
        background-color: slategray;
        border: solid 1px grey;
        box-shadow: inset 0 0 5px black;
    }
}

.doorWay {
    height: 40px;
    width: 50px;
    left: 50%;
    margin-left: -25px;
    position: absolute;
    bottom: 1px;
    background-color: black;
    box-shadow: inset 0 -10px 30px grey;
}

    .doorWay:hover .door:last-child {
        transform: translateX(25px);
        transition: .6s;
        transform-origin: right center;
    }

    .doorWay:hover .door:first-child {
        transform: translateX(-25px);
        transition: .6s;
        transform-origin: left center;
    }

.door {
    top: 0px;
    height: 40px;
    width: 25px;
    background-color: lightgray;
    display: inline-block;
    box-shadow: inset 0 0 5px black;
}

#outside {
    height: 500px;
    padding-top: 300px;
    padding-bottom: 50px;
    position: relative;
    perspective: 2000px;
    transform-style: preserve-3d;
    perspective-origin: top 100px;
    transform: translateZ(2000px);
    z-index: 10000;
}

@keyframes cube-spin {
    25% {
        transform: rotateY(0deg) rotateX(-20deg) rotateY(-35deg) translateY(900px) translateX(-10%);
    }

    50% {
        transform: rotateY(180deg) rotateX(20deg) rotateY(20deg) translateY(800px) translateX(-10%);
    }

    75% {
        transform: rotateY(360deg) rotateX(20deg) rotateY(35deg) translateY(800px) translateX(-10%);
    }

    75% {
        transform: rotateY(540deg) rotateX(0deg) rotateY(0deg) translateY(900px) translateX(0px);
    }
}

.outer {
    position: relative;
    width: 2000px;
    transform: rotateX(-20deg) rotateY(-35deg) translateY(900px);
    transform-style: preserve-3d;
    transition: all 1s linear;
    cursor: pointer;
}

.wrapper {
    font-size: 100px;
    text-align: center;
    height: 1000px;
    width: 1000px;
    position: absolute;
    display: block;
    vertical-align: bottom;
    transform-style: preserve-3d;
    background-color: transparent !important;
    visibility: hidden;
}

    .wrapper * {
        visibility: visible;
    }


.outer > .front {
    transform: translateZ(500px);
    height: 1000px;
}

.outer > .back {
    transform: translateZ(-500px) rotateY(180deg);
    height: 1000px;
}

.outer > .left {
    transform: rotateY(270deg) translateX(-500px);
    transform-origin: center left;
    height: 1000px;
}

.outer > .right {
    transform: rotateY(-270deg) translateX(500px);
    transform-origin: top right;
    height: 1000px;
}


.outer > .top {
    transform: rotateX(-90deg) translateY(-500px) translateZ(-1000px);
    transform-origin: top center;
    box-shadow: none;
}

.outer > .bottom {
    transform: rotateX(90deg) translateY(500px) translateZ(800px);
    transform-origin: bottom center;
    margin-left: 0px;
    top: -200px;
    border: none;
}



#earth {
    position: relative;
    width: 2000px;
    /*transform: rotateX(-20deg) rotateY(-35deg) translateY(1001px);*/
    transform-style: preserve-3d;
    transition: all 1s linear;
    cursor: pointer;
}

.ground {
    font-size: 100px;
    text-align: center;
    height: 50px;
    width: 1000px;
    position: absolute;
    display: block;
    vertical-align: bottom;
    transform-style: preserve-3d;
    background-color: saddlebrown;
    /*border: solid 1px black;*/
    margin-top: 50px;
}

#earth > .front {
    transform: translateZ(700px) translateY(50px);
}

#earth > .back {
    transform: translateZ(-300px) rotateY(180deg) translateY(50px);
}

#earth > .left {
    transform: rotateY(270deg) translateX(-300px) translateY(50px);
    transform-origin: center left;
}

#earth > .right {
    transform: rotateY(-270deg) translateX(300px) translateY(50px);
    transform-origin: top right;
    margin-top: 10px;
}


#earth > .top {
    transform: rotateX(-90deg) translateY(-500px) translateZ(0px);
    transform-origin: top center;
    box-shadow: none;
    background-color: forestgreen;
    height: 1000px;
    box-shadow: inset 0 0 100px lawngreen;
    margin-top: 0px;
    /*top: 201px;*/
}
#earth > .bottom {
    display: none;
    transform: rotateX(90deg) translateY(500px) translateZ(800px);
    transform-origin: bottom center;
    margin-left: 0px;
    top: -200px;
    border: none;
    height: 1000px;
}



@keyframes planeLight {
    30% {
        border-right: solid 5px red;
        box-shadow: red -20px 1px 40px;
    }

    60% {
        border-right: solid 5px black;
        box-shadow: none;
    }

    100% {
        border-right: solid 5px red;
        box-shadow: red -20px 1px 40px;
    }
}

@keyframes planeLighta2 {
    30% {
        border-right: solid 5px yellow;
        box-shadow: red -20px 1px 40px;
    }

    60% {
        border-right: solid 5px black;
        box-shadow: none;
    }

    100% {
        border-right: solid 5px yellow;
        box-shadow: red -20px 1px 40px;
    }
}

.antenna {
    position: absolute;
    width: 500px;
    height: 5px;
    background-color: black;
    display: block;
    margin-bottom: 200px;
    border-right: solid 5px red;
    box-shadow: red -20px 1px 40px;
    animation: planeLight 5s infinite;
    transform-origin: bottom;
    transform-style: preserve-3d;
    top: -100px;
    margin-left: 100px;
    transform: rotateZ(-90deg); /*translateY(-100px);*/
}


.a2 {
    border-right: solid 5px yellow;
    box-shadow: yellow -20px 1px 40px;
    animation: planeLighta2 5s infinite;
}


.hospital .front,
.hospital .back,
.hospital .left,
.hospital .right {
    background-color: floralwhite !important;
}

.hospital .w {
    background-color: aqua;
}


.cross {
    width: 100px;
    height: 100px;
    background: linear-gradient(to bottom, transparent 35%, #d00 35%, #d00 65%, transparent 65%), linear-gradient(to right, transparent 35%, #d00 35%, #d00 65%, transparent 65%);
    position: relative;
    margin: auto auto;
}


#moon {
    visibility: hidden;
}

@keyframes dawnSun {
    20% {
        bottom: -300px;
        left: -300px;
        background-color: crimson;
        z-index: 30;
        visibility: visible;
    }

    20% {
        bottom: -150px;
        left: -150px;
    }

    60% {
        bottom: -50px;
        left: -50px;
        background-color: orangered;
    }

    100% {
        bottom: 10px;
        left: 10px;
        background-color: orange;
    }
}


@keyframes daySun {
    5% {
        z-index: 30;
        visibility: visible;
        bottom: 10px;
        left: 10px;
        background-color: orange;
    }

    20% {
        bottom: 150px;
        left: 150px;
        background-color: yellow;
    }

    60% {
        bottom: 500px;
        left: 500px;
    }

    100% {
        top: 10px;
        left: 1000px;
    }
}

#sun {
    visibility: hidden;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: solid 3px red;
    background-color: crimson;
    box-shadow: inset 0 0 30px orange;
    position: absolute;
    /*bottom:-300px;
    left: -300px;*/
    z-index: 1;
    animation: dawnSun 60s linear;
}

            
          
!
            
              function whichAnimationEvent() {
    var t,
        el = document.createElement("sun");

    var animations = {
        "animation": "animationend",
        "OAnimation": "oAnimationEnd",
        "MozAnimation": "animationend",
        "WebkitAnimation": "webkitAnimationEnd"
    }

    for (t in animations) {
        if (el.style[t] !== undefined) {
            return animations[t];
        }
    }
}

var animationEvent = whichAnimationEvent();
var num = 2;
var hasHospital = false;
$(document).ready(function () {
    var start = new Date().getTime();
    $('html').addClass('day');
    $('html').append('<div class="dawn timeOfDay"></div>');
    $('html').append('<div class="dusk timeOfDay"></div>');
    $('html').append('<div class="night timeOfDay"></div>');

    $('#sun').one(animationEvent,
             function (event) {
                 $('#sun').css({ 'animation': 'daySun 60s linear' });
             });

    $('head').append('<style id="buildme"></style>');


    var d = new Date();
    var currentHour = d.getHours();

    incrementDay(currentHour);
    hour = currentHour;
    time = setInterval(function () {
        if (hour < 23) {
            hour++;
        }
        else {
            hour = 0;
        }
        //console.log(hour);
        incrementDay(hour);
    }, 12500);



    while (!isSquare(num)) {
        num = Math.floor(Math.random() * 144);
    }


    if (num <= 1) {
        num = 4;
    }

    var squirt = Math.sqrt(num);

    var zoom = Math.min(squirt - 4, 4);

    //console.log(zoom);
    if (squirt == 2) {
        $('#outside').css({ 'padding-top': '500px', 'margin-top': '-400px' });
        $('.outer').css({ 'left': '250px' });
    } else {
        $('html').css({ 'zoom': '1' });
        $('.outer').css({ 'left': ((squirt * 75)) + 'px' });
    }

    for (var i = 0; i < num; i++) {
        randomBuilding(i, num);
    }

    $('.outer, #earth').dblclick(function () {
        var animate = $('.outer').attr('animate');

        if (animate === undefined) {
            $('.outer').css({ 'animation': 'cube-spin 25s infinite linear' });
            $('.outer').attr('animate', 0);
        }
        else if (animate == 0) {
            $('.outer').css({ 'animation-play-state': 'paused' });
            $('.outer').attr('animate', 1);
        }
        else {
            $('.outer').css({ 'animation-play-state': '' });
            $('.outer').attr('animate', 0);
        }

    });

    //$('.outside').draggable({
    //});


    var rows = Math.sqrt(num);
    var dimension = (rows * 350) + 200;

    var tX = rows > 4 ? (0 - (dimension - 1200)) : (rows == 4 ? -400 : (rows == 3) ? -100 : 250);

    $('#earth .top').css({ 'height': dimension + 'px', 'width': dimension + 'px', 'transform': 'rotateX(-90deg) translateY(-700px) translateX(' + tX + 'px) translateZ(1px)' });
    $('#earth .bottom').css({ 'height': dimension + 'px', 'width': dimension + 'px' });
    $('#earth .right').css({ 'width': dimension + 'px', 'transform': ' rotateY(-270deg) translateX(' + (dimension - 700) + 'px) translateY(50px) translateZ(' + tX + 'px)' });
    $('#earth .left').css({ 'width': dimension + 'px', 'transform': ' rotateY(270deg) translateX(-' + (dimension - 700) + 'px) translateY(50px) translateZ(' + (0 - tX) + 'px)' });
    $('#earth .front').css({ 'width': dimension + 'px', 'transform': 'translateZ(700px) translateY(50px) translateX(' + tX + 'px)' });
    $('#earth .back').css({ 'width': dimension + 'px', 'transform': 'translateZ(-' + (dimension - 700) + 'px) translateY(50px) translateX(' + tX + 'px)' });

    //console.log($('.outer').innerWidth() + ' ' + $('.outer').outerWidth());
    var end = new Date().getTime();
    var time = end - start;
    console.log(num + ' buildings took ' + (time / 1000).toFixed(2) + ' seconds to generate (' + $('.outer > .front div').length + ' elements)');
});

var time;
var hour;

var zi = 0;
var iz = 350;

var row = 1;
var col = 0;

function incrementDay(currentHour) {

    var day = 8;
    var night = 19;
    var dusk = 17;
    var dawn = 5;

    if (currentHour >= day && currentHour < dusk) {
        $('.day').animate({
            opacity: 1
        }, { duration: 5000, queue: false }, 'swing');
        $('#earth .top').animate({ backgroundColor: '#228b22' }, { duration: 5000, queue: false }, 'swing');

        $('.dawn').animate({
            opacity: 0
        }, 5000, 'swing');
    }
    else if (currentHour >= dusk && currentHour < night) {
        $('.dusk').animate({
            opacity: 1
        }, { duration: 5000, queue: false }, 'swing');
        $('#earth .top').animate({ backgroundColor: '#006400' }, { duration: 5000, queue: false }, 'swing');
        $('.day').animate({
            opacity: 1
        }, 5000, 'swing');
    }
    else if (currentHour >= night || (currentHour >= 0 && currentHour < dawn)) {
        $('.night').animate({
            opacity: 1
        }, { duration: 5000, queue: false });
        $('#earth .top').animate({ backgroundColor: '#003300' }, { duration: 5000, queue: false }, 'swing');
        $('.dusk').animate({
            opacity: 0
        }, 5000, 'swing');
    }
    else if (currentHour >= dawn && currentHour < day) {
        $('.dawn').animate({
            opacity: 1
        }, { duration: 5000, queue: false });
        $('#earth .top').animate({ backgroundColor: '#004F00' }, { duration: 5000, queue: false }, 'swing');
        $('.night').animate({
            opacity: 0
        }, 5000, 'swing');
    }
}


function randomBuilding(interval, ceiling) {
    var seedH = parseInt(Math.random() * 10);
    var seedW = parseInt(Math.random() * 10);
    var seedD = parseInt(Math.random() * 10);
    var height = Math.max(Math.min(seedH * 50, 1000), 60);
    var width = Math.max(Math.min(seedW * 50, 250), 60);
    var depth = Math.max(Math.min(seedD * 50, 250), 60);

    var color1 = Math.floor(Math.max(Math.min(Math.random() * 10, 9), 2)).toString();
    var color2 = Math.floor(Math.max(Math.min(Math.random() * 10, 9), 2)).toString();
    var color = '#' + color1 + color2 + color1 + color2 + color1 + color2;

    generateBuilding(height, width, depth, interval, ceiling, color);
}

function generateBuilding(height, width, depth, interval, ceiling, faceColor) {
    var bld = $('<p></p>').append('<div id="building' + interval + '" class="building"><div class="front face sideFace"></div><div class="back face sideFace"></div><div class="top face"></div><div class="bottom face"><div class="w"></div><div class="door"></div></div><div class="left face sideFace"></div><div class="right face sideFace"></div></div>').find('.building');
    var id = $(bld).attr('id');

    var newSide = $('<p></p>').append('<canvas class="newside"></canvas>').find('.newside').first();
    
    var rows = Math.sqrt(ceiling);
    var isFirstInRow = false;
    if (interval === (row * rows)) {
        row++;
        isFirstInRow = true;
    }
    if (isFirstInRow) {
        col = 1;
    }
    else {
        col++;
    }


    $(bld).attr('row', row).attr('col', col);
    //$('#buildme').text($('#buildme').text() + '#' + id + ' .sideFace{background-color : ' + faceColor + ';}\r\n');

    $(bld).find('.front').css({
        'height': height + 'px',
        'width': width + 'px',
        'transform': 'translateZ(' + (depth - depth) + 'px)'
    });
    $(bld).find('.front').append($(newSide).clone());

    $(bld).find('.front').find('.newside').attr('height', height).attr('width', width)


    if (num < 16) {
        $(bld).find('.back').css({
            'height': height + 'px',
            'width': width + 'px',
            'transform': 'translateZ(-' + depth + 'px) rotateY(180deg)'
        });
        $(bld).find('.back').append($(newSide).clone());
        $(bld).find('.back').find('.newside').attr('height', height).attr('width', width)

        $(bld).find('.left').css({
            'height': height + 'px',
            'width': depth + 'px',
            'transform': 'rotateY(270deg) translateX(-' + depth + 'px)'
        });
        $(bld).find('.left').append($(newSide).clone());
        $(bld).find('.left').find('.newside').attr('height', height).attr('width', depth)

    }
    else {
        $(bld).find('.back').remove();
        $(bld).find('.left').remove();
    }


    $(bld).find('.right').css({
        'height': height + 'px',
        'width': depth + 'px',
        'transform': 'rotateY(-270deg) translateX(' + depth + 'px) translateZ(' + -(depth - width) + 'px)'
    });
    $(bld).find('.right').append($(newSide).clone());
    $(bld).find('.right').find('.newside').attr('height', height).attr('width', depth)

    $(bld).find('.top').css({
        'height': depth + 'px',
        'width': width + 'px',
        'transform': '  rotateX(90deg) translateX(0px) translateY(-' + depth + 'px) translateZ(' + height + 'px)'
    });

    $(bld).find('.bottom').css({
        'height': (depth + 100) + 'px',
        'width': (width + 100) + 'px',
        'transform': 'translateZ(-50px) rotateX(-90deg) translateY(' + depth + 'px)'
    });


    $('.wrapper.front').prepend(bld);
    var z = $('.wrapper.front').find('#building' + (interval - 1));
    var zid = $(z).attr('id');


    if (zid !== undefined) {
        var odd = isOdd(interval);
        var more = 0;
        if ((interval - 1) === 1) {
            more = 0;
        }
        var x = $('#' + id).find('.bottom').outerWidth();
        iz -= x;
        var rowZ = 0;
        var last = $('.building').filter('[col="' + col + '"]').filter('[row="' + (row - 1) + '"]').find('.bottom');
        var lastW = $(last).outerWidth();
        var lastH = $(last).outerHeight();

        if (row > 1) {
            rowZ -= ((row - 1) * 350);
        }


        if (isFirstInRow) {
            iz = 350;
        }

        if ((width <= lastW && row > 1 && lastH <= 350) || col === 1) {

            rowZ = rowZ + (350 - lastH);

        }

        $('#' + id).css({
            'transform': ' translateY(1000px)  translateX(' + iz + 'px) translateZ(' + rowZ + 'px)'
        });


        if (Math.random() >= .99 && !hasHospital) {
            hasHospital = true;
            $('#' + id).addClass('hospital');
            $('#' + id).find('.top').append('<div class="cross"></div>');
            var crossDim = (depth > width ? width : depth) - 50;
            $('#' + id).find('.cross').css({ 'height': crossDim + 'px', 'width': crossDim + 'px', 'margin': (height - crossDim) / 10 + 'px auto' });
        }

    }


    //console.log(id);
    var isAnt = Math.random();
    if (isAnt < .7 && isAnt > .5) {
        var numAnt = Math.max(Math.min(Math.random() * 10, 3), 0);

        for (var i = 0; i < numAnt; i++) {
            $('#' + id).append(antenna(Math.floor(height), Math.floor(width), height, depth));
        }
    }



    var winH = randomIntFromInterval(10, 30) - 2;
    var winW = randomIntFromInterval(10, 30) - 2;

    var across = Math.max(Math.floor(width / winW), 1);
    var down = Math.max(Math.floor(height / winH), 1);


    var sDif = (width) - ((across - 1) * winW);
    var dDif = (height) - ((down - 1) * winH);

    var sideMargin = Math.max(Math.floor(sDif / across), .5);
    var topMargin = Math.max(Math.floor(dDif / down), .5);
    //console.log(width + ' ' + winW + ' ' + across + ' ' + sDif + ' ' + sideMargin);
    //console.log(height + ' ' + winH + ' ' + down + ' ' + dDif + ' ' + topMargin);
    //console.log($('#' + id));
    populatewindows($('#' + id).find('.front').find('.newside')[0].getContext("2d"), winH, winW, topMargin, sideMargin, '#' + id, '.front');
    if (num < 16) {
        populatewindows($('#' + id).find('.back').find('.newside')[0].getContext("2d"), winH, winW, topMargin, sideMargin, '#' + id, '.back');
        populatewindows($('#' + id).find('.left').find('.newside')[0].getContext("2d"), winH, winW, topMargin, sideMargin, '#' + id, '.left');
    }
    populatewindows($('#' + id).find('.right').find('.newside')[0].getContext("2d"), winH, winW, topMargin, sideMargin, '#' + id, '.right');



    var doorway = $('<div></div>');
    $(doorway).addClass('doorWay');

    var door1 = $('#' + id).find('.bottom').find('.door').first().clone();
    var door2 = $('#' + id).find('.bottom').find('.door').first().clone();
    $(doorway).append(door1);
    $(doorway).append(door2);
    $('#' + id).find('.front').append(doorway);
    dooradjuster = 40;


    //populateWindows($('#' + id).find('.front').find('.newside')[0].getContext("2d"), '#' + id, windowH, windowW);
    //if (num < 16) {
    //    populateWindows('.back', '#' + id, windowH, windowW);
    //    populateWindows('.left', '#' + id, windowH, windowW);
    //}
    //populateWindows('.right', '#' + id, windowH, windowW);
    $('#' + id).find('.bottom').find('.w').remove();
    $('#' + id).find('.bottom').find('.door').remove();






    //html2canvas(element, {
    //    onrendered: function (canvas) {
    //        $("#").append(canvas);
    //        getCanvas = canvas;
    //    }
    //});

    //$('#' + id).find('.w').each(function (i, elem) {
    //    if ($(elem).hasClass('lighted') || $(elem).hasClass('ledLighted')) {
    //        console.log($(elem).position().top);
    //    }
    //});


}


function isOdd(num) { return num % 2; }

function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
var isSquare = function (n) {
    return Math.sqrt(n) % 1 === 0;;
}


function antenna(y, x, h, d) {
    var height = Math.max(Math.min(Math.random() * 100, 500), 30);
    var rotate = Math.max(Math.min(Math.random() * 100, 360), 0);
    var theX = Math.max(Math.min(Math.random() * 100, (x - 10)), (x / 2));
    var theY = Math.max(Math.min(Math.random() * 100, (d - 10)), (d / 2));
    //console.log(theX + ' ' + theY);


    var ant = $('<div class="antenna"></div>').css({
        'width': height + 'px',//rotateY(' + rotate + 'deg) translateY(-' + theY + 'px)
        'transform': 'rotateZ(-90deg) translateX(' + theY / 2 + 'px)',
        'top': '-' + (h + (height / 2)) + 'px',
        'left': '-' + theY / 2 + 'px'
    });

    if (Math.random() < .09) {
        $(ant).addClass('a2');
    }
    var delay = Math.max(Math.min((Math.random() * 10), 9), 0);
    if (delay < 7) {
        $(ant).css({ 'animation-delay': delay + 's' });
    }


    return ant;
}


var coords = new Array();
var main = new Array();
class xy {
    constructor(x, y, type, height, width) {
        this.x = x;
        this.y = y;
        this.type = type;
        this.height = height;
        this.width = width;
    }
};

var win = new xy(0, 0, '');

function placeWindows(bld,face)
{

    for (var i = 0; i < coords.length; i++) {
        var place = coords[i];
        var win = $('<p><p/>').append('<div class="w"></div>').find('div');
        $(win).css({ 'top': place.y + 'px', 'left': place.x + 'px', 'height': place.height + 'px', 'width': place.width + 'px' }).addClass(place.type);
        var delay = Math.max(Math.min((Math.random() * 10), 9), 0);
        if (delay < 7) {
            $(win).css({ 'animation-delay': delay + 's' });
        }
        $(bld).find(face).append(win);
    }
    coords = null;
    coords = new Array();
}

function populatewindows(ctx, winH, winW, topMargin, sideMargin, bld, face) {
    var dooradjuster = 0;
    var faceH = ctx.canvas.clientHeight;
    var faceW = ctx.canvas.clientWidth;
    ctx.fillStyle = 'transparent';
    ctx.shadowColor = 'rgba(0,0,0,0.2)';
    ctx.shadowBlur = 30;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.fillRect(0, 0, faceW, faceH);



    var across = Math.floor(faceW / winW);
    var down = (Math.floor((faceH - dooradjuster) / winH));

    var pad = ((faceW - (across * winW)) / 2) - 1;


    win.x = winW;
    win.y = winH;
    var winCount = 0;
    for (var y = 0; y < down - 1; y++) {

        for (var x = 0; x < across - 1; x++) {
            var firstW = (faceW - ((across - 1) * (sideMargin + winW))) / 2;
            var firstH = (faceH - ((down - 1) * (topMargin + winH))) / 2;
            var sidePad = x > 0 ? (x * sideMargin) + (x * winW) + firstW : firstW;
            var topPad = y > 0 ? (y * topMargin) + (y * winH) + firstH : firstH;



            ctx.beginPath();
            ctx.fillStyle = 'slategrey';
            ctx.strokeStyle = 'grey';
            ctx.shadowBlur = 0;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
            ctx.lineWidth = 2;
            ctx.fillRect(sidePad, topPad, winW, winH);
            var iswin = Math.random();
            if (iswin > .55 && iswin < .6 && winCount < 8) {
                winCount++;
                var place = new xy(sidePad, topPad, 'lighted', winH, winW);

                ctx.fillRect(sidePad, topPad, winW, winH);

                var isLED = Math.random();
                if (isLED > .5 && isLED < .6) {

                    place.type = 'ledLighted';
                    ctx.fillRect(sidePad, topPad, winW, winH);
                }

                ctx.stroke();
                coords.push(place);
            }
            else {
                ctx.stroke();
                ctx.shadowColor = 'black';
                ctx.shadowBlur = 5;
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 0;
                ctx.fillRect(sidePad + 2, topPad + 2, winW - 4, winH - 4);
                ctx.stroke();

            }
        }

    }

    placeWindows(bld, face);


}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console