ddb24d7fe0
- updating Gruntfile and package.json to include grunt-concat-sourcemap and grunt-contrib-watch for easier development. - use "grunt build-debug" to build a source-mapped file to pixi.dev.js -- or use "grunt watch" during development of examples to auto build-debug any JS changes to PIXI source or the example files.
352 lines
8.5 KiB
HTML
Executable file
352 lines
8.5 KiB
HTML
Executable file
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Pixi Morph by Photon Storm</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0" />
|
|
<link rel="stylesheet" href="storm.css">
|
|
<script src="jquery-1.8.3.min.js"></script>
|
|
<script src="../../bin/pixi.dev.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<a href="http://www.photonstorm.com"><img src="assets/photonstorm.png" width="121" height="18" id="photonstorm" title="Photon Storm" /></a>
|
|
<a href="http://www.html5gamedevs.com/topic/59-pixijs-has-landed/"><img src="assets/pixi.png" width="56" height="22" id="pixi" title="pixi.js" /></a>
|
|
|
|
<script>
|
|
|
|
$(window).resize(resize)
|
|
window.onorientationchange = resize;
|
|
|
|
document.addEventListener('DOMContentLoaded', start, false);
|
|
|
|
var w = 1024;
|
|
var h = 768;
|
|
|
|
var n = 2000;
|
|
var d = 1;
|
|
var current = 1;
|
|
var objs = 17;
|
|
var vx = 0;
|
|
var vy = 0;
|
|
var vz = 0;
|
|
var points1 = [];
|
|
var points2 = [];
|
|
var points3 = [];
|
|
var tpoint1 = [];
|
|
var tpoint2 = [];
|
|
var tpoint3 = [];
|
|
var balls = [];
|
|
|
|
function start() {
|
|
|
|
var ballTexture = new PIXI.Texture.fromImage("assets/pixel.png");
|
|
|
|
renderer = PIXI.autoDetectRenderer(w, h);
|
|
|
|
stage = new PIXI.Stage;
|
|
|
|
document.body.appendChild(renderer.view);
|
|
|
|
makeObject(0);
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
tpoint1[i] = points1[i];
|
|
tpoint2[i] = points2[i];
|
|
tpoint3[i] = points3[i];
|
|
|
|
var tempBall = new PIXI.Sprite(ballTexture);
|
|
tempBall.anchor.x = 0.5;
|
|
tempBall.anchor.y = 0.5;
|
|
tempBall.alpha = 0.5;
|
|
balls[i] = tempBall;
|
|
|
|
stage.addChild(tempBall);
|
|
}
|
|
|
|
resize();
|
|
|
|
setTimeout(nextObject, 5000);
|
|
|
|
requestAnimFrame(update);
|
|
|
|
}
|
|
|
|
function nextObject () {
|
|
|
|
current++;
|
|
|
|
if (current > objs)
|
|
{
|
|
current = 0;
|
|
}
|
|
|
|
makeObject(current);
|
|
|
|
setTimeout(nextObject, 8000);
|
|
|
|
}
|
|
|
|
function makeObject ( t ) {
|
|
|
|
var xd;
|
|
|
|
switch (t)
|
|
{
|
|
case 0:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
points1[i] = -50 + Math.round(Math.random() * 100);
|
|
points2[i] = 0;
|
|
points3[i] = 0;
|
|
}
|
|
break;
|
|
|
|
case 1:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(xd) * 10) * (Math.cos(t * 360 / n) * 10);
|
|
points2[i] = (Math.cos(xd) * 10) * (Math.sin(t * 360 / n) * 10);
|
|
points3[i] = Math.sin(xd) * 100;
|
|
}
|
|
break;
|
|
|
|
case 2:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(xd) * 10) * (Math.cos(t * 360 / n) * 10);
|
|
points2[i] = (Math.cos(xd) * 10) * (Math.sin(t * 360 / n) * 10);
|
|
points3[i] = Math.sin(i * 360 / n) * 100;
|
|
}
|
|
break;
|
|
|
|
case 3:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10);
|
|
points2[i] = (Math.cos(xd) * 10) * (Math.sin(xd) * 10);
|
|
points3[i] = Math.sin(xd) * 100;
|
|
}
|
|
break;
|
|
|
|
case 4:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10);
|
|
points2[i] = (Math.cos(xd) * 10) * (Math.sin(xd) * 10);
|
|
points3[i] = Math.sin(i * 360 / n) * 100;
|
|
}
|
|
break;
|
|
|
|
case 5:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10);
|
|
points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(xd) * 10);
|
|
points3[i] = Math.sin(i * 360 / n) * 100;
|
|
}
|
|
break;
|
|
|
|
case 6:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(i * 360 / n) * 10) * (Math.cos(i * 360 / n) * 10);
|
|
points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(xd) * 10);
|
|
points3[i] = Math.sin(i * 360 / n) * 100;
|
|
}
|
|
break;
|
|
|
|
case 7:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(i * 360 / n) * 10) * (Math.cos(i * 360 / n) * 10);
|
|
points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(i * 360 / n) * 10);
|
|
points3[i] = Math.sin(i * 360 / n) * 100;
|
|
}
|
|
break;
|
|
|
|
case 8:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10);
|
|
points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(i * 360 / n) * 10);
|
|
points3[i] = Math.sin(xd) * 100;
|
|
}
|
|
break;
|
|
|
|
case 9:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10);
|
|
points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(xd) * 10);
|
|
points3[i] = Math.sin(xd) * 100;
|
|
}
|
|
break;
|
|
|
|
case 10:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(i * 360 / n) * 10) * (Math.cos(i * 360 / n) * 10);
|
|
points2[i] = (Math.cos(xd) * 10) * (Math.sin(xd) * 10);
|
|
points3[i] = Math.sin(i * 360 / n) * 100;
|
|
}
|
|
break;
|
|
|
|
case 11:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10);
|
|
points2[i] = (Math.sin(xd) * 10) * (Math.sin(i * 360 / n) * 10);
|
|
points3[i] = Math.sin(xd) * 100;
|
|
}
|
|
break;
|
|
|
|
case 12:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10);
|
|
points2[i] = (Math.sin(xd) * 10) * (Math.sin(xd) * 10);
|
|
points3[i] = Math.sin(i * 360 / n) * 100;
|
|
}
|
|
break;
|
|
|
|
case 13:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10);
|
|
points2[i] = (Math.sin(i * 360 / n) * 10) * (Math.sin(xd) * 10);
|
|
points3[i] = Math.sin(i * 360 / n) * 100;
|
|
}
|
|
break;
|
|
|
|
case 14:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.sin(xd) * 10) * (Math.cos(xd) * 10);
|
|
points2[i] = (Math.sin(xd) * 10) * (Math.sin(i * 360 / n) * 10);
|
|
points3[i] = Math.sin(i * 360 / n) * 100;
|
|
}
|
|
break;
|
|
|
|
case 15:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(i * 360 / n) * 10) * (Math.cos(i * 360 / n) * 10);
|
|
points2[i] = (Math.sin(i * 360 / n) * 10) * (Math.sin(xd) * 10);
|
|
points3[i] = Math.sin(i * 360 / n) * 100;
|
|
}
|
|
break;
|
|
|
|
case 16:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10);
|
|
points2[i] = (Math.sin(i * 360 / n) * 10) * (Math.sin(xd) * 10);
|
|
points3[i] = Math.sin(xd) * 100;
|
|
}
|
|
break;
|
|
|
|
case 17:
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
xd = -90 + Math.round(Math.random() * 180);
|
|
points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10);
|
|
points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(i * 360 / n) * 10);
|
|
points3[i] = Math.sin(i * 360 / n) * 100;
|
|
}
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
function resize()
|
|
{
|
|
w = $(window).width() - 16;
|
|
h = $(window).height() - 16;
|
|
|
|
renderer.resize(w, h);
|
|
}
|
|
|
|
function update()
|
|
{
|
|
var x3d, y3d, z3d, tx, ty, tz, ox;
|
|
|
|
if (d < 250)
|
|
{
|
|
d++;
|
|
}
|
|
|
|
vx += 0.0075;
|
|
vy += 0.0075;
|
|
vz += 0.0075;
|
|
|
|
for (var i = 0; i < n; i++)
|
|
{
|
|
if (points1[i] > tpoint1[i]) { tpoint1[i] = tpoint1[i] + 1; }
|
|
if (points1[i] < tpoint1[i]) { tpoint1[i] = tpoint1[i] - 1; }
|
|
if (points2[i] > tpoint2[i]) { tpoint2[i] = tpoint2[i] + 1; }
|
|
if (points2[i] < tpoint2[i]) { tpoint2[i] = tpoint2[i] - 1; }
|
|
if (points3[i] > tpoint3[i]) { tpoint3[i] = tpoint3[i] + 1; }
|
|
if (points3[i] < tpoint3[i]) { tpoint3[i] = tpoint3[i] - 1; }
|
|
|
|
x3d = tpoint1[i];
|
|
y3d = tpoint2[i];
|
|
z3d = tpoint3[i];
|
|
|
|
ty = (y3d * Math.cos(vx)) - (z3d * Math.sin(vx));
|
|
tz = (y3d * Math.sin(vx)) + (z3d * Math.cos(vx));
|
|
tx = (x3d * Math.cos(vy)) - (tz * Math.sin(vy));
|
|
tz = (x3d * Math.sin(vy)) + (tz * Math.cos(vy));
|
|
ox = tx;
|
|
tx = (tx * Math.cos(vz)) - (ty * Math.sin(vz));
|
|
ty = (ox * Math.sin(vz)) + (ty * Math.cos(vz));
|
|
|
|
balls[i].position.x = (512 * tx) / (d - tz) + w / 2;
|
|
balls[i].position.y = (h/2) - (512 * ty) / (d - tz);
|
|
|
|
}
|
|
|
|
renderer.render(stage);
|
|
|
|
requestAnimFrame(update);
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|