Posted on by Mimi Cai

Recitation 6: Processing Basics by Shuyang Cai

The motif:

My final sketch:

I picked Sol LeWitt’s “Wall Drawing 552D” (http://myartguides.com/exhibitions/sol-lewitt-wall-drawing-552d/) as the motif of my drawing. As a green hand at programming, I chose this image as the motif because it does not contain a lot of difficult shapes and is rather practical even for me. Although the shapes are not difficult, the position and size still needed to be estimated and tested, hence the process of trying to reproduce this image can be educational and exploratory. It also requires basic color dealing skills.

In Processing, I first wanted to reproduce the basic shapes in the motif. There are a triangle and two quadrilaterals. They all share one edge with one another, so the coordinate of which shape need to be paid attention to. However, in the motif, the background is a single color, which looks a little bit dull. Therefore, I decided to use different colors as the background in my processing. The basic color is red, but varies from hue and saturation, so as make the background color more dynamic and energetic. The main shapes in my final creation are basically the same as in the motif, but the background is very different, as I use different colors to make the image look more complicated. I believe that drawing in Processing was a good mean of realizing the designs, for it helps me have a better understand the sizes, structures, and positions of the components that consist of the image.

Code:

  1. size(600, 600);
  2. fill(227, 91, 57, 220);
  3. stroke(255, 255, 255);
  4. strokeWeight(0);
  5. rect(140, 0, 360, 360);
  6. stroke(0);
  7. fill(52, 175, 198, 210);
  8. triangle(180, 0,350, 80, 450, 0);
  9. stroke(10);
  10. fill(227, 217, 32, 210);
  11. beginShape();
  12. vertex(180, 0);
  13. vertex(350, 80);
  14. vertex(350, 360);
  15. vertex(140, 250);
  16. endShape(CLOSE);
  17. stroke(10);
  18. fill(209, 208, 198, 235);
  19. beginShape();
  20. vertex(350, 80);
  21. vertex(450, 0);
  22. vertex(500, 250);
  23. vertex(350, 360);
  24. endShape(CLOSE);
  25. stroke(255, 255, 255);
  26. strokeWeight(0);
  27. fill(160, 42, 24, 255);
  28. rect(0, 0, 20, 600);
  29. stroke(250, 255, 255);
  30. strokeWeight(0);
  31. fill(185, 52, 32, 250);
  32. rect(20, 0, 20, 600);
  33. stroke(255, 255, 255);
  34. strokeWeight(0);
  35. fill(214, 60, 37, 255);
  36. rect(40, 0, 20, 600);
  37. stroke(250, 255, 255);
  38. strokeWeight(0);
  39. fill(224, 105, 61, 255);
  40. rect(60, 0, 20, 600);
  41. stroke(250, 255, 255);
  42. strokeWeight(0);
  43. fill(242, 68, 42, 215);
  44. rect(80, 0, 20, 600);
  45. stroke(250, 255, 255);
  46. strokeWeight(0);
  47. fill(240, 83, 10, 230);
  48. rect(100, 0, 20, 600);
  49. stroke(250, 255, 255);
  50. strokeWeight(0);
  51. fill(227, 91, 57, 255);
  52. rect(120, 0, 20, 600);
  53. stroke(250, 255, 255);
  54. strokeWeight(0);
  55. fill(160, 42, 24, 255);
  56. rect(140, 360, 460, 20);
  57. stroke(250, 255, 255);
  58. strokeWeight(0);
  59. fill(185, 52, 32, 250);
  60. rect(140, 380, 460, 20);
  61. stroke(250, 255, 255);
  62. strokeWeight(0);
  63. fill(214, 60, 37, 255);
  64. rect(140, 400, 460, 20);
  65. stroke(250, 255, 255);
  66. strokeWeight(0);
  67. fill(224, 105, 61, 255);
  68. rect(140, 420, 460, 20);
  69. stroke(250, 255, 255);
  70. strokeWeight(0);
  71. fill(240, 83, 10, 230);
  72. rect(140, 440, 460, 30);
  73. stroke(0);
  74. strokeWeight(0);
  75. fill(227, 91, 57, 255);
  76. rect(140, 470, 460, 30);
  77. stroke(250, 255, 255);
  78. strokeWeight(0);
  79. fill(160, 42, 24, 255);
  80. rect(140, 500, 460, 20);
  81. stroke(250, 255, 255);
  82. strokeWeight(0);
  83. fill(185, 52, 32, 250);
  84. rect(140, 520, 460, 20);
  85. stroke(250, 255, 255);
  86. strokeWeight(0);
  87. fill(214, 60, 37, 255);
  88. rect(140, 540, 460, 20);
  89. stroke(250, 255, 255);
  90. strokeWeight(0);
  91. fill(224, 105, 61, 255);
  92. rect(140, 560, 460, 20);
  93. stroke(250, 255, 255);
  94. strokeWeight(0);
  95. fill(242, 68, 42, 215);
  96. rect(140, 580, 460, 20);
  97. stroke(250, 255, 255);
  98. strokeWeight(0);
  99. fill(240, 83, 10, 230);
  100. rect(500, 0, 20, 360);
  101. stroke(250, 255, 255);
  102. strokeWeight(0);
  103. fill(227, 91, 57, 255);
  104. rect(500, 0, 20, 360);
  105. stroke(250, 255, 255);
  106. strokeWeight(0);
  107. fill(160, 42, 24, 255);
  108. rect(520, 0, 20, 360);
  109. stroke(250, 255, 255);
  110. strokeWeight(0);
  111. fill(185, 52, 32, 250);
  112. rect(540, 0, 20, 360);
  113. stroke(250, 255, 255);
  114. strokeWeight(0);
  115. fill(214, 60, 37, 255);
  116. rect(560, 0, 20, 360);
  117. stroke(250, 255, 255);
  118. strokeWeight(0);
  119. fill(224, 105, 61, 255);
  120. rect(580, 0, 20, 360);

Leave a Reply