IntroductionIntroduction. Lesson 1 A guide around the Glowscript VPython interface, and introduction to some basic programming concepts. Lesson 2 Create code to produce simple 3-D objects Lesson 3 Make an object move in a linear fashion Lesson 4 Make an object rotate around a point Lesson 5 Connect objects together using common attributes Lesson 6 Create a new object by amalgamating other objects Lesson 7 Apply textures and images to the surface of shapes Lesson 8 Demonstration of how keyboard and mouse events are handled by VPython Lesson 9 Allow the user to interact with the scene and objects within Lesson 10 Take a shape and extrude it along a path to create novel objects Lesson 11 The scene window and its properties Lesson 12 A task to use all the lesson skills to create some digital art! Glossary Terms and language used in programming for VPython

Lesson 7 - Textures

In this lesson we look at textures.
VPython comes with several bulit-in textures which can be used to create a variety of effects.
See https://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/Textures-VPython
and the more complex example https://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/Conch on the Glowscript site for examples.

Objectives

By the end of the lesson the student should be able to:
 Understand how to add a texture to an object in a specified place.
 Understand how to rotate the base object so that the texture appears in the correct orientation.

Timings
Teaching: 40 min
Exercises: 20 min

Description

VPython has four settings for applying a position to a texture on an object:
left
right
sides
and all.

Initially, unless otherwise specified, an object's axis is oriented along the x-direction. 'left' and 'right' take their cue from this direction and 'sides' represent the remaining sides of the shape.
So 'place'=[left,right,sides] is the same as 'all'.

So what about just the top or bottom?
The answer is to pick a side and tell the shape where the axis is (by default in the x direction)
To get the texture on the top we assign the place as 'right' and change the axis to be in the +y direction,
which is has the effect of rotating the object the object 90 degrees anticlockwise.

The program

The code below constructs three boxes and then applies a texture to each on various sides.

box( color=color.green, pos=vector(-2,0,0),
  texture={'file':textures.earth, 'place':['left','right']} ) # A dictionary containing a list

box( color=color.cyan, pos=vector(0,0,0), axis=vector(0,1,0),
 texture={'file':textures.stones, 'place':'right'} )

box( color=color.yellow, pos=vector(2,0,0),
  texture={'file':textures.flower, 'place':['sides']} )

Things to note

Notice the format of the texture attribute: The curly brackets{} in python denote a dictionary.
A dictionary is like a list, but each item is accessed by a 'keyword' instead of a numerical index.
'place' takes a 'list' of one or more items and is enclosed in square brackets[].
The cyan box has texture on the top, because we tell the box its axis is in the 'y' direction.
The net effect is the same as drawing a box with sides left and right then rotating it by 90 degrees.

As well as the built-in textures VPython allows you to add an image as a texture from any publicly available image source on the internet
by calling the texture in the form:
object( texture={ 'file':"internet/image", 'place':['side']} )
or any other VPython object.

 

 

Exercise 1

Copy the program above and do the following:
1. Modify the program to make the green box into a sphere and apply the earth texture so it looks like planet Earth.
2. Modify the program to make the cyan box have the stones texture on the back.
3. Modify the program to make the yellow box have the flower texture only on the sides, i.e. the top and bottom are blank.
4. Modify the program to make the an additional red box to the right of the yellow box with a custom texture on the sides, using this URL from the Independent Newspaper, of someone familiar:
https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/09/11/20/Boris-Johnson.jpg

Solution to Exercise 1

# solution: change box to sphere and map the earth texture onto it
sphere( color=color.white, pos=vector(-2,0,0),
texture={'file':textures.earth, 'place':['all']} )

# solution: change box axis so 'sides' are now aligned along '-z' axis.
# Change texture to 'stones' and place on right so it appears on top
box( color=color.cyan, pos=vector(0,0,0), axis=vector(0,0,-1),  texture={'file':textures.stones, 'place':'right'} )

# solution: change box axis to be vertical so 'sides' are now aligned along 'y' axis.
box( color=color.yellow, pos=vector(2,0,0), axis=vector(0,1,0), texture={'file':textures.flower, 'place':['sides']} )

# solution: change box to map the internet image texture onto it
box( color=color.red, pos=vector(4,0,0),  texture={'file':"https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/09/11/20/Boris-Johnson.jpg", 'place':['sides']} )

-

Conclusion

You should now be able to:
  Understand how to add a texture to an object in a specified place.
  Understand how to rotate the an object by setting its axis, so that the texture appears in the correct orientation.