Форум

nikkk · #1 (**permalink**) 27.08.2015, 12:58

Здравствуйте! Как средствами javascript и canvas разбить холст на случайного размера прямоугольники разных цветов?
Натолкните на мысль, пожалуйста, каким должен быть алгоритм? Или может быть кто-то такое уже делал?

рони · #2 (**permalink**) 27.08.2015, 13:24

nikkk,
разбить случайный блок случайно по вертикали или горизонтали на 2 вот весь алгоритм -- где-то на форуме было, но очень давно.

nikkk · #3 (**permalink**) 27.08.2015, 14:11

рони, Большое спасибо за ответ!
Я с JS столкнулся недавно, а до этого программировал на C++. На плюсах я представляю себе выполнение этой задачи так:

Создаем класс, описывающий прямоугольник, и в нем 4 указателя на дочерние прямоугольники:

class Rect {
Rect* rect1;
Rect* rect2;
Rect* rect3;
Rect* rect4;
int x1,x2,x3,x4,y1,y2,y3,y4;
public:
//тут методы разбиения на 4 части
}

И рекурсивно эту конструкцию разбивать до определенного порядка.

Кто знает, как такое на JS реализовать, хотя бы примерно?

рони · #4 (**permalink**) 27.08.2015, 18:47

nikkk,
неоптимальный вариант но рабочий

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<canvas width="800" height="600" id="canvas"></canvas>
 <script>
    function rnd(length)
 {
   return Math.floor(Math.random()*length)
 }

 function randomRGBComponent() {
 	return Math.round(Math.random() * 255);
 }

 function randomRGBColor() {
 	return 'rgb(' + randomRGBComponent() + ', ' + randomRGBComponent() + ', ' + randomRGBComponent() + ')';
 }
    function fn(left, top, width, height, length )
    {  var arr = [[left, top, width, height]]
       for (var i=0; i< length-1; i++)  {
          var k = rnd(arr.length),
              el = arr[k];

          if(Math.random() > .5) {
             if(el[2] < 40)  {
               i--; continue;
             };
             var w = rnd(el[2]-10)+5;
             arr[k][2] -= w ;
             arr.push([arr[k][0]+arr[k][2], arr[k][1],w, arr[k][3]])
          }
          else{
             if(el[3] < 40)  {
               i--; continue;
             };
             var h = rnd(el[3]-10)+5;
             arr[k][3] -= h ;
             arr.push([arr[k][0], arr[k][1]+arr[k][3],arr[k][2], h])
          }
       }
      return arr
    }
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var arr = fn(0, 0, canvas.width, canvas.height, 80 )
for (var i=0; i<arr.length; i++)  {
   var el = arr[i];
   c.fillStyle = randomRGBColor();
   c.fillRect(el[0], el[1], el[2], el[3]);
}

 </script>
</body>

</html>

nikkk · #5 (**permalink**) 27.08.2015, 20:02

рони,
Огромное спасибо за помощь!!!

Вот, набросал собственный вариант, может понадобится кому.
Понимаю, что написано не очень, но все же это первый опыт работы на JS

<!doctype html>
<html>
    <head>
        <title>canvasExample</title>
        <meta charset='utf-8' />
    </head>
    <body>
        <canvas height='320' width='480' style="margin: 0px; border-style: double; padding:0px;" id='example'>Reload</canvas>
        <script>
            var example = document.getElementById("example"),
                ctx     = example.getContext('2d');
                ctx.fillStyle = "#00F";
                function divide(mObj) {
                    if (mObj.order < 3){ 
                        //alert(mObj.x2 + " " + mObj.x1 + " " + mObj.y2 + " " + mObj.y1);
                        x_div = (mObj.x2-mObj.x1) /2;
                        y_div = (mObj.y2-mObj.y1) /2;
                        //x_div = Math.random()*(mObj.x2 - mObj.x1)+mObj.x1;
                        //y_div = Math.random()*(mObj.y2 - mObj.y1)+mObj.y1;
                        //левый верхний
                        mObj.rect1 = new Object();
                        mObj.rect1.x1 = mObj.x1; mObj.rect1.y1 = mObj.y1; mObj.rect1.x2 = x_div; mObj.rect1.y2 = y_div;
                        mObj.rect1.order = mObj.order+1;
                        divide(mObj.rect1);
                        //правый верхний
                        mObj.rect2 = new Object();
                        mObj.rect2.x1 = x_div; mObj.rect2.y1 = mObj.y1; mObj.rect2.x2 = mObj.x2; mObj.rect2.y2 = y_div;
                        mObj.rect2.order = mObj.order+1;
                        divide(mObj.rect2);
                        //левый нижний
                        mObj.rect3 = new Object();
                        mObj.rect3.x1 = mObj.x1; mObj.rect3.y1 = y_div; mObj.rect3.x2 = x_div; mObj.rect3.y2 = mObj.y2;
                        mObj.rect3.order = mObj.order+1;
                        divide(mObj.rect3);
                        //правый нижний
                        mObj.rect4 = new Object();
                        mObj.rect4.x1 = x_div; mObj.rect4.y1 = y_div; mObj.rect4.x2 = mObj.x2; mObj.rect4.y2 = mObj.y2;
                        mObj.rect4.order = mObj.order+1;
                        divide(mObj.rect4);
                    } else {
                        ctx.fillStyle = 'rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')';
                        ctx.fillRect(mObj.x1, mObj.y1, mObj.x2-mObj.x1, mObj.y2-mObj.y1);
                    }
                }
                var main = new Object(); //создаем основной прямоугольник
                main.x1 = 0;  main.y1 = 0; main.x2 = 480; main.y2 = 320; 
                main.order = 0;
                divide(main);
        </script>
    </body>
</html>

рони · #6 (**permalink**) 27.08.2015, 20:08

nikkk,

рони · #7 (**permalink**) 27.08.2015, 20:15

nikkk,
на всякий случай -- у вас идёт наложение блока где-то

Форум

Справочник

Discord чат

Курсы javascript