Lecture 6: Visual focus and looping

1 / 59

# Lecture 6: Visual focus and looping - PowerPoint PPT Presentation

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?

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

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

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

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?

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

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

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

What is contrast of scale?

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

B

Create Visual Focus

Looping

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

What is contrast of color?

Use the combination of colors to show unlikeness or differences.

B

Create Visual Focus

Looping

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: 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: 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: 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: Color

B

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

Create Visual Focus

Looping

Contrast: Shape

What is contrast of shape?

Use different types of shapes to emphasis the uniqueness.

B

Create Visual Focus

Looping

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: 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: Shape

What is contrast of direction?

Use opposite direction to break the rule of reading

B

Create Visual Focus

Looping

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

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

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

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

Looping

Visual Focus

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

Create Visual Focus

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

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

Looping

E

Demonstration of Looping:

In the beginning, it is 0.

0

START!

Create Visual Focus

Looping

Looping

E

Demonstration of Looping:

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

1

Continue...

Create Visual Focus

Looping

Looping

E

Demonstration of Looping:

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

2

Continue...

Create Visual Focus

Looping

Looping

E

Demonstration of Looping:

He continues…

3

4

5

Create Visual Focus

Looping

Looping

E

Demonstration of Looping:

He continues until it is 10.

10

Stop!!!!

Create Visual Focus

Looping

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

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?)

Create Visual Focus

Looping

Looping

E

Syntax of FOR loop:

for( ; ; ) {

}

0

10

+1

Create Visual Focus

Looping

Looping

E

Syntax of FOR loop:

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

print (i) ;

}

Output:

Create Visual Focus

Looping

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

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

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

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

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

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

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

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

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

Looping

E

Note on “Update”:

We also have:

i = i – 1 ;

i = i * 2 ;

i = i / 2 ;

Create Visual Focus

Looping

Looping

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

450

200

50

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

Looping

E

Example:

Let’s see step by step.

Create Visual Focus

Looping

Looping

E

Example:

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

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

}

Create Visual Focus

Looping

Looping

E

Example:

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

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

}

Create Visual Focus

Looping

Looping

E

Example:

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

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

}

Create Visual Focus

Looping

Looping

E

Example:

So,

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

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

}

Create Visual Focus

Looping

Lab Section

Create Focal point

Looping