slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Lecture 6: Visual focus and looping PowerPoint Presentation
Download Presentation
Lecture 6: Visual focus and looping

Loading in 2 Seconds...

play fullscreen
1 / 59

Lecture 6: Visual focus and looping - PowerPoint PPT Presentation


  • 125 Views
  • Uploaded on

COMP1610/DGC1330. Lecture 6: Visual focus and looping. Looping. Visual Focus. Introduction Contrast Isolation Absence of Visual Focus. Looping. Introduction: Create Focal point. What is Focal point?

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Lecture 6: Visual focus and looping' - jalena


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

COMP1610/DGC1330

Lecture 6:

Visual focus and looping

slide2
Looping

Visual Focus

  • Introduction
  • Contrast
  • Isolation
  • Absence of Visual Focus
  • Looping
introduction create focal point
Introduction: Create Focal point

What is Focal point?

A Focal Point focuses specifically on a point of interest which makes an object/element unique.

How to create Focal point?

In visual communication, there are some principles about creating a focal point for a layout.

They are: Contrast, Isolation, Placement and absence of Focal Point

A

Create Visual Focus

Looping

contrast
Contrast

What is contrast?

Contrast is the difference in visual properties that

makes an object (or its representation in an image)

distinguishable from other objects and backgrounds.

B

Create Visual Focus

Looping

contrast1
Contrast

How to create contrast?

There are different ways to create contrast.

Here are some common ways:

Scale

Color

Shape

Direction

B

Create Visual Focus

Looping

contrast scale
Contrast: Scale

What is contrast of scale?

Contrast of scale means using relative sizes of different objects to draw attention.

B

Create Visual Focus

Looping

contrast scale1
Contrast: Scale

B

  • Scale can imply meaning as in this image.
  • The larger circle dominates the smaller circle.
  • It imposes its will, exerting its influence on the smaller circle.
  • The smaller circle seems to be afraid or timid.

Create Visual Focus

Looping

contrast scale2
Contrast: Scale

B

  • Title on the left has the same word size.
  • The title on the right has applied the scale contrast.
  • The size of the “WORLD” is greater than others, which makes it become a focal point.

Create Visual Focus

Looping

contrast scale3
Contrast: Scale

B

  • Putting a big fish in a small container makes it even bigger.
  • Putting a little fish in a large container makes it look smaller.

Create Visual Focus

Looping

contrast color
Contrast: Color

What is contrast of color?

Use the combination of colors to show unlikeness or differences.

B

Create Visual Focus

Looping

contrast color1
Contrast: Color

B

  • The dominant color is green.
  • The appearance of a yellow object brings unlikeness and becomes a focal point.

Create Visual Focus

Looping

contrast color2
Contrast: Color

B

  • The dominant tone is a light tone: pale grey and white.
  • An object in deep color (deep grey) will draw attention.

Create Visual Focus

Looping

contrast color3
Contrast: Color

B

  • Colorful object can easily stand out with a black and white background.
  • Contrast is made by the combination of the mono tone and color.

Create Visual Focus

Looping

contrast color4
Contrast: Color

B

  • The dominant color of this layout is grayscale d
  • The block in red color is the focal point of this layout.

Create Visual Focus

Looping

contrast color5
Contrast: Color

B

  • Light in the dark helps bring out the contrast
  • A burning candle shines in the dark

Create Visual Focus

Looping

contrast shape
Contrast: Shape

What is contrast of shape?

Use different types of shapes to emphasis the uniqueness.

B

Create Visual Focus

Looping

contrast shape1
Contrast: Shape

B

  • Human legs are in organic form, the form of the fence is in regular and edgy form.
  • The curvature of the organic form stands out from the edgy form.

http://ezakarau.wordpress.com/

Create Visual Focus

Looping

contrast shape2
Contrast: Shape

B

  • The round shaped sculpture and the edgy window frames
  • The curvature of the organic form stands out from the edgy form.

http://www.erco.com/projects/simula/square_and_4894/en/en_square_and_sim_1.php

Create Visual Focus

Looping

contrast shape3
Contrast: Shape

What is contrast of direction?

Use opposite direction to break the rule of reading

B

Create Visual Focus

Looping

contrast direction
Contrast: Direction

B

  • Put an object you want to highlight in front of an arrow that shows different direction.

http://www.erco.com/projects/simula/square_and_4894/en/en_square_and_sim_1.php

Create Visual Focus

Looping

contrast direction1
Contrast: Direction

B

  • All the fish face the same direction except the one in orange.
  • The orange fish caught the audience attention.

Create Visual Focus

Looping

isolation
Isolation

What is isolation?

Isolation means most of the elements on a layout are

grouped closely, alongside an object by itself stands out as a

focal point.

C

Create Visual Focus

Looping

contrast isolation
Contrast: Isolation

C

  • The bird being isolated is the focal point.
  • The isolated bird forms a contrast to the crowded group.
  • This arouses the audiences’ interest by making them to think why the bird is alone.

http://wrissentace.blogspot.com/2011/06/quotes-on-loneliness-in-life.html

Create Visual Focus

Looping

contrast isolation1
Contrast: Isolation

C

  • This is a layout of a web site.
  • The single photo at the right corner stands out from the group of photos on top.
  • The photo is about the feature of this website, it draws attention by using the method of ‘isolation’.

http://wrissentace.blogspot.com/2011/06/quotes-on-loneliness-in-life.html

Create Visual Focus

Looping

contrast isolation2
Contrast: Isolation

C

  • The two options above formed a group of similar options.
  • “Cancel” is another option.
  • Users can quickly sort out an option other than the above by this isolation.

Create Visual Focus

Looping

absence of visual focus
Absence of Visual Focus

Sometimes there is still a focal point even if no focal points are found.

Focal point is not a necessity in a work of art.

Sometimes there are works without focal point.

An art work may not have a central character or shape bringing you to a point. 

D

Create Visual Focus

Looping

absence of visual focus1
Absence of Visual Focus

D

  • This example illustrates how the absence of a focal point creates visual interest.
  • No specific element(s) stands out in this example.
  • Even with no focal point, the picture is still able to attract people’s attention.

Create Visual Focus

Looping

absence of visual focus2
Absence of Visual Focus

D

  • This example illustrates how the absence of a focal point creates visual interest.
  • The search results of albums or images make use of this principle.
  • The visual interest is shared to every element.
  • It creates visual interest.

Create Visual Focus

Looping

absence of visual focus3
Absence of Visual Focus

D

  • This example illustrates how the absence of a focal point creates visual interest.
  • Everyone in this photo has equal visualinterest.
  • It attracts the audience to read along the layout and seek for an interest point.

Create Visual Focus

Looping

slide30
Looping

Visual Focus

  • Contrast
  • Isolation
  • Placement
  • Absence of Visual Focus
  • Looping

Create Visual Focus

Looping

looping
Looping

E

An example on Looping:

Peter loves doing exercise, and completes 10 rounds each time.

He uses a method to record it.

Create Visual Focus

Looping

looping1
Looping

E

Demonstration of Looping:

His method:

Use a memo to record the number of rounds he finished.

Starting from 0.

He adds 1 after finishing a round

Create Visual Focus

Looping

looping2
Looping

E

Demonstration of Looping:

In the beginning, it is 0.

0

START!

Create Visual Focus

Looping

looping3
Looping

E

Demonstration of Looping:

After he finished the first round, he adds 1 to it.

1

Continue...

Create Visual Focus

Looping

looping4
Looping

E

Demonstration of Looping:

After he finished the second round, he adds1 to it.

2

Continue...

Create Visual Focus

Looping

looping5
Looping

E

Demonstration of Looping:

He continues…

3

4

5

Create Visual Focus

Looping

looping6
Looping

E

Demonstration of Looping:

He continues until it is 10.

10

Stop!!!!

Create Visual Focus

Looping

looping7
Looping

E

What is FOR loop?

The statements in the for loop repeat continuously for a specific number of times.

10

Create Visual Focus

Looping

looping8
Looping

E

What is FOR loop?

Statement (action)

Run a round

Initialization

(beginning status)

Start from 0

0

10

+1

Terminating Condition

(how to stop?)

If it is 10, stop!

Update

(how to count?)

Each round, add 1.

Create Visual Focus

Looping

looping9
Looping

E

Syntax of FOR loop:

for( ; ; ) {

}

0

10

+1

Create Visual Focus

Looping

looping10
Looping

E

Syntax of FOR loop:

for(inti=0 ; i<10 ; i=i+1 ) {

print (i) ;

}

Output:

Create Visual Focus

Looping

looping11
Looping

E

Syntax of FOR loop:

for(Initialization ; Condition ; Update ) {

Statement(s) ;

}

Statement:

The code between the braces, { and } , is called a block. This is the code that will be repeated on each iteration of the for loop.

Create Visual Focus

Looping

looping12
Looping

E

Syntax of FOR loop:

for ( int i=0 ; i<10 ; i=i+1 ) {

print(i) ;

}

Initialization :

The variable name i is frequently used, but there’s really nothing special about it.

We declare the variable i to be 0.

Create Visual Focus

Looping

looping13
Looping

E

Syntax of FOR loop:

for ( int i=0 ; i<10 ; i=i+1 ) {

print(i) ;

}

Condition :

Test whether i is less than 10 or not.

Create Visual Focus

Looping

looping14
Looping

E

Syntax of FOR loop:

for ( int i=0 ; i<10 ; i=i+1 ) {

print(i) ;

}

Update :

i will be increased 1 at each iteration.

Create Visual Focus

Looping

looping15
Looping

E

Notes on “Condition”:

Always compares two values with a relational operator.

  • The most common relational operators are:
      • > Greater than
      • < Less than
      • >= Greater than or equal to
      • <= Less than or equal to
      • == Equal to
      • != Not equal to

Create Visual Focus

Looping

looping16
Looping

E

Notes on “Condition”: :

The relational expression always evaluates to true or false.

For example,

the expression “5 > 3” is true.

the expression “5 < 3” is false.

When the evaluation is true, the code inside the block is run, and when itis false, the code inside the block is not run and the “for loop” ends.

Create Visual Focus

Looping

looping17
Looping

E

Note on “Update”:

i= i+1;

Meaning:

“ increment i by 1 ” or

“ add 1 to the current value of i ”

for each iteration.

Create Visual Focus

Looping

looping18
Looping

E

Note on “Update”:

0

beginning

i = 0

i = i + 1 ;

Iteration 1

i = 0 + 1;

now

i = 1

Next

iteration

Create Visual Focus

Looping

looping19
Looping

E

Note on “Update”:

1

beginning

i = 1

i = i + 1 ;

Iteration 2

i = 1 + 1;

now

i = 2

Next

iteration

Create Visual Focus

Looping

looping20
Looping

E

Note on “Update”:

We also have:

i = i – 1 ;

i = i * 2 ;

i = i / 2 ;

Create Visual Focus

Looping

looping21
Looping

Suppose you are asked to draw the following figure. How to do it?

450

200

50

looping22
Looping

E

Example:

Void setup(){

size(450,200);

smooth();

strokeWeight(5);

}

void draw(){

for ( inti=0 ; i<10 ; i=i+1 ) {

ellipse ( i*50, 100,50,50);

}

}

Create Visual Focus

Looping

looping23
Looping

E

Example:

Let’s see step by step.

Create Visual Focus

Looping

looping24
Looping

E

Example:

for ( int i=0 ; i<10 ; i=i+1 ) {

ellipse ( i*50, 100,50,50);

}

Create Visual Focus

Looping

looping25
Looping

E

Example:

for ( int i=0 ; i<10 ; i=i+1 ) {

ellipse ( i*50, 100,50,50);

}

Create Visual Focus

Looping

looping26
Looping

E

Example:

for ( int i=0 ; i<10 ; i=i+1 ) {

ellipse ( i*50, 100,50,50);

}

Create Visual Focus

Looping

looping27
Looping

E

Example:

So,

for ( inti=0 ; i<10 ; i=i+1 ) {

ellipse ( i*50, 100,50,50);

}

Create Visual Focus

Looping

slide59

Lab Section

Create Focal point

Looping