np7 testing

by Admiral Potato

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, user-scalable=0, target-densityDpi=device-dpi">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="generator" content="Admiral's Hands">
    <title>Nuclear Pixel</title>
    <link href="http://fonts.googleapis.com/css?family=Exo:100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="bg_interlace" style="display:none"></div>
<div id="fade_in"></div>
<ul id="nav" role="navigation">
    <li><a href="about/" id="nav_about">About</a></li>
    <li><a href="models/" id="nav_models">Models</a></li>
    <li><a href="papercraft/" id="nav_papercraft">Papercraft</a></li>
    <li><a href="code/" id="nav_code">Code</a></li>
    <li><a href="photos/" id="nav_photos">Photos</a></li>
    <li><a href="profile/" id="nav_profile">Profile</a></li>
</ul>
<div id="body_pad">
<div id="holder" style="display: none;">
    <div id="head">
        <div id="logo" title="Nuclear Pixel"><a href="./"><span>Nuclear Pixel</span></a></div>
        <span class="title">Nuclear Pixel</span>
        <span class="credit">by Admiral Potato</span>
        <div class="clearfix"></div>

    </div>
    <div id="content">
&&&
    </div>
</div>
</div>

<script src="http://7.npxl.us/js/jquery-1.7.2.min.js"></script>
<script src="https://raw.github.com/pyrsmk/molt/master/molt-2.4.3.W.min.js"></script>
<script src="http://home.nuclearpixel.com/npos3d/src/core.js"></script>
<script src="http://home.nuclearpixel.com/npos3d/src/geom.circle.js"></script>
<script src="http://home.nuclearpixel.com/npos3d/src/font.js"></script>
<script src="http://7.npxl.us/js/user.js"></script>
<script src="http://7.npxl.us/js/shapes.js"></script>

</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    text-align: inherit;
    text-decoration: inherit;
    color: inherit;
    background-color: transparent;
}
*:focus{
    outline: 1px solid #19d;
    outline: none;
}
html, body{
    height: 100%;
    width: 100%;
}

body{
    color: #ccc;
    background-color: #000;
    vertical-align: top;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    font-style: normal;
    font-family: 'Exo', sans-serif;
    text-align: left;
    text-decoration: none;
}

#bg_canvas,#bg_interlace,#fade_in{
    display: block;
    position: fixed;
    top:0;
    left:0;
}
#bg_interlace,#fade_in{
    width:100%;
    height:100%;
}
#bg_canvas{
    z-index: -2;
    background-color: #fff;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}
#bg_interlace{
    background-image: url('img/interlace.gif');
    background-repeat: repeat;
    z-index: 1;
}
#fade_in{
    z-index: 999;
    background-color: #fff;
}

#body_pad{
    padding: 32px 0;
}
#holder{
    max-width: 960px;
    margin: 0 auto;
    background-color: #444;
    border-radius: 8px;
}

.debug{
    font-size: 10px;
    line-height: 16px;
    font-family: 'Monaco', monospace;
    white-space: pre-wrap;
    background-color: rgba(0,0,0,0.75);
    color: #9f0;
    margin: 2px;
    padding: 8px 16px;
    border-radius: 4px;
}

#head{
    background-color: #333;
    border-radius: 8px;
}

#logo{
    float: left;
    display: block;
    width: 96px;
    height: 96px;
}

#logo a{
    display: block;
    height: 100%;
    background-image: url('img/logo_96.png');
    background-repeat: no-repeat;
    background-position: center center;
}
#logo a span{
    display: none;
}
#head span{
    display: block;
    font-weight: 300;
}
#head .title{
    font-size: 48px;
   ...

JavaScript

var fadeIn = function(callback){
    $('#fade_in').delay(1500).fadeIn(500, callback);
};
var fadeOut = function(){
    $('#fade_in').fadeOut(1000);
};

var n = NPos3d;
var s = new n.Scene({
    canvasId:'bg_canvas',
    zIndex:0,
    lineWidth: 1
});

var sceneState = 'home';
if(window.location.pathname !== '/' && window.location.pathname !== '/profile/'){
    sceneState = 'station';
}

/*
s.camera.update = function(){
    var t = this;
    t.pos[0] = s.mpos.x / 1;
    t.pos[1] = s.mpos.y / 1;
}
s.add(s.camera);
*/

var motionAcceleration = 0;
var motionDivisior = 50;
var motion = new n.Ob3D();
motion.len = 0;
motion.update = function(){
    var t = this;
    //Follow mouse
    motionDivisior -= motionAcceleration
    t.pos[0] = -s.mpos.x / motionDivisior;
    t.pos[1] = -s.mpos.y / motionDivisior;
    t.len = Math.max(s.getVecLength2D(t.pos[0],t.pos[1]) / 5, 0.1);
    
    //t.pos[0] = 1;
    //t.pos[1] = 1;
}
s.add(motion);

var myShip = new n.Ob3D({
    shape: shapes.ship1,
    scale: [40,40,40],
    renderAlways: true
});
myShip.update = function(){
    var t = this;
    //t.pos[0] = s.mpos.x;
    //t.pos[1] = s.mpos.y;
    t.rot[1] += deg * 2;
    t.rot[2] = Math.atan2(s.mpos.y,s.mpos.x) + (deg * -90);
    //t.scale[1] += motion.len / 4;
    t.render();
}

s.add(myShip);

var starShape = {
    points: [[0,0,0],[10,0,0]],
    lines: [[0,1]]
};

var FieldStar = function(args){
    if(this === window){throw 'Please use the `new` keyword when using the `HexMenuItem` constructor.';}
    var t = this;
    var args = args || {};
    n.blessWith3DBase(t,args);
    var depth = (Math.random() * 500) -500;
    var scale = t.getScaleByZ(depth);
    var larger = Math.max(s.cx, s.cy) / scale;
    t.pos = [
        (Math.random() * larger * 2) -larger,
        (Math.random() * larger * 2) -larger,
        depth
    ];
    t.color = 'rgba(192,124,255,' + ((500 + t.pos[2]) / 500) + ')';
    return t;
};
var lastScreenSize = s.w + '+' + s.h;
var screenRadiusSquared =...