1 / 53

Lecture 7

COMP1610/DGC1330. Lecture 7. Modular Design. Balance and Repetition. Balance Repetition. Function. Balance and Repetition. Function. Balance. What is Balance? Text or graphic elements are evenly distributed which maintain a visual  balance. A. Balance and Repetition. Function.

annona
Download Presentation

Lecture 7

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. COMP1610/DGC1330 Lecture 7

  2. Modular Design Balance and Repetition • Balance • Repetition • Function Balance and Repetition Function

  3. Balance What is Balance? Text or graphic elements are evenly distributed which maintain a visual balance. A Balance and Repetition Function

  4. Balance: Symmetrical Balance A How to create Balance? There are three forms of visual balance. Symmetrical balance, also known as symmetry or formal balance. Asymmetrical balance, also known as asymmetry or informal balance. Balance and Repetition Function

  5. Balance: Symmetrical Balance Symmetrical Balance: Symmetrical balance is a mirror image balance. They may not be identical objects, but they are similar in terms of quantity, colors and other elements.  Sometimes they are completely identical A Similar content in both size (2ppl/side) Exactly the same in both side Balance and Repetition Function

  6. Balance: Symmetrical Balance A • Symmetrical balance is commonly used in architecture • It makes the architecture appear to be solemn and magnificent. • Architecture with the left and right side identical Balance and Repetition Function

  7. Balance: Symmetrical Balance A • Symmetrical balance is commonly used in logo design. • The left and right side of this example is identical. Balance and Repetition Function

  8. Balance: Symmetrical Balance A • Symmetrical balance is commonly used in landscape photography. • The upper part and lower part are having the same weight although the lower part is just a reflection. Balance and Repetition Function

  9. Balance: Symmetrical Balance A • Symmetrical balance is commonly found in nature • The plant in this example shows balance of leaves horizontally and vertically. • The leaf itself is vertically balanced. Balance and Repetition Function

  10. Balance: Symmetrical Balance A • Symmetrical balance is commonly found in human faces. • The left and right size of a face is symmetrically balance. • Although the organs on the left is not exactly the same as the right side, they are having the same weight. Balance and Repetition Function

  11. Balance: Symmetrical Balance A • Symmetrical balance is commonly found in the web design. • The left and right size of this layout is symmetrically balance. • Two sides are having similar amount of information. Balance and Repetition Function

  12. Balance: Asymmetrical Balance A Asymmetrical Balance: Asymmetrical balance refers to visual elements that do not mirror each other on either side of an axis but still having the same visual weight and interest. It is a "felt" equilibrium or balance rather than a real one in a composition. The use of asymmetry in design allows for more freedom of creativity, because there are less limitation. Elements which can create visual weight: Color, Shape, Position, Texture... Balance and Repetition Function

  13. Balance: Asymmetrical Balance A • The two sides of this example are not actually identical or similar. • The balance is archived by the number of elements and black area on both sides. • The upper part contains larger shape but fewer objects. • The lower part contains more objects but smaller shape. Balance and Repetition Function

  14. Balance: Asymmetrical Balance A • The two sides of this example are not actually identical or similar. • A lot of small squares placed on one side • A large square on the other side • Balance is formed by having the same weight of green on both sides. Balance and Repetition Function

  15. Balance: Asymmetrical Balance A • The heavy contrast on the right side of the image makes it feel imbalanced compared to the lighter one on the left side. • The increased amount of "information” (shapes, lines, etc.) on the right side contributes to this feeling. Balance and Repetition Function

  16. Balance: Asymmetrical Balance A • This example shows asymmetrical balance of color tone. • The area of warm tone: red and pink is similar to the cool tone: green and blue. Balance and Repetition Function

  17. Balance: Asymmetrical Balance A • The two sides of this example are not identical. • Balance is formed by the area consumed by elements • The weight for both sides look similar after inserting text and graphics. Balance and Repetition Function

  18. Balance: Radical Balance A Radical Balance: Radial balance occurs when design elements are laid out in a circular pattern Balance and Repetition Function

  19. Repetition B What is repetition? Repeat some aspects of the design throughout the composition. The repetitive element may be a bold font, a thick rule (line), a certain bullet, color, design element, particular format, spatial relationships, etc. It can be anything that a reader will visually recognize. Balance and Repetition Function

  20. Repetition B Two common applications of the repetition principle: Create pattern or texture Create consistency A B A B A B Balance and Repetition Function

  21. Repetition B What is Texture? Texture is perceived surface quality and the illusion of having physical texture. Every material and every support surface has its own visual texture and needs to be taken into consideration before creating a composition. Balance and Repetition Function

  22. Repetition B How to create pattern? Pattern or texture can be formed by repeating an object or element throughout a layout. There are two forms of pattern or texture. They are: exact duplication, duplication with variety Balance and Repetition Function

  23. Repetition: Exact duplication B Exact duplication: Repetition of an element throughout the layout. Each element is exactly the same. Balance and Repetition Function

  24. Repetition: Exact duplication B • The single element is: • This element itself is symmetrical balanced. • The regular repetition of this element forms this pattern. Balance and Repetition Function

  25. Repetition: Exact duplication B • The single element is: • This element is a contrast of light and dark: cyan-blue VS white. • The regular repetition of this element forms this pattern. Balance and Repetition Function

  26. Repetition: Exact duplication B • The single element is: • This element is made of different lines and shapes. • The regular repetition of this element forms this pattern. Balance and Repetition

  27. Repetition: Duplication with variety B Duplication with variety: Repetition of an element with variety . Some common variety: color, size, rotation, form... • The pattern is formed by repeating a blue line • horizontally. • The varieties are the blue tone and the thickness. Balance and Repetition Function

  28. Repetition: Duplication with variety B • The single element is: • The variety is the angle of rotation Balance and Repetition Function

  29. Repetition: Duplication with variety B • The single element is a heart • The varieties are the angle of rotation and color. Balance and Repetition Function

  30. Repetition: Duplication with variety B • The single element is a Square • The variety is the combination of color. Balance and Repetition Function

  31. Repetition: Create consistency B How to create consistency? Repetition of certain design elements in a slide or among a deck of slides will bring a clear sense of unity, consistency, and cohesiveness. Those design elements can be: font types, graphics, colors Balance and Repetition Function

  32. Repetition: Create consistency B • The repeated elements of this example are : color, logo and typography • The repetition of these elements make the products consistent in style. Balance and Repetition Function

  33. Repetition: Create consistency B • The repeated elements of this example are : • Color (black and white), • Logo (B/S/H) • The repetition of these elements make the layout consistent in the overall appearance. Balance and Repetition Function

  34. Repetition: Create consistency B • The repeated elements of this example are : • Color (Warm tone), • Typography • Dialogue box style • The repetition of these elements make the layout neat in terms of color. Balance and Repetition Function

  35. Repetition: Create consistency B • The repeated element of this example is : • Color (Red tone) • The repetition of this element throughout the layout creates a strong impact to audience: • Red is the representative color of this brand. Balance and Repetition Function

  36. Repetition: Create consistency B • The repeated elements of this example are : • Color (earth tone), • Logo • The repetition of these elements makes the design and products consistent and creates a perception in customer’s mind. Balance and Repetition Function

  37. Modular Design Balance and Repetition • Balance • Repetition • Function Balance and Repetition Function

  38. Function C Why do we need Function? Function is helpful if you want to draw a complex shape which consists of many repeated object. Tree Forest Balance and Repetition Function

  39. void tree(){ fill(boxFill); line(20, 20, 220, 4); Rect(25,80, 20, 220); ellipse(4,4, 7, 7) line(20, 20, 220, 7); ellipse(4,4, 7, 7) fill(boxFill2); line(20, 20, 250, 4); ellipse(4,4, 7, 7) line(20, 50, 220, 5); quad( 160, 80, 180, 10, 20, 10, 5, 80 ); line(20, 5, 220, 100); } Function C How to build a function? A function for drawing an object, e.g. tree, could be made up of by a sequence of Processing’s built-in commands, like line(). ellipse(4,4, 7, 7) fill(boxFill2); line(20, 20, 220, 56); quad( 16, 80, 10, 10, 299, 10, 12, 90 ); Rect(25,80, 5, 53); ellipse(4,4, 7, 7) line(20, 20, 220, 9); quad( 4, 803, 83, 10, 206, 10, 37, 80 ); ... ... Tree Balance and Repetition Function

  40. void tree(){ fill(boxFill); line(20, 20, 220, 4); Rect(25,80, 20, 220); ellipse(4,4, 7, 7) line(20, 20, 220, 7); ellipse(4,4, 7, 7) fill(boxFill2); line(20, 20, 250, 4); ellipse(4,4, 7, 7) line(20, 50, 220, 5); quad( 160, 80, 180, 10, 20, 10, 5, 80 ); line(20, 5, 220, 100); ellipse(4,4, 7, 7) fill(boxFill2); line(20, 20, 220, 56); quad( 16, 80, 10, 10, 299, 10, 12, 90 ); Rect(25,80, 5, 53); ellipse(4,4, 7, 7) line(20, 20, 220, 9); quad( 4, 803, 83, 10, 206, 10, 37, 80 ); ... ... tree(); tree(); } Function C After the code of drawing a tree is written, you do not need to think about details of this again — you can simply use the function, tree(), to draw a tree. Balance and Repetition Function

  41. void draw() { tree(); tree(); tree(); } void tree(){ fill(boxFill); line(20, 20, 220, 4); Rect(25,80, 20, 220); ellipse(4,4, 7, 7) line(20, 20, 220, 7); ellipse(4,4, 7, 7) ... ... } Function C Without function With function void draw() { //tree 1 fill(boxFill); line(20, 20, 220, 4); Rect(25,80, 20, 220); ellipse(4,4, 7, 7) line(20, 20, 220, 7); ellipse(4,4, 7, 7) ... ... //tree 2 fill(boxFill); line(20, 20, 220, 4); Rect(25,80, 20, 220); ellipse(4,4, 7, 7) line(20, 20, 220, 7); ellipse(4,4, 7, 7) ... ... //tree 3 fill(boxFill); line(20, 20, 220, 4); Rect(25,80, 20, 220); ellipse(4,4, 7, 7) line(20, 20, 220, 7); ellipse(4,4, 7, 7) ... ... } A computer runs a program one line at a time. When a function is called, the computer jumps to where the function is defined and execute the codes there, then jumps back to where it left off. Balance and Repetition Function

  42. Function C Draw one camera without using a function: //camera fill(boxFill); line(20, 20, 220, 4); Rect(25,80, 20, 220); ellipse(4,4, 7, 7) line(20, 20, 220, 7); ellipse(4,4, 7, 7) ... ... } Balance and Repetition Function

  43. Function C Draw two cameras without using function: //camera1 … fill(boxFill); line(20, 20, 220, 4); Rect(25,80, 20, 220); ellipse(4,4, 7, 7) line(20, 20, 220, 7); ellipse(4,4, 7, 7) ... ... } //camera2 … fill(boxFill); line(20, 20, 220, 4); Rect(25,80, 20, 220); ellipse(4,4, 7, 7) line(20, 20, 220, 7); ellipse(4,4, 7, 7) ... ... } Balance and Repetition Function

  44. void draw() { camera(10,10); camera(10,300); } void camera(int x, int y){ … fill(boxFill); line(20, 20, 220, 4); Rect(25,80, 20, 220); ellipse(4,4, 7, 7) line(20, 20, 220, 7); ellipse(4,4, 7, 7) ... ... } Function C Draw two cameras using function: Balance and Repetition Function

  45. Function C Advantages of using Function: • same result • code is shorter and simpler • easy to follow the program logic Balance and Repetition Function

  46. Function C 2 steps to build a function Function definition voiddrawCamera( int x, int y) { rect(….); line(…..); …. } Function call drawCamera( 20, 40);

  47. Function C Function definition: ReturnTypefunctionName(arguments ) { // Codes } Arguments Return Type Function Name voiddrawCamera( int x, int y) { rect(….); line(…..); …. } void draw (){ . drawCamera(80, 175); . . } • Function call: functionName (parameters); Balance and Repetition Function

  48. Function C Arguments vs Parameters : Technically speaking, Arguments are the variables that live inside the parentheses in the function definition, that is, “ void drawCamera(int x, int y) . ” Parameters are the values passed into the function when it is called, “drawCamera(80, 175); ” Balance and Repetition Function

  49. Function C Arguments vs Parameters : Parameters are an important part of function, because they provide flexibility. This is just like many other Processing functions. For instance, the parameters to the line() function make it possible to draw a line from any pixel on screen to any other pixel. line (25 , 30 , 40 , 90 ) ; four parameters Balance and Repetition Function

  50. Function C Arguments vs Parameters : Each parameter has a data type (such as int or float), because each parameter is a variable that’s created each time the function runs. integers drawCamera( 110 , 110 ) ; drawCamera( 180 , 115 ); Balance and Repetition Function

More Related