Cs7026 authoring for digital media
Download
1 / 15

CS7026: Authoring for Digital Media - PowerPoint PPT Presentation


  • 73 Views
  • Uploaded on

CS7026: Authoring for Digital Media. HTML5: Canvas and Processing (an aside). Modes. The processing programs we wrote before are known as static programs. The drawing code runs once, producing a single static (unchanging) image.

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 ' CS7026: Authoring for Digital Media' - monet


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
Cs7026 authoring for digital media

CS7026: Authoring for Digital Media

HTML5: Canvas and Processing (an aside)


Modes
Modes

  • The processing programs we wrote before are known as static programs.

  • The drawing code runs once, producing a single static (unchanging) image.

  • We can delay the running of the program a bit (e.g. by inserting prompt statements) but fundamentally the program is producing a single image

CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)


Modes1
Modes

  • There is another mode, called continuous mode.

  • When we write a processing program in this mode we are producing an animation, a series of frames drawn one after the other.

CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)


Continuous mode
Continuous Mode

  • In continuous mode a processing program contains two special functions called:

    • setup

    • draw

  • The names are built in to processing, and the processing system calls each function as needed (so we never need to call the functions in our own code).

  • CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)


    Continuous mode1
    Continuous Mode

    • setup is called once, when the program starts up.

    • drawis called every time a new frame of the animation needs to be drawn (by default that is 60 times every second, but we can change it).

    CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)


    Setup
    setup

    • The Setup function is the ideal place to put all the code that we want to run once, when the program is beginning:

      void setup(){

      size( 200, 200 );

      background( 0 );

      }

    • Note that setup is a function, so it is not the appropriate place to create any variables we want to use (they would be local!). It’s really just a place to put the initial processing statements that set up the drawing environment.

      • Aside: Processing uses ’void’ to introduce a function that does not return anything. It’s not a JavaScript statement, the processing.js library fixes it up.

    CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)


    draw

    • The draw function is called once for each frame.

    • Processing calls it automatically at the right times. If we want a moving image then we have to make sure that every time it is called it draws something a little different.

    • The easiest way to do that is to both use and modify a global variable every time it is called.

      var y = 0;

      void draw(){

      line( 10, y, 20, y+3 );

      y = y + 2;

      }

    CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)


    Clearing frames
    Clearing Frames

    • Each frame is drawn on top of the previous one, so if we just draw a series of lines (as in the previous example) they will all appear.

    • To give the impression of objects moving we should clear the previous frame before we draw the next one.

    CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)


    Clearing frames1
    Clearing Frames

    • The easiest way to do this is to use the background function in draw instead of in setup.

      void draw(){

      background( 255 );

      line( 10, y, 20, y+3 );

      y = y + 2;

      }

    • If you actually run this, you will just see a white window. Why? Because the line pretty quickly marches off the bottom of the window (below pixel 200) and is lost to view.

    CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)


    • An improved draw function that will reflect the line when it reaches the bottom of the window:

      var step = 2;

      vary = 0;

      void draw(){

      background( 255 );

      line( 10, y, 20, y+3 );

      y = y + step;

      if ( y > height ){

      step = -2;

      }

      if ( y < 0 ){

      step = 2;

      }

      }

    • (height is a variable that processing automatically sets to the height of the canvas)

    CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)


    Setting the frame r ate
    Setting the it reaches the bottom of the window:Frame Rate

    • By default Processing will call the draw function 60 times every second.

    • We can adjust that rate using the frameRate function:

      void setup(){

      size( 200, 200 );

      frameRate( 24 );

      }

    • Processing will attempt to achieve the frame rate we have asked for (24 frames per second in the example above). If the computer we are running on is too slow to run draw that many times per second then it will just draw as many frames as it can.

    CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)


    Where is the mouse
    Where is the mouse? it reaches the bottom of the window:

    • There are two special variables called mouseX and mouseY that are updated by processing before each frame is drawn.

    • They contain the location of the mouse pointer. So we can create an animation of a circle that follows the mouse pointer about:

      void draw(){

      background( 255 );

      ellipse( mouseX, mouseY, 30, 30 );

      }

    CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)


    Mouse buttons
    Mouse buttons it reaches the bottom of the window:

    • If we want to know whether the mouse button is up or down Processing offers two solutions:

    • The easiest is for us to check the value of the booleanmousePressed variable. It will be true if the mouse button is down when this frame is being drawn, and false if the mouse button is up.

    • An alternative is for us to write a function called mousePressed(yes, the same name). This function will be called automatically when the mouse button goes down (just before draw is called). We can execute any JavaScript or Processing statements we want in this function.

    CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)


    • Here it reaches the bottom of the window:a circle moves towards the mouse pointer, but only while the mouse button is down.

      varx = 100;

      vary = 100;

      varspeed = 2;

      void draw(){

      background(255);

      if(mousePressed){

      if( x > mouseX ){

      x = x - speed;

      }

      if( x < mouseX ){

      x = x + speed;

      }

      if( y > mouseY){

      y = y - speed;

      }

      if( y < mouseY){

      y = y + speed;

      }

      } // mousePressed

      ellipse( x, y, 20, 20);

      }

    CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)


    Lab it reaches the bottom of the window:

    • Work through the examples in these lecture notes.

    • Try to create a piece that you can drag around your chessboard.

    CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)


    ad