Обмен готовыми решениями - JavaScript - Страница 3

@Опан · 31.10.2015, 02:18

Студворк — интернет-сервис помощи студентам

Не по теме:

Я - баянист :)

Сообщение от stakon

Простой анализатор спектра. Не получается запустить, появляется синий прямоугольник и всё, может ошибка в коде?

Я вот и сам на днях хотел его запустить, но... результат был тот же... Перед публикацией я проверял код, и он работал.
Я считаю, что не обязательно разработчикам браузеров так часто выпускать новые версии, пусть они будут реже, но чтобы предусматривали сохранение работоспособности всех нюансов. Другого объяснения я пока не вижу.
Попробуйте ещё уточнить, в каком браузере Вы пытались запустить. Формат аудиофайла МП3 поддерживает Google Chrome, (и кажется мозилла) а в опере требуется формат файла OGG.

Добавлено через 2 часа 19 минут
Оказывается, в последний раз я по ошибке пытался запустить анализатор на локалке. На сервере он работает. Вот ссылка.Так что, я напрасно обвинил разработчиков браузеров. Может и Вы запускали на локалке? Или же на сервере, но ссылку на аудиофайл брали с другого сервера?

@arcmag · 12.11.2015, 11:52

Если кому интересно вот мой список из 4-х методов
css - позволяет передать группу стилей в элемент через объект
spoiler - сворачивает/разворачивает указанный элемент
moving - позволяет перемещать элемент по странице
resize - позволяет изменять размеры высоты и ширины элемента

PHP/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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html>
<head>
    <title>lib</title>
    <script>
        var lib = (function () {
            "use-strict";
            js = {};
            js.css = function (elem, css) {
                for (var i in css) elem.style[i] = css[i];
            }
            js.spoiler = function (activator, block, open) {
                /*
                 * activator - элемент при клике на который будет происходить сворачивание/разворачивание блока (string = selector || html element)
                 * block     - блок который будет сворачиваться и разворачиваться (string = selector || html element)
                 * open      - (не обязательно) начальное состояние блока открыт/закрыт (default - false || true)
                 * */
                var a = typeof activator === "string" ? document.querySelector (activator) : activator,
                        b = typeof block === "string"     ? document.querySelector (block)     : block,
                        h = b.offsetHeight,
                        p = getComputedStyle (b)["padding"],
                        m = getComputedStyle (b)["margin"],
                        r = getComputedStyle (b)["border"],
                        f = function () {
                            if (b.offsetHeight !== 0) {
                                if (h !== b.offsetHeight) h = b.offsetHeight;
                            }
                            js.css (b, b.offsetHeight == 0 ?
                                {height:h + "px", padding: p, margin: m, border: r, overflow: "visible"} :
                                {height:0, padding: 0, margin: 0, border : 0, overflow: "hidden"}
                            );
                        };
                if (open !== true) js.css (b, {height:0, padding: 0, margin: 0, border : 0});
                a.addEventListener ("click", f);
            }
            js.moving = function (active, relocatable, config) {
                /*
                 active      - элемент который будет захватываться мышкой (string = selector || html element)
                 relocatable - перемещаемый элемент (string = selector || html element)
                 config       - object
                    output      - метка определяющая перемещение элементов HTML при выходе за пределы захваченного элемента (default = false || true)
                 */
                var objActive = typeof active === "string" ? document.querySelector(active) : active,
                    objMoving = typeof relocatable === "string" ? document.querySelector(relocatable) : relocatable,
                    objStatus = false,
                    startPos  = {x:"", y:""},
                    move = function (e) {
                            if(objStatus){
                                objMoving.style.top  = e.clientY - startPos.y + "px";
                                objMoving.style.left = e.clientX - startPos.x + "px";
                            }
                    },
                    down = function (e) {
                            objStatus = true;
                            startPos.x = e.clientX - objMoving.offsetLeft;
                            startPos.y = e.clientY - objMoving.offsetTop;
                    },
                    up = function () {
                            objStatus = false;
                    };
                config    = typeof config !== "object" ? {} : config;
                config.output = typeof config.output === "undefined" ? true : config.output;
                objActive.addEventListener("mousedown", down);
                if(config.output) document.addEventListener("mousemove", move);
                else objActive.addEventListener("mousemove", move);
                document.addEventListener("mouseup", up);
            }
            js.resize = function (eResize, cssSeizure) {
                /*
                 * eResize - элемент который будет менять размеры (string = selector || html element)
                 * cssSeizure - настройки стилей для элемента регулятора размеров (object)
                 * */
                var seizure   = document.createElement ("div"),
                    cssR      = {
                        position: "absolute",
                        right: "-15px",
                        bottom: "-15px",
                        width: "15px",
                        height: "15px",
                        background: "rgba(0,0,0,0.7)",
                        zIndex: 9999999
                    },
                    resize    = typeof eResize === "string" ? document.querySelector (eResize) : eResize,
                    objStatus = false,
                    startPos  = {x:"", y:""},
                    wrapp = resize.parentNode.classList.contains ("relocBlock") ? resize.parentNode : resize,
                    move = function (e) {
                            if(objStatus){
                                var sTop = parseInt (getComputedStyle (seizure)["top"]),
                                    sLeft = parseInt (getComputedStyle (seizure)["left"]),
                                    nTop, nLeft;
                                seizure.style.top  = e.clientY - startPos.y + "px";
                                seizure.style.left = e.clientX - startPos.x + "px";
                                nTop = parseInt (getComputedStyle (seizure)["top"]);
                                nLeft = parseInt (getComputedStyle (seizure)["left"]);
                                resize.style.width = (parseInt (getComputedStyle (resize)["width"]) - (sLeft - nLeft)) + "px";
                                resize.style.height = (parseInt (getComputedStyle (resize)["height"]) - (sTop - nTop)) + "px";
                                if (0 >= seizure.offsetLeft) {
                                    resize.style.width = 0 + "px";
                                    seizure.style.left = 0 + "px";
                                }
                                if (0 >= seizure.offsetTop) {
                                    seizure.style.top = 0 + "px";
                                    resize.style.height = 0 + "px";
                                };
                            }
                        },
                    down = function (e) {
                            objStatus = true;
                            startPos.x = e.clientX - seizure.offsetLeft;
                            startPos.y = e.clientY - seizure.offsetTop;
                        },
                    up = function () {
                            objStatus = false;
                    },
                    pos = getComputedStyle(resize)["position"];
                if (typeof parseInt (getComputedStyle (wrapp)["bottom"]) === "number") {
                    wrapp.style.top = wrapp.offsetTop + "px";
                    wrapp.style.bottom = "auto";
                }
                if (typeof parseInt (getComputedStyle (wrapp)["right"]) === "number") {
                    wrapp.style.left = wrapp.offsetLeft + "px";
                    wrapp.style.right = "auto";
                }
                if (typeof cssSeizure === "object") {
                    var ban = ["position", "left", "right", "top", "bottom", "width", "height"]
                    for (var i in cssSeizure) {
                        if (ban.indexOf (i) !== -1) continue;
                        cssR[i] = cssSeizure[i];
                    }
                }
                js.css (seizure, cssR);
                if (pos !== "fixed" && pos !== "absolute" &&pos !== "relative") resize.style.position = "relative";
                seizure.classList.add ("resize");
                resize.appendChild (seizure);
                seizure.addEventListener("mousedown", down);
                document.addEventListener("mousemove", move);
                document.addEventListener("mouseup", up);
            }
            return js;
        } ());
        window.addEventListener ("load", function () {
            lib.resize (".elem .wrapp");
            lib.moving (".elem .reloc", ".elem");
            lib.spoiler (".elem .spoiler", ".elem .wrapp", true);
        });
    </script>
    <style>
        .elem{position:fixed;left:100px;top:100px;}
        .elem .wrapp{
            width: 300px;
            height: 100px;
            background: rgba(0,0,0,0.3);
            border: solid 1px rgba(255,0,0,1);
            box-shadow: inset 0px 0px 25px rgba(255,0,0,1), 0px 0px 25px rgba(255,0,0,1);
        }
        .elem .reloc{
            position: absolute;
            right: 0px;
            width: 50px;
            height: 25px;
            background: rgba(255,0,0,0.3);
            border: solid 1px rgba(255,0,0,1);
            box-shadow: inset 0px 0px 15px rgba(255,0,0,1), 0px 0px 15px rgba(255,0,0,1);
            top: -30px;
        }
        .elem .spoiler{
            position: absolute;
            right: 0px;
            width: 25px;
            height: 25px;
            background: rgba(0,150,255,0.3);
            border: solid 1px rgba(0,150,255,1);
            box-shadow: inset 0px 0px 15px rgba(0,150,255,1), 0px 0px 15px rgba(0,150,255,1);
            top: -60px;
        }
    </style>
</head>
<body>
    <div class="elem">
        <div class="reloc"></div>
        <div class="spoiler"></div>
        <div class="wrapp"></div>
    </div>
</body>
</html>

@Fedor Vlasenko · 12.11.2015, 12:16

Pабота с localstorage, подписка на события localstorage, хранение функций, массивов и объектов в localstorage, интерфейс подписки позволяет передать параметры подписчикам (открытым вкладкам браузера), передать и выполнить в них переданные функции. Реализация работы между вкладками внутри браузера localstorage
Скачивайте и тестируйте примеры. Ваши желания и пожелания будут учтены.

HTML5
1
2
<script src="storage.js"></script>
<script>alert(_storage('name'));</script>

@Padimanskas · 23.03.2016, 14:07

JSON-база c описанием 16-битных игр с приставки Sega. Всего 1012 игр - почти все что тогда существовали и даже пиратские. Описание на русском. Есть скриншоты.
Мб кому-то пригодится..
Архив tar.gzip
JSON свойства:

American - западное название игры

Japan - название игры в Японии

Year - год производства

Genre - жанр игры

Developer - разработчик игры

Img - путь к файлу скриншота

OName - другое название игры

Description - описание игры

@Thisman · 27.03.2016, 21:10

Мало ли может кому пригодиться, небольшая библиотека, для упрощенной работы с query string

Тут git репозиторий с тестами и прочими штуками

Полный код:

Кликните здесь для просмотра всего текста

JavaScript
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
146
147
148
149
150
151
152
153
154
155
156
157
158
var URLQueryBuilder = (function () {
    /**
    *   Merge two objects
    */
    function mergeObj(obj1, obj2) {
        var result = {};
        for(var i in obj1) result[i] = obj1[i];
        for(var j in obj2) result[j] = obj2[j];
 
        return result;
    }
    /**
    *   Parse queries
    *   @param {Object|string} queries
    *   @return {Object} parsed queries
    */
    function parseQueries (queries) {
        var parsedQueries = {};
 
        if(typeof queries === "string") {
            var queriesArray = queries.split("&");
            for(var i = 0; i < queriesArray.length; i++) {
                var query = queriesArray[i].split("=");
                // check to valud data
                if(query.length == 2)
                    parsedQueries[query[0]] = query[1];
            }       
        } else if(typeof (queries === "object") && queries) { // typeof null/undefined === "object"
            parsedQueries = queries; 
        }
 
        return parsedQueries;
    }
    /**
    *   Parse queries from inital url string
    *   @param {string} url
    */
    function parseQueriesFromUrl(url) {
        var queries = {};
 
        if(typeof url === 'string') {
            queries = url.split("?")[1];
            queries = parseQueries(queries);
        }
 
        return queries;
    }
    /**
    *   get a clear url without query
    *   @param {string} url
    *   @return {string} url without query string
    */
    function getClearUrl(url) {
        var clearedUrl = '';
 
        if(typeof url === 'string')
            clearedUrl = url.split("?")[0];
 
        return clearedUrl;
    }
 
 
    /**
    *   @constructor
    *   @param {string} url
    *   @param {string|object|undefined} queries
    */
    function URLQueryBuilder (url, queries) {
        this.url = getClearUrl(url);
        this.queries = parseQueriesFromUrl(url);
 
        var queriesFromParam = parseQueries(queries);
        this.queries = mergeObj(this.queries, queriesFromParam);
 
        
        /**
         *  Get a current url with queries
         */
        URLQueryBuilder.prototype.getUrl = function() {
            var url = this.url;
            var queries = '?';
            for(var name in this.queries)
                queries += (name + "=" + this.queries[name] + "&");
         
            return url + queries;
        };
        
 
        /**
         *  Get clear url without queries
         */
        URLQueryBuilder.prototype.getClearUrl = function() {
 
            return this.url;
        };
 
        /**
         *  Delete query by name
         *  @param {string} name, query that will be deleted
         */
        URLQueryBuilder.prototype.delete = function(name) {
            delete this.queries[name];
            
            return this;
        };
 
        /**
         *  Change query by name
         *  @param {string} name, query what will be changed
         *  @param {string|number} value, new value for query
         */
        URLQueryBuilder.prototype.change = function(name, value) {
            this.queries[name] = value.toString();
 
            return this;
        };
 
        /**
         *  Add new query
         *  @param {string} name, name of new query
         *  @param {string|number} value, value for new query
         */
        URLQueryBuilder.prototype.add = function(name, value) {
            if(typeof name === "string") {
                this.queries[name] = value.toString();
            } else if(typeof name === "object" && name) {
                var queries = name;
                for(var i in queries) 
                    this.add(i, queries[i]);
            } else {
                throw new Error("Param 'name' must be a string or an object");
            }
 
            return this;
        };
 
 
        /**
         *  Clear query string
         *  @param {string|object} queries
         */
        URLQueryBuilder.prototype.reset = function(queries) {
            this.queries = parseQueries(queries);
 
            return this;
        };
 
 
        /**
         *  Check if queries has specific query
         *  @return {boolean} true if has, false if not
         */
        URLQueryBuilder.prototype.has = function(name) {
 
            return (name in this.queries);
        };
    }
})();

@cyb0rg_01 · 12.04.2016, 18:00

Получение точек пересечения прямой и окружности.

JavaScript
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
function Point(X, Y) {
    this.X = X;
    this.Y = Y;
}
 
function Line(firstPoint, secondPoint) {
    this.firstPoint = jQuery.extend({}, firstPoint);
    this.secondPoint = jQuery.extend({}, secondPoint);
    this.k = (secondPoint.Y - firstPoint.Y) / (secondPoint.X - firstPoint.X);
    this.b = firstPoint.Y - this.k * firstPoint.X;
}
 
function Circle(centerPoint, radius) {
    this.centerPoint = jQuery.extend({}, centerPoint);
    this.radius = radius;
    this.getIntersectionPointsWithLine = function (line) {
        if (Math.abs(line.k) == Infinity) {
            var a = 1;
            var b = -2 * centerPoint.Y;
            var c = Math.pow(centerPoint.Y, 2) + Math.pow(Math.abs(line.firstPoint.X - centerPoint.X), 2) - Math.pow(radius, 2);
 
            var d = b * b - 4 * a * c;
 
            if (d > 0) {
                var y1 = (-b + Math.sqrt(d)) / (2 * a);
                var y2 = (-b - Math.sqrt(d)) / (2 * a);
                return [new Point(line.firstPoint.X, y1), new Point(line.firstPoint.X, y2)];
            }
            else if (d == 0) {
                var y = -b / (2 * a);
                return [new Point(line.firstPoint.X, y)];
            }
        }
        else if (line.k == 0)
        {
            var a = 1;
            var b = -2 * centerPoint.X;
            var c = Math.pow(centerPoint.X, 2) + Math.pow(Math.abs(line.firstPoint.Y - centerPoint.Y), 2) - Math.pow(radius, 2);
 
            var d = b * b - 4 * a * c;
 
            if (d > 0) {
                var x1 = (-b + Math.sqrt(d)) / (2 * a);
                var x2 = (-b - Math.sqrt(d)) / (2 * a);
                return [new Point(x1, line.firstPoint.Y), new Point(x2, line.firstPoint.Y)];
            }
            else if (d == 0) {
                var x = -b / (2 * a);
                return [new Point(x, line.firstPoint.Y)];
            }
        }
        else
        {
            var a = (1 + Math.pow(Math.abs(line.k), 2));
            var b = -(2 * Math.pow(centerPoint.X,2) + 2 * line.k * (line.b - centerPoint.Y));
            var c = Math.pow(centerPoint.X, 2) + Math.pow(Math.abs(line.b - centerPoint.Y), 2) - Math.pow(radius, 2);
 
            var d = b * b - 4 * a * c;
 
            if (d > 0) {
                var x1 = (-b + Math.sqrt(d)) / (2 * a);
                var x2 = (-b - Math.sqrt(d)) / (2 * a);
                var y1 = line.k * x1 + line.b;
                var y2 = line.k * x2 + line.b;
 
                return [new Point(x1, y1), new Point(x2, y2)];
            }
            else if (d == 0) {
                var x = -b / (2 * a);
                var y = line.k * x + line.b;
 
                return [new Point(x, y)];
            }
        }
        return [];
    }
}

В том коде была ошибка из-за разложении параметра прямой.

JavaScript
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
function Point(X, Y) {
    this.X = X;
    this.Y = Y;
}
 
function Line(firstPoint, secondPoint) {
    this.firstPoint = jQuery.extend({}, firstPoint);
    this.secondPoint = jQuery.extend({}, secondPoint);
    this.k = (secondPoint.Y - firstPoint.Y) / (secondPoint.X - firstPoint.X);
    this.b = firstPoint.Y - this.k * firstPoint.X;
}
 
function Circle(centerPoint, radius) {
    this.centerPoint = jQuery.extend({}, centerPoint);
    this.radius = radius;
    this.getIntersectionPointsWithLine = function (line) {
         if (Math.abs(line.k) == Infinity) {
            var a = 1;
            var b = -2 * centerPoint.Y;
            var c = Math.pow(centerPoint.Y, 2) + Math.pow(Math.abs(line.firstPoint.X - centerPoint.X), 2) - Math.pow(radius, 2);
 
            var d = b * b - 4 * a * c;
 
            if (d > 0) {
                var y1 = (-b + Math.sqrt(d)) / (2 * a);
                var y2 = (-b - Math.sqrt(d)) / (2 * a);
                return [new Point(line.firstPoint.X, y1), new Point(line.firstPoint.X, y2)];
            }
            else if (d == 0) {
                var y = -b / (2 * a);
                return [new Point(line.firstPoint.X, y)];
            }
        }
        else if (line.k == 0) {
            var a = 1;
            var b = -2 * centerPoint.X;
            var c = Math.pow(centerPoint.X, 2) + Math.pow(Math.abs(line.firstPoint.Y - centerPoint.Y), 2) - Math.pow(radius, 2);
 
            var d = b * b - 4 * a * c;
 
            if (d > 0) {
                var x1 = (-b + Math.sqrt(d)) / (2 * a);
                var x2 = (-b - Math.sqrt(d)) / (2 * a);
                return [new Point(x1, line.firstPoint.Y), new Point(x2, line.firstPoint.Y)];
            }
            else if (d == 0) {
                var x = -b / (2 * a);
                return [new Point(x, line.firstPoint.Y)];
            }
        }
        else {
            var a = (1 + Math.pow(Math.abs(line.k), 2));
            var b = -(2 * centerPoint.X - 2 * line.k * line.b + 2 * centerPoint.Y * line.k);
            var c = Math.pow(centerPoint.X, 2) + Math.pow(Math.abs(line.b), 2) - 2 * centerPoint.Y * line.b Math.pow(centerPoint.Y, 2) - Math.pow(radius, 2);
 
            var d = b * b - 4 * a * c;
 
            if (d > 0) {
                var x1 = (-b + Math.sqrt(d)) / (2 * a);
                var x2 = (-b - Math.sqrt(d)) / (2 * a);
                var y1 = line.k * x1 + line.b;
                var y2 = line.k * x2 + line.b;
 
                return [new Point(x1, y1), new Point(x2, y2)];
            }
            else if (d == 0) {
                var x = -b / (2 * a);
                var y = line.k * x + line.b;
 
                return [new Point(x, y)];
            }
        }
        return [];
    }
}

так же можно избавиться от зависимости в виде jQuery и использовать вместо extend такую запись

JavaScript
1
new Point(point.X, point.Y);

@sash · 09.06.2016, 15:25

Мой первый jQuery-плагин https://github.com/sash003/lightBox

@sash · 18.06.2016, 20:40

Переделанный adipoli.js. Теперь можно задать свои стили картинкам (высоту, ширину). Работает во всех версиях jQuery (вроде

) Подключена лютая, бешенная jQuery 3.0.0

@Padimanskas · 30.06.2016, 20:47

Варианты UMD от James Burke на все случаи жизни. кому-то должно пригодиться

@cyb0rg_01 · 02.09.2016, 13:06

Вращение https://jsfiddle.net/secm7gkj/1/

JavaScript
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
function Point(x, y)
{
    this.x = x;
        this.y = y;
}
 
function RotatedRect()
{
    this.canvas = document.getElementById("c");
    this.context = this.canvas.getContext("2d");
        this.leftTopPoint = new Point(this.canvas.width / 2, this.canvas.height / 2);
        this.mousePoint = new Point(this.canvas.width / 2, this.canvas.height / 2);
        this.width = 70;
        this.height = 10;
        
        this.init();
    this.reDraw();
}
 
RotatedRect.prototype.init = function()
{   
    var self = this;
        this.canvas.addEventListener("mousemove", function(event)
        {
            self.mousePoint = self.getPointByMouse(event);
            self.reDraw();
        });
}
 
RotatedRect.prototype.reDraw = function()
{   
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
        var angle = Math.atan2(this.mousePoint.y - this.leftTopPoint.y, this.mousePoint.x - this.leftTopPoint.x) * 180 / Math.PI;
        this.context.save();
        this.context.beginPath();
        this.context.translate(this.leftTopPoint.x, this.leftTopPoint.y);
        this.context.rotate(angle * Math.PI / 180);
        this.context.translate(-this.leftTopPoint.x, -this.leftTopPoint.y);
        this.context.rect(this.leftTopPoint.x, this.leftTopPoint.y, this.width, this.height);
        this.context.fill();
        this.context.restore();
}
 
 
RotatedRect.prototype.getPointByMouse = function(event)
{
    var rect = this.canvas.getBoundingClientRect();
        var x = (event.clientX - rect.left);
        var y = (event.clientY - rect.top);
    return new Point(x, y);
}
 
var rotatedRect = new RotatedRect();

Добавлено через 14 часов 7 минут
Синхронный вызов в отдельном потоке.
Может пригодится, в случае написания конструкций наподобие:
выстрел, столкновение, смерть (ф-ции). поверх основного потока.

JavaScript
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
function Synchronization()
{
    this.isFree = true;
    this.currentNumber = 0;
    this.lastNumber = 0;
}
 
Synchronization.prototype.synchronizeCall = function (handler, timeInterval, pauseInMilliseconds) {
    var self = this;
    var number = this.lastNumber++;
    var syncTimerId = setInterval(function () {
        if (self.isFree == true && number == self.currentNumber) {
            self.isFree = false;
            self.currentNumber++;
            handler();
 
            clearInterval(syncTimerId);
 
            if (pauseInMilliseconds > 0) {
                self.waitFree(pauseInMilliseconds, timeInterval);
            }
            else {
                self.isFree = true;
            }
 
        }
    }, timeInterval);
}
 
Synchronization.prototype.waitFree = function (milliseconds, timeInterval)
{
    var self = this;
    var startTime = Date.now();
    var waitTimerId = setInterval(function () {
        if (Date.now() - startTime >= milliseconds) {
            self.isFree = true;
            clearInterval(waitTimerId);
        }
    }, timeInterval);
}

гипотетическое использование (рассматривать как псевдокод).
выстрел, столкновение, смерть (ф-ции). поверх основного потока будут работать последовательно

JavaScript
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
function Game()
{
    this.shooterSync = new Synchronization();
    this.shooter = new Player();
    this.targetPray = new Player();
    this.graphics = new Graphics();
    this.init();
}
 
Game.prototype.init = function()
{
    var self = this;
    this.shooter.onMouseClick = function() 
    {
        self.shoot();   
        self.shock();
        self.kill();
    };
    this.graphics.init();
    this.graphics.addPlayer(this.shooter);
    this.graphics.addPlayer(this.targetPray);
}
 
Game.prototype.shoot = function()
{
    var self = this;
    var handler = function() {
        self.shooter.shoot();
    }
 
    this.shooterSync.synchronizeCall(handler, 100, 0);
}
 
Game.prototype.shock = function()
{
    var self = this;
    var handler = function() {
        self.targetPray.shock();
    }
 
    this.shooterSync.synchronizeCall(handler, 100, 0);
}
 
Game.prototype.kill = function()
{
    var self = this;
    var handler = function() {
        self.targetPray.kill();
    }
 
    this.shooterSync.synchronizeCall(handler, 100, 0);
}

@tezaurismosis · 28.09.2016, 18:08

Ваша первая игра на JavaScript и Phaser (перевод)

@cyb0rg_01 · 05.10.2016, 13:28

Наверное лучшая библиотека для создания древовидных структур, поддержка DnD, гибкость и простота использования:
https://www.jstree.com/demo/

@Fedor Vlasenko · 05.10.2016, 14:25

Сообщение от pro_100_gram

Наверное лучшая библиотека для создания древовидных структур, поддержка DnD, гибкость и простота использования:

Мой выбор Dinatree

@cyb0rg_01 · 05.10.2016, 15:17

Fedor Vlasenko, мне эта понравилась простотой и возможностями: за 6 часов 90% необходимых возможностей изучил, для полного манипулирования каталогами, файлами, настройками и прочее.

@cyb0rg_01 · 21.11.2016, 16:08

Наконец-то понял кватернионы. простейшая 3D-леталка на three.js в честь этого (управление WASDQE + мышь):

http://codepen.io/pro_100_gram/pen/LbWZyv

PHP/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
<html>
    <head>
        <title>SpaceShip</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="three.min.js"></script>
 
        <script>    
            var loader = new THREE.JSONLoader();
            loader.load("https://api.myjson.com/bins/2w5m2", function (geom, mater) {
                var mater = new THREE.MeshNormalMaterial({ color: 0x00ff00 });
                var spaceShip = new THREE.Mesh(geom, mater);
                onLoadCompleted(spaceShip);
            });
 
 
            var onLoadCompleted = function (spaceShip) {
                var scene = new THREE.Scene();
                var camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 2000);
 
                var renderer = new THREE.WebGLRenderer({ antialias: true });
                renderer.setSize(window.innerWidth, window.innerHeight);
                document.body.appendChild(renderer.domElement);
 
                var geometry = new THREE.BoxGeometry(10, 10, 10);
                var material = new THREE.MeshNormalMaterial({ color: 0x00ff00 });
                var cube = new THREE.Mesh(geometry, material);
 
                cube.position.z = -300;
                cube.position.y = 10;
 
                camera.position.y = 10;
                camera.position.z = 30;
                spaceShip.rotation.y = Math.PI;
                camera.lookAt(new THREE.Vector3(0, 5, 0));
 
                scene.add(cube);
 
                var group = new THREE.Object3D();
                group.add(spaceShip);
                group.add(camera);
 
                scene.add(group);
 
                for (var i = 0; i < 300; ++i) {
                    var dotGeometry = new THREE.Geometry();
                    dotGeometry.vertices.push(new THREE.Vector3(Math.random() * (1500 + 1500) - 1500, Math.random() * (1500 + 1500) - 1500, Math.random() * (1500 + 1500) - 1500));
                    var dotMaterial = new THREE.PointCloudMaterial({ size: 1, sizeAttenuation: true });
                    var dot = new THREE.Points(dotGeometry, dotMaterial);
                    scene.add(dot);
                }
 
                var cameraControl = new CameraControl(group);
 
                var render = function () {
                    cameraControl.update();
                    requestAnimationFrame(render);
                    renderer.render(scene, camera);
                };
 
                render();
            }
 
 
            function CameraControl(object3D) {
                var rotationQuaternion = new THREE.Quaternion();
                var rotationVector = new THREE.Vector3(0, 0, 0);
                var movingVector = new THREE.Vector3(0, 0, 0);
                var rotationSpeed = 0.01;
                var movingSpeed = 1;
 
                this.update = function () {
                    object3D.translateX(movingVector.x);
                    object3D.translateY(movingVector.y);
                    object3D.translateZ(movingVector.z);
 
                    rotationQuaternion.set(rotationVector.x, rotationVector.y, rotationVector.z, 1).normalize();
                    object3D.quaternion.multiply(rotationQuaternion);
                    object3D.rotation.setFromQuaternion(object3D.quaternion, object3D.rotation.order);
 
 
                };
 
                window.addEventListener('keydown', function (event) {
                    if (event.keyCode == 87) {
                        movingVector.z = -1;
                    }
                    else if (event.keyCode == 83) {
                        movingVector.z = 1;
                    }
                    else if (event.keyCode == 65) {
                        movingVector.x = -1;
                    }
                    else if (event.keyCode == 68) {
                        movingVector.x = 1;
                    }
                    else if (event.keyCode == 81) {
                        movingVector.y = -1;
                    }
                    else if (event.keyCode == 69) {
                        movingVector.y = 1;
                    }
                    movingVector.multiplyScalar(movingSpeed);
                });
                window.addEventListener('keyup', function (event) {
                    if (event.keyCode == 87) {
                        movingVector.z = 0;
                    }
                    else if (event.keyCode == 83) {
                        movingVector.z = 0;
                    }
                    else if (event.keyCode == 65) {
                        movingVector.x = 0;
                    }
                    else if (event.keyCode == 68) {
                        movingVector.x = 0;
                    }
                    else if (event.keyCode == 81) {
                        movingVector.y = 0;
                    }
                    else if (event.keyCode == 69) {
                        movingVector.y = 0;
                    }
                });
 
                window.addEventListener('mousemove', function (event) {
                    rotationVector.y = (window.innerWidth / 2 - event.clientX) / (window.innerWidth / 2) * rotationSpeed;
                    rotationVector.x = (window.innerHeight / 2 - event.clientY) / (window.innerHeight / 2) * rotationSpeed;
                });
            }
        </script>
    </body>
</html>

@Опан · 01.03.2017, 12:20

Простой конвертер аудиофайлов из формата WAW в формат МП3 с использованием библиотеки libmp3lame.min.js

Хочу предложить конвертер из WAW в МП3. Это - результат упрощения мной сложного примера, найденного в интернете. Изначально этот пример был рассчитан на конвертирование только монофонических WAV-файлов. Правда, после того, как я подключил возможность конвертировать стереофайлы, теперь они обрабатываются корректно, а вот монофайлы тоже с натяжкой конвертируютя, но при этом почему-то используют до 500 мб оперативки.
Откуда я был скачал исходный пример и библиотеку, я уже сейчас к сожалению не смог найти, поэтому отправляю во вложении библиотеку, так же тестовый WAV-файл и результат конвертирования:

PHP/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
<!DOCTYPE html>
<html>
<head>
    <title>Конвертер из WAV в MP3</title>
    <meta charset="windows-1251">
</head>
<body bgcolor=#ccc><center>
<h3>Конвертер из WAV в MP3</h3>
<audio id=audio controls></audio><br><br>
<div id="fileInputContainer">
    <input id=myfile type=file onchange="myconverting(this.files[0])">
</div><br>
<a id=mydownloadlink style="display:none">тут будет ссылка на скачивание MP3</a>
<script src="libmp3lame.min.js"></script>
<script>
function myconverting(blob){
    mydownloadlink.href="";
    mydownloadlink.innerHTML="подождите...";
    mydownloadlink.style.display="block";
    var fileReader=new FileReader();
    fileReader.readAsArrayBuffer(blob);
    fileReader.onload=function(){
        var arrayBuffer=this.result;
        var buffer=new Uint8Array(arrayBuffer);
        function readInt(i,bytes){
            var ret=0,shft=0;
            while(bytes){
                ret+=buffer[i]<<shft;
                shft+=8;
                i++;
                bytes--;
            };
            return ret;
        };
        var sampleRate=readInt(24,4);
        var bitsPerSampl=readInt(34,2);
        var numchannels=readInt(30,1); // определяем количество стереоканалов в файле - 1 или 2 
        var splitchannels=2*Math.floor(numchannels/2);
        var samples=buffer.subarray(44);
        mp3codec = Lame.init();
        Lame.set_mode(mp3codec,1);
        Lame.set_num_channels(mp3codec,2);
        Lame.set_num_samples(mp3codec,samples);
        Lame.set_in_samplerate(mp3codec,sampleRate);
        Lame.set_out_samplerate(mp3codec,sampleRate);
        Lame.set_bitrate(mp3codec,128); // задаём битрейт
        Lame.init_params(mp3codec);
        var f32Buffer_l=new Float32Array(samples.length/numchannels);
        var f32Buffer_r=new Float32Array(samples.length/numchannels);
        for(var i=0;i<samples.length/numchannels;i++){
            f32Buffer_l[i]=(samples[i*2*numchannels]+((samples[i*2*numchannels+1]^128)*256)-0x8000)/0x8000;
            f32Buffer_r[i]=(samples[i*2*numchannels+splitchannels]+((samples[i*2*numchannels+splitchannels+1]^128)*256)-0x8000)/0x8000;
        }
        var mp3data=Lame.encode_buffer_ieee_float(mp3codec,f32Buffer_l,f32Buffer_r); // конвертируем
        Lame.close(mp3codec);
        mp3codec=null;
        var binary="",bytes=new Uint8Array(mp3data.data);
        for (var i=0;i<bytes.byteLength;i++){binary+=String.fromCharCode(bytes[i]);};
        var url='data:audio/mp3;base64,'+window.btoa(binary);
        audio.src=url;
        audio.play(); // играем
        mydownloadlink.href=url;
        mydownloadlink.innerHTML="с к а ч а т ь"; // качаем
        var nd=new Date();
        mydownloadlink.download=nd.getFullYear()+""+az(nd.getMonth()+1)+""+az(nd.getDate())+""+az(nd.getHours())+""+az(nd.getMinutes())+""+az(nd.getSeconds())+".mp3";
        fileInputContainer.innerHTML = fileInputContainer.innerHTML;
        function az(i){return(i<10)?"0"+i:i;};
    };
};
</script>
</center></body>
</html>

В браузере Опера к сожалению не работает.

@8Observer8 · 17.11.2017, 16:49

Минимальная программа на WebGL (это эквивалент OpenGL ES 2.0 для браузера), которая выводит красную точку размеров 10 пикселей в координате (0, 0, 0)

https://jsfiddle.net/8Observer8/8kduku4r/1/

PHP/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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Shortest Program</title>
</head>
 
<body>
    <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid black;"></canvas>
 
    <script>
        var VSHADER_SOURCE =
            'void main()\n' +
            '{\n' +
            '    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' +
            '    gl_PointSize = 10.0;\n' +
            '}\n';
 
        var FSHADER_SOURCE =
            'void main()\n' +
            '{\n' +
            '    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
            '}\n';
 
        function main()
        {
            var gl = document.getElementById('renderCanvas').getContext('webgl');
            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, VSHADER_SOURCE);
            gl.compileShader(vShader);
            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, FSHADER_SOURCE);
            gl.compileShader(fShader);
            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);
            gl.drawArrays(gl.POINTS, 0, 1);
        }
        main();
    </script>
</body>
 
</html>

@8Observer8 · 19.11.2017, 10:50

Минимальная программа на WebGL версии 2.0. WebGL 2.0 базируется на OpenGL ES 3.0. Пример выводит точку красного цвета размером 10 пикселей.

https://jsfiddle.net/8Observer8/9b2k6mr8/

Название: 001_point-in-webgl2.png
Просмотров: 183

Размер: 722 байт

Название: 001_point-in-webgl2.png
Просмотров: 183

Размер: 722 байт

PHP/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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Shortest Program</title>
</head>
 
<body>
    <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid rgb(159, 133, 230);"></canvas>
 
    <script>
        var vertexShaderSource =
            `#version 300 es
 
    void main()
    {
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        gl_PointSize = 10.0;
    }`
 
        var fragmentShaderSource =
            `#version 300 es
 
    precision mediump float;
 
    out vec4 outColor;
 
    void main()
    {
        outColor = vec4(1.0, 0.0, 0.0, 1.0);
    }`;
 
        function main()
        {
            var gl = document.getElementById('renderCanvas').getContext('webgl2');
 
            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vertexShaderSource);
            gl.compileShader(vShader);
 
            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fragmentShaderSource);
            gl.compileShader(fShader);
 
            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);
 
            gl.drawArrays(gl.POINTS, 0, 1);
        }
        main();
    </script>
</body>
 
</html>

@8Observer8 · 19.11.2017, 23:19

Создал тему: Небольшие примеры на WebGL Если вам интересно, то подписывайтесь и выкладывайте свои примеры.

@Опан · 12.12.2017, 12:16

Пианино на JavaScript + CSS

Хочу предложить пианино на JavaScript и CSS. Играть можно мышью или на клавиатуре компьютера, так же автоматически. Соотстветствие клавиш на пианино клавишам на компьютере указано на виртуальных клавишах пианино в виде символов. Слишком долго клавиши на клавиатуре компьютера не держите, так как наступит многократное повторение нажатия, как при написании текста. Как лучше от этого избавиться, пока не решил.
Пианино имеет стерезвук с эффектом места расположения клавиш в пространстве. Поддерживается полифония до шести одновременно звучащих нот. Если нажать большее количество клавиш одновременно - консоль выдаст ошибку.
По нажатию имитируется звук трёх струн, настроенных на одну и ту же ноту с определённой погрешностью, степень которой зависит от значения переменной detune.
От переменной rightPedal зависит имитация нажатия на правую педаль настоящего пианино - когда она не нажата, ноты перестают звучать после отпускания клавиш, если нажата - продолжают звучать, пока не затухнут.
Недостаток - подвисает, если маловато свободной оперативной памяти.

PHP/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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html>
<head>
    <meta charset="windows-1251">
    <title>Пианино</title>
    <style>
    .white_keys{
        position: absolute;
        background: white;
        border: 2px solid;
        width: 25px;
        height: 200px;
        top: 0px;
        border-radius: 0px 0px 5px 5px;
        z-index: 0;
        text-align: center;
        line-height: 200px;
        -webkit-user-select: none;
        -moz-user-select: none;
    }
    .white_keys:hover{
        background: #eee;
    }
    .black_keys{
        position: absolute;
        background: black;
        border: 2px solid;
        border-color: #333;
        width: 15px;
        height: 130px;
        top: 0px;
        border-radius: 0px 0px 7px 7px;
        z-index: 1;
        color: white;
        text-align: center;
        line-height: 130px;
        -webkit-user-select: none;
        -moz-user-select: none;
    }
    .black_keys:hover{
        background: #333;
    }
    </style>
</head>
<body bgcolor=#ccc><center><h3>Пианино</h3>
<button id=start1 onclick="playDemo(demoString1)"> Старт демо-1 </button> 
<button id=start2 onclick="playDemo(demoString2)"> Старт демо-2 </button> 
<button onmousedown="clearInterval(demo);start1.disabled=start2.disabled=false;noteDuration=1500"> Стоп демо </button><br><br>
<div id=piano style="position:absolute;left:50%;margin-left:-300px"></div>
<script>
var rightPedal = true, // Нажата ли правая педаль
transpoze = 0, // Можно использовать для изменения тональности
volume = 0.07, // Громкость
camerton = 110, // Для точной настройки стандартных частот нот
detune = 1.005, // Погрешность настройки струн
fadeOut = 1.00004, // От этого зависит время затухания клавиш
noteDuration = 1500, // Длительность нот
stereo = 50, // Стереоэффект
pan = 1.5, // Стереопанорама в пределах 0 - 2 с дробью
lastPressed = lastReleased = 0, // ID последних нажатой и отжатой клавиш
whiteIndex = 0;
myDown = false;
var frameCount = noteDuration * 44.1;
var akkord = [], str = [], fm = [], samples = [];
var symbols = "zsxdcvgbhnjm,l.;/q2w3e4rt6y7ui9o0p-[]",
demoString1 = "VVgcbWFwXG1YE29XWl9tWmtXDm1SVVrDv1XDv1JOUlVew79aw79V&1500&300",
demoString2 = "cnFyCXAOcg12DnACcg52DXAOcgIOdg5wAw0Pcg52BFAOdAYNEhgacg5wB24Obw10Dm4Cbw50DW4ObwcTdA5uCBQNGm8OdAlVDm4LDRcabw50CTB2w78SGBowdTB2QjB1EhgaMHbDvwkwecO/EhgaMHgweUIweBIYGjB5w78HEy8yd8O/BlLDvwRQw78CTgdTw78HUwZSw78EUHICDnFyCXAOcg12DnACcg52DXAOcgIOdg5wAw0Pcg52BFAOdAYNEhgacg5wB24Obw10Dm4Cbw50DW4ObwcTdA5uCBQNGm8OdAlVDm4LDRcabw50CHRsFBcab3REchQXGnBvCW1sFRgcbXREbRUYHHB0B2NmFBcaa29Cam3DvxMjJmvDv8O/w78HLzJ3&400&130",
keyAsociateEncode = "WlNYRENWR0JITkpNwrxMwr7CusK/UTJXM0U0UlQ2WTdVSTlPMFDCvcObw50=";
var keyAsociate = decodeURIComponent(escape(window.atob(keyAsociateEncode)));
for (var i = 0; i < 37; i++){
    var key = document.createElement("div");
    key.id = i + 12;
    var n = i - 12 * Math.floor(i / 12);
    var keyColor = (n == 1 || n == 3 || n == 6 || n == 8 || n == 10 ? 1 : 0);
    if(keyColor == 1){
        key.className = "black_keys";
    }else{
        key.className = "white_keys";
        whiteIndex++;
    }
    key.setAttribute("data-color", keyColor);
    key.setAttribute("data-left", (19 * keyColor + 28 * whiteIndex) - 36);
    key.style.left = key.dataset.left + "px";
    key.innerHTML = symbols[i];
    key.onmousedown = function(){
        akkord[0] = this.id;
        downKey(akkord);
    }
    key.onmouseup = function(){
        akkord[0] = this.id;
        upKey(akkord);
    }
    key.onmouseout = function(){if(myDown == true)changeStateKey(this, 0)};
    document.getElementById("piano").appendChild(key);
}
for (var i = 0; i < 60; i++){
    var amplitude = 1;
    var resonance = 1;
    var polarity = 1;
    var f = Math.pow(1.06, i); // Стандартная частота ноты с номером в i
    samples.push([]);
    for (var h = 0; h < 3; h++)str[h] = Math.pow(detune, Math.random() * 2 - 1);
    for (var j = 0; j < frameCount; j++) {
        if(Math.sin(j / camerton * f) * polarity < 0){
            polarity = -polarity;
            resonance = 1;
        }
        amplitude /= fadeOut;
        resonance /= 1.01;
        for (var h = 0; h < 3; h++)fm[h] = 50 * Math.sin( j / camerton * f * Math.floor(12 / f) * str[h]) * resonance;
        samples[i][j] = 0;
        for (var h = 0; h < 3; h++) {
            var garmony = (j + fm[h]) / camerton * f * str[h];
            samples[i][j] += Math.sin(garmony) + Math.sin(garmony * 2);
        }
        samples[i][j] *= volume * amplitude;
    }
}
document.onmousedown = function(){myDown = true};
document.onmouseup = function(){myDown = false};
document.onkeydown = function(e){
    akkord[0] = keyAsociate.indexOf(String.fromCharCode(e.which)) + 12;
    if(akkord[0] > 11)downKey(akkord);
}
document.onkeyup=function(e){
    akkord[0] = keyAsociate.indexOf(String.fromCharCode(e.which)) + 12;
    if(akkord[0] > 11)upKey(akkord);
}
function downKey(e){ // Нажатие клавиши пианино
    lastPressed = e[0].id;
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    audioCtx.sampleRate = 44100;
    var frameCount = audioCtx.sampleRate * noteDuration / 1000;
    var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
    for (var c = 0; c < e.length; c++){
        changeStateKey(document.getElementById(e[c]), 1);
        var stereoSeek = Math.floor((e[c] - 30) * stereo);
        for(lr = 0; lr < 2; lr++){
            var nowBuffering = myArrayBuffer.getChannelData(lr);
            for (var s = 0; s < frameCount; s++){
                var evolute = Math.min((lr * 2 - 1) * ((e[c] / 30) - 1) * pan + 1, 1);
                var sample = samples[parseInt(e[c]) + transpoze][s + stereoSeek * ( lr * 2 - 1)];
                if(sample)nowBuffering[s] += sample * evolute;
            }
        }
    }
    var source = audioCtx.createBufferSource();
    source.buffer = myArrayBuffer;
    source.connect(audioCtx.destination);
    source.start();
    if(rightPedal == false){
        var vPeriod = setInterval(function(){
            if(lastReleased == lastPressed){
                source.stop();
                clearInterval(vPeriod);
                lastPressed = lastReleased = 0;
            }
        }, 200);
    }
    setTimeout(function(){audioCtx.close()}, noteDuration);
}
function upKey(e){ // Отжатие клавиши пианино
    lastReleased = e[0].id;
    for (var c = 0; c < e.length; c++)changeStateKey(document.getElementById(e[c]), 0);
}
function changeStateKey(id, act){ // Установка состояния клавиш
    if(id){
        var colorBar = ["white", "#ffb", "black", "#009"]; // Цвета для разных состояний клавиш
        id.style.background = colorBar[parseInt(id.dataset.color) * 2 + act];
        id.style.top = (act * 2) + "px";
        id.style.left = (parseInt(id.dataset.left) + act) + "px";           
    }
}
function playDemo(demoString){ // Воспроизведение демок
    start1.disabled = start2.disabled = true;
    var demoArray = demoString.split("&");
    var dbs = decodeURIComponent(escape(window.atob(demoArray[0])));
    noteDuration = demoArray[1];
    var period = demoArray[2];
    var tc = 0; // time counter
    demo = setInterval(function(){
        if(dbs.charCodeAt(tc) != 255){
            var akkord = [];
            while(dbs.charCodeAt(tc) < 64){
                akkord.push(dbs.charCodeAt(tc));
                tc++;
            }
            akkord.push(dbs.charCodeAt(tc) - 64);
            tc++;
            downKey(akkord);
            setTimeout(function(){upKey(akkord)}, period * 0.75);
        }else{
            tc++;
        }
        if(tc == dbs.length){
            clearInterval(demo);
            start1.disabled = start2.disabled = false;
            noteDuration = 1500;
        }
    }, period);
}
</script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	23.03.2016, 14:07
	JSON-база c описанием 16-битных игр с приставки Sega. Всего 1012 игр - почти все что тогда существовали и даже пиратские. Описание на русском. Есть скриншоты. Мб кому-то пригодится.. Архив tar.gzip JSON свойства: `American - западное название игры Japan - название игры в Японии Year - год производства Genre - жанр игры Developer - разработчик игры Img - путь к файлу скриншота OName - другое название игры Description - описание игры` 1

@sash 89 / 87 / 49 Регистрация: 09.10.2014 Сообщений: 571
	09.06.2016, 15:25
	Мой первый jQuery-плагин https://github.com/sash003/lightBox 0

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	30.06.2016, 20:47
	Варианты UMD от James Burke на все случаи жизни. кому-то должно пригодиться 0

@tezaurismosis Администратор 9673 / 4825 / 763 Регистрация: 17.04.2012 Сообщений: 9,664 Записей в блоге: 14
	28.09.2016, 18:08
	Ваша первая игра на JavaScript и Phaser (перевод) 0

@cyb0rg_01 Фрилансер 735 / 352 / 96 Регистрация: 05.05.2014 Сообщений: 2,621
	05.10.2016, 13:28
	Наверное лучшая библиотека для создания древовидных структур, поддержка DnD, гибкость и простота использования: https://www.jstree.com/demo/ 0

@cyb0rg_01 Фрилансер 735 / 352 / 96 Регистрация: 05.05.2014 Сообщений: 2,621
	05.10.2016, 15:17
	Fedor Vlasenko, мне эта понравилась простотой и возможностями: за 6 часов 90% необходимых возможностей изучил, для полного манипулирования каталогами, файлами, настройками и прочее. 0

@8Observer8 9933 / 2936 / 494 Регистрация: 05.10.2013 Сообщений: 7,966 Записей в блоге: 226
	19.11.2017, 23:19
	Создал тему: Небольшие примеры на WebGL Если вам интересно, то подписывайтесь и выкладывайте свои примеры. 1