forked from trpo-moais-2016/fg03-algebraicfractals
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (102 loc) · 5.63 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
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="suhoy">
<link rel="shortcut icon" href="">
<title>Фрактальная графика</title>
<!-- Bootstrap core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<style type="text/css">
.cursor {cursor: all-scroll;}
</style>
</head>
<body>
<div class="container" ng-controller="mainController">
<h1 class="page-header" style="margin: 2px 0 10px 0">Алгебраические фракталы</h1>
<div class="row">
<div class="col-md-8 thumbnail">
<canvas width="800" height="600" id="fractal" style="width:100%;"
drawing="fractal"
ng-class="{
cursor: cursor
}"></canvas>
</div>
<div class="col-md-4">
<div class="thumbnail">
<label>Фрактал:</label>
<select class="form-control" ng-model="fractal" ng-change="draw()">
<option ng-repeat="(type, name) in fractals" ng-bind="name" ng-value="type"></option>
</select>
<label>Раскраска:</label>
<select class="form-control" ng-model="coloringType" ng-change="draw()">
<option ng-repeat="(type, name) in coloring" ng-bind="name" ng-value="type"></option>
<option ng-hide="fractal != undefined && fractal != 'newtonPool'"
ng-bind="'Гибридная'" ng-value="'hybrid'"></option>
</select>
<div ng-show="fractal == 'juliaSet'">
<label>Константа Жюлиа</label>
<div class="input-group">
<span class="input-group-addon">x</span>
<input class="form-control" ng-model="juliaConstant.x" requried type="number" ng-change="draw()">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">y</span>
<input class="form-control" ng-model="juliaConstant.y" requried type="number" ng-change="draw()">
</div>
</div>
</div>
<div class="thumbnail">
<p class="input-group" data-toggle="tooltip" title="Внимание! Количество итерации замедляет прерисовку фрактала. Увеличевайте количество итераций, когда это действительно необходимо.">
<span class="input-group-addon">Количестов итераций:</span>
<span class="input-group-addon ng-binding" ng-bind="n"></span>
<input min="30" max="200" class="form-control" ng-model="n" type="range">
</p>
<div style="text-align: center;">
<button class="btn btn-default" ng-click="draw()">Перерисовать</button>
</div>
</div>
<div class="thumbnail">
<label>Масштаб</label>
<p>Колесико мыши: увеличение\уменьшение</p>
<p>Левая кнопка мыши: перемещение</p>
<div style="text-align: center;">
<div class="row">
<p class="col-sm-12">top: <span ng-bind="top | number : 6"></span></p>
</div>
<div class="row">
<p class="col-sm-6">left: <span ng-bind="left | number : 6"></span></p>
<p class="col-sm-6">right: <span ng-bind="right | number : 6"></span></p>
</div>
<div class="row">
<p class="col-sm-12">bottom: <span ng-bind="bottom | number : 6"></span></p>
</div>
<button class="btn btn-default" ng-click="setUp()">Сбросить масштаб</button>
</div>
</div>
<div class="thumbnail">
<label>Указатель</label>
<div style="text-align: center;">
<div class="row">
<p class="col-sm-6">x: <span ng-bind="mouse.x | number : 6"></span></p>
<p class="col-sm-6">y: <span ng-bind="mouse.y | number : 6"></span></p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="js/app.js"></script>
</body>
</html>