openframeworks what is openframeworks what is
play

openFrameworks! What is openFrameworks? What is openFrameworks? oF - PowerPoint PPT Presentation

Nov 27, 2022 •261 likes •913 views

openFrameworks! What is openFrameworks? What is openFrameworks? oF is a software framework for C++ Software framework: a prefab software infrastructure desi g ned to provide low-level functionality How do I make a new project? Part 1:

  1. openFrameworks!

  2. What is openFrameworks?

  3. What is openFrameworks? • oF is a software framework for C++ • Software framework: a prefab software infrastructure desi g ned to provide low-level functionality

  5. How do I make a new project?

  6. Part 1: Copy emptyExample

  7. Part 2: Make a new folder in “apps” and paste it there base folder level 1 level 2 level 3 (Your project must be exactly three levels below your base oF folder!)

  8. Part 3: Open the project

  9. Can I take notes in my code?

  12. Commentin g Code • DO IT. • Seriously, do it. • Use two forward slashes (//) for a one-line comment. • You can also do multi-line comments: • Preface your comment with slash-asterisk (/*) • End it with asterisk-slash (*/)

  14. What’s g oin g on in testApp.cpp?

  15. void testApp::setup() {}

  16. void testApp::update() {}

  17. void testApp::draw() {}

  18. RUN SETUP UPDATE DRAW

  20. Main oF Functions • setup(): runs just once when the app starts • Good place to set initial values for variables, e. g . playerHealth = 100; • update(): runs once per frame, before draw() • Good place for number-crunchin g , e. g . playerHealth - = 1; • draw(): runs once per frame, after update() • Where you should put all your drawin g , e. g . player.draw();

  21. Listeners

  22. Other oF Functions • oF will listen for certain events, and when they happen, it will run whatever code is in the correspondin g event • E. g . keyPressed() runs at the moment that a key is pressed (not held!)

  23. How do I draw stu ff ?

  25. Functions • Function: a named section of a pro g ram that does a specific task • Wraps up code in an easy-to-reference way • Parameter: additional information you can g ive the function to chan g e the output

  26. Bake me a chocolate cake! Chocolate: Bakin g a cake: additional info the action that a ff ects the action

  27. Function Structure bake_me_a_cake(chocolate); • Name of the function • Parentheses: delinate that it’s a function, hold ar g uments • Semicolon: end of line, move onto the next thin g

  28. Wait, that doesn’t answer my question about drawin g stu ff !

  29. Drawin g Shapes Function Notes x and y are at center by ofCircle(x, y, radius); default x and y are at upper-left ofRect(x, y, width, hei g ht); corner by default ofLine(x1, y1, x2, y2); - ofTrian g le(x1, y1, x2, y2, x3, - y3);

  30. Compare the function with what’s inside it. Which would you rather type?

  31. Colorin g Shapes Function Notes ofFill(); Fill all followin g shapes with a color. ofNoFill(); Don’t fill the followin g shapes. Sets the color to be used on all followin g ofSetColor(r, g , b); shapes. Each value g oes from 0-255.

  32. Exercise: Try drawin g some stu ff ! (Where would you put this code?)

  33. How does positionin g work?

  35. X=0 x=WIDTH y=0 y=HEIGHT

  36. X=0 x=WIDTH y=0 (3,2) y=HEIGHT

  37. Coordinate Plane • X: horizontal axis, g ets lar g er as you g o ri g ht • Y: vertical axis, g ets lar g er as you g o down

  38. Question: How would you draw a circle at x-position 9, y-position 15? If you drew another circle at y-position 25, would it be hi g her or lower than the first circle? Hint: if you don’t know, try drawin g it!

  39. How can I incorporate interactivity?

  40. Mouse Positions • Variable: a symbol used to stand in for a value • mouseX: returns the current x pixel position of the mouse • mouseY: returns the current y pixel position of the mouse

  41. Exercise: Try drawin g a circle at mouseX and mouseY!

  42. Variables • Variables are useful for storin g data that may chan g e throu g hout the course of your app (e. g . your player’s health) • To create a variable, you have to tell the computer: • What kind of data you’re storin g (a number? a word?) • The name you’re g oin g to refer to it by

  43. Some Variable Types • Float: a decimal number (“I’m 5.4 feet tall.”) • Inte g er: a whole number (“I’m 25 years old.”) • Boolean: a true/false condition (“I’m not from California.”) • Strin g : text (“My name is Jane.”) • Char: a sin g le letter (“You all g et an A in pro g rammin g !”)

  44. float jane_hei g ht; the type of data the variable’s name (datatype)

  45. jane_hei g ht = 5.4; the variable’s name the value of that variable

  46. How can I make stu ff move on its own?

  47. Movement If our object starts at x=1, at time=0, and moves at a speed of 1 frame/sec, what will x equal at time=1? How do you know?

  48. Movement x will equal 1! Its current position (0) + the total distance it will g o over one frame (1) = 1!

  49. Movement New position = old position + speed

  50. Exercise: Try drawin g a circle that moves vertically down the screen. Hint: you’ll want a variable to hold the circle’s position. (Why?)

  51. How can I test for collisions?

  52. Collision: when one point is less than a certain distance from another point.

  53. Have these circles collided yet? radius radius

  54. How about now? radius radius

  55. Circle Collision • If the distance between the center-points of the circles is less than or equal to the sum of their radii, they have collided! • You can calculate distance in openFrameworks with ofDist(x1, y1, x2, y2). radius radius

  56. Circle Collision • If the distance between the center-points of the circles is less than or equal to the sum of their radii, they have collided! • You can calculate distance in openFrameworks with ofDist(x1, y1, x2, y2). radius radius

  57. How can I check whether somethin g is true?

  58. If I’m hun g ry, then I’ll eat.

  59. If-statements • Consist of a condition and an action to take. • Can have alternatives (if-else) and can put if- statements inside of if-statements, too! General syntax: If I’m hun g ry, then I’ll eat. if (condition) { if (hun g ry) { action to take eat(); } }

  60. If-statements • Consist of a condition and an action to take. • Can have alternatives (if-else) and can put if- statements inside of if-statements, too! If I’m hun g ry, then I’ll eat. If I’m hun g ry, then I’ll eat. If I’m hun g ry, then I’ll eat. If I’m hun g ry and in the Otherwise, I’ll dance! mood for pizza, I’ll g et pizza. Otherwise, I’ll dance! if (hun g ry) { if (hun g ry) { if (hun g ry) { if (want_pizza) { eat(); eat(); eat(pizza); } else { } } else { dance(); eat(somethin g _else); } } } else { dance(); }

  61. How can I incorporate ima g es, sounds, fonts, etc.?

  62. Ima g es • ofIma g e: a built-in object that handles the loadin g and drawin g of ima g es • Must put the file inside “data” folder of project! • Three steps: • Create your ima g e variable: ofIma g e ima g e; • Load your ima g e file: ima g e.loadIma g e(“ima g e.pn g ”); • Draw your ima g e: ima g e.draw(x, y);

  63. Fonts • ofTrueTypeFont: a built-in object that handles the loadin g and drawin g of fonts • Must put the file inside “data” folder of project! • Three steps: • Create your font variable: ofTrueTypeFont font; • Load your ima g e file: font.loadFont(“font.ttf”, size); • Draw your words: font.drawStrin g (strin g , x, y);

  64. Sounds • ofSoundPlayer: a built-in object that handles the loadin g and playin g of sounds • Must put the file inside “data” folder of project! • Three steps: • Create your font variable: ofSoundPlayer sound; • Load your ima g e file: sound.loadSound(“sound.mp3”); • Play your sound: sound.play();

More recommend