-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
89 lines (88 loc) · 3.96 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf8">
<meta name="author" content="Giovanni Blu Mitolo">
<meta name="description" content="Online abstract drawing tool">
<meta name="keywords" content="Kipplr, Kipple, abstract, art, artwork, procedural, canvas, draw, drawing">
<link href="css/interface.css" rel="Stylesheet" />
<link href="css/index.css" rel="Stylesheet" />
<meta property="og:site_name" content="Kipplr" />
<meta property="og:title" content="Kipplr = Online abstract drawing tool" />
<meta property="og:image" content="" />
<meta property="og:description" content="Draw abstract pictures with your browser in seconds" />
<meta property="og:url" content="http://www.kipplr.xyz" />
<meta property="og:type" content="kipplr:editor" />
<meta name="medium" content="image" />
</head>
<body class="page">
<div id="page-shadow" class="hidden"></div>
<div id="dialog-box" class="hidden">
<div class="constrain">
<h1>Kipplr, a new abstract drawing tool.</h1>
<p>
Ciao! I am Giovanni Blu Mitolo from Milan, I made this single page application some years ago as a
proof of concept and to test myself mastering javascript.
<br>
<br>
Kipplr's name is inspired by Philip K. Dick's novel "Do Androids Dream of Electric Sheep?" and by the concept of "Kipple". If you need, feel free to contact me at <a href="mailto:[email protected]">[email protected]</a>
<br>
</p>
<img src="img/github.png"><a href="https://github.com/gioblu/Kipplr" class="github" target="_blank">Fork Kipplr on github</a>
</div>
</div>
<div class="centered">
<div class="logo">
<div class="inner">
<canvas id="logo-canvas" width="400" height="100" unselectable="on" onselectstart="return false" onmousedown="return false" class="background"></canvas>
<img src="img/logo_222.png" class="mask">
</div>
</div>
<section class="hero">
<div class="constrain">
<h1 class="call-to-action">Kipplr is a tool made to help you to create and save unique images in seconds. Try yourself drawing as you never did before. </h1>
<div class="buttonBox">
<a href="http://editor.kipplr.xyz" class="button info-dialog">Start Kipplr</a>
<a href="" class="button">info</a>
</div>
</div>
</section>
</div>
<small class="info">Written by <a href="http://www.github.com/gioblu" target="_blank">GioBlu</a> 2013-2014</small>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/underscore.min.js"></script>
<script type="text/javascript" src="js/Texts.js"></script>
<script type="text/javascript" src="js/Geometry.js"></script>
<script type="text/javascript" src="js/User.js"></script>
<script type="text/javascript" src="js/Interface.js"></script>
<script type="text/javascript" src="js/PostProcessor.js"></script>
<script type="text/javascript" src="js/Renderer.js"></script>
<script>
// GLOBAL VARIABLES ----------------------------------------------------------------
var UIindex = 0;
var canvas = document.getElementById('logo-canvas');
var context = this.canvas.getContext('2d');
var user = new User();
var options = {
interface: {
DOMinterface: false,
state: {
density: _.random(80, 100),
drawing: true,
drawMode: 'quad',
scale: 10,
}
},
renderer: {
padding: canvas.width / 5,
filters: false,
random: true
}
};
var interface = new Interface(canvas, options['interface']);
var renderer = new Renderer(canvas, interface, options['renderer']);
interface.animate();
</script>
</body>
</html>