how can I draw something like this?

PhiLho

Re: how can I draw something like this?

2 years ago

Looks like the Korean flag, no?
Yes, start by drawing the blocks horizontally, we will show you how to move them.

ghkdlxld

Re: Re: how can I draw something like this?

2 years ago

Yes, it is part of Korean flag : )...wow!

and, here is the block that is horizontal....

void setup(){
fill(255);
size(600, 400);
fill(0);
//first
rect(40, 40, 100, 20);
rect(40, 70, 100, 20);
rect(40, 100, 100, 20);
//second
rect(400, 40, 40, 20);
rect(460, 40, 40, 20);
rect(400, 70, 100, 20);
rect(400, 100, 40, 20);
rect(460, 100, 40, 20);
//third
rect(40, 300, 100, 20);
rect(40, 330, 40, 20);
rect(100, 330, 40, 20);
rect(40, 360, 100, 20);
//fourth
rect(400, 300, 40, 20);
rect(460, 300, 40, 20);
rect(400, 330, 40, 20);
rect(460, 330, 40, 20);
rect(400, 360, 40, 20);
rect(460, 360, 40, 20);

}

PhiLho

Re: how can I draw something like this?

2 years ago

When I see code like that, I want to find the common parts that I can express in some code.
First attempt:

final int BAR_HEIGHT = 20;
final int LONG_BAR_WIDTH = 100;
final int SHORT_BAR_WIDTH = 45;
final int SHORT_BAR_INTERVAL = 10;
final int BAR_INTERVAL = 30;
void drawLongBar(int pos)
{
rect(0, pos * BAR_INTERVAL, LONG_BAR_WIDTH, BAR_HEIGHT);
}
void drawTwoBars(int pos)
{
rect(0, pos * BAR_INTERVAL, SHORT_BAR_WIDTH, BAR_HEIGHT);
rect(SHORT_BAR_WIDTH + SHORT_BAR_INTERVAL, pos * BAR_INTERVAL, SHORT_BAR_WIDTH, BAR_HEIGHT);
}
void setup()
{
size(600, 400);
fill(0);
// first
pushMatrix();
translate(40, 40);
drawLongBar(0);
drawLongBar(1);
drawLongBar(2);
popMatrix();
// second
pushMatrix();
translate(400, 40);
drawTwoBars(0);
drawLongBar(1);
drawTwoBars(2);
popMatrix();
// third
pushMatrix();
translate(40, 300);
drawLongBar(0);
drawTwoBars(1);
drawLongBar(2);
popMatrix();
// fourth
pushMatrix();
translate(400, 300);
drawTwoBars(0);
drawTwoBars(1);
drawTwoBars(2);
popMatrix();
}

A bit verbose, not a great progress. But there is still room for factorization.

final int BAR_HEIGHT = 20;
final int LONG_BAR_WIDTH = 100;
final int SHORT_BAR_WIDTH = 45;
final int SHORT_BAR_INTERVAL = 10;
final int BAR_INTERVAL = 30;
final int LONG_BAR = 1;
final int TWO_BARS = 2;
void drawLongBar(int pos)
{
rect(0, pos * BAR_INTERVAL, LONG_BAR_WIDTH, BAR_HEIGHT);
}
void drawTwoBars(int pos)
{
rect(0, pos * BAR_INTERVAL, SHORT_BAR_WIDTH, BAR_HEIGHT);
rect(SHORT_BAR_WIDTH + SHORT_BAR_INTERVAL, pos * BAR_INTERVAL, SHORT_BAR_WIDTH, BAR_HEIGHT);
}
void drawYiKing(int posX, int posY, int[] types)
{
pushMatrix();
translate(posX, posY);
for (int i = 0; i < types.length; i++)
{
if (types[i] == LONG_BAR)
{
drawLongBar(i);
}
else
{
drawTwoBars(i);
}
}
popMatrix();
}
void setup()
{
size(600, 400);
fill(0);
// first
drawYiKing(40, 40, new int[] { LONG_BAR, LONG_BAR, LONG_BAR });
// second
drawYiKing(400, 40, new int[] { TWO_BARS, LONG_BAR, TWO_BARS });
// third
drawYiKing(40, 300, new int[] { LONG_BAR, TWO_BARS, LONG_BAR });
// fourth
drawYiKing(400, 300, new int[] { TWO_BARS, TWO_BARS, TWO_BARS });
}

Better, no? At least, a bit more readable/explicit.
Next step, apply the rotations. Sorry, but I must go do bed, so you will wait a bit.

PhiLho

Re: how can I draw something like this?

2 years ago

OK, next step. I guess what is the last step...

final int BAR_HEIGHT = 20;
final int LONG_BAR_WIDTH = 100;
final int SHORT_BAR_WIDTH = 45;
final int SHORT_BAR_INTERVAL = 10;
final int BAR_INTERVAL = 30;
final int LONG_BAR = 1;
final int TWO_BARS = 2;
void drawLongBar(int pos)
{
rect(0, pos * BAR_INTERVAL, LONG_BAR_WIDTH, BAR_HEIGHT);
}
void drawTwoBars(int pos)
{
rect(0, pos * BAR_INTERVAL, SHORT_BAR_WIDTH, BAR_HEIGHT);
rect(SHORT_BAR_WIDTH + SHORT_BAR_INTERVAL, pos * BAR_INTERVAL, SHORT_BAR_WIDTH, BAR_HEIGHT);
}
void drawYiKing(int posX, int posY, int angle, int... types)
{
// Save transformation state
pushMatrix();
// Put in place
translate(posX, posY);
// Do the rotation
rotate(radians(angle));
// Compensate to rotate relative to the center
translate(-LONG_BAR_WIDTH / 2, -(BAR_HEIGHT * 3 + BAR_INTERVAL * 2));
// Draw the figure
for (int i = 0; i < types.length; i++)
{
if (types[i] == LONG_BAR)
{
drawLongBar(i);
}
else
{
drawTwoBars(i);
}
}
// Restore transformation state
popMatrix();
}
void setup()
{
size(600, 400);
background(255);
fill(0);
// first
drawYiKing(170, 120, -60, LONG_BAR, LONG_BAR, LONG_BAR);
// second
drawYiKing(420, 120, 60, TWO_BARS, LONG_BAR, TWO_BARS);
// third
drawYiKing(170, 280, -120, LONG_BAR, TWO_BARS, LONG_BAR);
// fourth
drawYiKing(420, 280, 120, TWO_BARS, TWO_BARS, TWO_BARS);
}

radiodario

Re: how can I draw something like this?

2 years ago

I'd draw it in inkscape, save it as a svg file, then load it with loadShape and then do whatever you want with it!

PhiLho

Re: Re: how can I draw something like this?

2 years ago

It is less fun this way!

patty2011

Re: how can I draw something like this?

2 years ago

from the way I look at it, it is LESS FUN doing it this way, really. . . .

aparis3

Re: how can I draw something like this?

2 years ago

The problem with the original code is that it has mixed in its values "the shape code" with "the coordinate transformation".

Some simple rules you can follow to draw this shape are:

1) Draw each object as if the center of the object were at screen coordinate (0,0) this is top-left corner.

2) Figure out your transformation and rotation and place your object.

3) Actually you first do the transformation and rotation and then you do your drawing code.

Here is the code as close as possible to the original one:

void setup()
{
size(600, 400);
fill(0);
float xcenter,ycenter;
float rad;
rad = 150;
xcenter = width/2;
ycenter = height/2;
//first
pushMatrix();
translate(xcenter+rad*cos(135*PI/180), ycenter-rad*sin(135*PI/180));
rotate(-45*PI/180);
rect(-50, -40, 100, 20);
rect(-50, -10, 100, 20);
rect(-50, 20, 100, 20);
popMatrix();
//second
pushMatrix();
translate(xcenter+rad*cos(45*PI/180), ycenter-rad*sin(45*PI/180));
rotate(45*PI/180);
rect(-50, -40, 40, 20);
rect( 10, -40, 40, 20);
rect(-50, -10, 100, 20);
rect(-50, 20, 40, 20);
rect( 10, 20, 40, 20);
popMatrix();
//third
pushMatrix();
translate(xcenter+rad*cos(225*PI/180), ycenter-rad*sin(225*PI/180));
rotate(225*PI/180);
rect(-50, -40, 100, 20);
rect(-50, -10, 40, 20);
rect( 10, -10, 40, 20);
rect(-50, 20, 100, 20);
popMatrix();
//fourth
pushMatrix();
translate(xcenter+rad*cos(-45*PI/180), ycenter-rad*sin(-45*PI/180));
rotate(-45*PI/180);
rect(-50, -40, 40, 20);
rect( 10, -40, 40, 20);
rect(-50, -10, 40, 20);
rect( 10, -10, 40, 20);
rect(-50, 20, 40, 20);
rect( 10, 20, 40, 20);
popMatrix();
}

PhiLho

Re: how can I draw something like this?

2 years ago

OK, I made the full flag. I found a reference of the exact specification of the flag, so I rewrote the code to follow them strictly.
patty2011, it is fun for me, at least funnier than solving a Sudoku. Little brain challenge, with rewarding result... This flag is nice, because it is precisely defined, less trivial than, say, the French one, and much simpler than, say, the flags of Buthan or Belize... http://en.wikipedia.org/wiki/Gallery_of_sovereign-state_flags

On second thought, I think it is worth a little exhibition thread...

https://forum.processing.org/topic/south-korea-flag