As we briefly discussed in class P5.JS is yet another framework in Java Script directly related to Processing. Works better on the browser and easy to integrate with HTML/CSS .
The frist exercise to do with it until Tuesday is to translate your clock code in processing to P5.JS.
You can use P5.JS as the resource and you can code and save your new clock sketch using OpenProcessing. Once everyone has an account on it I’ll add all in a class.
Due February 28, 2017 Tuesday
- Create a generative pattern using processing with two variables, two for loops.
- Do as many iterations as possible testing out various ideas and functions that you may check out from the references on this link: https://processing.org/reference/
- The size of this sketch may be, in pixels, 1200 x 1200 or higher depending on your screen resolution.
- When you think you had enough experimentations and iterations, using the below PDF library render your sketch into a PDF file: https://processing.org/reference/libraries/pdf/index.html
- Open your PDF file with Adobe Illustrator or InDesign, copying the code from your processing console, design a poster 12″x12″ juxtaposing the code with the image that you created.
- Save it as a new PDF.
Before you start this preliminary exercise, you can explore many great projects with this kind of methodology: https://processing.org/exhibition/
and if you are not feeling comfortable with the exercises that we did in class please follow the below links and go through the tutorials:
Please complete all 5 chapters at home this weekend, this will provide you with foundations to learn specific design related libraries in the upcoming weeks.
Please continue the previous exercise and
- use the CSS box model to create sections and laying out information
- create more than two classes of link
Here is the example that we worked in class:
and The CSS Box Model explained.
and CSS Link selectors.
Starting from typography entry wikipedia.
Click through 7 pages and collect and interlink content in 7 different HTML pages and style them with one CSS file.
Here is a sample.
As a general reference for HTML/CSS terminology please refer to W3Schools.
Try various typographic parameters listed here.
As a text editor you can use brackets.
and finally you can use Google Fonts for choosing and using fonts online.