Image:
This image was quite meaningful for me. It was one of the first digital drawings I have ever produced. I choose this image as a way for me to look back at my past self and reflect. Furthermore, this image was one of the simpler ones compared to the rest. Ask the image, had to have geometric shapes. This image matched the requirement. The other images were way too complex and time-consuming to make on Processing.
Rough Sketch:
I did not want to spend too much time on the sketch portion, as I made the image myself and already had an idea of how I wanted to build it on processing.
Process:
The process for me was quite clear. First, have a solid background. Second, on top of the background make many circles are stacked upon each other. Each with a variety of colors. Third, make those circles transparent. That way the audience is able to see a more complex color and pattern. Fourth, use the code (mouseX, mouseY), to have accurate coordinates for the pyramids. Fifth, using different colors and shades, make the pyramids look 3D. Lastly, use different shapes and sizes to build the ground, where the pyramids will sit.
Code:
void setup () {
size(600, 600);
}
void draw () {
background(115, 74, 229);
println(mouseX, mouseY);
noStroke();
fill(201, 192, 227, 100);
ellipse(280, 50, 200, 200);
noStroke();
fill(227, 223, 240, 100);
ellipse(310, 70, 100, 100);
noStroke();
fill(198, 213, 245, 100);
ellipse(200, 100, 100, 100);
noStroke();
fill(255, 255, 255, 100);
ellipse(250, 200, 300, 300);
noStroke();
fill(219, 247, 255, 100);
ellipse(250, 100, 100, 100);
noStroke();
fill(193, 231, 242, 100);
ellipse(222, 800, 150, 150);
noStroke();
fill(255, 226, 242, 100);
ellipse(230, 150, 150, 150);
noStroke();
fill(255, 192, 227, 100);
ellipse(220, 110, 150, 150);
noStroke();
fill(255, 192, 227, 100);
ellipse(242, 200, 170, 170);
noStroke();
fill(234, 192, 257, 100);
ellipse(210, 200, 180, 180);
noStroke();
fill(243, 192, 227, 100);
ellipse(300, 100, 180, 180);
noStroke();
fill(232, 192, 257, 100);
ellipse(250, 1700, 140, 140);
noStroke();
fill(210, 192, 227, 100);
ellipse(260, 250, 160, 160);
noStroke();
fill(234, 192, 257, 100);
ellipse(270, 350, 170, 170);
noStroke();
fill(213, 192, 257, 100);
ellipse(223, 270, 140, 140);
noStroke();
fill(223, 192, 227, 100);
ellipse(240, 200, 170, 170);
noStroke();
fill(212, 192, 227);
ellipse(260, 300, 200, 200);
noStroke();
fill(241, 192, 227);
ellipse(300, 240, 170, 170);
noStroke();
fill(211, 192, 227);
ellipse(267, 200, 190, 190);
noStroke();
fill(231, 192, 227);
ellipse(278, 250, 190, 190);
fill(203, 176, 74);
quad(0, 396, 38, 408, 88, 397, 192, 600);
fill(203, 176, 74);
triangle(0, 395, 0, 600, 193, 600);
fill(203, 176, 74);
quad(85, 414, 458, 388, 528, 600, 176, 600);
fill(203, 176, 74);
quad(388, 528, 536, 407, 600, 600, 522, 600);
fill(203, 176, 74);
triangle(458, 388, 537, 409, 473, 463);
fill(203, 176, 74);
triangle(527, 410, 600, 387, 600, 600);
fill(255, 255, 255);
ellipse(87, 60, 5, 5);
fill(255, 255, 255);
ellipse(526, 210, 5, 5);
fill(255, 255, 255);
ellipse(483, 128, 5, 5);
fill(255, 255, 255);
ellipse(522, 153, 5, 5);
fill(255, 255, 255);
ellipse(487, 40, 5, 5);
fill(255, 255, 255);
ellipse(83, 315, 5, 5);
fill(255, 255, 255);
ellipse(278, 80, 5, 5);
fill(255, 255, 255);
ellipse(523, 21, 5, 5);
fill(255, 255, 255);
ellipse(293, 41, 5, 5);
fill(255, 255, 255);
ellipse(384, 173, 5, 5);
fill(255, 255, 255);
ellipse(203, 154, 5, 5);
stroke(255);
line(523, 22, 487, 41);
stroke(255);
line(484, 130, 487, 41);
stroke(255);
line(484, 130, 522, 154);
stroke(255);
line(526, 213, 522, 154);
stroke(255);
line(526, 213, 484, 130);
stroke(255);
line(383, 177, 278, 82);
stroke(255);
line(383, 177, 293, 42);
stroke(255);
line(293, 42, 278, 82);
stroke(255);
line(202, 155, 83, 316);
stroke(255);
line(88, 62, 202, 155);
noStroke();
fill(245, 205, 59);
triangle(106, 459, 340, 445, 223, 200);
fill(162, 135, 36);
triangle(74, 411, 106, 459, 223, 200);
fill(162, 135, 36);
triangle(251, 259, 303, 185, 264, 288);
fill(245, 201, 42);
quad(264, 288, 330, 425, 451, 419, 303, 185);
fill(240, 209, 97);
triangle(244, 481, 300, 371, 355, 474);
fill(162, 135, 36);
triangle(244, 481, 300, 371, 233, 455);
}
Product:
Compared to the original photograph, it is definitely less sophisticated. But with the time given, I felt that I still made sure to include the major elements from the original photograph. Although, the constellations and pyramids are missing quite a few and the background looks a little plain. All in all, it still shows a resemblance to my original image. From the picture I drew, I changed some spots of the constellations and the design on them. But the three big and most important pyramids are still standing and there on my Processing image. I think making it to processing is definitely more challenging. Compared to Procreate, the effort that the producer had to go through to make an excellent picture is definitely more. It just makes me more grateful, how I have apps such as Procreate, which already have coded elements implemented in there for me. In conclusion, Processing definitely made me realize the amount of effort behind a drawing app that has the ability to create excellent artwork.