1 / 19

CS7026: Authoring for Digital Media

CS7026: Authoring for Digital Media. HTML5: Canvas and Processing (an aside). Processing. Processing is a Java-based open-source programming language. D eveloped by at MIT for the electronic arts, new media art and visual design communities by Casey Reas and Benjamin Frye (2001).

jenski
Download Presentation

CS7026: Authoring for Digital Media

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS7026: Authoring for Digital Media HTML5: Canvas and Processing (an aside)

  2. Processing • Processing is a Java-based open-source programming language. • Developed by at MIT for the electronic arts, new media art and visual design communities by Casey Reas and Benjamin Frye (2001). • Aims to promote software literacy within the visual arts and visual literacy within technology. • Initially created to serve as a software sketchbook and to teach computer programming fundamentals within a visual context.

  3. Processing • Features: • Familiar (to Java or JavaScript programmers) syntax and concepts • An emphasis on graphics, interactivity, and rapid feedback • Free to download and open source • Welldocumented.

  4. Processing.js • In 2008, John Resig of the Mozilla Corporation ported Processing to JavaScript using the Canvas element for rendering. • This allows Processing to be used in modern web browsers without the need for a Java plugin. • Since then, the open source community have taken over the project.

  5. How does it work? • Processing.js is written in JavaScript, and uses HTML5's <canvas> element. • It converts your Processing code to JavaScript and runs it. • So you write code using the Processing language, include it in your web page, and Processing.js does the rest. “It's not magic, but almost.” • Browser must be HTML5 compatible.

  6. Processing.js • To use it, download Processing.js . • Make your Processing *.pdefile/s, e.g. something.pde. • Create a web page that includes Processing.js as well as a <canvas> with info about where to get your sketch file. • Load your web page, and it will parse, translate, and run your sketch in the browser.

  7. Example • We can best get a feel for Processing by looking at a simple example: size(200, 200); //sets the canvas size background(255); //sets background to white line(10,80,30,40); //draws a line line(20,80,40,40); line(30,80,50,40); line(40,80,60,40); line(50,80,70,40);

  8. Displaying in the browser <head> <script src="processing.js"></script> <head> <body> <canvas data-processing-sources="something.pde"> </canvas> </body> • Meanwhile, in the file something.pde: size(200, 200); background(255); line(10,80,30,40); line(20,80,40,40); line(30,80,50,40); line(40,80,60,40); line(50,80,70,40);

  9. Programming • Of course, this is really just JavaScript. So we can use the features of JavaScript that we already understand. • E.g., we can use variables and even interact with the user: size(200, 200); background(255); stroke(255, 128, 0); varx = prompt("Enter x coordinate:"); line(x,50,x+30,50); • (Aside: Processing allows the use of Hex values as well as RGB triplets. Processing.js supports this, so the third statement could have been stroke(#FF8000)).

  10. More Drawing Actions • What do we have apart from lines? size(200, 200); background(255); point(180, 40 ); rect(60, 60 , 100, 80); fill(125); rect(10,10 , 50, 50); noFill();

  11. Quick Summary… • Processing.js has introduced some new functions to JavaScript: • size: Sets the (processing notion of the) canvas size. • background: Sets the background colour; colours can be specified as 8-bit values, or as three numbers (Red, Green, Blue), or as web colours (e.g. #FF0000) • stroke: Sets the colour of the pen stroke. Use noStroke to turn off drawing of the stroke entirely. • fill, noFill: control whether (and in what colour) shapes are filled in. • point(x,y): draw a single pixel at some position • line(x1,y1, x2,y2): draw a line between two points • rect(x,y,width,height): draw a rectangle specifying top-left corner and size

  12. Combining Processing.js with regular JavaScript size(200, 200); background(255); varw = 1; varx = 10; while( (x+w) < 200 ){ strokeWeight(w); line( x, 50, x, 150 ); x = x + 10 + w; w = w + 1; } (strokeWeight controls the width of the line drawn)

  13. More Shapes size(200, 200); background(255); var r = 20; while( r < 100 ){ ellipse ( 50, 50, r, r ); // parameters are x,y,w,h r += 20 ; } Something is wrong! Where are all the other circles? Underneath! We cannot see them.

  14. More shapes (correctly) var r = 100; while( r > 0 ){ ellipse ( 50, 50, r, r ); r -= 20 ; } • So the order that we draw shapes matters. Shapes drawn later will appear on top of shapes that are drawn earlier.

  15. One last example: var y = 20; while( y <= 80 ){ x = 20; while( x <= 80 ){ if( (x % 10) === 0 ){ line(x, y, x+3, y-3); }else{ line( x, y, x+3, y+3); } x = x + 5; } y = y + 5; }

  16. Lab Work: • The first step is to get the JavaScript port of Processing set up. The software can be downloaded from http://processingjs.org/download/. • Write a basic html document linking to the Processing.js file and containing a canvas element. • Write your .pde file and link the canvas element to it. • Open the html file in Firefox (there are issues with opening local .pde files in Chrome).

  17. Lab Work: • Boxes • We will begin by drawing a single row of rectangles. Each rectangle will be 20 pixels wide and 20 pixels tall. • Write a loop that will draw 8 rectangles in a row across the canvas. • Grids • We want to turn our single row of rectangles into a grid. • Write a loop that will draw 8 rows of rectangles down the canvas (so that there is a total of 64 rectangles).

  18. Lab Work: • Checkerboard • Finally for this part, adjust the program so that every second square is filled in black. • The resulting pattern should resemble a checkerboard (or a chess board, if you prefer).

  19. Experimenting • You can provide an extra parameter to the fill function (and to the stroke function, by the way). This parameter specifies the alpha value for the fill; think of it as a transparency. The larger the number (from 0 to 255) the more opaque the fill colour is. • Try giving the squares different grey and alpha values at different positions on the board. Can you make it appear that the board grows lighter and lighter as you approach the centre? • Having only an 8x8 grid makes it hard to see certain effects. Look at your program and see how much work would be involved in enlarging the grid (say, to 600x600) and drawing many more squares. If it looks practical, do it!

More Related