-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (125 loc) · 7.28 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
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Python Portraits is a web-based abstract image generator. It analyzes the lines of a python file and converts the program structure into an abstract image.">
<meta name="keywords" content="python, portraits, abstract, image, generator, abstract">
<link rel="apple-touch-icon" sizes="57x57" href="./images/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./images/favicon//apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./images/favicon//apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./images/favicon//apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./images/favicon//apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./images/favicon//apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./images/favicon//apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./images/favicon//apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon//apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./images/favicon//android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon//favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./images/favicon//favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon//favicon-16x16.png">
<link rel="manifest" href="./images/favicon//manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./images/favicon//ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<title>Python Portraits</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,600italic,700,700italic,400italic|Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='./node_modules/font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="./stylesheets/style.css" />
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="./node_modules/bootstrap/dist/js/bootstrap.min.js" /></script>
<script type="text/javascript" src="./node_modules/bootstrap-filestyle/src/bootstrap-filestyle.min.js"></script>
<!-- p5.js -->
<script type="text/javascript" src="./node_modules/p5/lib/p5.min.js"></script>
<script type="text/javascript" src="./node_modules/p5/lib/addons/p5.dom.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-97820999-3"></script>
<script type="text/javascript" src="./scripts/analytics.js"></script>
</head>
<body id="body">
<div class="navbar navbar-inverse navbar-fixed-top" style="background: url('./images/background.png') no-repeat center center fixed; -webkit-background-size: cover;">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" style="-webkit-text-stroke: 1px black;">
PP: Abstract Code Visualizer
</a>
</div>
</div>
</div>
<div class="container" style="margin-top: 40px;">
<div class="row">
<div class="col-lg-12">
<h1>
Python Portraits
</h1>
<p>
<strong><u>P</u>ython <u>P</u>ortraits</strong> is a web-based abstract image generator. It analyzes the lines of a python file and converts the program structure into an abstract image. All of the image generation is done on your CPU, therefore the time it takes
to create the image is dependant on your computer.
</p>
<p>
Python Portraits is still in pre-alpha. We are working hard to become feature-complete, however if you would like to report an issue or suggest a feature please <a href="mailto:[email protected]">contact us</a>.
</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h2>Step 1. Load a .py file</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<form>
<div class="col-lg-3 col-md-3 col-sm-3">
<label for="file-load-start">Select .py</label>
<img id="loadingGIF" src="./images/loading.gif" alt="loading gif" height="16" width="16">
<input class="filestyle" data-btnclass="btn-primary" data-buttonBefore="true" id="fileinput" type="file" accept=".py,.json" value="Select .py or .json File">
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h2>Step 2. Choose your visualization Style</h2>
<ul class="nav nav-tabs">
<li class="active" id="drawMethod1" onclick="drawMethod='drawMethod1'"><a data-toggle="tab" href="#1">Random Rectangles</a></li>
<li class="disabled" id="drawMethod1" onclick=""><a data-toggle="">Square Fractals</a></li>
<li class="disabled" id="drawMethod2" onclick=""><a data-toggle="">Fractal Tree</a></li>
<li class="disabled" id="drawMethod4" onclick=""><a data-toggle="">Canvas Blocking</a></li>
</ul>
<div class="tab-content" style="margin-top: 16px;">
<div id="1" class="tab-pane fade in active">
<p>Rectangles are generated in random locations on the canvas.</p>
</div>
</div>
<h2>Step 3. Create</h2>
</div>
</div>
<div class="btn-group" style="margin: 16px;">
<button type="button" class="btn btn-primary createPic"><i class="fa fa-picture-o" aria-hidden="true"></i> Create Image</button>
<button type="button" class="btn btn-primary clearCanvas"><i class="fa fa-eraser" aria-hidden="true"></i> Clear Canvas</button>
<a id="downloadPic" class="btn btn-primary downloadPic"><i class="fa fa-download" aria-hidden="true"></i> Download Image</a>
</div>
<div class="row">
<div class="col-lg-12 canvas_container" id="canvas_container">
</div>
</div>
<div class="row">
<div class="col-lg-12">
<footer>
<p>Created by Aaron Dyke and Hunter Renard.</p>
</footer>
</div>
</div>
</div>
<script type="text/javascript" src="./scripts/script.js"></script>
<script type="text/javascript" src="./scripts/file.js"></script>
<script type="text/javascript" src="./scripts/download.js"></script>
<script type="text/javascript" src="./scripts/draw.js"></script>
<script type="text/javascript" src="./scripts/clean.js"></script>
<script type="text/javascript" src="./scripts/parser.js"></script>
<script type="text/javascript" src="./scripts/sketch.js"></script>
<!-- drawing scripts -->
<script type="text/javascript" src="./scripts/drawing_scripts/squareSituation.js"></script>
</body>
</html>