p rocessing.js

13
processing .js

TAGS:

description

p rocessing.js. http:// jmartinho.net /digitalArt-html5/ index.php?art = tr -lines. What is it?. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. - PowerPoint PPT Presentation

Transcript of p rocessing.js

Page 1: p rocessing.js

processing.js

Page 2: p rocessing.js

http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines

Page 3: p rocessing.js

What is it?

Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins.

Basically, it is how we put our Processing sketches onto the web.

Page 4: p rocessing.js

What is it?

Processing.js is built with Javascript and HTML5

It automatically converts your Processing code into Javascript so that it can appear with all its functionality on a web browser.

Page 5: p rocessing.js

How does it work?

1. Download the latest version from processingjs.org

Page 6: p rocessing.js

How does it work?2. Make your Processing sketch and save your files as you usually would:

*.pde

Ex: sketch_aug08.pde

Page 7: p rocessing.js
Page 8: p rocessing.js

How does it work?

3. Make a web page that includes Processing.js and a <canvas>, which is an HTML5 element.

Once processing.js is in a web page, the browser will know what to do with it!

You need to include a src attribute inside a script tag with the processing.js file name (and the path to get to it from your web page location)

Page 9: p rocessing.js

How does it work?

3. Continued… Now, add your <canvas> tag. It should have an attribute as well that calls your .pde file (and the path to get to it from your page).

Save your webpage HTML with your .js and .pde files

Page 10: p rocessing.js

How does it work?

4. Open your page!

Javascript is telling the web browser how to obtain and show your Processing sketch on the website. You should see your images come to life!

Page 11: p rocessing.js

How does it work?

**Note:

Processing.js does not work with ‘data’ folders like you use in Processing.

Make sure you save anything that’s called in your sketch (such as images) in your web page directory the same way you would anywhere else in your HTML code.

Page 12: p rocessing.js

Why Use processing.js?1. No need for plug-ins

2. Uses web standards.

Page 13: p rocessing.js

…

For more information, help, and examples, visit:

www.processingjs.org


p Sahel Crisis: Senegal Reference Map - Welcome - MapAction · 2016-07-04 · p p p p p p p p p p p p p p p p p p p p p p p p ^ ^ ^!(!!!!! !!!!! !!!!! !!!!! !!! !!!! !!!!! !!! !!!

p Sahel Crisis: Senegal Reference Map - Welcome - MapAction · 2016-07-04 · p p p p p p p p p p p p p p p p p p p p p p p p ^ ^ ^!(!!!!! !!!!! !!!!! !!!!! !!! !!!! !!!!! !!! !!!

P P P P P P P P P P P P P P P P P P P P P P P P P P P · 9/9/2020  · DESCRIPTION USDA ZONES 1G 2G 3G 5G 10G 15G 24" ABELIA grandiflora 6-11 70 ABELIA grandiflora 'Edward Goucher'

P P P P P P P P P P P P P P P P P P P P P P P P P P P · 9/9/2020  · DESCRIPTION USDA ZONES 1G 2G 3G 5G 10G 15G 24" ABELIA grandiflora 6-11 70 ABELIA grandiflora 'Edward Goucher'

mpo wins salem - NCDOT p pppp p p p p p p p p p p p p p p p p p p p p p p p p p p pp p p p p p p p pp p p p p p p p p p p p p p p p p p p p p p p p p p p p p ppppppp p p p p p p p

mpo wins salem - NCDOT p pppp p p p p p p p p p p p p p p p p p p p p p p p p p p pp p p p p p p p pp p p p p p p p p p p p p p p p p p p p p p p p p p p p p ppppppp p p p p p p p

P $!P PGP+P .%6+* · !//+* p $!p pg/p+"p .%6+* 01. (p !/+1. !/p * p .%6+* /p +*+)5 $%/p%/p0$!p/0 0!p/! !//+* p $!p pg/p+"p .%6+* 01. (p !/+1. !/p * p .%6+* /p +*+)5 $%/p%/p p,$+0+#.

P $!P PGP+P .%6+* · !//+* p $!p pg/p+"p .%6+* 01. (p !/+1. !/p * p .%6+* /p +*+)5 $%/p%/p0$!p/0 0!p/! !//+* p $!p pg/p+"p .%6+* 01. (p !/+1. !/p * p .%6+* /p +*+)5 $%/p%/p p,$+0+#.

PAT · p! p! p! p! p! p! p!p! p! p! p! p! p p p!! pp! p! p! p!p p! p! p!p p pp!! p!p! p!p!p! p! pp!! ! p!p! p p! p!! p! p! p! p! p! p! p! p! p! p! p p! p! p! p! p! p! p! p ...

PAT · p! p! p! p! p! p! p!p! p! p! p! p! p p p!! pp! p! p! p!p p! p! p!p p pp!! p!p! p!p!p! p! pp!! ! p!p! p p! p!! p! p! p! p! p! p! p! p! p! p! p p! p! p! p! p! p! p! p ...

dsce.du.ac.indsce.du.ac.in/wp-content/uploads/2017/07/English_A.pdfRAJ IV p p p p P P p p p p P p P P p p p p p p p p p P p p DYAL SINGH EVENING COLLEGE (University Of Delhi), LODHI

dsce.du.ac.indsce.du.ac.in/wp-content/uploads/2017/07/English_A.pdfRAJ IV p p p p P P p p p p P p P P p p p p p p p p p P p p DYAL SINGH EVENING COLLEGE (University Of Delhi), LODHI

MAY 7 - SFU - Meetupfiles.meetup.com/1276587/2016-Astronomy-Day-Location-for-RASC... · MAY 7 - SFU Astronomy Day ∀ ∀ P P P P P P P P P P P P P P P P P P P P P P P P? P P? Lot

MAY 7 - SFU - Meetupfiles.meetup.com/1276587/2016-Astronomy-Day-Location-for-RASC... · MAY 7 - SFU Astronomy Day ∀ ∀ P P P P P P P P P P P P P P P P P P P P P P P P? P P? Lot

MICRORREGIÕES GEOGRÁFICAS · p p p p p p p p p p p p p p p pp p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p

MICRORREGIÕES GEOGRÁFICAS · p p p p p p p p p p p p p p p pp p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p

Special Programs ARRIVAL GUIDE · Road Closed N S P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P w w w w 1 3 2 B A R O O 9 L

Special Programs ARRIVAL GUIDE · Road Closed N S P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P w w w w 1 3 2 B A R O O 9 L

Dike District Assessment Map - skagitriverhistory.com River Maps/Skagit... · p p p p p p p p p p p p p p p p p ppppppp p p p p p p p pp pp pp pp pp p p p p p p p p p p p p p p p

Dike District Assessment Map - skagitriverhistory.com River Maps/Skagit... · p p p p p p p p p p p p p p p p p ppppppp p p p p p p p pp pp pp pp pp p p p p p p p p p p p p p p p

ED- WEST ASSEMBLY CONSTITUENCY 25 - MOTI NAGARceodelhi.gov.in/ACMAP/25.pdf · 2016. 3. 31. · p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p shivaji park inderlok

ED- WEST ASSEMBLY CONSTITUENCY 25 - MOTI NAGARceodelhi.gov.in/ACMAP/25.pdf · 2016. 3. 31. · p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p shivaji park inderlok

Atmos Energy: City of Dallas Natural Gas Distribution ......p pp p p pp p pp p p p p p p p p p p p p p p pp p p p ppp p p p p pp p p p p p p p p p p p p p p pp p p pp p pp pp p ppp

Atmos Energy: City of Dallas Natural Gas Distribution ......p pp p p pp p pp p p p p p p p p p p p p p p pp p p p ppp p p p p pp p p p p p p p p p p p p p p pp p p pp p pp pp p ppp

mpo high point - NCDOT...davidson guilford randolph county county county p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p pp p.61.55.45.40.28.76

mpo high point - NCDOT...davidson guilford randolph county county county p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p pp p.61.55.45.40.28.76

S T S S S - Podgoricapodgorica.me/.../2018/12._pejzazna_arhitektura.pdf · p p p p p p p p p p p p p p p p p p p p p p p p p p p p a b d c up2 up1 up3 up9 up8 up7 up6 up5 up4 up11

S T S S S - Podgoricapodgorica.me/.../2018/12._pejzazna_arhitektura.pdf · p p p p p p p p p p p p p p p p p p p p p p p p p p p p a b d c up2 up1 up3 up9 up8 up7 up6 up5 up4 up11

P LEGEND P h c P n a P r B Eas t P R iver P mb e r H u P ... · ¬(p p ¬(¬(p ¬(p ¬(p ¬(p ¬(p ¬(p ¬(p ¬(p ¬(p p ¬(p ¬(p ¬(p ¬(¬(p ¬(p ¬(p ¬(p ¬(p ¬(p p¬(¬(p p¬(

P LEGEND P h c P n a P r B Eas t P R iver P mb e r H u P ... · ¬(p p ¬(¬(p ¬(p ¬(p ¬(p ¬(p ¬(p ¬(p ¬(p ¬(p p ¬(p ¬(p ¬(p ¬(¬(p ¬(p ¬(p ¬(p ¬(p ¬(p p¬(¬(p p¬(

081202 24kCorridors CapX2020Website Sheetmap 1 · p p p p p p pp p p p p p p p p p p p p p p p pp p pp p p p p p p p p p p p p p

081202 24kCorridors CapX2020Website Sheetmap 1 · p p p p p p pp p p p p p p p p p p p p p p p pp p pp p p p p p p p p p p p p p

'¨34 » l g2 #Øg #1 Â i · è>, » b + # p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p 3 >/>,% 2 Ç b% $× l g "8 p p p p p p p p p p p p p p p p p p p p p p p

'¨34 » l g2 #Øg #1 Â i · è>, » b + # p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p 3 >/>,% 2 Ç b% $× l g "8 p p p p p p p p p p p p p p p p p p p p p p p

T E P FF or TF...FORSYTH COUNTY P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P PPPPPPP P P P Trail Inn Ln. Ben

T E P FF or TF...FORSYTH COUNTY P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P PPPPPPP P P P Trail Inn Ln. Ben

T E P FF or TF · p p p p p p p p pp p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p pppppppppppppppppppppppppp p p p p p p p p ppp p p ppp p p p p p p p p p

T E P FF or TF · p p p p p p p p pp p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p pppppppppppppppppppppppppp p p p p p p p p ppp p p ppp p p p p p p p p p

AFGHANISTAN: Reference Map · AFGHANISTAN: Reference Map p U U p p p p p p p p p p p p p p U p p p p p p p U p p p p U p p p p p p p p p p p p p p p p!!!!! !!!! !!!!! !!!!!^!^!!!!!^!!!!!

AFGHANISTAN: Reference Map · AFGHANISTAN: Reference Map p U U p p p p p p p p p p p p p p U p p p p p p p U p p p p U p p p p p p p p p p p p p p p p!!!!! !!!! !!!!! !!!!!^!^!!!!!^!!!!!