-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (79 loc) · 3.42 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
<!doctype html>
<html>
<head>
<title>Primix</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="./css/main.css" rel="stylesheet" />
</head>
<body ng-app ng-controller="GlobalCtrl">
<div class="logo">
<img src="logo_primix.png">
</div>
<div class="instructions">
Enter a sequence of figures and listen.
</div>
<div class="form">
<form novalidate>
<div class="form-group">
<input type="text" class="form-control" ng-model="number" ng-model-onblur ng-change="onInputChange()"/>
</div>
</form>
</div>
<div class="grid ng-cloak" ng-controller="GridCtrl" ng-class="{is_visible: $parent.isGridVisible}">
<div class="row row{{ $index }}" ng-repeat="row in grid">
<div class="cell col{{ $index }}" ng-repeat="cell in row"
ng-click="$parent.$parent.onCellClick(cell.row,cell.col)"
ng-class="{active: cell.active}">
<span ng-show="$parent.$parent.isCellVisible(cell.row, cell.col)">{{ $parent.$parent.getPrimeNumberForCell(cell.row, cell.col) }}</span>
<span ng-hide="$parent.$parent.isCellVisible(cell.row, cell.col)"> </span>
</div>
</div>
</div>
<div class="help ng-cloak" ng-show="isHelpVisible">
How is a melody generated from numbers? <br><br>
The goal is to create a melody from the prime decomposition of the number.<br><br>
To make it short, the melody lasts n beats (between 1 and 32), so the given number is decomposed in n numbers of equals length. Each number is decomposed in prime factors. Each cell represents a prime number. The row on which the prime factor is located determines which note will be played (from D5 to D6).
The melody is generated by playing one beat (column) after the other.<br><br>
Here are some numbers you can try for yourself :<br>
- 190017030003000017000500 (with 12 beats)<br>
- 07030711071117050205021902190700 (with 16 beats)<br>
- 191300071300190019001700130000050300 (with 18 beats)
</div>
<div id="bar">
<a ng-click="toggleGrid()">Toggle Grid</a>
<form novalidate>
<div class="form-group">
<label for="inputBeats">Beats</label>
<input type="number" class="form-control" id="inputBeats" ng-model="beats" min="1" max="32" step="1" value="8" ng-model-onblur ng-change="onBeatsChange()"/>
</div>
<div class="form-group">
<label for="inputPeriod">Period</label>
<input type="number" class="form-control" id="inputPeriod" ng-model="period" min="300" max="1000" step="100" value="700" ng-model-onblur />
</div>
<div class="form-group">
<label for="soundToPlay">Sound</label>
<select class="form-control" id="soundToPlay" ng-model="soundToPlay">
<option value="Amyleigh">Amyleigh</option>
<option value="Bell" >Bell</option>
<option value="GrandPiano">Grand Piano</option>
<option value="Marimba">Marimba</option>
<option value="Marine">Marine</option>
<option value="Tamal">Tamal</option>
</select>
</div>
</form>
<div class="bottom">
<a ng-click="doTry()">Try</a>
<a ng-click="toggleHelp()">About</a>
<a href="https://github.com/MiLk/Primix">GitHub</a>
</div>
</div>
<script src="./js/jquery-2.0.3.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/angular.min.js"></script>
<script src="./js/ion.sound.min.js"></script>
<script src="./js/prime.js"></script>
<script src="./js/main.js"></script>
</body>
</html>