Dynamic Object Pattern, HTML/Javascript

Question

I've done dynamic objects and patterns before in html, but I came accross with this exercice I am doing on the holidays vacation and can't get it right though I'm sure its pretty simple :)

The exercice asks to create an object "unit" made by 4 circles like in the images bellow, in a 500x500 canvas . Then you have to create a function called patternCircle(n) to make a pattern from that "unit". Notice that n=1 shows the "unit", n=2 2x2, n=3 3x3, n=4 4x4 pattern in the canvas.

I can successfully create the "unit" but when I use my pattern function the overlapping isnt right but the (x,y) of the circles seem correct.
I use three var, i=lines, j=rows, and side(side of the canvas, 500)/n2, Two for cicles, that create the lines and row but it doesn't create the image I'm looking for.

I really hope you can take a glance at the code and help.

The unit - formed by 4 circles with an interior circle each. The radius of the interior circle is 80% of the bigger one

Unit in a pattern of 4x4 - Create function that creates the pattern in the image using the "unit"

var screen, paint;

function inicGraf() {
  screen = document.getElementById("screen");
  paint = screen.getContext("2d");
}

function circleScreen(x, y, radius, colorLine, colorInside) {
  paint.lineWidth = 1;
  paint.strokeStyle = colorLine;
  paint.fillStyle = colorInside;
  paint.beginPath();
  paint.arc(x, y, radius, 0, 2.0 * Math.PI);
  paint.closePath();
  paint.fill();
  paint.stroke();
}

function figureCircle(x, y, side) {
  var r1 = (side / 2.0),
    r2 = (((side / 2.0) * 80.0) / 100.0);
  circleScreen(x + r1, y + side, r1, "#449779", "#449779");
  circleScreen(x + r1, y + side, r2, "#013D55", "#013D55");
  circleScreen(x + side, y + r1, r1, "#E6B569", "#E6B569");
  circleScreen(x + side, y + r1, r2, "#AA8D49", "#AA8D49");
  circleScreen(x, y + r1, r1, "#E6B569", "#E6B569");
  circleScreen(x, y + r1, r2, "#AA8D49", "#AA8D49");
  circleScreen(x + r1, y, r1, "#449779", "#449779");
  circleScreen(x + r1, y, r2, "#013D55", "#013D55");
}

function patternCircle(n) {
  var i, j, side = 500 / n;
  for (i = 0; i < n; i++) {
    for (j = 0; j < n; j++) {
      figureCircle(i * side, j * side, side);
    }
  }
}

If you could make this a working example of the problem, including your call to the function then it would be more helpful. (you can insert working snippets here on SO) — Xotic750
– Xotic750, Commented Dec 26, 2015 at 9:08

Nina Scholz · Accepted Answer · 2015-12-27 11:29:46Z

What I did:

separate the two circle styles, left/right (figureCircleLeft()) vs top/bottom (figureCircleBottom())
change of the for loop with j, running backwards with included zero value
change of the for loop with i, running inclusive n value
double the last for loop, to separate the order of the circles
write first all left circles
write the all bottom circles
changed the y position in figureCircleBottom()

Working Example:

var screen, paint;

function inicGraf() {
    screen = document.getElementById("screen");
    paint = screen.getContext("2d");
}

function circleScreen(x, y, radius, colorLine, colorInside) {
    paint.lineWidth = 1;
    paint.strokeStyle = colorLine;
    paint.fillStyle = colorInside;
    paint.beginPath();
    paint.arc(x, y, radius, 0, 2 * Math.PI);
    paint.closePath();
    paint.fill();
    paint.stroke();
}

function figureCircleLeft(x, y, side) {
    var r1 = side / 2,
        r2 = r1 * 80 / 100;
    circleScreen(x, y + r1, r1, "#E6B569", "#E6B569");
    circleScreen(x, y + r1, r2, "#AA8D49", "#AA8D49");
}

function figureCircleBottom(x, y, side) {
    var r1 = side / 2,
        r2 = r1 * 80 / 100;
    circleScreen(x + r1, y, r1, "#449779", "#449779");
    circleScreen(x + r1, y, r2, "#013D55", "#013D55");
}

function patternCircle(n) {
    var i, j, side = 500 / n;
    for (j = n; j >= 0; j--) {
        for (i = 0; i <= n; i++) {
            figureCircleLeft(i * side, j * side, side);
        }
        for (i = 0; i <= n; i++) {
            figureCircleBottom(i * side, j * side, side);
        }
    }
}
inicGraf();
patternCircle(3);

<form name="f"><input name="n" value="3" onchange="patternCircle(+document.f.n.value);"><input type="submit" value="Set Units"></form>
<canvas id="screen" width="500" height="500"></canvas>

Collectives™ on Stack Overflow

Dynamic Object Pattern, HTML/Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related