forked from Uni-Sol/js-demos
-
Notifications
You must be signed in to change notification settings - Fork 0
/
intro.005.html
123 lines (109 loc) · 4.92 KB
/
intro.005.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- charset must remain utf-8 to be handled properly by Processing -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no,width=1024px" />
<title>The Stylogical Map [INTRO]</title>
<link rel="stylesheet" type="text/css" href='styles/mapscripts.css'></link>
<script type='text/javascript' src='scripts/jquery.1.4.x.min.js'></script>
<script type='text/javascript' src='scripts/debugger.js'></script>
<script type='text/javascript'>
/* Onload: */
var canvasApp=[], drawLoop=[], drawVideo=[], recordGIF={};
var aplayed=0, vplayed=0, adrawing=false, vdrawing=false;
$(function () {
if (typeof window.addEventListener === 'function') {
window.addEventListener("load", function init_page() {
//alert('Start canvasApp');
if (typeof canvasApp[0] !== 'undefined') {
for(var i=0,z=canvasApp.length; i<z/*>*/;i++) {
setTimeout(canvasApp[i],66);
}
} else {
setTimeout(canvasApp,66);
}
}, false);
}
});
/* Processing Initializer:
* Swiped from https://github.com/annasob/processing-js
* This code searches for all the <script type="application/processing" target="canvasid">
* in your page and loads each script in the target canvas with the proper id.
* It is useful to smooth the process of adding Processing code in your page
* and starting the Processing.js engine.
*/
var processing = {};
processing = 'undefined';
function init_processing() {
if (typeof window.addEventListener === 'function') {
window.addEventListener("load", function() {
var scripts = document.getElementsByTagName("script");
var canvasArray = Array.prototype.slice.call(document.getElementsByTagName("canvas"));
var canvas;
for (var i = 0, j = 0; i < scripts.length; i++) {
if (scripts[i].type == "application/processing") {
var src = scripts[i].getAttribute("target");
if (src) {
//alert("Processing target = "+ src);
canvas = document.getElementById(src);
if (canvas) {
processing = new Processing(canvas, scripts[i].text);
//alert("Processing started");
for (var k = 0; k< canvasArray.length; k++)
{
if (canvasArray[k] === canvas) {
// remove the canvas from the array so we dont override it in the else
canvasArray.splice(k,1);
}
}
}
} else {
if (canvasArray.length >= j) {
processing = new Processing(canvasArray[j], scripts[i].text);
//alert("Processing started");
}
j++;
}
}
}
}, false);
}
}
</script>
</head>
<body>
<div id="header-canvas">
<canvas id='cv' width='640' height='360'>
<div id='main-header'>
<h1>The Stylogical Map</h1>
<h4>A presentation of various works-in-progress,
<br/>exploring the omni-media vortex of
<br/>space, time, love, and perception.</h4>
</div>
</canvas>
<canvas id='can23' width='480' height='270' style="image-rendering:optimizespeed ! important;"></canvas>
</div>
<div id="play_controls" style="width:100%">
<a href="javascript:recordGIF ()">Record GIF</a>
<p class="menulinkleft"><a href="intro.006.html"><<</a></p>
<p class="menulinkright"><a href="intro.pjs.html">>></a></p>
</div>
<p id="vstatus"></p>
<p id="license" style="color:#fff">
<img src="http://i.creativecommons.org/l/by-sa/3.0/nz/88x31.png" alt="Creative Commons Licence"><br />
<em>These demos by <a href="mailto:revlin@uni-sol.org">Revlin John </a> are licensed under the <a href="http://creativecommons.org/licenses/by-sa/3.0/nz/deed.en_GB">Creative Commons Attribution-ShareAlike 3.0 License, 2009-2012 </a></em>
</p>
<div id="stream">
<!--a href="http://www.w3.org/2010/05/video/mediaevents.html" target="_blank">Media Help</a--><br />
<!--video id="vid1" class="standard" style="/*visibility: hidden;*/" preload="auto" muted="true"><source src="video/revlin_john.mp4" /><source src="video/revlin_john.ogv" /></video-->
<audio id="aud1" class="standard" style="/*visibility: hidden;*/" preload="auto" autoplay=""><source src="audio/attention.mp3" /><source src="audio/attention.ogg" /></audio>
</div>
<script type='text/javascript' src="scripts/canvasIntro.005.js"></script>
<script type="text/javascript" src="jsgif/LZWEncoder.js"></script>
<script type="text/javascript" src="jsgif/NeuQuant.js"></script>
<script type="text/javascript" src="jsgif/GIFEncoder.js"></script>
<script type="text/javascript" src="jsgif/b64.js"></script>
<script type='text/javascript' src='scripts/mapscripts.js'></script>
</body>
</html>