<h1>Fun with Primes.</h1>

<section class="output">
     
</section>

<section class="display">
    
</section>

<button class="control">
    <span class="play">►</span>
    <span class="pause">∎</span>
</button>

<button class="reset">
    Reset
</button>
@import url(https://fonts.googleapis.com/css?family=Oxygen+Mono|Exo+2:600,200,800,300);

$c: #d7dbdd;
$c1: #d781f9; $c2: #80e3f7; $c3: #ffe868;
$c4: #ef7658; $c5: #f26395; $c6: #62efab;


body {
    
    font-family: "Exo 2", Helvetica, Arial;
    background-color: #172f38;
    padding: 0 50px 20px;
    color: $c;
    
}

h1 {
    text-align: center;
    font-size: 2em;
    font-weight: 600;
    line-height: 1;
}

.output {
    
    color: rgba(255,255,255,0.3);
    text-align: left;
    padding: 20px;
    font-family: "Oxygen Mono";
    font-size: 12px;
    
    i {

        font-style: normal;
        margin: 0 0.5em 0 0;
        border-radius: 3px;
        display: inline-block;
        min-width: 2em;
        
        &.prime {
            &0 { color: $c1; 
                text-shadow: 0 0 3px $c1; }
            &1 { color: $c2; 
                text-shadow: 0 0 3px $c2; }
            &2 { color: $c3; 
                text-shadow: 0 0 3px $c3; }
            &3 { color: $c4; 
                text-shadow: 0 0 3px $c4; }
            &4 { color: $c5; 
                text-shadow: 0 0 3px $c5; }
            &5 { color: $c6; 
                text-shadow: 0 0 3px $c6; }
        }
    }
}

.display {
    
    font-size: 8em;
    font-weight: 900;
    text-align: center;
    line-height: 1;
    position: fixed;
    left: 20%;
    top: 50%;
    margin-top: -0.5em;
    right: 20%;
    transition: all 1s ease-in, opacity 0.7s ease-in 0.3s;
    color: rgba(255,255,255,0.65);
    
    &.prime {
        color: $c6;
        opacity: 0.6;

        &.c0 { color: $c1; }
        &.c1 { color: $c2; }
        &.c2 { color: $c3; }
        &.c3 { color: $c4; }
        &.c4 { color: $c5; }
        &.c5 { color: $c6; }
    }
    &.out {
        &.lb { transform: translate3d(-2em, 1em, 0em); }
        &.l { transform: translate3d(-2em, 0em, 0em); }
        &.lt { transform: translate3d(-2em, -1em, 0em); }
        &.t { transform: translate3d(0em, -1em, 0em); }
        &.rt { transform: translate3d(2em, -1em, 0em); }
        &.r { transform: translate3d(2em, 0em, 0em); }
        &.rb { transform: translate3d(2em, 1em, 0em); }
        &.b { transform: translate3d(0em, 1em, 0em); }
        opacity: 0;
    }
    
}

.control, .reset {
    
    position: fixed;
    top: 20px;
    left: 30px;
    color: black;
    border: none;
    background: $c2;
    border-radius: 2px;
    padding: 0.5em 1em;
    opacity: 0.7;
    transition: all 0.2s ease;
    
    &:hover {
        opacity: 1;
    }
    
    &.play {
        .play { display: none; }
    }
    &.pause {
        .pause { display: none; }
    }
}

.reset {
    right: 30px;
    left: auto;
    font-weight: 600;
}



View Compiled

var $output = $(".output"),
    $display = $(".display"),
    timer, coord = ["t","rt","lt","b","rb","lb","l","r"];

// thanks for @gavrochelegnou on Twitter for suggesting this 
// isPrime method from 
// http://www.javascripter.net/faq/numberisprime.htm :)

function isPrime(n) {

    var m = Math.sqrt(n);

    if (isNaN(n) || !isFinite(n) || n%1 || n<2) { 
        return false; 
    }

    if ( n % 2 == 0 ) { return ( n == 2 ); }
    if ( n % 3 == 0 ) { return ( n == 3 ); }

    for ( var i = 5; i <= m; i += 6 ) {
        if ( n % i == 0 ) { return false; }
        if ( n % (i + 2) ==0 ) { return false; }
    }

    return true;

}

function outputPrime(n, c) {
    if(n) {
        $output.append("<i class='prime" + c + "'>" + n + "</i>");
    }
}

function outputNormal(n) {
    if(n) {
        $output.append("<i>" + n + "</i>");
    }
}

function display(n, prime, c) {
            
    var $temp, pos;
    if(n) {

        $display.text(n);

        if(prime) {

            pos = Math.floor(Math.random()*coord.length);
            
            $temp = $display
                .clone()
                .addClass("prime c" + c)
                .insertAfter( $display );
        
            setTimeout(function() {
                $temp
                    .addClass("out")
                    .addClass(coord[pos]);
            }, 10);
            
            setTimeout(function() {
                $temp.remove();
            }, 1200);

        }
    }
}



var n = parseInt(window.localStorage.prime) || 0,
    work, scroll, 
    paused = true;

function calcPrimes() {

    var c, p;
    clearInterval(work);
    work = setInterval(function() {
        
        c = Math.floor(Math.random()*6);
        p = isPrime(n);

        if( !p ) { 
            outputNormal(n); 
            display(n, p, c);
        } else { 
            outputPrime(n, c);
            display(n, p, c);
        }
        
        n++;
    }, 20 );

}
function pauseWork() {
    clearInterval(work);
}

function scrollWindow() {
    scroll = setInterval(function() {
        $("body").animate({
            "scrollTop": $("body").height()-80
        }, 300 );
    }, 1200 );
}
function pauseScroll() {
    clearInterval(scroll);
}


$(".control").on("click", function() {
    
    if( paused ) {
        scrollWindow();
        calcPrimes();
        $(".control")
            .addClass("play")
            .removeClass("pause");
    } else {
        pauseScroll();
        pauseWork();
        $(".control")
            .addClass("pause")
            .removeClass("play");
    }
    
    paused = !paused;
    
}).trigger("click");

$(".reset").on("click", function() {
    
    paused = false;
    window.localStorage.prime = n = 0;
    $output.text("");
    $(".control")
        .trigger("click")
        .trigger("click");

});












setInterval(function(){
    window.localStorage.prime = n; 
},5000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js