1 / 24

Starting p5.js

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.js-editor/releases right click on p5-win.zip choose Save link as.

wneil
Download Presentation

Starting p5.js

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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.js-editor/releases 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. It’s a little slow to start.

  7. 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.

  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 . 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

More Related