CREATIVE CODING
Process
It is my first time to do coding. First of all, I do not know how to get the pixel position. So, I created 400pixel x 400pixel artwork board for circle and arcs work and 800pixel x 400pixel for irregular bands. Secondly, I traced the work to get the pixel position and shape size. Lastly, Color picker in AI let me get the Hexadecimal color value from original artwork.
Final Work
Questions
Since this is my first coding work, I am wondering there is more easy way to get the pixel position without using Ai or Photoshop. Also, I would like to know how to make the irregular line more smoother. When I trace the irregular line from AI, the line has more smoother shape unlikewise the p5.js is more shapen.
Code
Link https://editor.p5js.org/jdenkim/sketches/VO_Oudpl6
function setup() {
createCanvas(800, 800);
}
function draw() {
background(255);;
fill(‘#546288’);
noStroke();
square(0, 0, 400);
fill(‘#77567c’);
noStroke();
circle(200, 200, 480);
fill(‘#c14748’);
noStroke();
circle(200, 200, 400);
fill(‘#eb5342’);
noStroke();
circle(200, 200, 370);
fill(‘#5b9c4c’);
noStroke();
circle(200, 200, 325);
fill(‘#be2628’);
noStroke();
circle(200, 200, 250);
fill(‘#285084’);
noStroke();
circle(200, 200, 210);
fill(‘#fcce0b’);
noStroke();
circle(200, 200, 140);
fill(‘#fcce0b’);
noStroke();
square(400, 0, 400);
fill(‘#77567c’);
noStroke();
arc(400, 400, 1110, 1110, PI + HALF_PI, 0 );
fill(‘#5b9b4c’);
noStroke();
arc(400, 400, 1040, 1040, PI + HALF_PI, 0 );
fill(‘#ea5342’);
noStroke();
arc(400, 400, 960, 960, PI + HALF_PI, 0 );
fill(‘#bd2628’);
noStroke();
arc(400, 400, 880, 880, PI + HALF_PI, 0 );
fill(‘#77567c’);
noStroke();
arc(400, 400, 800, 800, PI + HALF_PI, 0 );
fill(‘#5b9b4c’);
noStroke();
arc(400, 400, 720, 720, PI + HALF_PI, 0 );
fill(‘#fbcd0b’);
noStroke();
arc(400, 400, 640, 640, PI + HALF_PI, 0 );
fill(‘#285084’);
noStroke();
arc(400, 400, 560, 560, PI + HALF_PI, 0 );
fill(‘#ea5342’);
noStroke();
arc(400, 400, 480, 480, PI + HALF_PI, 0 );
fill(‘#77567c’);
noStroke();
arc(400, 400, 400, 400, PI + HALF_PI, 0 );
fill(‘#285084’);
noStroke();
arc(400, 400, 320, 320, PI + HALF_PI, 0 );
fill(‘#bd2628’);
noStroke();
arc(400, 400, 240, 240, PI + HALF_PI, 0 );
fill(‘#5b9b4c’);
noStroke();
arc(400, 400, 160, 160, PI + HALF_PI, 0 );
fill(‘#ea5342’);
noStroke();
arc(400, 400, 80, 80, PI + HALF_PI, 0 );
fill(‘#ea5443’);
noStroke();
rect(0, 400, 800, 100);
fill(‘#285084’);
beginShape();
curveVertex(0, 500);
curveVertex(0, 500);
curveVertex(0, 463);
curveVertex(101, 420);
curveVertex(237, 475);
curveVertex(338, 448);
curveVertex(421, 411);
curveVertex(483, 443);
curveVertex(523, 463);
curveVertex(572, 436);
curveVertex(622, 416);
curveVertex(702, 455);
curveVertex(751, 431);
curveVertex(800, 415);
curveVertex(800, 415);
curveVertex(800, 500);
curveVertex(800, 500);
endShape();
fill(‘#78577d’);
noStroke();
rect(0, 500, 800, 100);
fill(‘#BE2829’);
beginShape();
curveVertex(0, 600);
curveVertex(0, 600);
curveVertex(0, 570);
curveVertex(0, 570);
curveVertex(67, 539);
curveVertex(139, 566);
curveVertex(191, 526);
curveVertex(231, 545);
curveVertex(270, 563);
curveVertex(313, 531);
curveVertex(355, 513);
curveVertex(412, 549);
curveVertex(430, 538);
curveVertex(465, 507);
curveVertex(525, 532);
curveVertex(587, 550);
curveVertex(610, 526);
curveVertex(637, 509);
curveVertex(652, 514);
curveVertex(652, 514);
curveVertex(708, 532);
curveVertex(743, 515);
curveVertex(800, 532);
curveVertex(800, 532);
curveVertex(800, 600);
curveVertex(800, 600);
endShape();
fill(‘#FBCD11’);
noStroke();
rect(0, 600, 800, 100);
fill(‘#5B9B4C’);
beginShape();
curveVertex(0, 700);
curveVertex(0, 700);
curveVertex(0, 663);
curveVertex(0, 663);
curveVertex(200, 609);
curveVertex(379, 655);
curveVertex(453, 675);
curveVertex(562, 643);
curveVertex(667, 614);
curveVertex(800, 657);
curveVertex(800, 657);
curveVertex(800, 700);
curveVertex(800, 700);
endShape();
fill(‘#285084’);
noStroke();
rect(0, 700, 800, 100);
fill(‘#78577D’);
beginShape();
curveVertex(0, 800);
curveVertex(0, 800);
curveVertex(0, 755);
curveVertex(0, 755);
curveVertex(57, 720);
curveVertex(116, 764);
curveVertex(155, 793);
curveVertex(201, 746);
curveVertex(247, 706);
curveVertex(294, 754);
curveVertex(342, 793);
curveVertex(387, 746);
curveVertex(428, 706);
curveVertex(468, 750);
curveVertex(503, 794);
curveVertex(541, 745);
curveVertex(577, 706);
curveVertex(632, 785);
curveVertex(657, 742);
curveVertex(691, 708);
curveVertex(721, 742);
curveVertex(741, 787);
curveVertex(771, 748);
curveVertex(800, 709);
curveVertex(800, 800);
curveVertex(800, 800);
endShape();
}
//
rect(200,200,100,50)
