4 - 3DGraphics

4 - 3DGraphics - Using Pictures and Images Using Pictures...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: Using Pictures and Images Using Pictures and Images Processing can display .gif, .jpg, .tga, and .png image First, choose Sketch | Add File to select the the image you want 1 Images Images Now, write code like this, where chun.jpg is the name of the picture PImage b; void setup() { size(550,450); size(550,450); b = loadImage(”chun.jpg"); loadImage(”chun.jpg"); } void draw() { image(b, 0, 0, 550, 450); image(b, 2 } Images Images b is the name of the variable that holds the is the name of the image 0,0 is the x and y of the top left hand corner 0,0 is the x and y of the top left hand corner 550,450 is the width and height is the PImage b; PImage void setup() { size(550,450); size(550,450); b = loadImage(”chun.jpg"); } void draw() void { image(b, 0, 0 ,550,4503 ); image( 0, Using an image for the background() Using an image for the Make sure the size() of the applet is the same as the size of the image. PImage bill; void setup() { size(450,315); size(450,315); bill = loadImage("bill-gates-mugshot.jpg"); bill } void draw() { } background(bill); background(bill); 4 tint() tint() You can change the color and opacity of an image with the tint function PImage checkers; void setup() { size(400,400); size(400,400); checkers = loadImage("OpArt.JPG"); loadImage("OpArt.JPG"); } void draw() { background(0); background(0); image(checkers,50, image(checkers,50, 50,152,138); 50,152,138); } 5 tint() tint() tint(255,0,0); will give a red tint PImage checkers; void setup() { size(400,400); size(400,400); checkers = loadImage("OpArt.JPG"); loadImage("OpArt.JPG"); } void draw() { background(0); background(0); tint(255,0,0); tint(255,0,0); image(checkers,50, image(checkers,50, 50,152,138); 50,152,138); } 6 tint(255,255,255,130); will give no tint (it's white) but will tint(255,255,255,130); will give no tint (it's white) but will change the opacity PImage checkers; void setup() { size(400,400); size(400,400); checkers = loadImage("OpArt.JPG"); loadImage("OpArt.JPG"); } void draw() { background(0); background(0); tint(255,255,255,130); tint(255,255,255,130); image(checkers,50, image(checkers,50, 50,152,138); 50,152,138); image(checkers,75, image(checkers,75, 75,152,138); 75,152,138); } 7 Which dot is moving in a random Which dot is moving in a random walk? 8 Which dot is moving in a random Which dot is moving in a random walk? 9 Which dot is moving in a random Which dot is moving in a random walk? 10 Which dot is moving in a random Which dot is moving in a random walk? 11 Which dot is moving in a random Which dot is moving in a random walk? 12 Which dot is moving in a random Which dot is moving in a random walk? 13 Which dot is moving in a random Which dot is moving in a random walk? 14 Random Walks Random In a random walk, you always take one step at a time You don't take different size random jumps to an entirely new random location In a random walk, if we leave a trail, there will not be any gaps 15 A Pacman style random walk A Pacman style random walk Keeps the object moving Limits movement to up, down, left and right (not diagonal) Takes a step of a discrete size (always the same number, never zero) 16 4 possible values {0,1,2,3} 4 possible values int direction = int(random(0,4)); int(random(0,4)); if(direction == 0) if(direction { x = x + 20; //right //right } else if(direction == 1) else { x = x - 20; //left //left } else if(direction == 2) else { y = y + 20; //down //down } else // direction must be 3 else { y = y - 20; //up //up } 17 The The complete program 18 4 Practice Quiz Questions 4 Practice Quiz Questions Fill in the blanks so that the x coordinate is changed in a random walk pattern by ­1,0, or 1 x = _____ + int(random(__,__)); True / False (3!=4) && (2<=2) Three "system variables" that are used for user input are ________, ________ and _______ . Mark is writing a game where one coin is tossed. Every time the mouse is pressed, he will draw a single circle at a new random location, so the coin x and y coordinates will change, along with whether the coin shows heads or tails. How many variables will his program need? 19 mousePressed mousePressed function vs. variable Processing has both a mousePressed() function and a mousePressed system variable The thing to remember is that the mousePressed() function will run once every time the mouse is pressed. 20 If I use the function, If I use the function, I get one ellipse with every press void setup() { size(300,300); size(300,300); } void draw() { //empty //empty } void mousePressed() { ellipse(random(300),random(300),30,30); ellipse(random(300),random(300),30,30); } 21 If I use the variable in draw(), If I use the I get more ellipses the longer I press void setup() { size(300,300); size(300,300); } void draw() { if(mousePressed == true) if(mousePressed { ellipse(random(300),random(300),30,30); ellipse(random(300),random(300),30,30); } } 22 3D Graphics 3D Graphics One of Processing's strengths is 3D graphics void setup() { size(300,300,P3D); size(300,300,P3D); } void draw() { translate(150,150,0); translate(150,150,0); rotateX(-.5); rotateX(-.5); rotateY(.5); rotateY(.5); box(100); box(100); } 23 3D Graphics 3D Graphics Positions in 3D space use three coordinates x, y and z Objects are drawn at (0,0,0) unless you translate them to a new position box(50); 24 3D Graphics 3D Graphics box()'s one argument specifies the side length box(170); 25 3D Graphics 3D Graphics box()'s three arguments specify the x, y and z dimensions box(50,100,150); 26 3D Graphics 3D Graphics translate(0,-100,0); box(50); translate() translate() moves the center of moves the center of the box In this case, we've moved the box -100 (up) in the y direction 27 3D Graphics 3D Graphics translate(0,0,-100); box(50); translate() translate() moves the center of moves the center of the box In this case, we've moved the box -100 (away from us) in the z direction 28 3D Graphics 3D Graphics translate(-100,0,0); box(50); translate() translate() moves the center of moves the center of the box In this case, we've moved the box -100 (to the left) in the x direction 29 3D Graphics 3D Graphics translate(-100,0,0); sphere(50); sphere() works sphere() works the same as box except the argument is the radius 30 3D Graphics 3D Graphics rotateX(-.5); box(50); rotateX() rotateX() rotates the box rotates the box around the x axis 31 3D Graphics 3D Graphics For comparison, here it is unrotated box(50); 32 3D Graphics 3D Graphics rotateX(.5); box(50); rotateX() rotateX() rotates the box rotates the box around the x axis 33 3D Graphics 3D Graphics rotateY(-.3); box(50); rotateY() rotateY() rotates the box rotates the box around the y axis 34 3D Graphics 3D Graphics For comparison, here it is unrotated box(50); 35 3D Graphics 3D Graphics rotateY(.3); box(50); rotateY() rotateY() rotates the box rotates the box around the y axis 36 3D Graphics 3D Graphics rotateZ(-.4); box(50); rotateZ() rotateZ() rotates the box rotates the box around the z axis 37 3D Graphics 3D Graphics For comparison, here it is unrotated box(50); 38 3D Graphics 3D Graphics rotateZ(.4); box(50); rotateZ() rotateZ() rotates the box rotates the box around the z axis 39 Lighting can add realism Lighting can add realism background(0); translate(150,150,-250); fill(255); rotateX(-.5); rotateY(.5); box(150); 40 lights(); lights(); background(0); translate(150,150,-250); fill(255); rotateX(-.5); rotateY(.5); lights(); box(150); 41 pointLight(255,0,255,-235,-240, 275); pointLight(255,0,255,-235,-240, background(0); translate(150,150,-250); fill(255); rotateX(-.5); rotateY(.5); pointLight(…); box(150); 42 pointLight(255,0,255,-235,-240, 275); pointLight The first three arguments (in red) are the RGB values of the light (in this case Magenta) The last three arguments (in yellow) are the (x,y,z) position of the light 43 Perspective Perspective void setup() { size(200,200,P3D); size(200,200,P3D); background(0); background(0); } void draw() { box(100); box(100); } If we don't rotate or translate the box, we get a pretty boring view of it 44 Perspective Perspective An alternative is to change our perspective That is leave the cube as it is, but change the position of our "eye" This is done with the camera function 45 Perspective Perspective void setup() { size(200,200,P3D); size(200,200,P3D); background(0); background(0); } void draw() { camera(100,100,200,0,0,0,0,1,0); camera(100,100,200,0,0,0,0,1,0); box(100); box(100); 46 } camera(100,100,200,0,0,0,0,1,0); camera( Camera takes 9 arguments The first three are the (x,y,z) position of our "eye" The next three are the (x,y,z) position of where our eye is looking I always leave the last three as the default values 0,1,0 (y axis is up) 0,1,0 (y axis is up) 47 Rotating and translating Rotating and translating multiple objects rotations and translations can "stack up" Typically, after you rotate and translate one object, you "undo" that rotation and translation before you try to rotate and translate a different object 48 Rotating and translating Rotating and translating multiple objects This code will draw the left cube translate(50,100,0); translate(50,100,0); rotateY(-.3); rotateY(-.3); rotateX(-.4); rotateX(-.4); box(40); box(40); 49 Rotating and translating Rotating and translating multiple objects This code will draw the right cube translate(150,100,0); rotateZ(.2); rotateY(.4); box(40); 50 Rotating and translating Rotating and translating multiple objects But when I try to put the code together in draw, the right cube is in the wrong place! translate(50,100,0); rotateY(-.3); rotateY(-.3); rotateX(-.4); rotateX(-.4); box(40); box(40); translate(150,100,0); translate(150,100,0); rotateZ(.2); rotateZ(.2); rotateY(.4); rotateY(.4); box(40); box(40); 51 Rotating and translating Rotating and translating multiple objects The first rotation and translation needs to be "undone" (in reverse order) translate(50,100,0); translate(50,100,0); rotateY(-.3); rotateY(-.3); rotateX(-.4); rotateX(-.4); box(40); box(40); rotateX(.4); rotateX(.4); rotateY(.3); rotateY(.3); translate(-50,-100,0); translate(-50,-100,0); translate(150,100,0); translate(150,100,0); rotateZ(.2); rotateZ(.2); rotateY(.4); rotateY(.4); 52 A program that uses a loop to make A program that uses a loop to make a gradient in the background int redAmount = 0; int blueAmount = 255; int x = 0; void setup() { size(256,256); size(256,256); } while(x < 256) while(x { stroke(redAmount,0,blueAmount); stroke(redAmount,0,blueAmount); line(x,0,x,255); line(x,0,x,255); x = x + 1; 1; redAmount = redAmount + 1; redAmount blueAmount = blueAmount - 1; blueAmount } void draw() { fill(0); fill(0); stroke(0); stroke(0); ellipse(127,127,100,100); ellipse(127,127,100,100); } 53 A Geeky Joke A Geeky Joke This is Apple computer’s actual address It’s a geeky pun on computer programming 54 Practice Quiz Question: Practice Quiz Question: Circle the picture that best matches the output void setup() { size(100,100); size(100,100); } void draw() { int y = 20; int while(y < 100) while(y { ellipse(50,y,20,20); ellipse(50,y,20,20); y = y + 20; 20; } } 55 Practice Quiz Question: Practice Quiz Question: Circle the picture that best matches the output void setup() { size(100,100); size(100,100); } void draw() { int num = 5; int while(num > 2) while(num { ellipse(num * 15,50,20,20); ellipse(num num--; num--; } } 56 Problem: Make 100 random spheres Problem: Make 100 random spheres Heads up! Don't call your program something like 100shapes.pde Java won't allow programs to have names that start with a digit 57 Problem: Make 100 random spheres Problem: Make 100 random spheres First we’ll need to figure out how to make 1! 58 Problem: Make 100 random spheres Problem: Make 100 random spheres I’ll need to translate the sphere to a better spot 59 Problem: Make 100 random spheres Problem: Make 100 random spheres Now that I’ve got one, I’ll want to add randomness so I don’t have a bunch of identical spheres piled on top of each other 60 I want to repeat the code in yellow I want to repeat the code in yellow void draw() { background (0); background lights(); lights(); int size = int(random(3,30)); int int offsetX = int(random(0,300)); int int offsetY = int(random(0,300)); int translate(offsetX,offsetY,0); translate(offsetX,offsetY,0); sphere(size); sphere(size); } 61 I want to repeat the code in yellow I want to repeat the code in yellow void draw() { background (0); background lights(); lights(); ??? ??? while( ??? ) while( { int size = int(random(3,30)); int int offsetX = int(random(0,300)); int int offsetY = int(random(0,300)); int translate(offsetX,offsetY,0); translate(offsetX,offsetY,0); sphere(size); sphere(size); ??? ??? } } 62 To keep the spheres from translating off To keep the spheres from translating off the screen, I’ll need to translate back void draw() { //some code not shown //some while(??) while(??) { int size =int(random(3,30)); int int offsetX = int(random(0,300)); int int offsetY = int(random(0,300)); int translate(offsetX,offsetY,0); translate(offsetX,offsetY,0); sphere(size); sphere(size); } translate(-offsetX,-offsetY,0); translate(-offsetX,-offsetY,0); //other code not shown //other } 63 Displaying Text on the screen Displaying Text on the screen To add words or other text to your program Choose Tools | Create Font Pick the font and size you want, click "ok" In setup() add code like this // Load the font. Fonts must be placed within the data // // directory of your sketch. A font must first be created // // using the 'Create Font...' option in the Tools menu. PFont fontA = PFont loadFont("Ziggurat-HTF-Black-32.vlw"); loadFont("Ziggurat-HTF-Black-32.vlw"); // Set the font and its size (in units of pixels) textFont(fontA, 32); In draw() you can now call text() // Display the text at the indicated position text("hello", 50, 50); 64 Displaying Text on the screen Displaying Text on the screen You can align the text, LEFT, RIGHT or CENTER textAlign(CENTER); The newline character \n will start a new line of text text("You can split\nup up text on two lines",150,150); text 65 Displaying Text on the screen Displaying Text on the screen The quotes character \" will display quotes to the screen text("\"In Quotes\"",150,150); 66 textMode(SCREEN); textMode(SCREEN); I have no what this does, except it makes the text look better, especially in 3D 67 ...
View Full Document

{[ snackBarMessage ]}

Ask a homework question - tutors are online