banner ad demo added
cjgammon
parent
4d9fd5ef7a
commit
f94872941f
|
|
@ -0,0 +1,75 @@
|
|||
module.exports = function(grunt) {
|
||||
|
||||
var pkg = grunt.file.readJSON("package.json");
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
copy: {
|
||||
main: {
|
||||
files: [
|
||||
{
|
||||
expand: true,
|
||||
cwd: './src/',
|
||||
src: [
|
||||
'*',
|
||||
'!config.rb',
|
||||
'js/vendor/require.min.js',
|
||||
'js/vendor/modernizr.min.js'
|
||||
],
|
||||
dest: './site/',
|
||||
filter: 'isFile'
|
||||
},
|
||||
{
|
||||
expand: true,
|
||||
cwd: './src',
|
||||
src: ['assets/**'],
|
||||
dest: './site/'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
requirejs: {
|
||||
compile: {
|
||||
options: {
|
||||
name: "main",
|
||||
baseUrl: "./src/js/",
|
||||
mainConfigFile: "./src/js/main.js",
|
||||
out: "./site/js/main.js"
|
||||
}
|
||||
}
|
||||
},
|
||||
compass: {
|
||||
dist: {
|
||||
options: {
|
||||
config: './src/config.rb',
|
||||
sassDir: './src/sass',
|
||||
cssDir: './site/css'
|
||||
}
|
||||
}
|
||||
},
|
||||
processhtml: {
|
||||
options: {
|
||||
// Task-specific options go here.
|
||||
},
|
||||
dist: {
|
||||
files: {
|
||||
'./site/index.html': ['./site/index.html']
|
||||
}
|
||||
}
|
||||
},
|
||||
inline: {
|
||||
dist: {
|
||||
src: ['./site/index.html'],
|
||||
dest: ['./site/index.min.html']
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
||||
grunt.loadNpmTasks('grunt-contrib-requirejs');
|
||||
grunt.loadNpmTasks("grunt-contrib-compass");
|
||||
grunt.loadNpmTasks("grunt-processhtml");
|
||||
grunt.loadNpmTasks("grunt-inline");
|
||||
|
||||
grunt.registerTask("default", ["copy", "requirejs", "compass", "processhtml", "inline"]);
|
||||
};
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
snap-ad
|
||||
=======
|
||||
|
||||
Snap.svg banner ad
|
||||
|
||||
run
|
||||
`npm install`
|
||||
to add node modules
|
||||
|
||||
|
||||
run
|
||||
`grunt`
|
||||
to build
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>currentDocument</key>
|
||||
<string>src/js/app/app.js</string>
|
||||
<key>documents</key>
|
||||
<array>
|
||||
<dict>
|
||||
<key>expanded</key>
|
||||
<true/>
|
||||
<key>name</key>
|
||||
<string>src</string>
|
||||
<key>regexFolderFilter</key>
|
||||
<string>!.*/(\.[^/]*|CVS|_darcs|_MTN|\{arch\}|blib|.*~\.nib|.*\.(framework|app|pbproj|pbxproj|xcode(proj)?|bundle))$</string>
|
||||
<key>sourceDirectory</key>
|
||||
<string>src</string>
|
||||
</dict>
|
||||
</array>
|
||||
<key>fileHierarchyDrawerWidth</key>
|
||||
<integer>185</integer>
|
||||
<key>metaData</key>
|
||||
<dict>
|
||||
<key>src/index.html</key>
|
||||
<dict>
|
||||
<key>caret</key>
|
||||
<dict>
|
||||
<key>column</key>
|
||||
<integer>0</integer>
|
||||
<key>line</key>
|
||||
<integer>17</integer>
|
||||
</dict>
|
||||
<key>columnSelection</key>
|
||||
<false/>
|
||||
<key>firstVisibleColumn</key>
|
||||
<integer>0</integer>
|
||||
<key>firstVisibleLine</key>
|
||||
<integer>3</integer>
|
||||
<key>selectFrom</key>
|
||||
<dict>
|
||||
<key>column</key>
|
||||
<integer>7</integer>
|
||||
<key>line</key>
|
||||
<integer>19</integer>
|
||||
</dict>
|
||||
<key>selectTo</key>
|
||||
<dict>
|
||||
<key>column</key>
|
||||
<integer>0</integer>
|
||||
<key>line</key>
|
||||
<integer>17</integer>
|
||||
</dict>
|
||||
</dict>
|
||||
<key>src/js/app/app.js</key>
|
||||
<dict>
|
||||
<key>caret</key>
|
||||
<dict>
|
||||
<key>column</key>
|
||||
<integer>0</integer>
|
||||
<key>line</key>
|
||||
<integer>222</integer>
|
||||
</dict>
|
||||
<key>firstVisibleColumn</key>
|
||||
<integer>0</integer>
|
||||
<key>firstVisibleLine</key>
|
||||
<integer>199</integer>
|
||||
</dict>
|
||||
<key>src/js/main.js</key>
|
||||
<dict>
|
||||
<key>caret</key>
|
||||
<dict>
|
||||
<key>column</key>
|
||||
<integer>4</integer>
|
||||
<key>line</key>
|
||||
<integer>46</integer>
|
||||
</dict>
|
||||
<key>firstVisibleColumn</key>
|
||||
<integer>0</integer>
|
||||
<key>firstVisibleLine</key>
|
||||
<integer>47</integer>
|
||||
</dict>
|
||||
<key>src/sass/screen.scss</key>
|
||||
<dict>
|
||||
<key>caret</key>
|
||||
<dict>
|
||||
<key>column</key>
|
||||
<integer>2</integer>
|
||||
<key>line</key>
|
||||
<integer>81</integer>
|
||||
</dict>
|
||||
<key>firstVisibleColumn</key>
|
||||
<integer>0</integer>
|
||||
<key>firstVisibleLine</key>
|
||||
<integer>0</integer>
|
||||
</dict>
|
||||
</dict>
|
||||
<key>openDocuments</key>
|
||||
<array>
|
||||
<string>src/index.html</string>
|
||||
<string>src/js/main.js</string>
|
||||
<string>src/sass/screen.scss</string>
|
||||
<string>src/js/app/app.js</string>
|
||||
</array>
|
||||
<key>showFileHierarchyDrawer</key>
|
||||
<true/>
|
||||
<key>windowFrame</key>
|
||||
<string>{{642, 51}, {651, 811}}</string>
|
||||
</dict>
|
||||
</plist>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "snapad",
|
||||
"version": "0.0.1",
|
||||
"description": "snap ad",
|
||||
"main": "Gruntfile.js",
|
||||
"repository": {
|
||||
"type": "git"
|
||||
},
|
||||
"author": "CJ Gammon",
|
||||
"license": "Apache License v2",
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-contrib-copy": "*",
|
||||
"grunt-contrib-compass": "*",
|
||||
"grunt-contrib-requirejs": "*",
|
||||
"grunt-processhtml": "*",
|
||||
"grunt-inline": "*"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 648 500" enable-background="new 0 0 648 500" xml:space="preserve">
|
||||
<g>
|
||||
<rect x="81.479" y="30.406" fill="#989898" width="485.58" height="345.509"/>
|
||||
<polygon fill="#818181" points="81.479,375.915 6.775,450.619 641.765,450.619 567.06,375.915 "/>
|
||||
<polygon fill="#676767" points="620.983,469.296 23.345,469.296 4.669,450.619 639.659,450.619 "/>
|
||||
<rect x="100.156" y="77.096" fill="#0DAE8A" width="448.228" height="261.466"/>
|
||||
<g opacity="0.2">
|
||||
<g>
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_1_" x="81.479" y="30.417" width="485.58" height="345.509"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_1_" overflow="visible"/>
|
||||
</clipPath>
|
||||
<polygon clip-path="url(#SVGID_2_)" fill="#FFFFFF" points="567.06,95.772 81.479,375.915 81.479,30.406 567.06,30.406 "/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 75.863 60.214" enable-background="new 0 0 75.863 60.214" xml:space="preserve">
|
||||
<path fill="#0DAE8A" d="M52.547,0C46.668,0,41.428,2.418,38,6.192C34.572,2.418,29.332,0,23.453,0C13.124,0,0,4.75,0,23.75
|
||||
s38,35.414,38,35.414S76,42.75,76,23.75S62.877,0,52.547,0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 649 B |
|
|
@ -0,0 +1,21 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 56.205 100.385" enable-background="new 0 0 56.205 100.385" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#818181" d="M0,100h56V0H0V100z M52,88H4V12h48V88z"/>
|
||||
<rect x="4" y="12" fill="#0CAE8B" width="48" height="76"/>
|
||||
<g opacity="0.2">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_1_" x="0" y="0.005" width="56" height="88"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_1_" overflow="visible"/>
|
||||
</clipPath>
|
||||
<polygon clip-path="url(#SVGID_2_)" fill="#FFFFFF" points="56,28 0,88 0,0 56,0 "/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 928 B |
|
|
@ -0,0 +1,21 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 92.103 132.009" enable-background="new 0 0 92.103 132.009" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#818181" d="M0,132h92V0H0V132z M84,116H8V16h76V116z"/>
|
||||
<rect x="8" y="16" fill="#0DAE8A" width="76" height="100"/>
|
||||
<g opacity="0.2">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_1_" x="0" y="0.005" width="92" height="88"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_1_" overflow="visible"/>
|
||||
</clipPath>
|
||||
<polygon clip-path="url(#SVGID_2_)" fill="#FFFFFF" points="92,28 0,88 0,0 92,0 "/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 931 B |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
|
|
@ -0,0 +1,93 @@
|
|||
/* line 3, ../../src/sass/screen.scss */
|
||||
.base-font {
|
||||
font-family: 'Open Sans', serif;
|
||||
}
|
||||
|
||||
/* line 7, ../../src/sass/screen.scss */
|
||||
.snap-font {
|
||||
font-family: 'Source Sans Pro', serif;
|
||||
}
|
||||
|
||||
/* line 11, ../../src/sass/screen.scss */
|
||||
body {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* line 16, ../../src/sass/screen.scss */
|
||||
text {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* line 25, ../../src/sass/screen.scss */
|
||||
svg {
|
||||
-webkit-transform-origin: top left;
|
||||
-moz-transform-origin: top left;
|
||||
-ms-transform-origin: top left;
|
||||
-o-transform-origin: top left;
|
||||
transform-origin: top left;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* line 30, ../../src/sass/screen.scss */
|
||||
#learn-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* line 33, ../../src/sass/screen.scss */
|
||||
#learn-btn path, #learn-btn text {
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* line 39, ../../src/sass/screen.scss */
|
||||
#learn-btn:hover path:first-child {
|
||||
fill: #076656;
|
||||
}
|
||||
/* line 46, ../../src/sass/screen.scss */
|
||||
#learn-btn:hover path:nth-child(2) {
|
||||
fill: #7cd1c2;
|
||||
}
|
||||
/* line 51, ../../src/sass/screen.scss */
|
||||
#learn-btn:hover text {
|
||||
fill: #0a9a87;
|
||||
}
|
||||
/* line 59, ../../src/sass/screen.scss */
|
||||
#learn-btn:active path:nth-child(2) {
|
||||
-webkit-transform: translateY(2px);
|
||||
-moz-transform: translateY(2px);
|
||||
-ms-transform: translateY(2px);
|
||||
-o-transform: translateY(2px);
|
||||
transform: translateY(2px);
|
||||
}
|
||||
/* line 64, ../../src/sass/screen.scss */
|
||||
#learn-btn:active text {
|
||||
-webkit-transform: translateY(2px);
|
||||
-moz-transform: translateY(2px);
|
||||
-ms-transform: translateY(2px);
|
||||
-o-transform: translateY(2px);
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
/* line 71, ../../src/sass/screen.scss */
|
||||
#replay-btn:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/*
|
||||
@media (max-width: 400px) {
|
||||
svg{
|
||||
@include transform(scale(0.375));
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Snap! SVG</title>
|
||||
<link href="css/screen.css?__inline=true" media="screen, projection" rel="stylesheet" type="text/css" />
|
||||
<!--[if IE]>
|
||||
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<svg id="ad" width="400" height="400">
|
||||
<g id="meshAContainer">
|
||||
<rect x="0" y="0" width="400" height="400" fill="#efefef"/>
|
||||
</g>
|
||||
|
||||
<g id="screen1">
|
||||
<text id="text1" x="200" y="130" width="400"
|
||||
class="base-font"
|
||||
font-weight="100"
|
||||
font-size="40"
|
||||
fill="#686868"
|
||||
text-anchor="middle">
|
||||
Screens
|
||||
</text>
|
||||
|
||||
<text id="text2" x="200" y="300" width="400"
|
||||
class="base-font"
|
||||
font-weight="100"
|
||||
font-size="40"
|
||||
fill="#686868"
|
||||
text-anchor="middle">
|
||||
SVG
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<text id="text3"
|
||||
class="base-font"
|
||||
font-weight="100"
|
||||
font-size="50"
|
||||
fill="white"
|
||||
text-anchor="middle"
|
||||
opacity="0">
|
||||
<tspan x="200" y="180">Make SVG</tspan>
|
||||
<tspan x="200" y="250">a Snap!</tspan>
|
||||
</text>
|
||||
|
||||
<g id="heart" transform="translate(200, 200)">
|
||||
<path id="heart-shape" fill="#0DAE8A" d="M14.803-28.95c-5.879,0-11.119,2.418-14.547,6.192c-3.428-3.774-8.668-6.192-14.547-6.192c-10.329,0-23.453,4.75-23.453,23.75s38,35.414,38,35.414s38-16.414,38-35.414S25.133-28.95,14.803-28.95"/>
|
||||
</g>
|
||||
|
||||
<g id="burst" transform="translate(200, 200)" opacity="0">
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 149.256,-214.94 227.256,-214.94 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 49.256,-214.94 77.256,-214.94 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 -78.328,-214.94 -50.744,-212.273 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 -113.661,209.06 -86.077,211.727 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,-214.94 -213.41,-135.607 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,-39 -213.41,10.334 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,101 -213.41,130.334 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 215.697,21.383 241.697,50.717 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 215.697,-88.617 241.697,-59.283 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 208.691,137.42 207.805,194.354 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 95.256,211.727 61.923,240.194 "/>
|
||||
</g>
|
||||
|
||||
<g id="resolve" opacity="0">
|
||||
|
||||
<g id="replay-btn" transform="translate(345, 10)">
|
||||
<rect fill="transparent" width="48" height="49.5"/>
|
||||
<path fill="#cccccc" d="M25.207,9.594V4.082L12.793,11.25l12.415,7.168v-5.792C31.57,13.466,36.5,18.912,36.5,25.5
|
||||
c0,7.168-5.832,13-13,13s-13-5.832-13-13c0-0.565,0.049-1.118,0.119-1.664l-2.922-0.717C7.58,23.898,7.5,24.689,7.5,25.5
|
||||
c0,8.822,7.178,16,16,16s16-7.178,16-16C39.5,17.255,33.229,10.449,25.207,9.594z"/>
|
||||
</g>
|
||||
|
||||
<text id="text4"
|
||||
font-weight="100"
|
||||
fill="#02225d"
|
||||
text-anchor="middle">
|
||||
<tspan x="200" y="100"
|
||||
class="base-font"
|
||||
font-size="46">
|
||||
with
|
||||
</tspan>
|
||||
<tspan x="200" y="160"
|
||||
class="snap-font"
|
||||
font-size="70">
|
||||
Snap.svg
|
||||
</tspan>
|
||||
</text>
|
||||
|
||||
<g id="learn-btn" transform="translate(10, 350)">
|
||||
<path fill="#0B9B87" d="M147.129,37.886c0,3.156-2.558,5.714-5.714,5.714H5.714C2.558,43.6,0,41.042,0,37.886V8.175
|
||||
c0-3.156,2.558-5.714,5.714-5.714h135.702c3.156,0,5.714,2.558,5.714,5.714V37.886z"/>
|
||||
<path fill="#10B29C" d="M147.129,35.425c0,3.156-2.558,5.714-5.714,5.714H5.714C2.558,41.139,0,38.581,0,35.425V5.714
|
||||
C0,2.558,2.558,0,5.714,0h135.702c3.156,0,5.714,2.558,5.714,5.714V35.425z"/>
|
||||
<text x="10" y="30"
|
||||
fill="#FFFFFF"
|
||||
class="base-font"
|
||||
font-size="22.6026">
|
||||
Learn More
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="snap-logo" transform="translate(200, 260)">
|
||||
<path id="snap-logo-bottom" fill="#192350" d="M39.197,39.001c0.061,0.246,0.121,0.492,0.182,0.738c-12.801,6.518-39.257,19.54-39.257,19.54
|
||||
s-31.604-14.952-38.953-18.708c6.5-3.264,13.001-6.529,19.502-9.792c6.328,3.094,12.655,6.187,18.985,9.281
|
||||
c6.617-3.305,13.03-6.509,19.442-9.712C25.797,33.232,32.497,36.116,39.197,39.001z"/>
|
||||
<path id="snap-logo-right" fill="#03A69A" d="M39.331-54.922c-0.436-0.191-12.519,6.201-18.125,9.588c0,11.23,0,22.46,0,34.096
|
||||
C15.45-8.229-33.891,16.743-40.257,20.134c0.058,6.744,0.117,13.489,0.175,20.233c0.417,0.068,0.834,0.136,1.25,0.204
|
||||
c6.5-3.264,72.753-37.591,78.221-40.492C39.369-18.255,39.35-36.588,39.331-54.922z"/>
|
||||
<path id="snap-logo-top" fill="#1E2A5A" d="M39.331-54.922c-5.606,3.387-12.519,6.201-18.126,9.588c-7.193-3.185-14.386-6.371-21.719-9.617
|
||||
c-7.287,3.21-14.6,6.432-21.914,9.654c-5.869-2.958-11.739-5.916-17.609-8.874c-0.039-0.239-0.078-0.478-0.117-0.717
|
||||
c12.766-6.485,25.531-12.969,38.297-19.454C11.437-68.06,26.037-61.204,39.331-54.922z"/>
|
||||
<path id="snap-logo-left" fill="#133F68" d="M-22.676-11.256c0-3.489,0-6.949,0-10.408c0-7.878,0.198-15.755,0.346-23.633
|
||||
c-5.869-2.958-11.788-5.916-17.658-8.874c0.003,11.317-0.018,22.635-0.015,33.952c-0.034,6.737-0.081,13.474-0.114,20.21
|
||||
c5.781,2.841,52.704,26.952,59.219,30.356c6.7,2.884,13.397,5.769,20.096,8.654c0.029-6.258,0.134-12.516,0.163-18.773
|
||||
C33.044,16.882-15.406-7.438-22.676-11.256z"/>
|
||||
</g>
|
||||
|
||||
<g id="adobe-logo" transform="translate(350, 340)">
|
||||
<polygon fill="#787878" points="22.447,0 35.605,0 35.605,31.389 "/>
|
||||
<polygon fill="#787878" points="13.172,0 0,0 0,31.389 "/>
|
||||
<polygon fill="#787878" points="17.809,11.565 26.195,31.387 20.698,31.387 18.189,25.074 12.049,25.074 "/>
|
||||
<g>
|
||||
<path fill="#787878" d="M38.294,0c0.843,0,1.515,0.678,1.515,1.524c0,0.859-0.672,1.538-1.521,1.538S36.75,2.383,36.75,1.524
|
||||
C36.75,0.677,37.438,0,38.288,0H38.294z M38.287,0.259c-0.675,0-1.217,0.567-1.217,1.27c0,0.707,0.542,1.271,1.224,1.271
|
||||
c0.672,0.007,1.212-0.566,1.212-1.271c0-0.702-0.54-1.27-1.212-1.27H38.287z M38.01,2.414H37.7V0.716
|
||||
c0.144-0.025,0.285-0.049,0.512-0.049c0.271,0,0.442,0.053,0.556,0.141c0.094,0.068,0.146,0.188,0.146,0.346
|
||||
c0,0.22-0.142,0.363-0.33,0.411v0.017c0.149,0.026,0.245,0.161,0.277,0.414c0.042,0.265,0.077,0.367,0.105,0.419h-0.311
|
||||
c-0.039-0.052-0.075-0.207-0.112-0.435c-0.035-0.201-0.146-0.286-0.356-0.286h-0.179v0.721L38.01,2.414L38.01,2.414z M38.01,1.458
|
||||
h0.185c0.221,0,0.406-0.074,0.406-0.271c0-0.15-0.107-0.285-0.392-0.285c-0.093,0-0.152,0-0.197,0.005v0.552L38.01,1.458
|
||||
L38.01,1.458z"/>
|
||||
</g>
|
||||
<path fill="#787878" d="M4.782,44.511L4.366,42.05c-0.123-0.715-0.271-1.823-0.382-2.59H3.941c-0.124,0.771-0.294,1.914-0.42,2.596
|
||||
l-0.449,2.456L4.782,44.511L4.782,44.511z M2.847,46.12l-0.541,2.732h-2.01l2.501-11.373h2.457l2.271,11.373H5.507l-0.53-2.732
|
||||
H2.847z"/>
|
||||
<path fill="#787878" d="M12.086,43.77c0-0.147,0-0.329-0.03-0.492c-0.078-0.561-0.381-1.067-0.863-1.067
|
||||
c-0.818,0-1.125,1.188-1.125,2.575c0,1.599,0.437,2.51,1.096,2.51c0.309,0,0.662-0.157,0.854-0.826
|
||||
c0.045-0.131,0.069-0.314,0.069-0.523L12.086,43.77L12.086,43.77z M14.148,37.174v9.318c0,0.743,0.037,1.647,0.067,2.359h-1.779
|
||||
l-0.119-0.947h-0.041c-0.298,0.583-0.948,1.086-1.721,1.086c-1.702,0-2.547-1.874-2.547-4.238c0-2.877,1.263-4.275,2.629-4.275
|
||||
c0.711,0,1.182,0.346,1.415,0.852h0.034v-4.152h2.062C14.148,37.177,14.148,37.174,14.148,37.174z"/>
|
||||
<path fill="#787878" d="M18.428,47.415c0.782,0,0.982-1.474,0.982-2.697c0-1.159-0.2-2.67-1.018-2.67
|
||||
c-0.869,0-1.054,1.511-1.054,2.67c0,1.402,0.232,2.697,1.071,2.697H18.428z M18.387,48.989c-1.889,0-3.081-1.522-3.081-4.238
|
||||
c0-2.963,1.529-4.275,3.127-4.275c1.877,0,3.05,1.592,3.05,4.232c0,3.393-1.838,4.281-3.076,4.281H18.387z"/>
|
||||
<path fill="#787878" d="M24.692,45.907c0,0.204,0.035,0.399,0.078,0.525c0.206,0.693,0.561,0.863,0.837,0.863
|
||||
c0.795,0,1.12-1.004,1.12-2.612c0-1.462-0.343-2.472-1.129-2.472c-0.392,0-0.72,0.423-0.832,0.877
|
||||
c-0.039,0.142-0.074,0.363-0.074,0.521C24.692,43.609,24.692,45.907,24.692,45.907z M22.634,37.174h2.058v4.293h0.032
|
||||
c0.406-0.634,0.945-0.994,1.731-0.994c1.55,0,2.331,1.758,2.331,4.049c0,2.91-1.168,4.467-2.67,4.467
|
||||
c-0.723,0-1.199-0.32-1.631-1.123h-0.042l-0.112,0.986h-1.765c0.03-0.688,0.069-1.616,0.069-2.359v-9.318L22.634,37.174
|
||||
L22.634,37.174z"/>
|
||||
<path fill="#787878" d="M33.712,43.945c0.007-1.161-0.328-1.976-0.982-1.976c-0.749,0-1.064,1.094-1.088,1.976H33.712z
|
||||
M31.635,45.393c0.024,1.49,0.811,1.978,1.788,1.978c0.623,0,1.153-0.135,1.545-0.287l0.282,1.474
|
||||
c-0.548,0.238-1.393,0.383-2.201,0.383c-2.211,0-3.411-1.498-3.411-4.067c0-2.759,1.394-4.408,3.221-4.408
|
||||
c1.769,0,2.748,1.458,2.748,3.85c0,0.545-0.026,0.85-0.063,1.093L31.635,45.393z"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<rect id="cover" width="400" height="400" fill="#efefef"/>
|
||||
</svg>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-47561728-1', 'codepen.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
|
||||
<script src="js/vendor/require.min.js?__inline=true"></script>
|
||||
<script src="js/main.js?__inline=true"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
|
||||
|
||||
<script>
|
||||
WebFont.load(WebFontConfig);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,36 @@
|
|||
/*
|
||||
RequireJS 2.1.10 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved.
|
||||
Available via the MIT or new BSD license.
|
||||
see: http://github.com/jrburke/requirejs for details
|
||||
*/
|
||||
var requirejs,require,define;
|
||||
(function(ca){function G(b){return"[object Function]"===N.call(b)}function H(b){return"[object Array]"===N.call(b)}function v(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function U(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function s(b,c){return ga.call(b,c)}function j(b,c){return s(b,c)&&b[c]}function B(b,c){for(var d in b)if(s(b,d)&&c(b[d],d))break}function V(b,c,d,g){c&&B(c,function(c,h){if(d||!s(b,h))g&&"object"===typeof c&&c&&!H(c)&&!G(c)&&!(c instanceof
|
||||
RegExp)?(b[h]||(b[h]={}),V(b[h],c,d,g)):b[h]=c});return b}function t(b,c){return function(){return c.apply(b,arguments)}}function da(b){throw b;}function ea(b){if(!b)return b;var c=ca;v(b.split("."),function(b){c=c[b]});return c}function C(b,c,d,g){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=g;d&&(c.originalError=d);return c}function ha(b){function c(a,e,b){var f,n,c,d,g,h,i,I=e&&e.split("/");n=I;var m=l.map,k=m&&m["*"];if(a&&"."===a.charAt(0))if(e){n=
|
||||
I.slice(0,I.length-1);a=a.split("/");e=a.length-1;l.nodeIdCompat&&R.test(a[e])&&(a[e]=a[e].replace(R,""));n=a=n.concat(a);d=n.length;for(e=0;e<d;e++)if(c=n[e],"."===c)n.splice(e,1),e-=1;else if(".."===c)if(1===e&&(".."===n[2]||".."===n[0]))break;else 0<e&&(n.splice(e-1,2),e-=2);a=a.join("/")}else 0===a.indexOf("./")&&(a=a.substring(2));if(b&&m&&(I||k)){n=a.split("/");e=n.length;a:for(;0<e;e-=1){d=n.slice(0,e).join("/");if(I)for(c=I.length;0<c;c-=1)if(b=j(m,I.slice(0,c).join("/")))if(b=j(b,d)){f=b;
|
||||
g=e;break a}!h&&(k&&j(k,d))&&(h=j(k,d),i=e)}!f&&h&&(f=h,g=i);f&&(n.splice(0,g,f),a=n.join("/"))}return(f=j(l.pkgs,a))?f:a}function d(a){z&&v(document.getElementsByTagName("script"),function(e){if(e.getAttribute("data-requiremodule")===a&&e.getAttribute("data-requirecontext")===i.contextName)return e.parentNode.removeChild(e),!0})}function g(a){var e=j(l.paths,a);if(e&&H(e)&&1<e.length)return e.shift(),i.require.undef(a),i.require([a]),!0}function u(a){var e,b=a?a.indexOf("!"):-1;-1<b&&(e=a.substring(0,
|
||||
b),a=a.substring(b+1,a.length));return[e,a]}function m(a,e,b,f){var n,d,g=null,h=e?e.name:null,l=a,m=!0,k="";a||(m=!1,a="_@r"+(N+=1));a=u(a);g=a[0];a=a[1];g&&(g=c(g,h,f),d=j(p,g));a&&(g?k=d&&d.normalize?d.normalize(a,function(a){return c(a,h,f)}):c(a,h,f):(k=c(a,h,f),a=u(k),g=a[0],k=a[1],b=!0,n=i.nameToUrl(k)));b=g&&!d&&!b?"_unnormalized"+(Q+=1):"";return{prefix:g,name:k,parentMap:e,unnormalized:!!b,url:n,originalName:l,isDefine:m,id:(g?g+"!"+k:k)+b}}function q(a){var e=a.id,b=j(k,e);b||(b=k[e]=new i.Module(a));
|
||||
return b}function r(a,e,b){var f=a.id,n=j(k,f);if(s(p,f)&&(!n||n.defineEmitComplete))"defined"===e&&b(p[f]);else if(n=q(a),n.error&&"error"===e)b(n.error);else n.on(e,b)}function w(a,e){var b=a.requireModules,f=!1;if(e)e(a);else if(v(b,function(e){if(e=j(k,e))e.error=a,e.events.error&&(f=!0,e.emit("error",a))}),!f)h.onError(a)}function x(){S.length&&(ia.apply(A,[A.length,0].concat(S)),S=[])}function y(a){delete k[a];delete W[a]}function F(a,e,b){var f=a.map.id;a.error?a.emit("error",a.error):(e[f]=
|
||||
!0,v(a.depMaps,function(f,c){var d=f.id,g=j(k,d);g&&(!a.depMatched[c]&&!b[d])&&(j(e,d)?(a.defineDep(c,p[d]),a.check()):F(g,e,b))}),b[f]=!0)}function D(){var a,e,b=(a=1E3*l.waitSeconds)&&i.startTime+a<(new Date).getTime(),f=[],c=[],h=!1,k=!0;if(!X){X=!0;B(W,function(a){var i=a.map,m=i.id;if(a.enabled&&(i.isDefine||c.push(a),!a.error))if(!a.inited&&b)g(m)?h=e=!0:(f.push(m),d(m));else if(!a.inited&&(a.fetched&&i.isDefine)&&(h=!0,!i.prefix))return k=!1});if(b&&f.length)return a=C("timeout","Load timeout for modules: "+
|
||||
f,null,f),a.contextName=i.contextName,w(a);k&&v(c,function(a){F(a,{},{})});if((!b||e)&&h)if((z||fa)&&!Y)Y=setTimeout(function(){Y=0;D()},50);X=!1}}function E(a){s(p,a[0])||q(m(a[0],null,!0)).init(a[1],a[2])}function L(a){var a=a.currentTarget||a.srcElement,e=i.onScriptLoad;a.detachEvent&&!Z?a.detachEvent("onreadystatechange",e):a.removeEventListener("load",e,!1);e=i.onScriptError;(!a.detachEvent||Z)&&a.removeEventListener("error",e,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function M(){var a;
|
||||
for(x();A.length;){a=A.shift();if(null===a[0])return w(C("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));E(a)}}var X,$,i,K,Y,l={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},k={},W={},aa={},A=[],p={},T={},ba={},N=1,Q=1;K={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?a.exports:a.exports=p[a.map.id]={}},module:function(a){return a.module?a.module:
|
||||
a.module={id:a.map.id,uri:a.map.url,config:function(){return j(l.config,a.map.id)||{}},exports:K.exports(a)}}};$=function(a){this.events=j(aa,a.id)||{};this.map=a;this.shim=j(l.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};$.prototype={init:function(a,e,b,f){f=f||{};if(!this.inited){this.factory=e;if(b)this.on("error",b);else this.events.error&&(b=t(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=b;this.inited=
|
||||
!0;this.ignore=f.ignore;f.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,e){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=e)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],t(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
|
||||
this.map.url;T[a]||(T[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,e,b=this.map.id;e=this.depExports;var f=this.exports,c=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(G(c)){if(this.events.error&&this.map.isDefine||h.onError!==da)try{f=i.execCb(b,c,e,f)}catch(d){a=d}else f=i.execCb(b,c,e,f);this.map.isDefine&&void 0===f&&((e=this.module)?f=e.exports:this.usingExports&&
|
||||
(f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=c;this.exports=f;if(this.map.isDefine&&!this.ignore&&(p[b]=f,h.onResourceLoad))h.onResourceLoad(i,this.map,this.depMaps);y(b);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=
|
||||
this.map,b=a.id,d=m(a.prefix);this.depMaps.push(d);r(d,"defined",t(this,function(f){var d,g;g=j(ba,this.map.id);var J=this.map.name,u=this.map.parentMap?this.map.parentMap.name:null,p=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(J=f.normalize(J,function(a){return c(a,u,!0)})||""),f=m(a.prefix+"!"+J,this.map.parentMap),r(f,"defined",t(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),g=j(k,f.id)){this.depMaps.push(f);
|
||||
if(this.events.error)g.on("error",t(this,function(a){this.emit("error",a)}));g.enable()}}else g?(this.map.url=i.nameToUrl(g),this.load()):(d=t(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),d.error=t(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(k,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),d.fromText=t(this,function(f,c){var g=a.name,J=m(g),k=O;c&&(f=c);k&&(O=!1);q(J);s(l.config,b)&&(l.config[g]=l.config[b]);try{h.exec(f)}catch(j){return w(C("fromtexteval",
|
||||
"fromText eval for "+b+" failed: "+j,j,[b]))}k&&(O=!0);this.depMaps.push(J);i.completeLoad(g);p([g],d)}),f.load(a.name,p,d,l))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){W[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,t(this,function(a,b){var c,f;if("string"===typeof a){a=m(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=j(K,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;r(a,"defined",t(this,function(a){this.defineDep(b,
|
||||
a);this.check()}));this.errback&&r(a,"error",t(this,this.errback))}c=a.id;f=k[c];!s(K,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,t(this,function(a){var b=j(k,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:l,contextName:b,registry:k,defined:p,urlFetched:T,defQueue:A,Module:$,makeModuleMap:m,
|
||||
nextTick:h.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=l.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(l[b]||(l[b]={}),V(l[b],a,!0,!0)):l[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(ba[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);b[c]=a}),l.shim=b);a.packages&&v(a.packages,function(a){var b,
|
||||
a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(l.paths[b]=a.location);l.pkgs[b]=a.name+"/"+(a.main||"main").replace(ja,"").replace(R,"")});B(k,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=m(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ca,arguments));return b||a.exports&&ea(a.exports)}},makeRequire:function(a,e){function g(f,c,d){var j,l;e.enableBuildCallback&&(c&&G(c))&&(c.__requireJsBuild=
|
||||
!0);if("string"===typeof f){if(G(c))return w(C("requireargs","Invalid require call"),d);if(a&&s(K,f))return K[f](k[a.id]);if(h.get)return h.get(i,f,a,g);j=m(f,a,!1,!0);j=j.id;return!s(p,j)?w(C("notloaded",'Module name "'+j+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):p[j]}M();i.nextTick(function(){M();l=q(m(null,a));l.skipMap=e.skipMap;l.init(f,c,d,{enabled:!0});D()});return g}e=e||{};V(g,{isBrowser:z,toUrl:function(b){var e,d=b.lastIndexOf("."),g=b.split("/")[0];if(-1!==
|
||||
d&&(!("."===g||".."===g)||1<d))e=b.substring(d,b.length),b=b.substring(0,d);return i.nameToUrl(c(b,a&&a.id,!0),e,!0)},defined:function(b){return s(p,m(b,a,!1,!0).id)},specified:function(b){b=m(b,a,!1,!0).id;return s(p,b)||s(k,b)}});a||(g.undef=function(b){x();var c=m(b,a,!0),e=j(k,b);d(b);delete p[b];delete T[c.url];delete aa[b];U(A,function(a,c){a[0]===b&&A.splice(c,1)});e&&(e.events.defined&&(aa[b]=e.events),y(b))});return g},enable:function(a){j(k,a.id)&&q(a).enable()},completeLoad:function(a){var b,
|
||||
c,f=j(l.shim,a)||{},d=f.exports;for(x();A.length;){c=A.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);E(c)}c=j(k,a);if(!b&&!s(p,a)&&c&&!c.inited){if(l.enforceDefine&&(!d||!ea(d)))return g(a)?void 0:w(C("nodefine","No define call for "+a,null,[a]));E([a,f.deps||[],f.exportsFn])}D()},nameToUrl:function(a,b,c){var f,d,g;(f=j(l.pkgs,a))&&(a=f);if(f=j(ba,a))return i.nameToUrl(f,b,c);if(h.jsExtRegExp.test(a))f=a+(b||"");else{f=l.paths;a=a.split("/");for(d=a.length;0<d;d-=1)if(g=a.slice(0,
|
||||
d).join("/"),g=j(f,g)){H(g)&&(g=g[0]);a.splice(0,d,g);break}f=a.join("/");f+=b||(/^data\:|\?/.test(f)||c?"":".js");f=("/"===f.charAt(0)||f.match(/^[\w\+\.\-]+:/)?"":l.baseUrl)+f}return l.urlArgs?f+((-1===f.indexOf("?")?"?":"&")+l.urlArgs):f},load:function(a,b){h.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ka.test((a.currentTarget||a.srcElement).readyState))P=null,a=L(a),i.completeLoad(a.id)},onScriptError:function(a){var b=L(a);if(!g(b.id))return w(C("scripterror",
|
||||
"Script error for: "+b.id,a,[b.id]))}};i.require=i.makeRequire();return i}var h,x,y,D,L,E,P,M,q,Q,la=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,ma=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,R=/\.js$/,ja=/^\.\//;x=Object.prototype;var N=x.toString,ga=x.hasOwnProperty,ia=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),fa=!z&&"undefined"!==typeof importScripts,ka=z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,
|
||||
Z="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),F={},r={},S=[],O=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(G(requirejs))return;r=requirejs;requirejs=void 0}"undefined"!==typeof require&&!G(require)&&(r=require,require=void 0);h=requirejs=function(b,c,d,g){var u,m="_";!H(b)&&"string"!==typeof b&&(u=b,H(c)?(b=c,c=d,d=g):b=[]);u&&u.context&&(m=u.context);(g=j(F,m))||(g=F[m]=h.s.newContext(m));u&&g.configure(u);return g.require(b,c,d)};h.config=function(b){return h(b)};
|
||||
h.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=h);h.version="2.1.10";h.jsExtRegExp=/^\/|:|\?|\.js$/;h.isBrowser=z;x=h.s={contexts:F,newContext:ha};h({});v(["toUrl","undef","defined","specified"],function(b){h[b]=function(){var c=F._;return c.require[b].apply(c,arguments)}});if(z&&(y=x.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))y=x.head=D.parentNode;h.onError=da;h.createNode=function(b){var c=
|
||||
b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};h.load=function(b,c,d){var g=b&&b.config||{};if(z)return g=h.createNode(g,c,d),g.setAttribute("data-requirecontext",b.contextName),g.setAttribute("data-requiremodule",c),g.attachEvent&&!(g.attachEvent.toString&&0>g.attachEvent.toString().indexOf("[native code"))&&!Z?(O=!0,g.attachEvent("onreadystatechange",b.onScriptLoad)):
|
||||
(g.addEventListener("load",b.onScriptLoad,!1),g.addEventListener("error",b.onScriptError,!1)),g.src=d,M=g,D?y.insertBefore(g,D):y.appendChild(g),M=null,g;if(fa)try{importScripts(d),b.completeLoad(c)}catch(j){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,j,[c]))}};z&&!r.skipDataMain&&U(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(L=b.getAttribute("data-main"))return q=L,r.baseUrl||(E=q.split("/"),q=E.pop(),Q=E.length?E.join("/")+"/":"./",r.baseUrl=
|
||||
Q),q=q.replace(R,""),h.jsExtRegExp.test(q)&&(q=L),r.deps=r.deps?r.deps.concat(q):[q],!0});define=function(b,c,d){var g,h;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(la,"").replace(ma,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(O){if(!(g=M))P&&"interactive"===P.readyState||U(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return P=b}),g=P;g&&(b||
|
||||
(b=g.getAttribute("data-requiremodule")),h=F[g.getAttribute("data-requirecontext")])}(h?h.defQueue:S).push([b,c,d])};define.amd={jQuery:!0};h.exec=function(b){return eval(b)};h(r)}})(this);
|
||||
Binary file not shown.
|
|
@ -0,0 +1,25 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 648 500" enable-background="new 0 0 648 500" xml:space="preserve">
|
||||
<g>
|
||||
<rect x="81.479" y="30.406" fill="#989898" width="485.58" height="345.509"/>
|
||||
<polygon fill="#818181" points="81.479,375.915 6.775,450.619 641.765,450.619 567.06,375.915 "/>
|
||||
<polygon fill="#676767" points="620.983,469.296 23.345,469.296 4.669,450.619 639.659,450.619 "/>
|
||||
<rect x="100.156" y="77.096" fill="#0DAE8A" width="448.228" height="261.466"/>
|
||||
<g opacity="0.2">
|
||||
<g>
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_1_" x="81.479" y="30.417" width="485.58" height="345.509"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_1_" overflow="visible"/>
|
||||
</clipPath>
|
||||
<polygon clip-path="url(#SVGID_2_)" fill="#FFFFFF" points="567.06,95.772 81.479,375.915 81.479,30.406 567.06,30.406 "/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 75.863 60.214" enable-background="new 0 0 75.863 60.214" xml:space="preserve">
|
||||
<path fill="#0DAE8A" d="M52.547,0C46.668,0,41.428,2.418,38,6.192C34.572,2.418,29.332,0,23.453,0C13.124,0,0,4.75,0,23.75
|
||||
s38,35.414,38,35.414S76,42.75,76,23.75S62.877,0,52.547,0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 649 B |
|
|
@ -0,0 +1,21 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 56.205 100.385" enable-background="new 0 0 56.205 100.385" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#818181" d="M0,100h56V0H0V100z M52,88H4V12h48V88z"/>
|
||||
<rect x="4" y="12" fill="#0CAE8B" width="48" height="76"/>
|
||||
<g opacity="0.2">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_1_" x="0" y="0.005" width="56" height="88"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_1_" overflow="visible"/>
|
||||
</clipPath>
|
||||
<polygon clip-path="url(#SVGID_2_)" fill="#FFFFFF" points="56,28 0,88 0,0 56,0 "/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 928 B |
|
|
@ -0,0 +1,21 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 92.103 132.009" enable-background="new 0 0 92.103 132.009" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#818181" d="M0,132h92V0H0V132z M84,116H8V16h76V116z"/>
|
||||
<rect x="8" y="16" fill="#0DAE8A" width="76" height="100"/>
|
||||
<g opacity="0.2">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_1_" x="0" y="0.005" width="92" height="88"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_1_" overflow="visible"/>
|
||||
</clipPath>
|
||||
<polygon clip-path="url(#SVGID_2_)" fill="#FFFFFF" points="92,28 0,88 0,0 92,0 "/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 931 B |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
|
|
@ -0,0 +1,24 @@
|
|||
# Require any additional compass plugins here.
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
css_dir = "css"
|
||||
sass_dir = "sass"
|
||||
images_dir = "assets/images"
|
||||
javascripts_dir = "js"
|
||||
|
||||
# You can select your preferred output style here (can be overridden via the command line):
|
||||
# output_style = :expanded or :nested or :compact or :compressed
|
||||
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
# relative_assets = true
|
||||
|
||||
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
||||
# line_comments = false
|
||||
|
||||
|
||||
# If you prefer the indented syntax, you might want to regenerate this
|
||||
# project again passing --syntax sass, or you can uncomment this:
|
||||
# preferred_syntax = :sass
|
||||
# and then run:
|
||||
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
/* line 3, ../sass/screen.scss */
|
||||
.base-font {
|
||||
font-family: 'Open Sans', serif;
|
||||
}
|
||||
|
||||
/* line 7, ../sass/screen.scss */
|
||||
.snap-font {
|
||||
font-family: 'Source Sans Pro', serif;
|
||||
}
|
||||
|
||||
/* line 11, ../sass/screen.scss */
|
||||
body {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* line 16, ../sass/screen.scss */
|
||||
text {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* line 25, ../sass/screen.scss */
|
||||
svg {
|
||||
-webkit-transform-origin: top left;
|
||||
-moz-transform-origin: top left;
|
||||
-ms-transform-origin: top left;
|
||||
-o-transform-origin: top left;
|
||||
transform-origin: top left;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* line 30, ../sass/screen.scss */
|
||||
#learn-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* line 33, ../sass/screen.scss */
|
||||
#learn-btn path, #learn-btn text {
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* line 39, ../sass/screen.scss */
|
||||
#learn-btn:hover path:first-child {
|
||||
fill: #076656;
|
||||
}
|
||||
/* line 46, ../sass/screen.scss */
|
||||
#learn-btn:hover path:nth-child(2) {
|
||||
fill: #7cd1c2;
|
||||
}
|
||||
/* line 51, ../sass/screen.scss */
|
||||
#learn-btn:hover text {
|
||||
fill: #0a9a87;
|
||||
}
|
||||
/* line 59, ../sass/screen.scss */
|
||||
#learn-btn:active path:nth-child(2) {
|
||||
-webkit-transform: translateY(2px);
|
||||
-moz-transform: translateY(2px);
|
||||
-ms-transform: translateY(2px);
|
||||
-o-transform: translateY(2px);
|
||||
transform: translateY(2px);
|
||||
}
|
||||
/* line 64, ../sass/screen.scss */
|
||||
#learn-btn:active text {
|
||||
-webkit-transform: translateY(2px);
|
||||
-moz-transform: translateY(2px);
|
||||
-ms-transform: translateY(2px);
|
||||
-o-transform: translateY(2px);
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
/* line 71, ../sass/screen.scss */
|
||||
#replay-btn:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/*
|
||||
@media (max-width: 400px) {
|
||||
svg{
|
||||
@include transform(scale(0.375));
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Snap! SVG</title>
|
||||
<link href="css/screen.css?__inline=true" media="screen, projection" rel="stylesheet" type="text/css" />
|
||||
<!--[if IE]>
|
||||
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<svg id="ad" width="400" height="400">
|
||||
<g id="meshAContainer">
|
||||
<rect x="0" y="0" width="400" height="400" fill="#efefef"/>
|
||||
</g>
|
||||
|
||||
<g id="screen1">
|
||||
<text id="text1" x="200" y="130" width="400"
|
||||
class="base-font"
|
||||
font-weight="100"
|
||||
font-size="40"
|
||||
fill="#686868"
|
||||
text-anchor="middle">
|
||||
Screens
|
||||
</text>
|
||||
|
||||
<text id="text2" x="200" y="300" width="400"
|
||||
class="base-font"
|
||||
font-weight="100"
|
||||
font-size="40"
|
||||
fill="#686868"
|
||||
text-anchor="middle">
|
||||
SVG
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<text id="text3"
|
||||
class="base-font"
|
||||
font-weight="100"
|
||||
font-size="50"
|
||||
fill="white"
|
||||
text-anchor="middle"
|
||||
opacity="0">
|
||||
<tspan x="200" y="180">Make SVG</tspan>
|
||||
<tspan x="200" y="250">a Snap!</tspan>
|
||||
</text>
|
||||
|
||||
<g id="heart" transform="translate(200, 200)">
|
||||
<path id="heart-shape" fill="#0DAE8A" d="M14.803-28.95c-5.879,0-11.119,2.418-14.547,6.192c-3.428-3.774-8.668-6.192-14.547-6.192c-10.329,0-23.453,4.75-23.453,23.75s38,35.414,38,35.414s38-16.414,38-35.414S25.133-28.95,14.803-28.95"/>
|
||||
</g>
|
||||
|
||||
<g id="burst" transform="translate(200, 200)" opacity="0">
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 149.256,-214.94 227.256,-214.94 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 49.256,-214.94 77.256,-214.94 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 -78.328,-214.94 -50.744,-212.273 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 -113.661,209.06 -86.077,211.727 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,-214.94 -213.41,-135.607 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,-39 -213.41,10.334 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 -239.41,101 -213.41,130.334 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 215.697,21.383 241.697,50.717 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 215.697,-88.617 241.697,-59.283 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 208.691,137.42 207.805,194.354 "/>
|
||||
<polygon fill="#FFFFFF" points="0.451,0.063 95.256,211.727 61.923,240.194 "/>
|
||||
</g>
|
||||
|
||||
<g id="resolve" opacity="0">
|
||||
|
||||
<g id="replay-btn" transform="translate(345, 10)">
|
||||
<rect fill="transparent" width="48" height="49.5"/>
|
||||
<path fill="#cccccc" d="M25.207,9.594V4.082L12.793,11.25l12.415,7.168v-5.792C31.57,13.466,36.5,18.912,36.5,25.5
|
||||
c0,7.168-5.832,13-13,13s-13-5.832-13-13c0-0.565,0.049-1.118,0.119-1.664l-2.922-0.717C7.58,23.898,7.5,24.689,7.5,25.5
|
||||
c0,8.822,7.178,16,16,16s16-7.178,16-16C39.5,17.255,33.229,10.449,25.207,9.594z"/>
|
||||
</g>
|
||||
|
||||
<text id="text4"
|
||||
font-weight="100"
|
||||
fill="#02225d"
|
||||
text-anchor="middle">
|
||||
<tspan x="200" y="100"
|
||||
class="base-font"
|
||||
font-size="46">
|
||||
with
|
||||
</tspan>
|
||||
<tspan x="200" y="160"
|
||||
class="snap-font"
|
||||
font-size="70">
|
||||
Snap.svg
|
||||
</tspan>
|
||||
</text>
|
||||
|
||||
<g id="learn-btn" transform="translate(10, 350)">
|
||||
<path fill="#0B9B87" d="M147.129,37.886c0,3.156-2.558,5.714-5.714,5.714H5.714C2.558,43.6,0,41.042,0,37.886V8.175
|
||||
c0-3.156,2.558-5.714,5.714-5.714h135.702c3.156,0,5.714,2.558,5.714,5.714V37.886z"/>
|
||||
<path fill="#10B29C" d="M147.129,35.425c0,3.156-2.558,5.714-5.714,5.714H5.714C2.558,41.139,0,38.581,0,35.425V5.714
|
||||
C0,2.558,2.558,0,5.714,0h135.702c3.156,0,5.714,2.558,5.714,5.714V35.425z"/>
|
||||
<text x="10" y="30"
|
||||
fill="#FFFFFF"
|
||||
class="base-font"
|
||||
font-size="22.6026">
|
||||
Learn More
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g id="snap-logo" transform="translate(200, 260)">
|
||||
<path id="snap-logo-bottom" fill="#192350" d="M39.197,39.001c0.061,0.246,0.121,0.492,0.182,0.738c-12.801,6.518-39.257,19.54-39.257,19.54
|
||||
s-31.604-14.952-38.953-18.708c6.5-3.264,13.001-6.529,19.502-9.792c6.328,3.094,12.655,6.187,18.985,9.281
|
||||
c6.617-3.305,13.03-6.509,19.442-9.712C25.797,33.232,32.497,36.116,39.197,39.001z"/>
|
||||
<path id="snap-logo-right" fill="#03A69A" d="M39.331-54.922c-0.436-0.191-12.519,6.201-18.125,9.588c0,11.23,0,22.46,0,34.096
|
||||
C15.45-8.229-33.891,16.743-40.257,20.134c0.058,6.744,0.117,13.489,0.175,20.233c0.417,0.068,0.834,0.136,1.25,0.204
|
||||
c6.5-3.264,72.753-37.591,78.221-40.492C39.369-18.255,39.35-36.588,39.331-54.922z"/>
|
||||
<path id="snap-logo-top" fill="#1E2A5A" d="M39.331-54.922c-5.606,3.387-12.519,6.201-18.126,9.588c-7.193-3.185-14.386-6.371-21.719-9.617
|
||||
c-7.287,3.21-14.6,6.432-21.914,9.654c-5.869-2.958-11.739-5.916-17.609-8.874c-0.039-0.239-0.078-0.478-0.117-0.717
|
||||
c12.766-6.485,25.531-12.969,38.297-19.454C11.437-68.06,26.037-61.204,39.331-54.922z"/>
|
||||
<path id="snap-logo-left" fill="#133F68" d="M-22.676-11.256c0-3.489,0-6.949,0-10.408c0-7.878,0.198-15.755,0.346-23.633
|
||||
c-5.869-2.958-11.788-5.916-17.658-8.874c0.003,11.317-0.018,22.635-0.015,33.952c-0.034,6.737-0.081,13.474-0.114,20.21
|
||||
c5.781,2.841,52.704,26.952,59.219,30.356c6.7,2.884,13.397,5.769,20.096,8.654c0.029-6.258,0.134-12.516,0.163-18.773
|
||||
C33.044,16.882-15.406-7.438-22.676-11.256z"/>
|
||||
</g>
|
||||
|
||||
<g id="adobe-logo" transform="translate(350, 340)">
|
||||
<polygon fill="#787878" points="22.447,0 35.605,0 35.605,31.389 "/>
|
||||
<polygon fill="#787878" points="13.172,0 0,0 0,31.389 "/>
|
||||
<polygon fill="#787878" points="17.809,11.565 26.195,31.387 20.698,31.387 18.189,25.074 12.049,25.074 "/>
|
||||
<g>
|
||||
<path fill="#787878" d="M38.294,0c0.843,0,1.515,0.678,1.515,1.524c0,0.859-0.672,1.538-1.521,1.538S36.75,2.383,36.75,1.524
|
||||
C36.75,0.677,37.438,0,38.288,0H38.294z M38.287,0.259c-0.675,0-1.217,0.567-1.217,1.27c0,0.707,0.542,1.271,1.224,1.271
|
||||
c0.672,0.007,1.212-0.566,1.212-1.271c0-0.702-0.54-1.27-1.212-1.27H38.287z M38.01,2.414H37.7V0.716
|
||||
c0.144-0.025,0.285-0.049,0.512-0.049c0.271,0,0.442,0.053,0.556,0.141c0.094,0.068,0.146,0.188,0.146,0.346
|
||||
c0,0.22-0.142,0.363-0.33,0.411v0.017c0.149,0.026,0.245,0.161,0.277,0.414c0.042,0.265,0.077,0.367,0.105,0.419h-0.311
|
||||
c-0.039-0.052-0.075-0.207-0.112-0.435c-0.035-0.201-0.146-0.286-0.356-0.286h-0.179v0.721L38.01,2.414L38.01,2.414z M38.01,1.458
|
||||
h0.185c0.221,0,0.406-0.074,0.406-0.271c0-0.15-0.107-0.285-0.392-0.285c-0.093,0-0.152,0-0.197,0.005v0.552L38.01,1.458
|
||||
L38.01,1.458z"/>
|
||||
</g>
|
||||
<path fill="#787878" d="M4.782,44.511L4.366,42.05c-0.123-0.715-0.271-1.823-0.382-2.59H3.941c-0.124,0.771-0.294,1.914-0.42,2.596
|
||||
l-0.449,2.456L4.782,44.511L4.782,44.511z M2.847,46.12l-0.541,2.732h-2.01l2.501-11.373h2.457l2.271,11.373H5.507l-0.53-2.732
|
||||
H2.847z"/>
|
||||
<path fill="#787878" d="M12.086,43.77c0-0.147,0-0.329-0.03-0.492c-0.078-0.561-0.381-1.067-0.863-1.067
|
||||
c-0.818,0-1.125,1.188-1.125,2.575c0,1.599,0.437,2.51,1.096,2.51c0.309,0,0.662-0.157,0.854-0.826
|
||||
c0.045-0.131,0.069-0.314,0.069-0.523L12.086,43.77L12.086,43.77z M14.148,37.174v9.318c0,0.743,0.037,1.647,0.067,2.359h-1.779
|
||||
l-0.119-0.947h-0.041c-0.298,0.583-0.948,1.086-1.721,1.086c-1.702,0-2.547-1.874-2.547-4.238c0-2.877,1.263-4.275,2.629-4.275
|
||||
c0.711,0,1.182,0.346,1.415,0.852h0.034v-4.152h2.062C14.148,37.177,14.148,37.174,14.148,37.174z"/>
|
||||
<path fill="#787878" d="M18.428,47.415c0.782,0,0.982-1.474,0.982-2.697c0-1.159-0.2-2.67-1.018-2.67
|
||||
c-0.869,0-1.054,1.511-1.054,2.67c0,1.402,0.232,2.697,1.071,2.697H18.428z M18.387,48.989c-1.889,0-3.081-1.522-3.081-4.238
|
||||
c0-2.963,1.529-4.275,3.127-4.275c1.877,0,3.05,1.592,3.05,4.232c0,3.393-1.838,4.281-3.076,4.281H18.387z"/>
|
||||
<path fill="#787878" d="M24.692,45.907c0,0.204,0.035,0.399,0.078,0.525c0.206,0.693,0.561,0.863,0.837,0.863
|
||||
c0.795,0,1.12-1.004,1.12-2.612c0-1.462-0.343-2.472-1.129-2.472c-0.392,0-0.72,0.423-0.832,0.877
|
||||
c-0.039,0.142-0.074,0.363-0.074,0.521C24.692,43.609,24.692,45.907,24.692,45.907z M22.634,37.174h2.058v4.293h0.032
|
||||
c0.406-0.634,0.945-0.994,1.731-0.994c1.55,0,2.331,1.758,2.331,4.049c0,2.91-1.168,4.467-2.67,4.467
|
||||
c-0.723,0-1.199-0.32-1.631-1.123h-0.042l-0.112,0.986h-1.765c0.03-0.688,0.069-1.616,0.069-2.359v-9.318L22.634,37.174
|
||||
L22.634,37.174z"/>
|
||||
<path fill="#787878" d="M33.712,43.945c0.007-1.161-0.328-1.976-0.982-1.976c-0.749,0-1.064,1.094-1.088,1.976H33.712z
|
||||
M31.635,45.393c0.024,1.49,0.811,1.978,1.788,1.978c0.623,0,1.153-0.135,1.545-0.287l0.282,1.474
|
||||
c-0.548,0.238-1.393,0.383-2.201,0.383c-2.211,0-3.411-1.498-3.411-4.067c0-2.759,1.394-4.408,3.221-4.408
|
||||
c1.769,0,2.748,1.458,2.748,3.85c0,0.545-0.026,0.85-0.063,1.093L31.635,45.393z"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<rect id="cover" width="400" height="400" fill="#efefef"/>
|
||||
</svg>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-47561728-1', 'codepen.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
|
||||
<!-- build:js js/vendor/require.min.js?__inline=true -->
|
||||
<!-- /build -->
|
||||
<!-- build:js js/main.js?__inline=true -->
|
||||
<script data-main="js/main" src="./js/vendor/require.js"></script>
|
||||
<!-- /build -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
|
||||
|
||||
<script>
|
||||
WebFont.load(WebFontConfig);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
define(function (require) {
|
||||
|
||||
require('snap');
|
||||
|
||||
var App,
|
||||
Heart = require('app/heart'),
|
||||
Device = require('app/device'),
|
||||
Burst = require('app/burst');
|
||||
Mesh = require('app/mesh');
|
||||
Logo = require('app/logo');
|
||||
|
||||
App = function () {
|
||||
var instance = this;
|
||||
|
||||
this.started = false;
|
||||
|
||||
this.init = function () {
|
||||
var timeline,
|
||||
ad,
|
||||
s,
|
||||
cover,
|
||||
device,
|
||||
heart,
|
||||
burst,
|
||||
screen1,
|
||||
text1,
|
||||
text2,
|
||||
text3,
|
||||
text4,
|
||||
resolveScreen,
|
||||
logo,
|
||||
meshA,
|
||||
meshAContainer,
|
||||
replaycount = 0,
|
||||
WIDTH = 400,
|
||||
HEIGHT = 400,
|
||||
WHITE = "#ffffff",
|
||||
GREEN = "#09ae8a";
|
||||
|
||||
this.started = true;
|
||||
|
||||
ad = document.getElementById('ad');
|
||||
s = new Snap("#ad");
|
||||
cover = s.select('#cover');
|
||||
meshAContainer = s.select('#meshAContainer');
|
||||
screen1 = s.select('#screen1');
|
||||
text1 = s.select('#text1');
|
||||
text2 = s.select('#text2');
|
||||
text3 = s.select('#text3');
|
||||
text4 = s.select('#text4');
|
||||
replayBtn = s.select('#replay-btn');
|
||||
resolveScreen = s.select('#resolve');
|
||||
logo = new Logo(s);
|
||||
|
||||
handle_RESIZE();
|
||||
window.addEventListener('resize', handle_RESIZE);
|
||||
ad.addEventListener('click', handle_CLICK);
|
||||
replayBtn.click(replay_CLICK);
|
||||
|
||||
addMeshA();
|
||||
cover.remove();
|
||||
addHeart();
|
||||
addComputer();
|
||||
addBurst();
|
||||
|
||||
function addHeart() {
|
||||
heart = new Heart(s, WIDTH / 2, HEIGHT / 2);
|
||||
}
|
||||
|
||||
function addComputer() {
|
||||
device = new Device(s, WIDTH / 2, HEIGHT / 2);
|
||||
device.setScreen(192, 112);
|
||||
device.setBack(208, 148);
|
||||
device.setScale(0.1);
|
||||
text2.after(device.el);
|
||||
}
|
||||
|
||||
function addBurst() {
|
||||
burst = new Burst(s);
|
||||
}
|
||||
|
||||
function addMeshA() {
|
||||
meshA = new Mesh(s, meshAContainer, '#afafaf', '#afafaf');
|
||||
}
|
||||
|
||||
function addMeshB() {
|
||||
meshA.el.remove();
|
||||
meshB = new Mesh(s, meshBContainer, '#09ae8a', '#777777');
|
||||
}
|
||||
|
||||
function showMeshB() {
|
||||
if (mobilecheck() !== true) {
|
||||
meshB.start();
|
||||
}
|
||||
}
|
||||
|
||||
function showComputer() {
|
||||
text1.animate({y: 80}, 100);
|
||||
text2.animate({y: 350}, 100);
|
||||
device.animScale(10, 300, mina.bounce);
|
||||
heart.animFill(WHITE);
|
||||
}
|
||||
|
||||
function toTablet() {
|
||||
device.animRotation(-90);
|
||||
device.animScreen(76, 100);
|
||||
device.animBack(92, 132);
|
||||
heart.animScale(0.5, 200);
|
||||
}
|
||||
|
||||
function toPhone() {
|
||||
device.hideKeyboard();
|
||||
device.animScreen(48, 76);
|
||||
device.animBack(56, 100);
|
||||
heart.animScale(0.3);
|
||||
}
|
||||
|
||||
function rotate() {
|
||||
device.animRotation(90);
|
||||
heart.animScale(0.4);
|
||||
}
|
||||
|
||||
function zoom() {
|
||||
meshA.stop();
|
||||
device.animScale(10, 600);
|
||||
heart.animScale(4, 600);
|
||||
burst.anim();
|
||||
}
|
||||
|
||||
function greenMesh() {
|
||||
|
||||
meshA.setColor('#09ae8a', '#777777');
|
||||
|
||||
if (mobilecheck() !== true) {
|
||||
meshA.start();
|
||||
}
|
||||
|
||||
device.animOpacity(0, 200);
|
||||
screen1.animate({
|
||||
opacity: 0
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function maskReveal() {
|
||||
heart.mask();
|
||||
}
|
||||
|
||||
function showText3() {
|
||||
device.setScale(0.01);
|
||||
text3.animate({
|
||||
opacity: 1
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function hideText3() {
|
||||
text3.animate({
|
||||
opacity: 0
|
||||
}, 200);
|
||||
|
||||
if (mobilecheck() !== true) {
|
||||
meshA.rippleColor('#afafaf', '#afafaf');
|
||||
} else {
|
||||
meshA.setColor('#afafaf', '#afafaf');
|
||||
}
|
||||
}
|
||||
|
||||
function resolve() {
|
||||
resolveScreen.animate({
|
||||
opacity: 1
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function stop() {
|
||||
logo.animate();
|
||||
meshA.stop();
|
||||
}
|
||||
|
||||
function reset() {
|
||||
resolveScreen.attr({
|
||||
opacity: 0
|
||||
});
|
||||
|
||||
screen1.attr({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
text1.attr({y: 130});
|
||||
text2.attr({y: 300});
|
||||
|
||||
heart.setScale(1);
|
||||
heart.setFill('#0DAE8A');
|
||||
heart.unmask();
|
||||
device.setOpacity(1);
|
||||
device.setScreen(192, 112);
|
||||
device.setBack(208, 148);
|
||||
device.showKeyboard();
|
||||
meshA.start();
|
||||
burst.reset();
|
||||
}
|
||||
|
||||
function replay_CLICK(e) {
|
||||
e.stopPropagation();
|
||||
|
||||
replaycount += 1;
|
||||
ga('send', 'event', 'button', 'click', 'replay', replaycount);
|
||||
reset();
|
||||
run();
|
||||
}
|
||||
|
||||
function handle_CLICK(e) {
|
||||
ga('send', 'event', 'button', 'click', 'ad');
|
||||
top.window.location.href = 'http://snapsvg.io/';
|
||||
}
|
||||
|
||||
function handle_RESIZE() {
|
||||
var _w = window.innerWidth,
|
||||
scale = _w / 400;
|
||||
|
||||
ad.style.webkitTransform = 'scale(' + scale + ')';
|
||||
ad.style.MozTransform = 'scale(' + scale + ')';
|
||||
ad.style.msTransform = 'scale(' + scale + ')';
|
||||
ad.style.oTransform = 'scale(' + scale + ')';
|
||||
ad.style.transform = 'scale(' + scale + ')';
|
||||
|
||||
}
|
||||
|
||||
function run() {
|
||||
if (mobilecheck() !== true) {
|
||||
meshA.start();
|
||||
}
|
||||
setTimeout(showComputer, 2000);
|
||||
setTimeout(toPhone, 3000);
|
||||
setTimeout(rotate, 4000);
|
||||
setTimeout(toTablet, 5000);
|
||||
setTimeout(zoom, 6000);
|
||||
setTimeout(greenMesh, 6300);
|
||||
setTimeout(maskReveal, 6700);
|
||||
setTimeout(showText3, 7000);
|
||||
setTimeout(hideText3, 10000);
|
||||
setTimeout(resolve, 10500);
|
||||
setTimeout(stop, 10900);
|
||||
}
|
||||
|
||||
function basic() {
|
||||
screen1.attr({opacity: 0});
|
||||
heart.el.attr({opacity: 0});
|
||||
replayBtn.attr({opacity: 0});
|
||||
logo.show();
|
||||
text4.select('tspan').attr({opacity: 0});
|
||||
text4.select('tspan:nth-child(2)').attr({y: 120});
|
||||
resolveScreen.attr({opacity: 1});
|
||||
}
|
||||
|
||||
if (window.replay !== true) {
|
||||
replayBtn.attr({opacity: 0});
|
||||
}
|
||||
|
||||
if (window.supported !== false) {
|
||||
run();
|
||||
} else {
|
||||
basic();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return App;
|
||||
});
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
define(function (require) {
|
||||
|
||||
var Burst = function (s, x, y) {
|
||||
var instance = this,
|
||||
polygons,
|
||||
mask,
|
||||
maskCircle,
|
||||
maskBg;
|
||||
|
||||
this.el = s.select("#burst");
|
||||
|
||||
mask = s.g();
|
||||
mask.toDefs();
|
||||
|
||||
maskBg = s.rect(-200, -200, 400, 400);
|
||||
maskBg.attr({
|
||||
fill: 'white'
|
||||
});
|
||||
mask.append(maskBg);
|
||||
|
||||
maskCircle = s.circle(0, 0, 30);
|
||||
mask.append(maskCircle);
|
||||
|
||||
this.el.attr({
|
||||
mask: mask
|
||||
});
|
||||
|
||||
this.anim = function () {
|
||||
this.el.animate({
|
||||
opacity: 1
|
||||
}, 100);
|
||||
|
||||
maskCircle.animate({
|
||||
transform: 'scale(6)'
|
||||
}, 300);
|
||||
|
||||
setTimeout(function () {
|
||||
instance.el.animate({
|
||||
opacity: 0
|
||||
}, 100);
|
||||
}, 300)
|
||||
}
|
||||
|
||||
this.reset = function () {
|
||||
maskCircle.attr({
|
||||
transform: 'scale(1)'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return Burst;
|
||||
});
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
define(function (require) {
|
||||
|
||||
var Device = function (s, x, y) {
|
||||
var instance = this;
|
||||
|
||||
this.el = s.g();
|
||||
this.matrix = new Snap.Matrix();
|
||||
this.matrix.translate(x, y);
|
||||
this.el.transform(this.matrix.toTransformString());
|
||||
|
||||
this.keyboardMatrix = new Snap.Matrix();
|
||||
this.keyboardMatrix.translate(0, 70);
|
||||
|
||||
instance.maskElement = s.polygon();
|
||||
instance.maskElement.toDefs();
|
||||
|
||||
addBack();
|
||||
addScreen();
|
||||
//addGloss();
|
||||
addKeyboard();
|
||||
|
||||
function addBack() {
|
||||
instance.back = s.rect(0, 0, 0, 0);
|
||||
instance.back.attr({
|
||||
fill: '#696969'
|
||||
});
|
||||
|
||||
instance.el.append(instance.back);
|
||||
}
|
||||
|
||||
function addScreen() {
|
||||
instance.scr = s.rect(0, 0, 0, 0);
|
||||
instance.scr.attr({
|
||||
fill: "#09ae8a"
|
||||
});
|
||||
|
||||
instance.el.append(instance.scr);
|
||||
}
|
||||
|
||||
function addKeyboard() {
|
||||
var p1,
|
||||
p2;
|
||||
|
||||
instance.keyboard = s.g();
|
||||
instance.keyboard.transform(instance.keyboardMatrix.toTransformString());
|
||||
|
||||
p1 = s.polygon('-103.324,0 -135.324,32 136.676,32 104.676,0 ');
|
||||
p1.attr({
|
||||
fill: '#818181'
|
||||
});
|
||||
|
||||
p2 = s.polygon('127.774,40 -128.226,40 -136.226,32 135.774,32 ');
|
||||
p2.attr({
|
||||
fill: '#676767'
|
||||
});
|
||||
|
||||
instance.keyboard.append(p1);
|
||||
instance.keyboard.append(p2);
|
||||
instance.el.append(instance.keyboard);
|
||||
}
|
||||
|
||||
function addGloss() {
|
||||
instance.gl = s.rect(0, 0, 0, 0);
|
||||
instance.gl.attr({
|
||||
opacity: 0.2,
|
||||
fill: "white",
|
||||
clipPath: instance.maskElement
|
||||
});
|
||||
|
||||
instance.el.append(instance.gl);
|
||||
}
|
||||
|
||||
this.hideKeyboard = function () {
|
||||
this.keyboardMatrix = new Snap.Matrix();
|
||||
instance.keyboardMatrix.translate(0, 50);
|
||||
instance.keyboardMatrix.scale(0.01, 0.01, 0, 0);
|
||||
instance.keyboard.animate({
|
||||
opacity: 0,
|
||||
transform: instance.keyboardMatrix.toTransformString()
|
||||
}, 100);
|
||||
}
|
||||
|
||||
this.showKeyboard = function () {
|
||||
this.keyboardMatrix = new Snap.Matrix();
|
||||
instance.keyboardMatrix.translate(0, 70);
|
||||
instance.keyboardMatrix.scale(1, 1, 0, 0);
|
||||
instance.keyboard.attr({
|
||||
opacity: 1,
|
||||
transform: instance.keyboardMatrix.toTransformString()
|
||||
});
|
||||
}
|
||||
|
||||
this.setScreen = function(w, h) {
|
||||
this.scr.attr({
|
||||
x: -w / 2,
|
||||
y: -h / 2,
|
||||
width: w,
|
||||
height: h
|
||||
});
|
||||
}
|
||||
|
||||
this.setBack = function (w, h) {
|
||||
this.back.attr({
|
||||
x: -w / 2,
|
||||
y: -h / 2,
|
||||
width: w,
|
||||
height: h
|
||||
});
|
||||
|
||||
/*
|
||||
this.gl.attr({
|
||||
x: -w / 2,
|
||||
y: -h / 2,
|
||||
width: w,
|
||||
height: h
|
||||
});
|
||||
|
||||
var pointString = -w / 2 + ' ' + -h / 2 + ',' + w / 2 + ' ' + -h / 2 + ',' + -w / 2 + ' ' + h / 2;
|
||||
|
||||
instance.maskElement.attr({
|
||||
points: pointString
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
this.setScale = function (scale) {
|
||||
this.matrix.scale(scale, scale, 0, 0);
|
||||
this.el.transform(this.matrix.toTransformString());
|
||||
}
|
||||
|
||||
this.animScreen = function(w, h) {
|
||||
this.scr.animate({
|
||||
x: -w / 2,
|
||||
y: -h / 2,
|
||||
width: w,
|
||||
height: h
|
||||
}, 100);
|
||||
}
|
||||
|
||||
this.animBack = function (w, h) {
|
||||
this.back.animate({
|
||||
x: -w / 2,
|
||||
y: -h / 2,
|
||||
width: w,
|
||||
height: h
|
||||
}, 100);
|
||||
|
||||
/*
|
||||
this.gl.animate({
|
||||
x: -w / 2,
|
||||
y: -h / 2,
|
||||
width: w,
|
||||
height: h
|
||||
}, 100);
|
||||
|
||||
var pointString = -w / 2 + ' ' + -h / 2 + ',' + w / 2 + ' ' + -h / 2 + ',' + -w / 2 + ' ' + h / 2;
|
||||
|
||||
instance.maskElement.attr({
|
||||
points: pointString
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
this.animRotation = function (r) {
|
||||
instance.matrix.rotate(r, 0, 0);
|
||||
|
||||
instance.el.animate({
|
||||
transform: instance.matrix.toTransformString()
|
||||
}, 100, mina.easeIn);
|
||||
|
||||
/*
|
||||
if (r == 90) {
|
||||
var w = 100,
|
||||
h = 56,
|
||||
pointString = -w / 2 + ' ' + -h / 2 + ',' + w / 2 + ' ' + -h / 2 + ',' + -w / 2 + ' ' + h / 2;
|
||||
|
||||
instance.maskElement.attr({
|
||||
points: pointString
|
||||
});
|
||||
|
||||
instance.maskElement.animate({
|
||||
transform: 'rotate(-90)'
|
||||
}, 100, mina.easeIn);
|
||||
} else {
|
||||
instance.maskElement.animate({
|
||||
transform: 'rotate(0)'
|
||||
}, 100, mina.easeIn);
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
this.animScale = function (scale, dur, ease) {
|
||||
dur = dur ? dur : 100;
|
||||
ease = ease ? ease : mina.easeout;
|
||||
|
||||
this.matrix.scale(scale, scale, 0, 0);
|
||||
this.el.animate({
|
||||
transform: this.matrix.toTransformString()
|
||||
}, dur, ease);
|
||||
}
|
||||
|
||||
this.animOpacity = function (opacity, dur) {
|
||||
dur = dur ? dur : 200;
|
||||
|
||||
this.el.animate({
|
||||
opacity: opacity
|
||||
}, dur);
|
||||
}
|
||||
|
||||
this.setOpacity = function (opacity) {
|
||||
this.el.attr({
|
||||
opacity: opacity
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return Device;
|
||||
});
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
define(function (require) {
|
||||
|
||||
var Heart = function (s, x, y) {
|
||||
var instance = this,
|
||||
heart,
|
||||
heartMatrix,
|
||||
totalMaskVertices = 50;
|
||||
|
||||
this.el = s.select("#heart");
|
||||
heart = this.el.select('#heart-shape');
|
||||
|
||||
instance.maskElement = s.path(getPath(totalMaskVertices));
|
||||
instance.el.attr({
|
||||
clipPath: instance.maskElement
|
||||
});
|
||||
|
||||
this.animFill = function (f, dur) {
|
||||
heart.animate({
|
||||
fill: f
|
||||
}, 200);
|
||||
}
|
||||
|
||||
this.setFill = function (f, dur) {
|
||||
heart.attr({
|
||||
fill: f
|
||||
}, 200);
|
||||
}
|
||||
|
||||
this.animScale = function (scale, dur) {
|
||||
dur = dur ? dur : 300;
|
||||
|
||||
this.matrix = new Snap.Matrix();
|
||||
this.matrix.translate(x, y);
|
||||
this.matrix.scale(scale);
|
||||
this.el.animate({
|
||||
transform: this.matrix.toTransformString()
|
||||
}, dur, mina.bounce);
|
||||
}
|
||||
|
||||
this.setScale = function (scale, dur) {
|
||||
dur = dur ? dur : 300;
|
||||
|
||||
this.matrix = new Snap.Matrix();
|
||||
this.matrix.translate(x, y);
|
||||
this.matrix.scale(scale, scale, 0, 0);
|
||||
this.el.attr({
|
||||
transform: this.matrix.toTransformString()
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
this.mask = function () {
|
||||
var n = totalMaskVertices;
|
||||
|
||||
instance.maskElement.attr({
|
||||
d: getPath(n)
|
||||
});
|
||||
|
||||
function updatePath() {
|
||||
n -= 1;
|
||||
instance.maskElement.attr({
|
||||
d: getPath(n)
|
||||
});
|
||||
|
||||
if (n > 0) {
|
||||
setTimeout(updatePath, 10);
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(updatePath, 10);
|
||||
}
|
||||
|
||||
this.unmask = function () {
|
||||
instance.maskElement.attr({
|
||||
d: getPath(totalMaskVertices)
|
||||
});
|
||||
}
|
||||
|
||||
function getPath(n) {
|
||||
var pathString,
|
||||
i,
|
||||
_x,
|
||||
_y;
|
||||
|
||||
pathString = "M0 0";
|
||||
|
||||
for (i = 0; i < n + 1; i += 1) {
|
||||
a = 2 * Math.PI * i / totalMaskVertices;
|
||||
a += Math.PI;
|
||||
|
||||
_x = Math.sin(a) * 50;
|
||||
_y = Math.cos(a) * 50;
|
||||
|
||||
pathString += "L" + _x + " " + _y;
|
||||
}
|
||||
|
||||
pathString += "Z";
|
||||
return pathString;
|
||||
}
|
||||
}
|
||||
|
||||
return Heart;
|
||||
});
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
define(function (require) {
|
||||
|
||||
var Logo = function (s) {
|
||||
var instance = this,
|
||||
logo,
|
||||
parts = [
|
||||
['top', 0, 20],
|
||||
['left', 20, 0],
|
||||
['bottom', 0, -20],
|
||||
['right', -20, 0]
|
||||
],
|
||||
components = [],
|
||||
i = 0,
|
||||
k = 0,
|
||||
isLogoAnimated = false,
|
||||
isCrocAnimated = false,
|
||||
isCroc2Animated = false;
|
||||
|
||||
logo = s.select("#snap-logo");
|
||||
|
||||
for (i = 0; i < parts.length; i++) {
|
||||
var el = parts[i]
|
||||
elid = el[0];
|
||||
element = logo.select("#snap-logo-" + elid);
|
||||
element.attr({opacity:0, transform: "t" + (el[1]) + "," + (el[2])});
|
||||
components.push(element);
|
||||
}
|
||||
|
||||
function animateEach() {
|
||||
if (!components[k]) {
|
||||
return;
|
||||
}
|
||||
components[k].animate({
|
||||
transform: "t" + (0) + "," + (0),
|
||||
opacity: 1
|
||||
}, 250, mina.easeout);
|
||||
setTimeout(animateEach, 150);
|
||||
k++;
|
||||
};
|
||||
|
||||
this.animate = function () {
|
||||
setTimeout(animateEach, 150);
|
||||
}
|
||||
|
||||
this.show = function () {
|
||||
var i;
|
||||
|
||||
for (i = 0; i < components.length; i += 1) {
|
||||
components[i].attr({
|
||||
transform: "t" + (0) + "," + (0),
|
||||
opacity: 1
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
return Logo;
|
||||
});
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
define(function (require) {
|
||||
|
||||
require('vendor/fss');
|
||||
|
||||
var Mesh = function (s, container, colorA, colorB) {
|
||||
var instance = this,
|
||||
_width = 440,
|
||||
_height = 440,
|
||||
now,
|
||||
start = Date.now(),
|
||||
renderer,
|
||||
scene,
|
||||
geometry,
|
||||
material,
|
||||
mesh,
|
||||
light;
|
||||
|
||||
instance.animating = false;
|
||||
|
||||
instance.init = function () {
|
||||
renderer = new FSS.SVGRenderer(s);
|
||||
renderer.setSize(_width, _height);
|
||||
renderer.element.transform('translate(-20, -20)'); //keep edges from showing
|
||||
|
||||
instance.el = renderer.element;
|
||||
|
||||
container.append(renderer.element);
|
||||
|
||||
scene = new FSS.Scene();
|
||||
material = new FSS.Material(colorA, colorB);
|
||||
geometry = new FSS.Plane(_width, _height, 10, 10, s, material);
|
||||
mesh = new FSS.Mesh(geometry, material);
|
||||
scene.add(mesh);
|
||||
|
||||
light = new FSS.Light('#eeeeee', '#eeeeee');
|
||||
light.setPosition(300*Math.sin(0.001), 200*Math.cos(0.0005), 100);
|
||||
scene.add(light);
|
||||
|
||||
now = Date.now() - start;
|
||||
|
||||
tweakMesh();
|
||||
distortMesh();
|
||||
renderer.render(scene);
|
||||
}
|
||||
|
||||
instance.start = function () {
|
||||
instance.animating = true;
|
||||
animate();
|
||||
}
|
||||
|
||||
instance.stop = function () {
|
||||
instance.animating = false;
|
||||
}
|
||||
|
||||
instance.setColor = function (colorA, colorB) {
|
||||
var i;
|
||||
|
||||
material = new FSS.Material(colorA, colorB);
|
||||
|
||||
for (i = geometry.triangles.length - 1; i > -1; i -= 1) {
|
||||
geometry.triangles[i].material = material;
|
||||
}
|
||||
|
||||
animate();
|
||||
}
|
||||
|
||||
instance.rippleColor = function (colorA, colorB) {
|
||||
var i;
|
||||
|
||||
material = new FSS.Material(colorA, colorB);
|
||||
|
||||
function colorTriangle(j) {
|
||||
geometry.triangles[j].material = material;
|
||||
|
||||
if (j == 0) {
|
||||
setTimeout(function () {
|
||||
animate();
|
||||
}, 10); //force clear
|
||||
}
|
||||
}
|
||||
|
||||
for (i = geometry.triangles.length - 1; i > -1; i -= 1) {
|
||||
var speed = 200 + Math.sin(0.1 + Math.abs(geometry.triangles[i].centroid[0] / geometry.triangles[i].centroid[1])) * 100;
|
||||
setTimeout(colorTriangle, speed * 2, i);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function tweakMesh() {
|
||||
var v, vertex;
|
||||
|
||||
for (v = geometry.vertices.length - 1; v >= 0; v--) {
|
||||
vertex = geometry.vertices[v];
|
||||
vertex.anchor = FSS.Vector3.clone(vertex.position);
|
||||
vertex.step = FSS.Vector3.create(
|
||||
Math.randomInRange(0.2, 1.0),
|
||||
Math.randomInRange(0.2, 1.0),
|
||||
Math.randomInRange(0.2, 1.0)
|
||||
);
|
||||
vertex.time = Math.randomInRange(0, Math.PIM2);
|
||||
}
|
||||
}
|
||||
|
||||
function distortMesh() {
|
||||
var v,
|
||||
vertex,
|
||||
ox, oy, oz,
|
||||
offset = 10 / 2;
|
||||
|
||||
for (v = geometry.vertices.length - 1; v >= 0; v--) {
|
||||
vertex = geometry.vertices[v];
|
||||
ox = Math.sin(vertex.time + vertex.step[0] * now * 0.002);
|
||||
oy = Math.cos(vertex.time + vertex.step[1] * now * 0.002);
|
||||
oz = Math.sin(vertex.time + vertex.step[2] * now * 0.002);
|
||||
FSS.Vector3.set(vertex.position,
|
||||
0.2 * geometry.segmentWidth * ox,
|
||||
0.1 * geometry.sliceHeight * oy,
|
||||
0.7 * offset * oz - offset);
|
||||
FSS.Vector3.add(vertex.position, vertex.anchor);
|
||||
}
|
||||
|
||||
geometry.dirty = true;
|
||||
}
|
||||
|
||||
function animate() {
|
||||
now = Date.now() - start;
|
||||
|
||||
if (mobilecheck() !== true) {
|
||||
distortMesh();
|
||||
}
|
||||
|
||||
renderer.render(scene);
|
||||
|
||||
if (instance.animating !== false) {
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
}
|
||||
|
||||
instance.init();
|
||||
}
|
||||
|
||||
return Mesh;
|
||||
});
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
/*global require*/
|
||||
|
||||
require.config({
|
||||
shim: {
|
||||
|
||||
},
|
||||
paths: {
|
||||
snap: 'vendor/snap.svg',
|
||||
tweenlite: 'vendor/greensock/TweenLite',
|
||||
timelinelite: 'vendor/greensock/TimelineLite'
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* check support
|
||||
*/
|
||||
window.ua = navigator.userAgent.toLowerCase();
|
||||
window.isAndroid = ua.indexOf("android") > -1;
|
||||
window.isSafari = ua.indexOf("safari") > -1 && ua.indexOf("chrome") === -1;
|
||||
|
||||
function checkSVG() {
|
||||
return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
|
||||
}
|
||||
|
||||
/**
|
||||
* check mobile
|
||||
*/
|
||||
window.mobilecheck = function() {
|
||||
var check = false;
|
||||
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
|
||||
return check;
|
||||
}
|
||||
|
||||
function addFallback() {
|
||||
var link,
|
||||
img;
|
||||
|
||||
link = document.createElement('a');
|
||||
link.href = "http://snapsvg.io/";
|
||||
document.body.appendChild(link);
|
||||
|
||||
img = new Image();
|
||||
img.src = "backup.jpg";
|
||||
img.style.position = "absolute";
|
||||
img.style.top = "0";
|
||||
img.style.left = "0";
|
||||
img.width = "100%";
|
||||
link.appendChild(img);
|
||||
}
|
||||
|
||||
window.supported = true;
|
||||
window.replay = true;
|
||||
|
||||
require(['app/app'], function (App) {
|
||||
|
||||
if (checkSVG() !== true) {
|
||||
addFallback();
|
||||
return;
|
||||
}
|
||||
|
||||
if (isAndroid === true) {
|
||||
window.supported = false;
|
||||
}
|
||||
|
||||
if (isSafari === true) {
|
||||
window.replay = false;
|
||||
}
|
||||
|
||||
window.app = new App();
|
||||
//app.init(); //fired from font loading
|
||||
});
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* font loading
|
||||
*/
|
||||
WebFontConfig = {
|
||||
google: {
|
||||
families: ['Open+Sans:300:latin', 'Source+Sans+Pro::latin']
|
||||
},
|
||||
inactive: function () {
|
||||
if (typeof(app) !== 'undefined' && app.started !== true) {
|
||||
app.init();
|
||||
}
|
||||
},
|
||||
fontactive: function(familyName, fvd) {
|
||||
if (typeof(app) !== 'undefined' && familyName == 'Open Sans') {
|
||||
if (app.started !== true) {
|
||||
app.init();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,760 @@
|
|||
//============================================================
|
||||
//
|
||||
// Copyright (C) 2013 Matthew Wagerfield
|
||||
//
|
||||
// Twitter: https://twitter.com/mwagerfield
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any
|
||||
// person obtaining a copy of this software and associated
|
||||
// documentation files (the "Software"), to deal in the
|
||||
// Software without restriction, including without limitation
|
||||
// the rights to use, copy, modify, merge, publish, distribute,
|
||||
// sublicense, and/or sell copies of the Software, and to
|
||||
// permit persons to whom the Software is furnished to do
|
||||
// so, subject to the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice
|
||||
// shall be included in all copies or substantial portions
|
||||
// of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY
|
||||
// OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
|
||||
// LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
|
||||
// EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
|
||||
// FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
|
||||
// AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
|
||||
// OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
//
|
||||
//============================================================
|
||||
|
||||
/**
|
||||
* Defines the Flat Surface Shader namespace for all the awesomeness to exist upon.
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS = {
|
||||
FRONT : 0,
|
||||
BACK : 1,
|
||||
DOUBLE : 2,
|
||||
SVGNS : 'http://www.w3.org/2000/svg'
|
||||
};
|
||||
|
||||
/**
|
||||
* @class Array
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Array = typeof Float32Array === 'function' ? Float32Array : Array;
|
||||
|
||||
/**
|
||||
* @class Utils
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Utils = {
|
||||
isNumber: function(value) {
|
||||
return !isNaN(parseFloat(value)) && isFinite(value);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Request Animation Frame Polyfill.
|
||||
* @author Paul Irish
|
||||
* @see https://gist.github.com/paulirish/1579671
|
||||
*/
|
||||
(function() {
|
||||
|
||||
var lastTime = 0;
|
||||
var vendors = ['ms', 'moz', 'webkit', 'o'];
|
||||
|
||||
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
||||
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
|
||||
}
|
||||
|
||||
if (!window.requestAnimationFrame) {
|
||||
window.requestAnimationFrame = function(callback, element) {
|
||||
var currentTime = new Date().getTime();
|
||||
var timeToCall = Math.max(0, 16 - (currentTime - lastTime));
|
||||
var id = window.setTimeout(function() {
|
||||
callback(currentTime + timeToCall);
|
||||
}, timeToCall);
|
||||
lastTime = currentTime + timeToCall;
|
||||
return id;
|
||||
};
|
||||
}
|
||||
|
||||
if (!window.cancelAnimationFrame) {
|
||||
window.cancelAnimationFrame = function(id) {
|
||||
clearTimeout(id);
|
||||
};
|
||||
}
|
||||
|
||||
}());
|
||||
|
||||
/**
|
||||
* @object Math Augmentation
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
Math.PIM2 = Math.PI*2;
|
||||
Math.PID2 = Math.PI/2;
|
||||
Math.randomInRange = function(min, max) {
|
||||
return min + (max - min) * Math.random();
|
||||
};
|
||||
Math.clamp = function(value, min, max) {
|
||||
value = Math.max(value, min);
|
||||
value = Math.min(value, max);
|
||||
return value;
|
||||
};
|
||||
|
||||
/**
|
||||
* @object Vector3
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Vector3 = {
|
||||
create: function(x, y, z) {
|
||||
var vector = new FSS.Array(3);
|
||||
this.set(vector, x, y, z);
|
||||
return vector;
|
||||
},
|
||||
clone: function(a) {
|
||||
var vector = this.create();
|
||||
this.copy(vector, a);
|
||||
return vector;
|
||||
},
|
||||
set: function(target, x, y, z) {
|
||||
target[0] = x || 0;
|
||||
target[1] = y || 0;
|
||||
target[2] = z || 0;
|
||||
return this;
|
||||
},
|
||||
setX: function(target, x) {
|
||||
target[0] = x || 0;
|
||||
return this;
|
||||
},
|
||||
setY: function(target, y) {
|
||||
target[1] = y || 0;
|
||||
return this;
|
||||
},
|
||||
setZ: function(target, z) {
|
||||
target[2] = z || 0;
|
||||
return this;
|
||||
},
|
||||
copy: function(target, a) {
|
||||
target[0] = a[0];
|
||||
target[1] = a[1];
|
||||
target[2] = a[2];
|
||||
return this;
|
||||
},
|
||||
add: function(target, a) {
|
||||
target[0] += a[0];
|
||||
target[1] += a[1];
|
||||
target[2] += a[2];
|
||||
return this;
|
||||
},
|
||||
addVectors: function(target, a, b) {
|
||||
target[0] = a[0] + b[0];
|
||||
target[1] = a[1] + b[1];
|
||||
target[2] = a[2] + b[2];
|
||||
return this;
|
||||
},
|
||||
addScalar: function(target, s) {
|
||||
target[0] += s;
|
||||
target[1] += s;
|
||||
target[2] += s;
|
||||
return this;
|
||||
},
|
||||
subtract: function(target, a) {
|
||||
target[0] -= a[0];
|
||||
target[1] -= a[1];
|
||||
target[2] -= a[2];
|
||||
return this;
|
||||
},
|
||||
subtractVectors: function(target, a, b) {
|
||||
target[0] = a[0] - b[0];
|
||||
target[1] = a[1] - b[1];
|
||||
target[2] = a[2] - b[2];
|
||||
return this;
|
||||
},
|
||||
subtractScalar: function(target, s) {
|
||||
target[0] -= s;
|
||||
target[1] -= s;
|
||||
target[2] -= s;
|
||||
return this;
|
||||
},
|
||||
multiply: function(target, a) {
|
||||
target[0] *= a[0];
|
||||
target[1] *= a[1];
|
||||
target[2] *= a[2];
|
||||
return this;
|
||||
},
|
||||
multiplyVectors: function(target, a, b) {
|
||||
target[0] = a[0] * b[0];
|
||||
target[1] = a[1] * b[1];
|
||||
target[2] = a[2] * b[2];
|
||||
return this;
|
||||
},
|
||||
multiplyScalar: function(target, s) {
|
||||
target[0] *= s;
|
||||
target[1] *= s;
|
||||
target[2] *= s;
|
||||
return this;
|
||||
},
|
||||
divide: function(target, a) {
|
||||
target[0] /= a[0];
|
||||
target[1] /= a[1];
|
||||
target[2] /= a[2];
|
||||
return this;
|
||||
},
|
||||
divideVectors: function(target, a, b) {
|
||||
target[0] = a[0] / b[0];
|
||||
target[1] = a[1] / b[1];
|
||||
target[2] = a[2] / b[2];
|
||||
return this;
|
||||
},
|
||||
divideScalar: function(target, s) {
|
||||
if (s !== 0) {
|
||||
target[0] /= s;
|
||||
target[1] /= s;
|
||||
target[2] /= s;
|
||||
} else {
|
||||
target[0] = 0;
|
||||
target[1] = 0;
|
||||
target[2] = 0;
|
||||
}
|
||||
return this;
|
||||
},
|
||||
cross: function(target, a) {
|
||||
var x = target[0];
|
||||
var y = target[1];
|
||||
var z = target[2];
|
||||
target[0] = y*a[2] - z*a[1];
|
||||
target[1] = z*a[0] - x*a[2];
|
||||
target[2] = x*a[1] - y*a[0];
|
||||
return this;
|
||||
},
|
||||
crossVectors: function(target, a, b) {
|
||||
target[0] = a[1]*b[2] - a[2]*b[1];
|
||||
target[1] = a[2]*b[0] - a[0]*b[2];
|
||||
target[2] = a[0]*b[1] - a[1]*b[0];
|
||||
return this;
|
||||
},
|
||||
min: function(target, value) {
|
||||
if (target[0] < value) { target[0] = value; }
|
||||
if (target[1] < value) { target[1] = value; }
|
||||
if (target[2] < value) { target[2] = value; }
|
||||
return this;
|
||||
},
|
||||
max: function(target, value) {
|
||||
if (target[0] > value) { target[0] = value; }
|
||||
if (target[1] > value) { target[1] = value; }
|
||||
if (target[2] > value) { target[2] = value; }
|
||||
return this;
|
||||
},
|
||||
clamp: function(target, min, max) {
|
||||
this.min(target, min);
|
||||
this.max(target, max);
|
||||
return this;
|
||||
},
|
||||
limit: function(target, min, max) {
|
||||
var length = this.length(target);
|
||||
if (min !== null && length < min) {
|
||||
this.setLength(target, min);
|
||||
} else if (max !== null && length > max) {
|
||||
this.setLength(target, max);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
dot: function(a, b) {
|
||||
return a[0]*b[0] + a[1]*b[1] + a[2]*b[2];
|
||||
},
|
||||
normalise: function(target) {
|
||||
return this.divideScalar(target, this.length(target));
|
||||
},
|
||||
negate: function(target) {
|
||||
return this.multiplyScalar(target, -1);
|
||||
},
|
||||
distanceSquared: function(a, b) {
|
||||
var dx = a[0] - b[0];
|
||||
var dy = a[1] - b[1];
|
||||
var dz = a[2] - b[2];
|
||||
return dx*dx + dy*dy + dz*dz;
|
||||
},
|
||||
distance: function(a, b) {
|
||||
return Math.sqrt(this.distanceSquared(a, b));
|
||||
},
|
||||
lengthSquared: function(a) {
|
||||
return a[0]*a[0] + a[1]*a[1] + a[2]*a[2];
|
||||
},
|
||||
length: function(a) {
|
||||
return Math.sqrt(this.lengthSquared(a));
|
||||
},
|
||||
setLength: function(target, l) {
|
||||
var length = this.length(target);
|
||||
if (length !== 0 && l !== length) {
|
||||
this.multiplyScalar(target, l / length);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @object Vector4
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Vector4 = {
|
||||
create: function(x, y, z, w) {
|
||||
var vector = new FSS.Array(4);
|
||||
this.set(vector, x, y, z);
|
||||
return vector;
|
||||
},
|
||||
set: function(target, x, y, z, w) {
|
||||
target[0] = x || 0;
|
||||
target[1] = y || 0;
|
||||
target[2] = z || 0;
|
||||
target[3] = w || 0;
|
||||
return this;
|
||||
},
|
||||
setX: function(target, x) {
|
||||
target[0] = x || 0;
|
||||
return this;
|
||||
},
|
||||
setY: function(target, y) {
|
||||
target[1] = y || 0;
|
||||
return this;
|
||||
},
|
||||
setZ: function(target, z) {
|
||||
target[2] = z || 0;
|
||||
return this;
|
||||
},
|
||||
setW: function(target, w) {
|
||||
target[3] = w || 0;
|
||||
return this;
|
||||
},
|
||||
add: function(target, a) {
|
||||
target[0] += a[0];
|
||||
target[1] += a[1];
|
||||
target[2] += a[2];
|
||||
target[3] += a[3];
|
||||
return this;
|
||||
},
|
||||
multiplyVectors: function(target, a, b) {
|
||||
target[0] = a[0] * b[0];
|
||||
target[1] = a[1] * b[1];
|
||||
target[2] = a[2] * b[2];
|
||||
target[3] = a[3] * b[3];
|
||||
return this;
|
||||
},
|
||||
multiplyScalar: function(target, s) {
|
||||
target[0] *= s;
|
||||
target[1] *= s;
|
||||
target[2] *= s;
|
||||
target[3] *= s;
|
||||
return this;
|
||||
},
|
||||
min: function(target, value) {
|
||||
if (target[0] < value) { target[0] = value; }
|
||||
if (target[1] < value) { target[1] = value; }
|
||||
if (target[2] < value) { target[2] = value; }
|
||||
if (target[3] < value) { target[3] = value; }
|
||||
return this;
|
||||
},
|
||||
max: function(target, value) {
|
||||
if (target[0] > value) { target[0] = value; }
|
||||
if (target[1] > value) { target[1] = value; }
|
||||
if (target[2] > value) { target[2] = value; }
|
||||
if (target[3] > value) { target[3] = value; }
|
||||
return this;
|
||||
},
|
||||
clamp: function(target, min, max) {
|
||||
this.min(target, min);
|
||||
this.max(target, max);
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @class Color
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Color = function(hex, opacity) {
|
||||
this.rgba = FSS.Vector4.create();
|
||||
this.hex = hex || '#000000';
|
||||
this.opacity = FSS.Utils.isNumber(opacity) ? opacity : 1;
|
||||
this.set(this.hex, this.opacity);
|
||||
};
|
||||
|
||||
FSS.Color.prototype = {
|
||||
set: function(hex, opacity) {
|
||||
hex = hex.replace('#', '');
|
||||
var size = hex.length / 3;
|
||||
this.rgba[0] = parseInt(hex.substring(size*0, size*1), 16) / 255;
|
||||
this.rgba[1] = parseInt(hex.substring(size*1, size*2), 16) / 255;
|
||||
this.rgba[2] = parseInt(hex.substring(size*2, size*3), 16) / 255;
|
||||
this.rgba[3] = FSS.Utils.isNumber(opacity) ? opacity : this.rgba[3];
|
||||
return this;
|
||||
},
|
||||
hexify: function(channel) {
|
||||
var hex = Math.ceil(channel*255).toString(16);
|
||||
if (hex.length === 1) { hex = '0' + hex; }
|
||||
return hex;
|
||||
},
|
||||
format: function() {
|
||||
var r = this.hexify(this.rgba[0]);
|
||||
var g = this.hexify(this.rgba[1]);
|
||||
var b = this.hexify(this.rgba[2]);
|
||||
this.hex = '#' + r + g + b;
|
||||
return this.hex;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @class Object
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Object = function() {
|
||||
this.position = FSS.Vector3.create();
|
||||
};
|
||||
|
||||
FSS.Object.prototype = {
|
||||
setPosition: function(x, y, z) {
|
||||
FSS.Vector3.set(this.position, x, y, z);
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @class Light
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Light = function(ambient, diffuse) {
|
||||
FSS.Object.call(this);
|
||||
this.ambient = new FSS.Color(ambient || '#FFFFFF');
|
||||
this.diffuse = new FSS.Color(diffuse || '#FFFFFF');
|
||||
this.ray = FSS.Vector3.create();
|
||||
};
|
||||
|
||||
FSS.Light.prototype = Object.create(FSS.Object.prototype);
|
||||
|
||||
/**
|
||||
* @class Vertex
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Vertex = function(x, y, z) {
|
||||
this.position = FSS.Vector3.create(x, y, z);
|
||||
};
|
||||
|
||||
FSS.Vertex.prototype = {
|
||||
setPosition: function(x, y, z) {
|
||||
FSS.Vector3.set(this.position, x, y, z);
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @class Triangle
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Triangle = function(a, b, c, s, material) {
|
||||
this.a = a || new FSS.Vertex();
|
||||
this.b = b || new FSS.Vertex();
|
||||
this.c = c || new FSS.Vertex();
|
||||
this.vertices = [this.a, this.b, this.c];
|
||||
this.u = FSS.Vector3.create();
|
||||
this.v = FSS.Vector3.create();
|
||||
this.centroid = FSS.Vector3.create();
|
||||
this.normal = FSS.Vector3.create();
|
||||
this.material = material || new FSS.Material();
|
||||
this.color = new FSS.Color();
|
||||
this.polygon = s.polygon();
|
||||
this.polygon.attr({
|
||||
'stroke-linejoin': 'round',
|
||||
'stroke-miterlimit': 1,
|
||||
'stroke-width': 1
|
||||
});
|
||||
|
||||
this.computeCentroid();
|
||||
this.computeNormal();
|
||||
};
|
||||
|
||||
FSS.Triangle.prototype = {
|
||||
computeCentroid: function() {
|
||||
this.centroid[0] = this.a.position[0] + this.b.position[0] + this.c.position[0];
|
||||
this.centroid[1] = this.a.position[1] + this.b.position[1] + this.c.position[1];
|
||||
this.centroid[2] = this.a.position[2] + this.b.position[2] + this.c.position[2];
|
||||
FSS.Vector3.divideScalar(this.centroid, 3);
|
||||
return this;
|
||||
},
|
||||
computeNormal: function() {
|
||||
FSS.Vector3.subtractVectors(this.u, this.b.position, this.a.position);
|
||||
FSS.Vector3.subtractVectors(this.v, this.c.position, this.a.position);
|
||||
FSS.Vector3.crossVectors(this.normal, this.u, this.v);
|
||||
FSS.Vector3.normalise(this.normal);
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @class Geometry
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Geometry = function() {
|
||||
this.vertices = [];
|
||||
this.triangles = [];
|
||||
this.dirty = false;
|
||||
};
|
||||
|
||||
FSS.Geometry.prototype = {
|
||||
update: function() {
|
||||
if (this.dirty) {
|
||||
var t,triangle;
|
||||
for (t = this.triangles.length - 1; t >= 0; t--) {
|
||||
triangle = this.triangles[t];
|
||||
triangle.computeCentroid();
|
||||
triangle.computeNormal();
|
||||
}
|
||||
this.dirty = false;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @class Plane
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Plane = function(width, height, segments, slices, s, material) {
|
||||
FSS.Geometry.call(this);
|
||||
this.width = width || 100;
|
||||
this.height = height || 100;
|
||||
this.segments = segments || 4;
|
||||
this.slices = slices || 4;
|
||||
this.segmentWidth = this.width / this.segments;
|
||||
this.sliceHeight = this.height / this.slices;
|
||||
|
||||
// Cache Variables
|
||||
var x, y, v0, v1, v2, v3,
|
||||
vertex, triangle, vertices = [],
|
||||
offsetX = this.width * -0.5,
|
||||
offsetY = this.height * 0.5;
|
||||
|
||||
// Add Vertices
|
||||
for (x = 0; x <= this.segments; x++) {
|
||||
vertices.push([]);
|
||||
for (y = 0; y <= this.slices; y++) {
|
||||
vertex = new FSS.Vertex(offsetX + x*this.segmentWidth, offsetY - y*this.sliceHeight);
|
||||
vertices[x].push(vertex);
|
||||
this.vertices.push(vertex);
|
||||
}
|
||||
}
|
||||
|
||||
// Add Triangles
|
||||
for (x = 0; x < this.segments; x++) {
|
||||
for (y = 0; y < this.slices; y++) {
|
||||
v0 = vertices[x+0][y+0];
|
||||
v1 = vertices[x+0][y+1];
|
||||
v2 = vertices[x+1][y+0];
|
||||
v3 = vertices[x+1][y+1];
|
||||
t0 = new FSS.Triangle(v0, v1, v2, s, material);
|
||||
t1 = new FSS.Triangle(v2, v1, v3, s, material);
|
||||
this.triangles.push(t0, t1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
FSS.Plane.prototype = Object.create(FSS.Geometry.prototype);
|
||||
|
||||
/**
|
||||
* @class Material
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Material = function(ambient, diffuse) {
|
||||
this.ambient = new FSS.Color(ambient || '#444444');
|
||||
this.diffuse = new FSS.Color(diffuse || '#FFFFFF');
|
||||
this.slave = new FSS.Color();
|
||||
};
|
||||
|
||||
/**
|
||||
* @class Mesh
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Mesh = function(geometry, material) {
|
||||
FSS.Object.call(this);
|
||||
this.geometry = geometry || new FSS.Geometry();
|
||||
this.material = material || new FSS.Material();
|
||||
this.side = FSS.FRONT;
|
||||
this.visible = true;
|
||||
};
|
||||
|
||||
FSS.Mesh.prototype = Object.create(FSS.Object.prototype);
|
||||
|
||||
FSS.Mesh.prototype.update = function(lights, calculate) {
|
||||
var t,triangle, l,light, illuminance;
|
||||
|
||||
// Update Geometry
|
||||
this.geometry.update();
|
||||
|
||||
// Calculate the triangle colors
|
||||
if (calculate) {
|
||||
|
||||
// Iterate through Triangles
|
||||
for (t = this.geometry.triangles.length - 1; t >= 0; t--) {
|
||||
triangle = this.geometry.triangles[t];
|
||||
|
||||
// Reset Triangle Color
|
||||
FSS.Vector4.set(triangle.color.rgba);
|
||||
|
||||
// Iterate through Lights
|
||||
for (l = lights.length - 1; l >= 0; l--) {
|
||||
light = lights[l];
|
||||
|
||||
// Calculate Illuminance
|
||||
FSS.Vector3.subtractVectors(light.ray, light.position, triangle.centroid);
|
||||
FSS.Vector3.normalise(light.ray);
|
||||
illuminance = FSS.Vector3.dot(triangle.normal, light.ray);
|
||||
if (this.side === FSS.FRONT) {
|
||||
illuminance = Math.max(illuminance, 0);
|
||||
} else if (this.side === FSS.BACK) {
|
||||
illuminance = Math.abs(Math.min(illuminance, 0));
|
||||
} else if (this.side === FSS.DOUBLE) {
|
||||
illuminance = Math.max(Math.abs(illuminance), 0);
|
||||
}
|
||||
|
||||
// Calculate Ambient Light
|
||||
FSS.Vector4.multiplyVectors(triangle.material.slave.rgba, triangle.material.ambient.rgba, light.ambient.rgba);
|
||||
FSS.Vector4.add(triangle.color.rgba, triangle.material.slave.rgba);
|
||||
|
||||
// Calculate Diffuse Light
|
||||
FSS.Vector4.multiplyVectors(triangle.material.slave.rgba, triangle.material.diffuse.rgba, light.diffuse.rgba);
|
||||
FSS.Vector4.multiplyScalar(triangle.material.slave.rgba, illuminance);
|
||||
FSS.Vector4.add(triangle.color.rgba, triangle.material.slave.rgba);
|
||||
}
|
||||
|
||||
// Clamp & Format Color
|
||||
FSS.Vector4.clamp(triangle.color.rgba, 0, 1);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* @class Scene
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Scene = function() {
|
||||
this.meshes = [];
|
||||
this.lights = [];
|
||||
};
|
||||
|
||||
FSS.Scene.prototype = {
|
||||
add: function(object) {
|
||||
if (object instanceof FSS.Mesh && !~this.meshes.indexOf(object)) {
|
||||
this.meshes.push(object);
|
||||
} else if (object instanceof FSS.Light && !~this.lights.indexOf(object)) {
|
||||
this.lights.push(object);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
remove: function(object) {
|
||||
if (object instanceof FSS.Mesh && ~this.meshes.indexOf(object)) {
|
||||
this.meshes.splice(this.meshes.indexOf(object), 1);
|
||||
} else if (object instanceof FSS.Light && ~this.lights.indexOf(object)) {
|
||||
this.lights.splice(this.lights.indexOf(object), 1);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @class Renderer
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Renderer = function() {
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.halfWidth = 0;
|
||||
this.halfHeight = 0;
|
||||
};
|
||||
|
||||
FSS.Renderer.prototype = {
|
||||
setSize: function(width, height) {
|
||||
if (this.width === width && this.height === height) return;
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.halfWidth = this.width * 0.5;
|
||||
this.halfHeight = this.height * 0.5;
|
||||
return this;
|
||||
},
|
||||
clear: function() {
|
||||
return this;
|
||||
},
|
||||
render: function(scene) {
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @class SVG Renderer
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.SVGRenderer = function(s) {
|
||||
FSS.Renderer.call(this);
|
||||
this.element = s.g();
|
||||
};
|
||||
|
||||
FSS.SVGRenderer.prototype = Object.create(FSS.Renderer.prototype);
|
||||
|
||||
FSS.SVGRenderer.prototype.setSize = function(width, height) {
|
||||
FSS.Renderer.prototype.setSize.call(this, width, height);
|
||||
return this;
|
||||
};
|
||||
|
||||
FSS.SVGRenderer.prototype.clear = function() {
|
||||
FSS.Renderer.prototype.clear.call(this);
|
||||
for (var i = this.element.childNodes.length - 1; i >= 0; i--) {
|
||||
this.element.removeChild(this.element.childNodes[i]);
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
FSS.SVGRenderer.prototype.render = function(scene) {
|
||||
FSS.Renderer.prototype.render.call(this, scene);
|
||||
var m,mesh, t,triangle, points, style;
|
||||
|
||||
// Update Meshes
|
||||
for (m = scene.meshes.length - 1; m >= 0; m--) {
|
||||
mesh = scene.meshes[m];
|
||||
if (mesh.visible) {
|
||||
mesh.update(scene.lights, true);
|
||||
|
||||
// Render Triangles
|
||||
for (t = mesh.geometry.triangles.length - 1; t >= 0; t--) {
|
||||
triangle = mesh.geometry.triangles[t];
|
||||
|
||||
if (triangle.polygon.parent() !== this.element) {
|
||||
this.element.append(triangle.polygon);
|
||||
}
|
||||
|
||||
points = this.formatPoint(triangle.a)+' ';
|
||||
points += this.formatPoint(triangle.b)+' ';
|
||||
points += this.formatPoint(triangle.c);
|
||||
style = this.formatStyle(triangle.color.format());
|
||||
|
||||
triangle.polygon.attr({
|
||||
points: points,
|
||||
style: style
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
FSS.SVGRenderer.prototype.formatPoint = function(vertex) {
|
||||
return (this.halfWidth+vertex.position[0])+','+(this.halfHeight-vertex.position[1]);
|
||||
};
|
||||
|
||||
FSS.SVGRenderer.prototype.formatStyle = function(color) {
|
||||
var style = 'fill:'+color+';';
|
||||
style += 'stroke:'+color+';';
|
||||
return style;
|
||||
};
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
/**
|
||||
* @class Color
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Color = function(hex, opacity) {
|
||||
this.rgba = FSS.Vector4.create();
|
||||
this.hex = hex || '#000000';
|
||||
this.opacity = FSS.Utils.isNumber(opacity) ? opacity : 1;
|
||||
this.set(this.hex, this.opacity);
|
||||
};
|
||||
|
||||
FSS.Color.prototype = {
|
||||
set: function(hex, opacity) {
|
||||
hex = hex.replace('#', '');
|
||||
var size = hex.length / 3;
|
||||
this.rgba[0] = parseInt(hex.substring(size*0, size*1), 16) / 255;
|
||||
this.rgba[1] = parseInt(hex.substring(size*1, size*2), 16) / 255;
|
||||
this.rgba[2] = parseInt(hex.substring(size*2, size*3), 16) / 255;
|
||||
this.rgba[3] = FSS.Utils.isNumber(opacity) ? opacity : this.rgba[3];
|
||||
return this;
|
||||
},
|
||||
hexify: function(channel) {
|
||||
var hex = Math.ceil(channel*255).toString(16);
|
||||
if (hex.length === 1) { hex = '0' + hex; }
|
||||
return hex;
|
||||
},
|
||||
format: function() {
|
||||
var r = this.hexify(this.rgba[0]);
|
||||
var g = this.hexify(this.rgba[1]);
|
||||
var b = this.hexify(this.rgba[2]);
|
||||
this.hex = '#' + r + g + b;
|
||||
return this.hex;
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
/**
|
||||
* Defines the Flat Surface Shader namespace for all the awesomeness to exist upon.
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS = {
|
||||
FRONT : 0,
|
||||
BACK : 1,
|
||||
DOUBLE : 2,
|
||||
SVGNS : 'http://www.w3.org/2000/svg'
|
||||
};
|
||||
|
||||
/**
|
||||
* @class Array
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Array = typeof Float32Array === 'function' ? Float32Array : Array;
|
||||
|
||||
/**
|
||||
* @class Utils
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Utils = {
|
||||
isNumber: function(value) {
|
||||
return !isNaN(parseFloat(value)) && isFinite(value);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Request Animation Frame Polyfill.
|
||||
* @author Paul Irish
|
||||
* @see https://gist.github.com/paulirish/1579671
|
||||
*/
|
||||
(function() {
|
||||
|
||||
var lastTime = 0;
|
||||
var vendors = ['ms', 'moz', 'webkit', 'o'];
|
||||
|
||||
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
||||
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
|
||||
}
|
||||
|
||||
if (!window.requestAnimationFrame) {
|
||||
window.requestAnimationFrame = function(callback, element) {
|
||||
var currentTime = new Date().getTime();
|
||||
var timeToCall = Math.max(0, 16 - (currentTime - lastTime));
|
||||
var id = window.setTimeout(function() {
|
||||
callback(currentTime + timeToCall);
|
||||
}, timeToCall);
|
||||
lastTime = currentTime + timeToCall;
|
||||
return id;
|
||||
};
|
||||
}
|
||||
|
||||
if (!window.cancelAnimationFrame) {
|
||||
window.cancelAnimationFrame = function(id) {
|
||||
clearTimeout(id);
|
||||
};
|
||||
}
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/**
|
||||
* @class Geometry
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Geometry = function() {
|
||||
this.vertices = [];
|
||||
this.triangles = [];
|
||||
this.dirty = false;
|
||||
};
|
||||
|
||||
FSS.Geometry.prototype = {
|
||||
update: function() {
|
||||
if (this.dirty) {
|
||||
var t,triangle;
|
||||
for (t = this.triangles.length - 1; t >= 0; t--) {
|
||||
triangle = this.triangles[t];
|
||||
triangle.computeCentroid();
|
||||
triangle.computeNormal();
|
||||
}
|
||||
this.dirty = false;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
/**
|
||||
* @class Light
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Light = function(ambient, diffuse) {
|
||||
FSS.Object.call(this);
|
||||
this.ambient = new FSS.Color(ambient || '#FFFFFF');
|
||||
this.diffuse = new FSS.Color(diffuse || '#FFFFFF');
|
||||
this.ray = FSS.Vector3.create();
|
||||
};
|
||||
|
||||
FSS.Light.prototype = Object.create(FSS.Object.prototype);
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/**
|
||||
* @class Material
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Material = function(ambient, diffuse) {
|
||||
this.ambient = new FSS.Color(ambient || '#444444');
|
||||
this.diffuse = new FSS.Color(diffuse || '#FFFFFF');
|
||||
this.slave = new FSS.Color();
|
||||
};
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/**
|
||||
* @object Math Augmentation
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
Math.PIM2 = Math.PI*2;
|
||||
Math.PID2 = Math.PI/2;
|
||||
Math.randomInRange = function(min, max) {
|
||||
return min + (max - min) * Math.random();
|
||||
};
|
||||
Math.clamp = function(value, min, max) {
|
||||
value = Math.max(value, min);
|
||||
value = Math.min(value, max);
|
||||
return value;
|
||||
};
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
/**
|
||||
* @class Mesh
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Mesh = function(geometry, material) {
|
||||
FSS.Object.call(this);
|
||||
this.geometry = geometry || new FSS.Geometry();
|
||||
this.material = material || new FSS.Material();
|
||||
this.side = FSS.FRONT;
|
||||
this.visible = true;
|
||||
};
|
||||
|
||||
FSS.Mesh.prototype = Object.create(FSS.Object.prototype);
|
||||
|
||||
FSS.Mesh.prototype.update = function(lights, calculate) {
|
||||
var t,triangle, l,light, illuminance;
|
||||
|
||||
// Update Geometry
|
||||
this.geometry.update();
|
||||
|
||||
// Calculate the triangle colors
|
||||
if (calculate) {
|
||||
|
||||
// Iterate through Triangles
|
||||
for (t = this.geometry.triangles.length - 1; t >= 0; t--) {
|
||||
triangle = this.geometry.triangles[t];
|
||||
|
||||
// Reset Triangle Color
|
||||
FSS.Vector4.set(triangle.color.rgba);
|
||||
|
||||
// Iterate through Lights
|
||||
for (l = lights.length - 1; l >= 0; l--) {
|
||||
light = lights[l];
|
||||
|
||||
// Calculate Illuminance
|
||||
FSS.Vector3.subtractVectors(light.ray, light.position, triangle.centroid);
|
||||
FSS.Vector3.normalise(light.ray);
|
||||
illuminance = FSS.Vector3.dot(triangle.normal, light.ray);
|
||||
if (this.side === FSS.FRONT) {
|
||||
illuminance = Math.max(illuminance, 0);
|
||||
} else if (this.side === FSS.BACK) {
|
||||
illuminance = Math.abs(Math.min(illuminance, 0));
|
||||
} else if (this.side === FSS.DOUBLE) {
|
||||
illuminance = Math.max(Math.abs(illuminance), 0);
|
||||
}
|
||||
|
||||
// Calculate Ambient Light
|
||||
FSS.Vector4.multiplyVectors(this.material.slave.rgba, this.material.ambient.rgba, light.ambient.rgba);
|
||||
FSS.Vector4.add(triangle.color.rgba, this.material.slave.rgba);
|
||||
|
||||
// Calculate Diffuse Light
|
||||
FSS.Vector4.multiplyVectors(this.material.slave.rgba, this.material.diffuse.rgba, light.diffuse.rgba);
|
||||
FSS.Vector4.multiplyScalar(this.material.slave.rgba, illuminance);
|
||||
FSS.Vector4.add(triangle.color.rgba, this.material.slave.rgba);
|
||||
}
|
||||
|
||||
// Clamp & Format Color
|
||||
FSS.Vector4.clamp(triangle.color.rgba, 0, 1);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/**
|
||||
* @class Object
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Object = function() {
|
||||
this.position = FSS.Vector3.create();
|
||||
};
|
||||
|
||||
FSS.Object.prototype = {
|
||||
setPosition: function(x, y, z) {
|
||||
FSS.Vector3.set(this.position, x, y, z);
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
/**
|
||||
* @class Plane
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Plane = function(width, height, segments, slices, s) {
|
||||
FSS.Geometry.call(this);
|
||||
this.width = width || 100;
|
||||
this.height = height || 100;
|
||||
this.segments = segments || 4;
|
||||
this.slices = slices || 4;
|
||||
this.segmentWidth = this.width / this.segments;
|
||||
this.sliceHeight = this.height / this.slices;
|
||||
|
||||
// Cache Variables
|
||||
var x, y, v0, v1, v2, v3,
|
||||
vertex, triangle, vertices = [],
|
||||
offsetX = this.width * -0.5,
|
||||
offsetY = this.height * 0.5;
|
||||
|
||||
// Add Vertices
|
||||
for (x = 0; x <= this.segments; x++) {
|
||||
vertices.push([]);
|
||||
for (y = 0; y <= this.slices; y++) {
|
||||
vertex = new FSS.Vertex(offsetX + x*this.segmentWidth, offsetY - y*this.sliceHeight);
|
||||
vertices[x].push(vertex);
|
||||
this.vertices.push(vertex);
|
||||
}
|
||||
}
|
||||
|
||||
// Add Triangles
|
||||
for (x = 0; x < this.segments; x++) {
|
||||
for (y = 0; y < this.slices; y++) {
|
||||
v0 = vertices[x+0][y+0];
|
||||
v1 = vertices[x+0][y+1];
|
||||
v2 = vertices[x+1][y+0];
|
||||
v3 = vertices[x+1][y+1];
|
||||
t0 = new FSS.Triangle(v0, v1, v2, s);
|
||||
t1 = new FSS.Triangle(v2, v1, v3, s);
|
||||
this.triangles.push(t0, t1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
FSS.Plane.prototype = Object.create(FSS.Geometry.prototype);
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
/**
|
||||
* @class Renderer
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Renderer = function() {
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.halfWidth = 0;
|
||||
this.halfHeight = 0;
|
||||
};
|
||||
|
||||
FSS.Renderer.prototype = {
|
||||
setSize: function(width, height) {
|
||||
if (this.width === width && this.height === height) return;
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.halfWidth = this.width * 0.5;
|
||||
this.halfHeight = this.height * 0.5;
|
||||
return this;
|
||||
},
|
||||
clear: function() {
|
||||
return this;
|
||||
},
|
||||
render: function(scene) {
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
/**
|
||||
* @class SVG Renderer
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.SVGRenderer = function(s) {
|
||||
FSS.Renderer.call(this);
|
||||
this.element = s.g();
|
||||
};
|
||||
|
||||
FSS.SVGRenderer.prototype = Object.create(FSS.Renderer.prototype);
|
||||
|
||||
FSS.SVGRenderer.prototype.setSize = function(width, height) {
|
||||
FSS.Renderer.prototype.setSize.call(this, width, height);
|
||||
return this;
|
||||
};
|
||||
|
||||
FSS.SVGRenderer.prototype.clear = function() {
|
||||
FSS.Renderer.prototype.clear.call(this);
|
||||
for (var i = this.element.childNodes.length - 1; i >= 0; i--) {
|
||||
this.element.removeChild(this.element.childNodes[i]);
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
FSS.SVGRenderer.prototype.render = function(scene) {
|
||||
FSS.Renderer.prototype.render.call(this, scene);
|
||||
var m,mesh, t,triangle, points, style;
|
||||
|
||||
// Update Meshes
|
||||
for (m = scene.meshes.length - 1; m >= 0; m--) {
|
||||
mesh = scene.meshes[m];
|
||||
if (mesh.visible) {
|
||||
mesh.update(scene.lights, true);
|
||||
|
||||
// Render Triangles
|
||||
for (t = mesh.geometry.triangles.length - 1; t >= 0; t--) {
|
||||
triangle = mesh.geometry.triangles[t];
|
||||
|
||||
if (triangle.polygon.parent() !== this.element) {
|
||||
this.element.append(triangle.polygon);
|
||||
}
|
||||
|
||||
points = this.formatPoint(triangle.a)+' ';
|
||||
points += this.formatPoint(triangle.b)+' ';
|
||||
points += this.formatPoint(triangle.c);
|
||||
style = this.formatStyle(triangle.color.format());
|
||||
|
||||
triangle.polygon.attr({
|
||||
points: points,
|
||||
style: style
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
FSS.SVGRenderer.prototype.formatPoint = function(vertex) {
|
||||
return (this.halfWidth+vertex.position[0])+','+(this.halfHeight-vertex.position[1]);
|
||||
};
|
||||
|
||||
FSS.SVGRenderer.prototype.formatStyle = function(color) {
|
||||
var style = 'fill:'+color+';';
|
||||
style += 'stroke:'+color+';';
|
||||
return style;
|
||||
};
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
/**
|
||||
* @class Scene
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Scene = function() {
|
||||
this.meshes = [];
|
||||
this.lights = [];
|
||||
};
|
||||
|
||||
FSS.Scene.prototype = {
|
||||
add: function(object) {
|
||||
if (object instanceof FSS.Mesh && !~this.meshes.indexOf(object)) {
|
||||
this.meshes.push(object);
|
||||
} else if (object instanceof FSS.Light && !~this.lights.indexOf(object)) {
|
||||
this.lights.push(object);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
remove: function(object) {
|
||||
if (object instanceof FSS.Mesh && ~this.meshes.indexOf(object)) {
|
||||
this.meshes.splice(this.meshes.indexOf(object), 1);
|
||||
} else if (object instanceof FSS.Light && ~this.lights.indexOf(object)) {
|
||||
this.lights.splice(this.lights.indexOf(object), 1);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
/**
|
||||
* @class Triangle
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Triangle = function(a, b, c, s) {
|
||||
this.a = a || new FSS.Vertex();
|
||||
this.b = b || new FSS.Vertex();
|
||||
this.c = c || new FSS.Vertex();
|
||||
this.vertices = [this.a, this.b, this.c];
|
||||
this.u = FSS.Vector3.create();
|
||||
this.v = FSS.Vector3.create();
|
||||
this.centroid = FSS.Vector3.create();
|
||||
this.normal = FSS.Vector3.create();
|
||||
this.color = new FSS.Color();
|
||||
this.polygon = s.polygon();
|
||||
this.polygon.attr({
|
||||
'stroke-linejoin': 'round',
|
||||
'stroke-miterlimit': 1,
|
||||
'stroke-width': 1
|
||||
});
|
||||
|
||||
this.computeCentroid();
|
||||
this.computeNormal();
|
||||
};
|
||||
|
||||
FSS.Triangle.prototype = {
|
||||
computeCentroid: function() {
|
||||
this.centroid[0] = this.a.position[0] + this.b.position[0] + this.c.position[0];
|
||||
this.centroid[1] = this.a.position[1] + this.b.position[1] + this.c.position[1];
|
||||
this.centroid[2] = this.a.position[2] + this.b.position[2] + this.c.position[2];
|
||||
FSS.Vector3.divideScalar(this.centroid, 3);
|
||||
return this;
|
||||
},
|
||||
computeNormal: function() {
|
||||
FSS.Vector3.subtractVectors(this.u, this.b.position, this.a.position);
|
||||
FSS.Vector3.subtractVectors(this.v, this.c.position, this.a.position);
|
||||
FSS.Vector3.crossVectors(this.normal, this.u, this.v);
|
||||
FSS.Vector3.normalise(this.normal);
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
/**
|
||||
* @object Vector3
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Vector3 = {
|
||||
create: function(x, y, z) {
|
||||
var vector = new FSS.Array(3);
|
||||
this.set(vector, x, y, z);
|
||||
return vector;
|
||||
},
|
||||
clone: function(a) {
|
||||
var vector = this.create();
|
||||
this.copy(vector, a);
|
||||
return vector;
|
||||
},
|
||||
set: function(target, x, y, z) {
|
||||
target[0] = x || 0;
|
||||
target[1] = y || 0;
|
||||
target[2] = z || 0;
|
||||
return this;
|
||||
},
|
||||
setX: function(target, x) {
|
||||
target[0] = x || 0;
|
||||
return this;
|
||||
},
|
||||
setY: function(target, y) {
|
||||
target[1] = y || 0;
|
||||
return this;
|
||||
},
|
||||
setZ: function(target, z) {
|
||||
target[2] = z || 0;
|
||||
return this;
|
||||
},
|
||||
copy: function(target, a) {
|
||||
target[0] = a[0];
|
||||
target[1] = a[1];
|
||||
target[2] = a[2];
|
||||
return this;
|
||||
},
|
||||
add: function(target, a) {
|
||||
target[0] += a[0];
|
||||
target[1] += a[1];
|
||||
target[2] += a[2];
|
||||
return this;
|
||||
},
|
||||
addVectors: function(target, a, b) {
|
||||
target[0] = a[0] + b[0];
|
||||
target[1] = a[1] + b[1];
|
||||
target[2] = a[2] + b[2];
|
||||
return this;
|
||||
},
|
||||
addScalar: function(target, s) {
|
||||
target[0] += s;
|
||||
target[1] += s;
|
||||
target[2] += s;
|
||||
return this;
|
||||
},
|
||||
subtract: function(target, a) {
|
||||
target[0] -= a[0];
|
||||
target[1] -= a[1];
|
||||
target[2] -= a[2];
|
||||
return this;
|
||||
},
|
||||
subtractVectors: function(target, a, b) {
|
||||
target[0] = a[0] - b[0];
|
||||
target[1] = a[1] - b[1];
|
||||
target[2] = a[2] - b[2];
|
||||
return this;
|
||||
},
|
||||
subtractScalar: function(target, s) {
|
||||
target[0] -= s;
|
||||
target[1] -= s;
|
||||
target[2] -= s;
|
||||
return this;
|
||||
},
|
||||
multiply: function(target, a) {
|
||||
target[0] *= a[0];
|
||||
target[1] *= a[1];
|
||||
target[2] *= a[2];
|
||||
return this;
|
||||
},
|
||||
multiplyVectors: function(target, a, b) {
|
||||
target[0] = a[0] * b[0];
|
||||
target[1] = a[1] * b[1];
|
||||
target[2] = a[2] * b[2];
|
||||
return this;
|
||||
},
|
||||
multiplyScalar: function(target, s) {
|
||||
target[0] *= s;
|
||||
target[1] *= s;
|
||||
target[2] *= s;
|
||||
return this;
|
||||
},
|
||||
divide: function(target, a) {
|
||||
target[0] /= a[0];
|
||||
target[1] /= a[1];
|
||||
target[2] /= a[2];
|
||||
return this;
|
||||
},
|
||||
divideVectors: function(target, a, b) {
|
||||
target[0] = a[0] / b[0];
|
||||
target[1] = a[1] / b[1];
|
||||
target[2] = a[2] / b[2];
|
||||
return this;
|
||||
},
|
||||
divideScalar: function(target, s) {
|
||||
if (s !== 0) {
|
||||
target[0] /= s;
|
||||
target[1] /= s;
|
||||
target[2] /= s;
|
||||
} else {
|
||||
target[0] = 0;
|
||||
target[1] = 0;
|
||||
target[2] = 0;
|
||||
}
|
||||
return this;
|
||||
},
|
||||
cross: function(target, a) {
|
||||
var x = target[0];
|
||||
var y = target[1];
|
||||
var z = target[2];
|
||||
target[0] = y*a[2] - z*a[1];
|
||||
target[1] = z*a[0] - x*a[2];
|
||||
target[2] = x*a[1] - y*a[0];
|
||||
return this;
|
||||
},
|
||||
crossVectors: function(target, a, b) {
|
||||
target[0] = a[1]*b[2] - a[2]*b[1];
|
||||
target[1] = a[2]*b[0] - a[0]*b[2];
|
||||
target[2] = a[0]*b[1] - a[1]*b[0];
|
||||
return this;
|
||||
},
|
||||
min: function(target, value) {
|
||||
if (target[0] < value) { target[0] = value; }
|
||||
if (target[1] < value) { target[1] = value; }
|
||||
if (target[2] < value) { target[2] = value; }
|
||||
return this;
|
||||
},
|
||||
max: function(target, value) {
|
||||
if (target[0] > value) { target[0] = value; }
|
||||
if (target[1] > value) { target[1] = value; }
|
||||
if (target[2] > value) { target[2] = value; }
|
||||
return this;
|
||||
},
|
||||
clamp: function(target, min, max) {
|
||||
this.min(target, min);
|
||||
this.max(target, max);
|
||||
return this;
|
||||
},
|
||||
limit: function(target, min, max) {
|
||||
var length = this.length(target);
|
||||
if (min !== null && length < min) {
|
||||
this.setLength(target, min);
|
||||
} else if (max !== null && length > max) {
|
||||
this.setLength(target, max);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
dot: function(a, b) {
|
||||
return a[0]*b[0] + a[1]*b[1] + a[2]*b[2];
|
||||
},
|
||||
normalise: function(target) {
|
||||
return this.divideScalar(target, this.length(target));
|
||||
},
|
||||
negate: function(target) {
|
||||
return this.multiplyScalar(target, -1);
|
||||
},
|
||||
distanceSquared: function(a, b) {
|
||||
var dx = a[0] - b[0];
|
||||
var dy = a[1] - b[1];
|
||||
var dz = a[2] - b[2];
|
||||
return dx*dx + dy*dy + dz*dz;
|
||||
},
|
||||
distance: function(a, b) {
|
||||
return Math.sqrt(this.distanceSquared(a, b));
|
||||
},
|
||||
lengthSquared: function(a) {
|
||||
return a[0]*a[0] + a[1]*a[1] + a[2]*a[2];
|
||||
},
|
||||
length: function(a) {
|
||||
return Math.sqrt(this.lengthSquared(a));
|
||||
},
|
||||
setLength: function(target, l) {
|
||||
var length = this.length(target);
|
||||
if (length !== 0 && l !== length) {
|
||||
this.multiplyScalar(target, l / length);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
/**
|
||||
* @object Vector4
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Vector4 = {
|
||||
create: function(x, y, z, w) {
|
||||
var vector = new FSS.Array(4);
|
||||
this.set(vector, x, y, z);
|
||||
return vector;
|
||||
},
|
||||
set: function(target, x, y, z, w) {
|
||||
target[0] = x || 0;
|
||||
target[1] = y || 0;
|
||||
target[2] = z || 0;
|
||||
target[3] = w || 0;
|
||||
return this;
|
||||
},
|
||||
setX: function(target, x) {
|
||||
target[0] = x || 0;
|
||||
return this;
|
||||
},
|
||||
setY: function(target, y) {
|
||||
target[1] = y || 0;
|
||||
return this;
|
||||
},
|
||||
setZ: function(target, z) {
|
||||
target[2] = z || 0;
|
||||
return this;
|
||||
},
|
||||
setW: function(target, w) {
|
||||
target[3] = w || 0;
|
||||
return this;
|
||||
},
|
||||
add: function(target, a) {
|
||||
target[0] += a[0];
|
||||
target[1] += a[1];
|
||||
target[2] += a[2];
|
||||
target[3] += a[3];
|
||||
return this;
|
||||
},
|
||||
multiplyVectors: function(target, a, b) {
|
||||
target[0] = a[0] * b[0];
|
||||
target[1] = a[1] * b[1];
|
||||
target[2] = a[2] * b[2];
|
||||
target[3] = a[3] * b[3];
|
||||
return this;
|
||||
},
|
||||
multiplyScalar: function(target, s) {
|
||||
target[0] *= s;
|
||||
target[1] *= s;
|
||||
target[2] *= s;
|
||||
target[3] *= s;
|
||||
return this;
|
||||
},
|
||||
min: function(target, value) {
|
||||
if (target[0] < value) { target[0] = value; }
|
||||
if (target[1] < value) { target[1] = value; }
|
||||
if (target[2] < value) { target[2] = value; }
|
||||
if (target[3] < value) { target[3] = value; }
|
||||
return this;
|
||||
},
|
||||
max: function(target, value) {
|
||||
if (target[0] > value) { target[0] = value; }
|
||||
if (target[1] > value) { target[1] = value; }
|
||||
if (target[2] > value) { target[2] = value; }
|
||||
if (target[3] > value) { target[3] = value; }
|
||||
return this;
|
||||
},
|
||||
clamp: function(target, min, max) {
|
||||
this.min(target, min);
|
||||
this.max(target, max);
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/**
|
||||
* @class Vertex
|
||||
* @author Matthew Wagerfield
|
||||
*/
|
||||
FSS.Vertex = function(x, y, z) {
|
||||
this.position = FSS.Vector3.create(x, y, z);
|
||||
};
|
||||
|
||||
FSS.Vertex.prototype = {
|
||||
setPosition: function(x, y, z) {
|
||||
FSS.Vector3.set(this.position, x, y, z);
|
||||
return this;
|
||||
}
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,36 @@
|
|||
/*
|
||||
RequireJS 2.1.10 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved.
|
||||
Available via the MIT or new BSD license.
|
||||
see: http://github.com/jrburke/requirejs for details
|
||||
*/
|
||||
var requirejs,require,define;
|
||||
(function(ca){function G(b){return"[object Function]"===N.call(b)}function H(b){return"[object Array]"===N.call(b)}function v(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function U(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function s(b,c){return ga.call(b,c)}function j(b,c){return s(b,c)&&b[c]}function B(b,c){for(var d in b)if(s(b,d)&&c(b[d],d))break}function V(b,c,d,g){c&&B(c,function(c,h){if(d||!s(b,h))g&&"object"===typeof c&&c&&!H(c)&&!G(c)&&!(c instanceof
|
||||
RegExp)?(b[h]||(b[h]={}),V(b[h],c,d,g)):b[h]=c});return b}function t(b,c){return function(){return c.apply(b,arguments)}}function da(b){throw b;}function ea(b){if(!b)return b;var c=ca;v(b.split("."),function(b){c=c[b]});return c}function C(b,c,d,g){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=g;d&&(c.originalError=d);return c}function ha(b){function c(a,e,b){var f,n,c,d,g,h,i,I=e&&e.split("/");n=I;var m=l.map,k=m&&m["*"];if(a&&"."===a.charAt(0))if(e){n=
|
||||
I.slice(0,I.length-1);a=a.split("/");e=a.length-1;l.nodeIdCompat&&R.test(a[e])&&(a[e]=a[e].replace(R,""));n=a=n.concat(a);d=n.length;for(e=0;e<d;e++)if(c=n[e],"."===c)n.splice(e,1),e-=1;else if(".."===c)if(1===e&&(".."===n[2]||".."===n[0]))break;else 0<e&&(n.splice(e-1,2),e-=2);a=a.join("/")}else 0===a.indexOf("./")&&(a=a.substring(2));if(b&&m&&(I||k)){n=a.split("/");e=n.length;a:for(;0<e;e-=1){d=n.slice(0,e).join("/");if(I)for(c=I.length;0<c;c-=1)if(b=j(m,I.slice(0,c).join("/")))if(b=j(b,d)){f=b;
|
||||
g=e;break a}!h&&(k&&j(k,d))&&(h=j(k,d),i=e)}!f&&h&&(f=h,g=i);f&&(n.splice(0,g,f),a=n.join("/"))}return(f=j(l.pkgs,a))?f:a}function d(a){z&&v(document.getElementsByTagName("script"),function(e){if(e.getAttribute("data-requiremodule")===a&&e.getAttribute("data-requirecontext")===i.contextName)return e.parentNode.removeChild(e),!0})}function g(a){var e=j(l.paths,a);if(e&&H(e)&&1<e.length)return e.shift(),i.require.undef(a),i.require([a]),!0}function u(a){var e,b=a?a.indexOf("!"):-1;-1<b&&(e=a.substring(0,
|
||||
b),a=a.substring(b+1,a.length));return[e,a]}function m(a,e,b,f){var n,d,g=null,h=e?e.name:null,l=a,m=!0,k="";a||(m=!1,a="_@r"+(N+=1));a=u(a);g=a[0];a=a[1];g&&(g=c(g,h,f),d=j(p,g));a&&(g?k=d&&d.normalize?d.normalize(a,function(a){return c(a,h,f)}):c(a,h,f):(k=c(a,h,f),a=u(k),g=a[0],k=a[1],b=!0,n=i.nameToUrl(k)));b=g&&!d&&!b?"_unnormalized"+(Q+=1):"";return{prefix:g,name:k,parentMap:e,unnormalized:!!b,url:n,originalName:l,isDefine:m,id:(g?g+"!"+k:k)+b}}function q(a){var e=a.id,b=j(k,e);b||(b=k[e]=new i.Module(a));
|
||||
return b}function r(a,e,b){var f=a.id,n=j(k,f);if(s(p,f)&&(!n||n.defineEmitComplete))"defined"===e&&b(p[f]);else if(n=q(a),n.error&&"error"===e)b(n.error);else n.on(e,b)}function w(a,e){var b=a.requireModules,f=!1;if(e)e(a);else if(v(b,function(e){if(e=j(k,e))e.error=a,e.events.error&&(f=!0,e.emit("error",a))}),!f)h.onError(a)}function x(){S.length&&(ia.apply(A,[A.length,0].concat(S)),S=[])}function y(a){delete k[a];delete W[a]}function F(a,e,b){var f=a.map.id;a.error?a.emit("error",a.error):(e[f]=
|
||||
!0,v(a.depMaps,function(f,c){var d=f.id,g=j(k,d);g&&(!a.depMatched[c]&&!b[d])&&(j(e,d)?(a.defineDep(c,p[d]),a.check()):F(g,e,b))}),b[f]=!0)}function D(){var a,e,b=(a=1E3*l.waitSeconds)&&i.startTime+a<(new Date).getTime(),f=[],c=[],h=!1,k=!0;if(!X){X=!0;B(W,function(a){var i=a.map,m=i.id;if(a.enabled&&(i.isDefine||c.push(a),!a.error))if(!a.inited&&b)g(m)?h=e=!0:(f.push(m),d(m));else if(!a.inited&&(a.fetched&&i.isDefine)&&(h=!0,!i.prefix))return k=!1});if(b&&f.length)return a=C("timeout","Load timeout for modules: "+
|
||||
f,null,f),a.contextName=i.contextName,w(a);k&&v(c,function(a){F(a,{},{})});if((!b||e)&&h)if((z||fa)&&!Y)Y=setTimeout(function(){Y=0;D()},50);X=!1}}function E(a){s(p,a[0])||q(m(a[0],null,!0)).init(a[1],a[2])}function L(a){var a=a.currentTarget||a.srcElement,e=i.onScriptLoad;a.detachEvent&&!Z?a.detachEvent("onreadystatechange",e):a.removeEventListener("load",e,!1);e=i.onScriptError;(!a.detachEvent||Z)&&a.removeEventListener("error",e,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function M(){var a;
|
||||
for(x();A.length;){a=A.shift();if(null===a[0])return w(C("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));E(a)}}var X,$,i,K,Y,l={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},k={},W={},aa={},A=[],p={},T={},ba={},N=1,Q=1;K={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?a.exports:a.exports=p[a.map.id]={}},module:function(a){return a.module?a.module:
|
||||
a.module={id:a.map.id,uri:a.map.url,config:function(){return j(l.config,a.map.id)||{}},exports:K.exports(a)}}};$=function(a){this.events=j(aa,a.id)||{};this.map=a;this.shim=j(l.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};$.prototype={init:function(a,e,b,f){f=f||{};if(!this.inited){this.factory=e;if(b)this.on("error",b);else this.events.error&&(b=t(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=b;this.inited=
|
||||
!0;this.ignore=f.ignore;f.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,e){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=e)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],t(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
|
||||
this.map.url;T[a]||(T[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,e,b=this.map.id;e=this.depExports;var f=this.exports,c=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(G(c)){if(this.events.error&&this.map.isDefine||h.onError!==da)try{f=i.execCb(b,c,e,f)}catch(d){a=d}else f=i.execCb(b,c,e,f);this.map.isDefine&&void 0===f&&((e=this.module)?f=e.exports:this.usingExports&&
|
||||
(f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=c;this.exports=f;if(this.map.isDefine&&!this.ignore&&(p[b]=f,h.onResourceLoad))h.onResourceLoad(i,this.map,this.depMaps);y(b);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=
|
||||
this.map,b=a.id,d=m(a.prefix);this.depMaps.push(d);r(d,"defined",t(this,function(f){var d,g;g=j(ba,this.map.id);var J=this.map.name,u=this.map.parentMap?this.map.parentMap.name:null,p=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(J=f.normalize(J,function(a){return c(a,u,!0)})||""),f=m(a.prefix+"!"+J,this.map.parentMap),r(f,"defined",t(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),g=j(k,f.id)){this.depMaps.push(f);
|
||||
if(this.events.error)g.on("error",t(this,function(a){this.emit("error",a)}));g.enable()}}else g?(this.map.url=i.nameToUrl(g),this.load()):(d=t(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),d.error=t(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(k,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),d.fromText=t(this,function(f,c){var g=a.name,J=m(g),k=O;c&&(f=c);k&&(O=!1);q(J);s(l.config,b)&&(l.config[g]=l.config[b]);try{h.exec(f)}catch(j){return w(C("fromtexteval",
|
||||
"fromText eval for "+b+" failed: "+j,j,[b]))}k&&(O=!0);this.depMaps.push(J);i.completeLoad(g);p([g],d)}),f.load(a.name,p,d,l))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){W[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,t(this,function(a,b){var c,f;if("string"===typeof a){a=m(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=j(K,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;r(a,"defined",t(this,function(a){this.defineDep(b,
|
||||
a);this.check()}));this.errback&&r(a,"error",t(this,this.errback))}c=a.id;f=k[c];!s(K,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,t(this,function(a){var b=j(k,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:l,contextName:b,registry:k,defined:p,urlFetched:T,defQueue:A,Module:$,makeModuleMap:m,
|
||||
nextTick:h.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=l.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(l[b]||(l[b]={}),V(l[b],a,!0,!0)):l[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(ba[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);b[c]=a}),l.shim=b);a.packages&&v(a.packages,function(a){var b,
|
||||
a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(l.paths[b]=a.location);l.pkgs[b]=a.name+"/"+(a.main||"main").replace(ja,"").replace(R,"")});B(k,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=m(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ca,arguments));return b||a.exports&&ea(a.exports)}},makeRequire:function(a,e){function g(f,c,d){var j,l;e.enableBuildCallback&&(c&&G(c))&&(c.__requireJsBuild=
|
||||
!0);if("string"===typeof f){if(G(c))return w(C("requireargs","Invalid require call"),d);if(a&&s(K,f))return K[f](k[a.id]);if(h.get)return h.get(i,f,a,g);j=m(f,a,!1,!0);j=j.id;return!s(p,j)?w(C("notloaded",'Module name "'+j+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):p[j]}M();i.nextTick(function(){M();l=q(m(null,a));l.skipMap=e.skipMap;l.init(f,c,d,{enabled:!0});D()});return g}e=e||{};V(g,{isBrowser:z,toUrl:function(b){var e,d=b.lastIndexOf("."),g=b.split("/")[0];if(-1!==
|
||||
d&&(!("."===g||".."===g)||1<d))e=b.substring(d,b.length),b=b.substring(0,d);return i.nameToUrl(c(b,a&&a.id,!0),e,!0)},defined:function(b){return s(p,m(b,a,!1,!0).id)},specified:function(b){b=m(b,a,!1,!0).id;return s(p,b)||s(k,b)}});a||(g.undef=function(b){x();var c=m(b,a,!0),e=j(k,b);d(b);delete p[b];delete T[c.url];delete aa[b];U(A,function(a,c){a[0]===b&&A.splice(c,1)});e&&(e.events.defined&&(aa[b]=e.events),y(b))});return g},enable:function(a){j(k,a.id)&&q(a).enable()},completeLoad:function(a){var b,
|
||||
c,f=j(l.shim,a)||{},d=f.exports;for(x();A.length;){c=A.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);E(c)}c=j(k,a);if(!b&&!s(p,a)&&c&&!c.inited){if(l.enforceDefine&&(!d||!ea(d)))return g(a)?void 0:w(C("nodefine","No define call for "+a,null,[a]));E([a,f.deps||[],f.exportsFn])}D()},nameToUrl:function(a,b,c){var f,d,g;(f=j(l.pkgs,a))&&(a=f);if(f=j(ba,a))return i.nameToUrl(f,b,c);if(h.jsExtRegExp.test(a))f=a+(b||"");else{f=l.paths;a=a.split("/");for(d=a.length;0<d;d-=1)if(g=a.slice(0,
|
||||
d).join("/"),g=j(f,g)){H(g)&&(g=g[0]);a.splice(0,d,g);break}f=a.join("/");f+=b||(/^data\:|\?/.test(f)||c?"":".js");f=("/"===f.charAt(0)||f.match(/^[\w\+\.\-]+:/)?"":l.baseUrl)+f}return l.urlArgs?f+((-1===f.indexOf("?")?"?":"&")+l.urlArgs):f},load:function(a,b){h.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ka.test((a.currentTarget||a.srcElement).readyState))P=null,a=L(a),i.completeLoad(a.id)},onScriptError:function(a){var b=L(a);if(!g(b.id))return w(C("scripterror",
|
||||
"Script error for: "+b.id,a,[b.id]))}};i.require=i.makeRequire();return i}var h,x,y,D,L,E,P,M,q,Q,la=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,ma=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,R=/\.js$/,ja=/^\.\//;x=Object.prototype;var N=x.toString,ga=x.hasOwnProperty,ia=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),fa=!z&&"undefined"!==typeof importScripts,ka=z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,
|
||||
Z="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),F={},r={},S=[],O=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(G(requirejs))return;r=requirejs;requirejs=void 0}"undefined"!==typeof require&&!G(require)&&(r=require,require=void 0);h=requirejs=function(b,c,d,g){var u,m="_";!H(b)&&"string"!==typeof b&&(u=b,H(c)?(b=c,c=d,d=g):b=[]);u&&u.context&&(m=u.context);(g=j(F,m))||(g=F[m]=h.s.newContext(m));u&&g.configure(u);return g.require(b,c,d)};h.config=function(b){return h(b)};
|
||||
h.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=h);h.version="2.1.10";h.jsExtRegExp=/^\/|:|\?|\.js$/;h.isBrowser=z;x=h.s={contexts:F,newContext:ha};h({});v(["toUrl","undef","defined","specified"],function(b){h[b]=function(){var c=F._;return c.require[b].apply(c,arguments)}});if(z&&(y=x.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))y=x.head=D.parentNode;h.onError=da;h.createNode=function(b){var c=
|
||||
b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};h.load=function(b,c,d){var g=b&&b.config||{};if(z)return g=h.createNode(g,c,d),g.setAttribute("data-requirecontext",b.contextName),g.setAttribute("data-requiremodule",c),g.attachEvent&&!(g.attachEvent.toString&&0>g.attachEvent.toString().indexOf("[native code"))&&!Z?(O=!0,g.attachEvent("onreadystatechange",b.onScriptLoad)):
|
||||
(g.addEventListener("load",b.onScriptLoad,!1),g.addEventListener("error",b.onScriptError,!1)),g.src=d,M=g,D?y.insertBefore(g,D):y.appendChild(g),M=null,g;if(fa)try{importScripts(d),b.completeLoad(c)}catch(j){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,j,[c]))}};z&&!r.skipDataMain&&U(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(L=b.getAttribute("data-main"))return q=L,r.baseUrl||(E=q.split("/"),q=E.pop(),Q=E.length?E.join("/")+"/":"./",r.baseUrl=
|
||||
Q),q=q.replace(R,""),h.jsExtRegExp.test(q)&&(q=L),r.deps=r.deps?r.deps.concat(q):[q],!0});define=function(b,c,d){var g,h;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(la,"").replace(ma,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(O){if(!(g=M))P&&"interactive"===P.readyState||U(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return P=b}),g=P;g&&(b||
|
||||
(b=g.getAttribute("data-requiremodule")),h=F[g.getAttribute("data-requirecontext")])}(h?h.defQueue:S).push([b,c,d])};define.amd={jQuery:!0};h.exec=function(b){return eval(b)};h(r)}})(this);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,82 @@
|
|||
@import 'compass/css3';
|
||||
|
||||
.base-font{
|
||||
font-family: 'Open Sans', serif;
|
||||
}
|
||||
|
||||
.snap-font{
|
||||
font-family: 'Source Sans Pro', serif;
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
text{
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
svg{
|
||||
@include transform-origin(top, left);
|
||||
@include transform(scale(1));
|
||||
}
|
||||
|
||||
#learn-btn{
|
||||
cursor: pointer;
|
||||
|
||||
path, text{
|
||||
@include transform(translateY(0));
|
||||
}
|
||||
|
||||
&:hover{
|
||||
path{
|
||||
&:first-child{
|
||||
fill: #076656;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
path{
|
||||
&:nth-child(2){
|
||||
fill: #7cd1c2;
|
||||
}
|
||||
}
|
||||
|
||||
text{
|
||||
fill: #0a9a87;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
&:active{
|
||||
path{
|
||||
&:nth-child(2){
|
||||
@include transform(translateY(2px));
|
||||
}
|
||||
}
|
||||
|
||||
text{
|
||||
@include transform(translateY(2px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#replay-btn{
|
||||
&:hover{
|
||||
opacity: 0.5;
|
||||
};
|
||||
}
|
||||
|
||||
/*
|
||||
@media (max-width: 400px) {
|
||||
svg{
|
||||
@include transform(scale(0.375));
|
||||
}
|
||||
}
|
||||
*/
|
||||
Loading…
Reference in New Issue