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

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

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

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

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

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.

We will make a p5.js version of Josef Albers’ Homage to the Square https://www.wikiart.org/en/josef-albers/homage-to-the-square-autumn-climax-1963 I opened this link in FireFox because I know how to use the eyedropper tools there: Right click on top and chose menu bar.

In FireFox Tools/Web Developer/ EyeDropper

Read the color from the eyedropper

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

Put the calculator in Programmer mode

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

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

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

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

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

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

Add the three lines of code seen below

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

Another fill and another rect

Last square

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

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)

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