3
$\begingroup$

I'm trying to draw the bio-hazard symbol for a codegolf challenge in Java, for which I've been given the following picture (later referred to as unit diagram):

enter image description here

Most existing answers in other programming languages use an approach involving a loop of 3, in which they rotate by 120 degrees and draw the circle again. In Java however, drawing each shape one by one from a fixed position would be shorter (and the shorter the better in code-golf challenges).
I want to draw the shapes in the following order:

  1. Three big circles in black
  2. Three inner circles in white
  3. The small center circle in white
  4. The three gaps at the center in white
  5. The three gaps at the outer parts in white
  6. A black ring in the middle, with three white rings along the circles we've drawn in step 2; which will create three arcs

I won't go too deep into detail of what each Java method does, but in general, most of the methods are given an $x,y$-coordinate of the top-left corner of the rectangle surrounding the oval, and a $width$ and $height$. Because of this, I want to calculate all $x,y$-coordinates of the circle given the unit diagram, while I only assume the coordinates of the very center of the screen.

Here a more visual representation of the steps and what I want to calculate (quickly made in paint, so excuse any inaccuracies):

enter image description here

So to use the Java methods, I need to know the $x,y$-coordinates of all red dots; the width/height of the purple lines; and the angles of the blue lines (for the arcs of step 6).

Assumption: the pink dot at the very center is at $x,y$-position $[300,300]$; and the units in the first picture are multiplied by 10 for my output.

Here the ones I've been able to figure out myself thus far:

  1. Width/height (purple line): This is $H$ in the unit diagram, thus $300$.
    1. The first $x,y$-coordinate (first red dot): we know that from the very center of the screen (pink dot) to the center of the large circles (yellow dot) is unit $E=110$ (green line). The yellow dot therefore is at position $[300, 300-E] → [300,190]$. From there, we can subtract halve of $H$ from both the $x$ and $y$ positions to get to coordinates of the red dot: $[300-\frac{H}{2}, 300-E-\frac{H}{2}] → [150,40]$.
    2. The second $x,y$-coordinate (second red dot): $\color{red}?$
    3. The third $x,y$-coordinate (third red dot): $\color{red}?$
  2. Width/height (purple line): This is $G$ in the unit diagram, thus $210$.
    1. The first $x,y$-coordinate (first red dot): $\color{red}?$
    2. The second $x,y$-coordinate (second red dot): $\color{red}?$
    3. The third $x,y$-coordinate (third red dot): $\color{red}?$
  3. Width/height (purple line): This is $D$ in the unit diagram, thus $60$.
    1. $x,y$-coordinate (red dot): This is the position of the pink dot, minus halve its width/height for both the $x$ and $y$ coordinates: $[300-\frac{D}{2}, 300-\frac{D}{2}] → [270,270]$.
  4. Width/height (purple lines): The width is $A$ in the unit diagram, thus $10$. The height doesn't really matter in this case, as long as it's large enough to create the entire gap, but also not too large. Although it doesn't reflect my paint drawing, we could for example use $D$ as height and draw up to the pink dot.
    1. The first $x,y$-coordinate (first red dot): Assuming the height is $D$ and we draw up to the pink dot, we know the $x,y$ coordinate is at position $[300-\frac{A}{2}, 300-D] → [295,240]$.
    2. The second/third/fourth/fifth $x,y$-coordinates / red dots (the Java method to draw irregular oriented rectangles requires all four $x,y$-coordinates of the corners): $\color{red}?$
    3. The sixth/seventh/eight/ninth $x,y$-coordinates / red dots (the Java method to draw irregular oriented rectangles requires all four $x,y$-coordinates of the corners): $\color{red}?$
  5. Width/height (purple lines): The width is $C$ in the unit diagram, thus $40$. The height is just like with step 4 not really important, so let's just use twice the $x$ coordinate of the very top, which we've calculated in step 1.1 and was $40$, so we'll use a height of $80$ here.
    1. The first $x,y$-coordinate (first red dot): Assuming the height $80$ and we draw from $y=0$, we know the $x,y$-coordinate is at position $[300-\frac{C}{2}, 0] → [280,0]$.
    2. The second/third/fourth/fifth $x,y$-coordinates / red dots (the Java method to draw irregular oriented rectangles requires all four $x,y$-coordinates of the corners): $\color{red}?$
    3. The sixth/seventh/eight/ninth $x,y$-coordinates / red dots (the Java method to draw irregular oriented rectangles requires all four $x,y$-coordinates of the corners): $\color{red}?$
  6. Width/height (purple line): Unlike the other circles, the height of the circle along which the ring is drawn isn't known in the unit diagram. We know the thickness of the ring (orange line) is $B=35$. In the unit diagram we also see that from the very center (pink dot) to the center of the circles we've drawn in step 1, the unit is $E=110$. And from the center of this circle of step 1 to the bottom of the arc is unit $A=10$. We can therefore deduct that the width/height (purple line) is $2(E-A+B)→270$.
    1. The $x,y$-coordinate (red dot): Since we know the circle is in the center and we also know it's width/height, we can easily calculate the $x,y$-coordinate as: $[300-(E-A+B), 300-(E-A+B)] → [165,165]$.
    2. We also know the thickness of the last three white rings we draw on top is $A=10$, and their width/height and $x,y$-coordinates are the exact same as the three circles we've drawn in step 2.

Can anyone help me determine the $\color{red}?$ above. Thus the unknown $x,y$ coordinates in the steps 1, 2, 4 and 5? Just general information on how I could go about calculating these is fine as well, but right now I don't know where to even begin. Also, sorry if asking all steps at once is too much for a single question. I could split it up into the unknowns of each individual step in separated questions if that's preferable.

$\endgroup$
3
  • 1
    $\begingroup$ If you study the specification carefully, you will note that in your last step, the cutoff of the inner ring is not by a line, but by a circular arc. Those blue lines in your numbered diagram #6 should not be lines. They should be circles concentric with the second set of circles that you drew in #2. $\endgroup$
    – heropup
    Sep 7, 2020 at 20:23
  • $\begingroup$ @heropup Ah, re-reading your comment I now see you meant to say the sides of these arcs should be curved instead of straight, and my approach of the arcs would therefore be invalid. Hmm, I think you're indeed correct! Thanks for letting me know. In that case step 6 could be ignored in my questions, since I should be able to figure out the sizes of the four rings, and the positions would be similar as the x,y-position of the red dots in step 2. $\endgroup$ Sep 8, 2020 at 7:23
  • $\begingroup$ @heropup I've modified my question accordingly. So 'only' the $x,y$-coordinates of the red dots in the steps 1, 2, 4, and 5 have yet to be calculated. $\endgroup$ Sep 8, 2020 at 11:41

2 Answers 2

2
$\begingroup$

I've been able to figure out all calculations. As I mentioned earlier, I've used 10 times the units of the picture in the challenge description, so those sizes are: $A=10, B=35, C=40, D=60, E=110, F=150, G=210, H=300$. I've also assumed the very center is at coordinate $[300,300]$. Using just this information alone, I had to calculate all the other sizes and coordinates, which I will go over down below. (NOTE: the Paint image I created when I asked this challenge is outdated and irrelevant for this answer; I've also split up step 6 into steps 6 and 7.)

1a) Top black circle:

Width/height: this is mentioned in the diagram: $H=300$.
$x,y$-coordinate top-left square corner: line $E$ goes from the center of the bio-hazard symbol ($[300,300]$) to the center of the black circle. So the coordinate at the center of this circle is therefore $[300, 300-E]$. From there, we can subtract halve the width/height from both the $x$ and $y$ coordinate of this center to get the coordinate of the top-left corner of the square surrounding the circle: $[300-\frac{H}{2}, 300-E-\frac{H}{2}] → [150, 40]$.

1b) Bottom-left black circle:

Width/height: again $H=300$.
$x,y$-coordinate top-left square corner: we again know the length of line $E$. We also know that the angle is at 330°. If we draw a triangle with $E$ as long side, and with the three corners as angles $90,60,30$, we can calculate the other two sides:

enter image description here

Here $a=\frac{E}{2}$ and $c=\frac{E}{2}\sqrt{3}$. So the center coordinates of this black circle is therefore $[300-\frac{E}{2}\sqrt{3}, 300+\frac{E}{2}]$. From there, we can again subtract halve the width/height from both to get the coordinate of the top-left corner of the square surrounding the circle: $[300-\frac{E}{2}\sqrt{3}-\frac{H}{2}, 300+\frac{E}{2}-\frac{H}{2}] → [54.737, 205]$

1c) Bottom-right black circle:

Width/height: again $H=300$.
$x,y$-coordinate top-left square corner: we do something similar as above, but in the other direction: $[300+\frac{E}{2}\sqrt{3}-\frac{H}{2}, 300+\frac{E}{2}-\frac{H}{2}] → [245.262, 205]$

2a) Top inner white circle:

Width/height: this is mentioned in the diagram: $G=210$.
$x,y$-coordinate top-left square corner: line $F$ goes from the center of the bio-hazard symbol ($[300,300]$) to the center of the inner white circle. So the coordinate at the center of this circle is therefore $[300, 300-F]$. From there, we can subtract halve the width/height from both the $x$ and $y$ coordinate of this center to get the coordinate of the top-left corner of the square surrounding the circle: $[300-\frac{G}{2}, 300-F-\frac{G}{2}] → [195, 45]$.

2b) Bottom-left inner white circle:

Width/height: again $G=210$.
$x,y$-coordinate top-left square corner: similar as what we did in step 1b: $[300-\frac{F}{2}\sqrt{3}-\frac{G}{2}, 300+\frac{F}{2}-\frac{G}{2}] → [65.096, 270]$

2c) Bottom-right inner white circle:

Width/height: again $G=210$.
$x,y$-coordinate top-left square corner: similar as what we did in step 1c: $[300+\frac{F}{2}\sqrt{3}-\frac{G}{2}, 300+\frac{F}{2}-\frac{G}{2}] → [324.903, 270]$

3) Center white circle:

Width/height: this is mentioned in the diagram: $D=60$.
$x,y$-coordinate top-left square corner: subtracting halve this width/height from the center coordinate is enough: $[300-\frac{D}{2}, 300-\frac{D}{2}] → [270, 270]$

4a) Top white rectangle gap at the center of the bio-hazard symbol:

Width: this is mentioned in the diagram: $A=10$.
Height: Not too irrelevant, as long as it's large enough to create the gap, and not too large to go over other thing that should remain black. So I've just used $D=60$ here.
$x,y$-coordinate top-left corner: $[300-\frac{A}{2}, 300-D] → [295, 240]$

4b) Bottom-left rectangle gap at the center of the bio-hazard symbol:

Single the rectangle is angled, the Java method fillPolygon(int[] xPoints, int[] yPoint, int amountOfPoints) doesn't need the width/height, but instead needs the four individual coordinates of the corners of this rectangle. By again creating multiple triangles with corner-angles at 90, 60, and 30 degrees with the long side known, we can calculate the other sides. The calculations of the four points in the order I've used them in the Java method are:
$[300-\frac{D}{2}\sqrt{3}-\frac{A}{4}, 300+\frac{D}{2}-\frac{A}{4}\sqrt(3)] → [245.528, 325.669]$
$[300-\frac{D}{2}\sqrt{3}+\frac{A}{4}, 300+\frac{D}{2}+\frac{A}{4}\sqrt(3)] → [250.538, 334.330]$
$[300+\frac{A}{4}, 300+\frac{A}{4}\sqrt{3}] → [302.5, 304.330]$
$[300-\frac{A}{4}, 300-\frac{A}{4}\sqrt{3}] → [297.5, 295.669]$

4c) Bottom-right rectangle gap at the center of the bio-hazard symbol:

Likewise as step 4b:
$[300-\frac{A}{4}, 300+\frac{A}{4}\sqrt{3}] → [297.5, 304.220]$
$[300+\frac{D}{2}\sqrt{3}-\frac{A}{4}, 300+\frac{D}{2}+\frac{A}{4}\sqrt{3}] → [349.461, 334.330]$
$[300+\frac{D}{2}\sqrt{3}+\frac{A}{4}, 300+\frac{D}{2}-\frac{A}{4}\sqrt{3}] → [354.461, 325.669]$
$[300+\frac{A}{4}, 300-\frac{A}{4}\sqrt{3}] → [302.5, 295.669]$

5a) Top big white gap:

Width: this is mentioned in the diagram: $C=40$.
Height: Not too irrelevant, as long as it's large enough to create the gap, and not too large to go over other thing that should remain black. So I've just used $2\times\text{1a.y}=80$ here.
$x,y$-coordinate top-left corner: $[300-\frac{C}{2}, 0] → [280, 0]$ The $0$ isn't calculated, it was just easier to use (as mentioned earlier, the height is mostly irrelevant).

5b) Bottom-left big rectangle gap:

Similar as step 4b for the first two points:
$[300-\frac{H}{2}\sqrt{3}-\frac{C}{4}, 300+\frac{H}{2}-\frac{C}{4}\sqrt{3}] → [30.192, 432.679]$
$[300-\frac{H}{2}\sqrt{3}+\frac{C}{4}, 300+\frac{H}{2}+\frac{C}{4}\sqrt{3}] → [50.192, 467.320]$

For the other two we can't base it on the center of the screen like we did in step 4b, but instead we'll calculate it based on the two points we've just calculated:

$[300-\frac{H}{2}\sqrt{3}+\frac{C}{4}+\frac{80}{2}\sqrt{3}, 300+\frac{H}{2}+\frac{C}{4}\sqrt{3}-\frac{80}{2}] → [119.474, 427.320]$ $[300-\frac{H}{2}\sqrt{3}-\frac{C}{4}+\frac{80}{2}\sqrt{3}, 300+\frac{H}{2}-\frac{C}{4}\sqrt{3}-\frac{80}{2}] → [99.474, 392.679]$
(where the $80$ is the $2\times\text{1a.y}$ mentioned in step 5a)

5c) Bottom-right big rectangle gap:

Likewise as step 5b:
$[300+\frac{H}{2}\sqrt{3}-\frac{C}{4}, 300+\frac{H}{2}+\frac{C}{4}\sqrt{3}] → [549.807, 467.320]$
$[300+\frac{H}{2}\sqrt{3}+\frac{C}{4}, 300+\frac{H}{2}-\frac{C}{4}\sqrt{3}] → [569.807, 432,679]$
$[300+\frac{H}{2}\sqrt{3}+\frac{C}{4}-\frac{80}{2}\sqrt{3}, 300+\frac{H}{2}-\frac{C}{4}\sqrt{3}-\frac{80}{2}] → [500.525, 392.679]$
$[300+\frac{H}{2}\sqrt{3}-\frac{C}{4}-\frac{80}{2}\sqrt{3}, 300+\frac{H}{2}+\frac{C}{4}\sqrt{3}-\frac{80}{2}] → [480.525, 427.320]$

6) Black ring that will form the arcs:

Thickness: this is mentioned in the diagram: $B=35$.
Width/height: this can be calculated with the units in the diagram: $2(E-A+B) → 270$, after which we'll remove the thickness: $2(E-A+B)-B → 235$ (halve the thickness at both sides)
$x,y$-coordinate top-left corner: we simply subtract halve the width/height from the center coordinate: $[300-\frac{2(E-A+B)-B}{2}, 300-\frac{2(E-A+B)-B}{2}] → [182.5, 182.5]$

7) White ring inside the inner circles to form the arcs:

Thickness: this is mentioned in the diagram: $A=10$.
Width/height: this is the same as step 2a: $G=210$, but with this thickness removed: $G-A → 200$
$x,y$-coordinate top-left corner: these are the same calculations as in step 2a, but with the adjusted width/height $G-A$ instead of $G$:
$[300-\frac{G-A}{2}, 300-F-\frac{G-A}{2}] → [200, 50]$
$[300-\frac{F}{2}\sqrt{3}-\frac{G-A}{2}, 300+\frac{F}{2}-\frac{G-A}{2}] → [65.096, 270] → [70.096, 275]$
$[300+\frac{F}{2}\sqrt{3}-\frac{G-A}{2}, 300+\frac{F}{2}-\frac{G-A}{2}] → [324.903, 270] → [329.903, 275]$

Rounding all those values we've calculated to integers ('half up') we get the code seen in this codegolf answer of mine, with the following output:

https://i.sstatic.net/kAaaf.png

Or with each step a different color:

enter image description here

$\endgroup$
0
$\begingroup$

Here there is an answer: https://www.reddit.com/r/geogebra/comments/on54iw/how_to_create_such_a_biohazard_symbol_in_geogebra/

If you know how to use geogebra, the solution in this link is very simple and elegant: https://www.geogebra.org/classic/uwc2xt4y

$\endgroup$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .