1. Recreating some works of Josef Albers
Starting p5.js
Recreating some works of Josef Albers

2. Go to https://p5js.org/download/ click on editor link

3. After reaching https://github. com/processing/p5
After reaching right click on p5-win.zip choose Save link as

4. Choose where to save the file, I chose Documents and then made a folder within that. Open and save

5. Find the file, right click and choose to Extract. Next.

6. Double Click on the p5 application (. exe file) and choose Run
Double Click on the p5 application (.exe file) and choose Run. It’s a little slow to start.

7. We will make a p5.js version of Josef Albers’ Homage to the Square
I opened this link in FireFox because I know how to use the eyedropper tools there:
Right click on top and chose menu bar.

8. In FireFox Tools/Web Developer/ EyeDropper

9. Read the color from the eyedropper

10. Break the (hex) color in 754C23 into three parts 75, 4C and 23
Break the (hex) color in 754C23 into three parts 75, 4C and 23 . Start the calculator

11. Put the calculator in Programmer mode

12. Put the calculator in hex mode, enter the red from the hex, then switch to dec(imal) mode

13. Repeat for Green and Blue
Red  75  117
Green  4C  76
Blue  23  35

14. Back in the p5 editor enter the code to create a canvas as well as the code to set the background color

15. Go to File/Save as. Choose a name and location. Then click Save

16. Click the pink arrow (Run). See the result.

17. Determine the decimal values for the next inner rectangle
I found
Red  97  151
Green  65  101
Blue  25  37

18. Add the three lines of code seen below

19. Explaining some code
noStroke() means that what is drawn next will not have an outline
fill(151, 101, 37) determines the color of the element that is drawn next
rect(50, 75, 400, 400) requests that a rectangle be drawn and that it be
Positioned 50 units from the left-hand side
Positioned 75 units from the top
Have a width of 400 units
Have a height of 400 units

20. Another fill and another rect

21. Last square

22. Now try to make this
Sorry for the bad photo. It’s from p. 133 from Josef Albers’ Interaction of Color.

23. And this
The inner rectangles are approximately twice as long as they are high.
The black “border” is about half the height of the inner rectangles.
(P. 143 from Albers’ Interaction of Color)

24. You might add noLoop(); to the end of setup since these are static images