Гексагональная сетка с поворотом на 45 градусов

@Neon-z · Регистрация: 06.09.2010

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

Мне нужно реализовать такую гексагональную сетку, как в приложении, только угол надо самому регулировать. В задачу входит: нарисовать эту сетку, знать координаты самой гексы и кординаты в пикселах ее центра.
Как нарисовать обычную сетку - вполне можно найти, но как сделать ее кручение по оси Х - не нашел.

Доп инфо: реализовывать буду с помощью канвы html5 и javaScript. Если есть другие Варианты - предлагайте, выслушаю (флеш не предлагать, не подходит).

@Mysterious Light · 02.07.2013, 05:39

Я правильно понимаю, что нужно создать эффект трёхмерности?
Допустим, Вы можете нарисовать обычную сетку. Такое рисование сведётся к циклу, в теле которого будет несколько раз вызываться отрисовка отрезка line(x1,y1,x2,y2) — по одной на каждую сторону.
Потом Вы мысленно наклоняете изображение. Это соответствует тому, что точка (x,y) переходит в точку (x,y/sqrt(2),z/sqrt(2)). Но хотим вывести на экран проекцию на плоскость (xy), поэтому каждую точку (x,y/sqrt(2),z/sqrt(2)) нужно спроецировать на (xy).
Если проекция прямая или косоугольная, то изображение принципиально не изменится: сплюснется по вертикали и сдвинется по горизонтали.

Вы, видимо, хотите рассмотреть следующее: каждую точку (x,y,z) соединить с фиксированной точкой (x0,y0,z0), которая лежит по другую сторону плоскости (xy), отрезком и обозначить пересечение его с плоскостью. Я не помню, как называется такой тип проекции.
Положим x0=y0=0 и z0 ~ L — размер сетки (она же конечная) или участка, который мы хотим показать.
Тогда (x,y,z) проецируется в (x*z0/(z+z0), y*z0/(z+z0)).
Итак, точке (x,y) после наклона и поворота соответствует точка (x*z0/(y/sqrt(2)+z0), y*z0/(y+z0 sqrt(2)).

Для примера приведу псевдокод (я его не тестировал)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function getHexagon(cx,cy,r) {
    var a = [];
    for(var i=0; i<6; ++i)
      a[i] = { x : cx + r*Math.cos(Math.pi/3), y : cy + r*Math.sin(Math.pi/3) };
    return a;
}
function to3D(point,phi) {
    return { x: point.x, y: point.y*Math.cos(phi), z: point.y*Math.sin(phi) };
}
function project(point, z0) {
    if(point.z*z0 > 0) throw "Invisible";
    return { x: point.x*z0/(point.z+z0), point.y*z0/(point.z+z0) };
}
// возвращает точки гексагона с центром в (cx,cy) и радиусом r, поверн. на угол phi
function getHexagonRotated(cx,cy,r,z0,phi) {
    var points = getHexagon(cx,cy,r);
    for(var i=0; i<6; ++i)
        points[i] = project(to3D(points[i]));
    return points;
}

Добавлено через 6 минут
P.S. это называется центральной проекцией.

@Igor3D · 02.07.2013, 13:51

Сообщение от Neon-z

Если есть другие Варианты - предлагайте, выслушаю (флеш не предлагать, не подходит).

То есть это нам надо чего-то суетиться, предлагать, а Вы "готовы нас послушать"?

Ладно, будем считать Вы неудачно выразились, по делу:

Это просто перспективная проекция, поэтому ничего изобретать не надо, все очень банально

- создаете двумерный массив точек в плоскости XY (рисование сетки сводится к соединению точек линиями)
x. y меняются от -x_min до +x_max, z = 0

- поворачиваете все точки вокруг оси X на заданный угол alpha (напр 45 градусов)
y_new = y * cos(alpha) - z * sin(alpha)
z_new = z * cos(alpha) + y * sin(alpha)

- затем применяете перспективное преобразование
x_new = x * focal_len / (z + distance)
y_new = y * focal_len / (z + distance)

Где x_new, у_new - координаты в пикселях, а focal_len и distance - параметры перспективной камеры которые нужно определить. Проще всего задать коэффициент k, напр 4. Тогда

distance = x_max * k
focal_len = screen_width / 2 * (k - fabs(sin(alpha)))

Задавая различные "к" Вы меняете эффект перспективы (угол зрения камеры).
Ну и переводите в пиксели экрана

x_screen = x + screen_width / 2;
y_screen = screen_height / 2 - y;

@Neon-z · 02.07.2013, 14:09 **[ТС]**

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

То есть это нам надо чего-то суетиться, предлагать, а Вы "готовы нас послушать"? Ладно, будем считать Вы неудачно выразились,

Нет, это я к тому, что я "молодой" разработчик, и поэтому могу не знать каких-то простых вещей, которые можно использовать и будет все намного проще.

Спасибо за ответы, буду думать

@Neon-z · 05.07.2013, 11:08 **[ТС]**

Igor3D, по Вашему алгоритму я смог нарисовать гексу под углом, но как сделать, чтобы нарисовать так всю сетку?

@Mysterious Light · 05.07.2013, 21:10

Есть один артефакт, который нужно пофиксить (думаю, Вы его увидите), он связан с переходом точек через горизонт в область, которая глазом не должна видеться. Фиксится аккуратным анализом ситуации в закомментированной строке с «throw "Invisible"».

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
 
<script type="text/javascript">
/* скрипт вынес в отдельный листинг */
</script>
 
</head>
 
<body onload="DrawHexagons();">
<input type=button value=draw onclick="rotateHexagons();">
<canvas id="canvas" width="1000" height="500"></canvas>
</body>
 
</html>

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
var offsetx = 200;
var offsety = 200;
 
function line(ctx, p1, p2) {
    ctx.beginPath();
    ctx.moveTo(offsetx + p1.x, offsety + p1.y);
    ctx.lineTo(offsetx + p2.x, offsety + p2.y);
    ctx.closePath();
    ctx.stroke();
}
 
function getHexagon(cx,cy,r) {
    var a = [];
    for(var i=0; i<6; ++i)
      a[i] = { x : cx + r*Math.cos(i*Math.PI/3), y : cy + r*Math.sin(i*Math.PI/3) };
    return a;
}
 
function to3D(point,phi) {
    return { x: point.x, y: point.y*Math.cos(phi), z: point.y*Math.sin(phi) };
}
 
function project(point, z0) {
    // if(point.z*z0 > 0) throw "Invisible";
    return { x: point.x*z0/(point.z+z0), y: point.y*z0/(point.z+z0) };
}
 
// возвращает точки гексагона с центром в (cx,cy) и радиусом r, поверн. на угол phi
function getHexagonRotated(cx,cy,r,z0,phi) {
    var points = getHexagon(cx,cy,r);
    for(var i=0; i<6; ++i)
        points[i] = project(to3D(points[i], phi), z0);
    return points;
}
 
function DrawHexagon(cx,cy,r,z0,phi) {
    if(cx*cy*r*z0*phi*0 !== 0) throw "Bad arguments: "+cx+" "+cy+" "+r+" "+z0+" "+phi;
    var ctx = document.getElementById("canvas").getContext('2d');
    var points = getHexagonRotated(cx,cy,r,z0,phi);
    line(ctx, points[points.length-1], points[0]);
    for(var i=1; i<points.length; ++i) {
        line(ctx, points[i-1], points[i]);
    }
}
 
var ANGLE = 0;
 
function DrawHexagons() {
    var l = 50; // размер гексагона
    var k = Math.sqrt(3);
    for(var b = -4; b < 10; ++b) // эти два цикла можно менять
        for(var a = -2-Math.floor(b/2); a < 4-Math.floor(b/2); ++a) // отрисовка сетки
            DrawHexagon(3*l*a + k*l*b*Math.cos(Math.PI/6), k*l*b*Math.sin(Math.PI/6),
                l, 200, ANGLE);
}
 
var speed = -0.01;
function rotateHexagons() {
    // очищаем канву
    document.getElementById("canvas").width *= 1;
    ANGLE += speed;
    DrawHexagons();
    setTimeout(rotateHexagons, 100);
}

@Neon-z · 05.07.2013, 22:11 **[ТС]**

Все прекрасно, гексу под углом я смогу вывести, но у меня другая проблема: я не знаю как вывести СЕТКУ под углом. В голове есть пару алгоритмов, но они такие громоздкие (типа проходить по всем гексам, спаривать точки и т.д.), что я не приступаю к реализации.

Добавлено через 56 минут
Извиняюсь, проглупил очень сильно, вопрос закрыт) Большое спасибо)

@Mysterious Light · 22.07.2013, 20:31

Постановка задачи:

Гексогональная сетка, повёрнутая относительно оси X. Реализовать выделение ячейки, на которую наведена мышь.

Идея решения: Явно переходить между двумя плоскостями, плоскостью наблюдателя/экрана и плоскостью сетки. На плоскости сетки решить задачу как на прямой.

Переход между двумя плоскостями

Из прошлых постов (#2 и #3) имеем формулы прямого перехода

$https://www.cyberforum.ru/cgi-bin/latex.cgi?x' = \frac{x z_0}{z + z_0}, \\y' = \frac{y z_0}{z + z_0}.$

Угол между плоскостями считаем фиксированным: .

$https://www.cyberforum.ru/cgi-bin/latex.cgi?x' = \frac{x z_0}{y\operatorname{tg}\varphi + z_0}, \\y' = \frac{y z_0}{y\operatorname{tg}\varphi + z_0}.$

Разрешим это уравнение относительно (x,y)

$https://www.cyberforum.ru/cgi-bin/latex.cgi?x = \frac{x' z_0}{z_0 - y'\operatorname{tg}\varphi}, \\y = \frac{y' z_0}{z_0 - y'\operatorname{tg}\varphi}$

Это формула обратного перехода.

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
/* file rotX.js */
 
// 2D -> 3D
function to3D(point, phi) {
    return { x: point.x, y: point.y*Math.cos(phi), z: point.y*Math.sin(phi) };
}
 
// 3D -> 2D
function project(point, z0) {
    // if(point.z*z0 > 0) throw "Invisible";
    return { x: point.x*z0/(point.z+z0), y: point.y*z0/(point.z+z0) };
}
 
// 2D -> 3D
function _project(point, z0, phi) {
    var k = - z0 / (point.y*Math.tan(phi) - z0);
    return {
        x: point.x * k,
        y: point.y * k,
        z: point.y * k * Math.tan(phi)
    };
}
 
// 3D -> 2D
function from3D(point) {
    return {
        x: point.x,
        y: Math.sqrt(point.y*point.y + point.z*point.z) * (point.y>0 ? 1 : -1)
    };
}
 
// returns two (isomorphic) transformations 2D <-> 2D
function getTransformations(z0, phi) {
    return [
        function(point){ return project(to3D(point,phi),z0); },
        function(point){ return from3D(_project(point,z0,phi)); }
    ];
}

Поиск гексы по точке

Для удобной работы введём ещё одну координатную сетку (u,v), которая проходит через середины трёх гекс.
Свяжем её координаты с исходными:

JavaScript
1
2
3
4
function getHX(u,v) { return 3*l*v+3.0*l*u/2; }
function getHY(u,v) { return Math.sqrt(3)*l*u/2; }
function getHU(x,y) { return 2*y/l/Math.sqrt(3); }
function getHV(x,y) { return (x-y*Math.sqrt(3)) / (3*l); }

См. рисонок во вложении.
В первом приближении можно сказать, что косокоординатный номер гексы (round(getHU(x,y)),round(getHV(x,y))).
Во втором приближении можно рассмотреть шесть ближайших соседей первого приближения и найти, к какой гексе (к центру) ближе всего рассматриваемая точка.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function getHex(p) {
    var u  = Math.round(getHU(p.x, p.y)),
        v  = Math.round(getHV(p.x, p.y)),
        x0 = getHX(u,v)
        y0 = getHY(u,v);
    // центры соседних гекс образуют гексу, повёрнутую на pi/6 относительно гекс сетки.
    var ngbs = getHexagonRot(x0,y0,l*Math.sqrt(3),Math.PI/6); ngbs[ngbs.length] = { x: x0, y: y0};
    ngbs.sort( function(a,b) {
        return (a.x-p.x)*(a.x-p.x) + (a.y-p.y)*(a.y-p.y) - (b.x-p.x)*(b.x-p.x) - (b.y-p.y)*(b.y-p.y);
        } );
    return ngbs[0];
}

Каркас программы

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
(function() {
    var phi = -0.1;
    var z0 = 100;
    var l = 50;
    var transforms = getTransformations(z0, phi);
    var A = transforms[0], B = transforms[1];
    
    var getContext = function(){
        return document.getElementById("canvas").getContext('2d');
    };
    var ctx = null;
    
    function getMousePoint(event) { /* ... */ }
    
    function drawHex(cx, cy, r) {
        var points = getHexagon(cx, cy, r).map(A);
        if(!ctx) ctx = getContext();
        line(ctx, points[points.length-1], points[0]);
        //console.log(points[0].x);
        for(var i=1; i<points.length; ++i)
            line(ctx, points[i-1], points[i]);
    }
    
    // a — полуширина сетки
    // b — полувысота сетки
    function draw(a, b) {
        var k = Math.sqrt(3);
        var um = Math.round(2*b/k/l), vm = Math.round(a/3/l);
        if(!ctx) ctx = getContext();
        for(var u = -um; u < um; ++u)
            for(var v = -vm-Math.floor(u/2); v < vm-Math.floor(u/2); ++v)
                drawHex(getHX(u,v), getHY(u,v), l);
    }
    
    function getHX(u,v) { return 3*l*v+3.0*l*u/2; }
    function getHY(u,v) { return Math.sqrt(3)*l*u/2; }
    function getHU(x,y) { return 2*y/l/Math.sqrt(3); }
    function getHV(x,y) { return (x-y*Math.sqrt(3)) / (3*l); }
    
    function getHex(p) { /* ... */ }
    
    function MouseMoveAction(e) {
        document.getElementById("canvas").width *= 1;
        draw(600, 300);
        var p = getHex(B(getMousePoint(e)));
        ctx.strokeStyle = "red";
        drawHex(p.x, p.y, l);
        ctx.strokeStyle = "black";
    }
    
    // выведем наружу интересующие события
    window.MouseMove = MouseMoveAction;
    window.Draw = draw;
    
})();

Рабочая программа

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
 
<script type="text/javascript" src="rotX.js"></script>
<script type="text/javascript" src="hexagons.js"></script>
<script type="text/javascript" src="main.js"></script>
 
</head>
 
<body onload="">
<canvas id="canvas" width="1000" height="500" onmousemove="MouseMove(event);"></canvas>
</body>
 
</html>

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
/* file main.js */
 
var offsetx = 500;
var offsety = 200;
 
function line(ctx, p1, p2) {
    ctx.beginPath();
    ctx.moveTo(offsetx + p1.x, offsety + p1.y);
    ctx.lineTo(offsetx + p2.x, offsety + p2.y);
    ctx.closePath();
    ctx.stroke();
}
 
(function() {
    var phi = -0.1;
    var z0 = 100;
    var l = 50;
    var transforms = getTransformations(z0, phi);
    var A = transforms[0], B = transforms[1];
    
    //alert(A(B({x:2, y:1})).y);
    
    var getContext = function(){ return document.getElementById("canvas").getContext('2d'); };
    var ctx = null;
    
    function getMousePoint(event) {
        if(event.pageX !== undefined && event.pageY !== undefined)
            return {x: event.pageX - offsetx, y: event.pageY - offsety};
        if(event.clientX !== undefined && event.clientY !== undefined)
            return {x: event.clientX, y: event.clientY};
        if(event.x !== undefined && event.y !== undefined)
            return event;
        throw "Unsupported event (getMousePoint)";
    }
    
    function drawHex(cx, cy, r) {
        var points = getHexagon(cx, cy, r).map(A);
        if(!ctx) ctx = getContext();
        line(ctx, points[points.length-1], points[0]);
        //console.log(points[0].x);
        for(var i=1; i<points.length; ++i)
            line(ctx, points[i-1], points[i]);
    }
    
    function draw(a, b) {
        var k = Math.sqrt(3);
        var um = Math.round(2*b/k/l), vm = Math.round(a/3/l);
        if(!ctx) ctx = getContext();
        for(var u = -um; u < um; ++u)
            for(var v = -vm-Math.floor(u/2); v < vm-Math.floor(u/2); ++v)
                drawHex(getHX(u,v), getHY(u,v), l);
    }
    
    function getHX(u,v) { return 3*l*v+3.0*l*u/2; }
    function getHY(u,v) { return Math.sqrt(3)*l*u/2; }
    function getHU(x,y) { return 2*y/l/Math.sqrt(3); }
    function getHV(x,y) { return (x-y*Math.sqrt(3)) / (3*l); }
    
    function getHex(p) {
        var u  = Math.round(getHU(p.x, p.y)),
            v  = Math.round(getHV(p.x, p.y)),
            x0 = getHX(u,v)
            y0 = getHY(u,v);
        var ngbs = getHexagonRot(x0,y0,l*Math.sqrt(3),Math.PI/6); ngbs[ngbs.length] = { x: x0, y: y0};
        ngbs.sort( function(a,b) {
            return (a.x-p.x)*(a.x-p.x) + (a.y-p.y)*(a.y-p.y) - (b.x-p.x)*(b.x-p.x) - (b.y-p.y)*(b.y-p.y);
            } );
        return ngbs[0];
    }
    
    function MouseMoveAction(e) {
        document.getElementById("canvas").width *= 1;
        draw(600, 300);
        var p = getHex(B(getMousePoint(e)));
        ctx.strokeStyle = "red";
        drawHex(p.x, p.y, l);
        ctx.strokeStyle = "black";
    }
    
    window.MouseMove = MouseMoveAction;
    window.Draw = draw;
    
})();

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
/* file hexagons.js */
 
function getHexagon(cx,cy,r) {
    var a = [];
    for(var i=0; i<6; ++i)
      a[i] = { x : cx + r*Math.cos(i*Math.PI/3), y : cy + r*Math.sin(i*Math.PI/3) };
    return a;
}
 
function getHexagonRot(cx,cy,r,phi) {
    var a = [];
    for(var i=0; i<6; ++i)
      a[i] = { x : cx + r*Math.cos(i*Math.PI/3+phi), y : cy + r*Math.sin(i*Math.PI/3+phi) };
    return a;
}
 
// не используется в этой программе
function DrawHexagons(l, angle) {
    var k = Math.sqrt(3);
    for(var b = -4; b < 10; ++b)
        for(var a = -2-Math.floor(b/2); a < 4-Math.floor(b/2); ++a)
            DrawHexagon(3*l*a + k*l*b*Math.cos(Math.PI/6), k*l*b*Math.sin(Math.PI/6), l, 200, angle);
}
 
// возвращает точки гексагона с центром в (cx,cy) и радиусом r, поверн. на угол phi
function getHexagonRotated(cx,cy,r,z0,phi) {
    var points = getHexagon(cx,cy,r);
    for(var i=0; i<6; ++i)
        points[i] = project(to3D(points[i], phi), z0);
    return points;
}

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
/* file rotX.js */
 
// 2D -> 3D
function to3D(point, phi) {
    return { x: point.x, y: point.y*Math.cos(phi), z: point.y*Math.sin(phi) };
}
 
// 3D -> 2D
function project(point, z0) {
    // if(point.z*z0 > 0) throw "Invisible";
    return { x: point.x*z0/(point.z+z0), y: point.y*z0/(point.z+z0) };
}
 
// 2D -> 3D
function _project(point, z0, phi) {
    var k = - z0 / (point.y*Math.tan(phi) - z0);
    return {
        x: point.x * k,
        y: point.y * k,
        z: point.y * k * Math.tan(phi)
    };
}
 
// 3D -> 2D
function from3D(point) {
    return {
        x: point.x,
        y: Math.sqrt(point.y*point.y + point.z*point.z) * (point.y>0 ? 1 : -1)
    };
}
 
// returns two (isomorphic) transformations 2D <-> 2D
function getTransformations(z0, phi) {
    return [
        function(point){ return project(to3D(point,phi),z0); },
        function(point){ return from3D(_project(point,z0,phi)); }
    ];
}

P.S. у меня, правда, немного подтормаживает.

@Neon-z · 22.07.2013, 23:58 **[ТС]**

Ого) Спасибо большое)

@Igor3D · 23.07.2013, 19:48

Сообщение от Mysterious Light

Постановка задачи:

Гексогональная сетка, повёрнутая относительно оси X. Реализовать выделение ячейки, на которую наведена мышь.

Ну а почему только по X? А если по Z, Y, X (или др комбинация углов Эйлера). В любом случае мы умеем конвертировать точки в экранные координаты. Остается только проверить лежит ли точка мыши внутри нарисованного гексагона.

C++
1
2
3
4
5
6
7
8
9
10
bool Inside( const Point & pt,  const Point hex[6] )
{
  float prevSign = 0;
  for (int i = 0; i < 6; ++i) {
    float nextSign = cross(pt, hex[i], hex[(i + 1) % 6]);
    if (nextSign * prevSign < 0) return false;    // площади разного знака, точка снаружи
    prevSign = nextSign;
  }
  return true;  // точка внутри
}

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Neon-z 49 / 44 / 8 Регистрация: 06.09.2010 Сообщений: 419

	Гексагональная сетка с поворотом на 45 градусов 01.07.2013, 23:11. Показов 4557. Ответов 9 Метки нет (Все метки) Мне нужно реализовать такую гексагональную сетку, как в приложении, только угол надо самому регулировать. В задачу входит: нарисовать эту сетку, знать координаты самой гексы и кординаты в пикселах ее центра. Как нарисовать обычную сетку - вполне можно найти, но как сделать ее кручение по оси Х - не нашел. Доп инфо: реализовывать буду с помощью канвы html5 и javaScript. Если есть другие Варианты - предлагайте, выслушаю (флеш не предлагать, не подходит). Миниатюры 0

@Neon-z 49 / 44 / 8 Регистрация: 06.09.2010 Сообщений: 419
	05.07.2013, 11:08 [ТС]
	Igor3D, по Вашему алгоритму я смог нарисовать гексу под углом, но как сделать, чтобы нарисовать так всю сетку? 0

@Neon-z 49 / 44 / 8 Регистрация: 06.09.2010 Сообщений: 419
	05.07.2013, 22:11 [ТС]
	Все прекрасно, гексу под углом я смогу вывести, но у меня другая проблема: я не знаю как вывести СЕТКУ под углом. В голове есть пару алгоритмов, но они такие громоздкие (типа проходить по всем гексам, спаривать точки и т.д.), что я не приступаю к реализации. Добавлено через 56 минут Извиняюсь, проглупил очень сильно, вопрос закрыт) Большое спасибо) 0

@Neon-z 49 / 44 / 8 Регистрация: 06.09.2010 Сообщений: 419
	22.07.2013, 23:58 [ТС]
	Ого) Спасибо большое) 0