2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/micLevel/sketch.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Make some noise to float the ellipse
3 | */
4 |
5 | function setup() {
6 | createCanvas(400,400);
7 | mic = new p5.AudioIn();
8 | mic.start();
9 | }
10 |
11 | function draw() {
12 | background(0);
13 |
14 | // getLevel takes an optional smoothing value, or defaults to 0.0
15 | micLevel = mic.getLevel();
16 | ellipse(width/2, height - micLevel*height, 100, 100);
17 | }
--------------------------------------------------------------------------------
/examples/addons/p5.sound/micLevel_on_off/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/oscillatorFFT/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/oscillatorMod_AM/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/oscillatorMod_FM/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/oscillatorSecondsFromNow/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/oscillatorSecondsFromNow/sketch.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Example: change amplitude with fadeTime, and schedule the change to happen in the future.
3 | */
4 |
5 | function setup() {
6 | osc = new p5.TriOsc();
7 | osc.freq(260);
8 | createP('mousePressed: set amplitude to .7 over the course of .2 seconds');
9 | createP('mouseReleased: 1 second fade to 0. Start the fade 0.5 seconds from now');
10 | }
11 |
12 | function mousePressed () {
13 | osc.start();
14 | // fade amplitude to .7 over the course of .2 seconds
15 | osc.amp(0.7, 0.02);
16 | }
17 |
18 | function mouseReleased() {
19 | // fade amplitude to zero over the course of 1 second. Start the fade after .5 seconds.
20 | osc.amp(0, 1, 0.5);
21 | }
22 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/outOfPhase/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/pan_soundfile/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/pause_soundfile/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/pause_soundfile/sketch.js:
--------------------------------------------------------------------------------
1 | // ====================
2 | // DEMO: pause sound when the user presses a key, resume on release
3 | // ====================
4 |
5 | var soundFile;
6 |
7 | function preload() {
8 | // create a SoundFile
9 | soundFormats('ogg', 'mp3');
10 | soundFile = loadSound('../_files/Damscray_-_Dancing_Tiger_02');
11 | }
12 |
13 | function setup() {
14 | createCanvas(400, 400);
15 | background(0, 255, 0);
16 |
17 | soundFile.loop();
18 | createP('Press any key to pause. Resume when the key is released')
19 | }
20 |
21 | function keyTyped() {
22 | soundFile.pause();
23 | background(255, 0, 0);
24 | }
25 |
26 | function keyReleased() {
27 | soundFile.play();
28 | background(0, 255, 0);
29 | }
30 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/play_soundfile/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/play_soundfile/sketch.js:
--------------------------------------------------------------------------------
1 | // ====================
2 | // DEMO: play a sound when the user presses a key
3 | // ====================
4 |
5 | // create a variable for the sound file
6 | var soundFile;
7 |
8 | function setup() {
9 | createCanvas(400, 400);
10 | background(0);
11 |
12 | // create a SoundFile
13 | soundFile = loadSound( ['../_files/beatbox.ogg', '../_files/beatbox.mp3'] );
14 |
15 | createP('Press any key to play the sound');
16 | }
17 |
18 | // when a key is pressed...
19 | function keyPressed() {
20 |
21 | // play the sound file
22 | soundFile.play(1,1);
23 |
24 | // also make the background yellow
25 | background(255, 255, 0);
26 | }
27 |
28 | function keyReleased() {
29 | // make the background black again when the key is released
30 | background(0);
31 | }
32 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/playbackRate/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/playbackRate/sketch.js:
--------------------------------------------------------------------------------
1 | /**
2 | * DEMO
3 | * - change playback rate of a soundfile based on mouseX position
4 | * - a negative playback rate will reverse the soundfile, but won't
5 | * preserve current location of the playhead.
6 | */
7 |
8 | // ====================
9 |
10 | var soundFile;
11 | var p;
12 |
13 | function preload() {
14 | soundFormats('mp3', 'ogg');
15 | soundFile = loadSound('../_files/Damscray_-_Dancing_Tiger_02');
16 | }
17 |
18 | function setup() {
19 | soundFile.loop();
20 | p = createP();
21 | }
22 |
23 | function draw() {
24 | // map playback rate of a sound file to mouseX position
25 | var newRate = (map(mouseX, 0, 1200, -0.5, 1.5));
26 | soundFile.rate(newRate);
27 | p.html( 'Playback Rate: ' + newRate.toFixed(3) )
28 | }
29 |
30 | function keyPressed() {
31 | var key = keyCode;
32 | // Spacebar: pause
33 | if (key == 32) {
34 | soundFile.pause();
35 | }
36 | }
--------------------------------------------------------------------------------
/examples/addons/p5.sound/record/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/recordLoops/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/soundFormats/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/soundFormats/sketch.js:
--------------------------------------------------------------------------------
1 | /**
2 | * There is no single audio format that is supported by all
3 | * popular web browsers. Most web browsers support MP3, but
4 | * some (Firefox, Opera) do not because it is a patented codec.
5 | *
6 | * You can ensure file format compatability by including multiple
7 | * file extensions. Both MP3 and OGG are recommended.
8 | */
9 |
10 | var soundFile;
11 |
12 | function preload() {
13 | // set the extensions we have included
14 | soundFormats('mp3', 'ogg');
15 |
16 | // load either beatbox.mp3 or beatbox.ogg, depending on the browser
17 | soundFile = loadSound('../_files/beatbox.mp3');
18 | }
19 |
20 | function setup() {
21 | createCanvas(400, 400);
22 | background(0);
23 | }
24 |
25 | function keyPressed() {
26 | soundFile.play();
27 | background(255, 255, 0);
28 | }
29 |
30 | function keyReleased() {
31 | background(0);
32 | }
33 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/soundfile_playMode/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/examples/addons/p5.sound/waveform_with_playhead/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/examples/async/loadImage/global/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/async/loadImage/global/sketch.js:
--------------------------------------------------------------------------------
1 | // In this example, we want to load a *very large* (123MegaPixels)
2 | // image and display it in setup().
3 | //
4 | // Since setup() happens quickly at the beginning, the image doesn't
5 | // have time to properly load before setup() is done.
6 | //
7 | // We are introducing preload() where you can run load
8 | // operations that are guaranteed to complete by setup().
9 | // This is called asynchronous loading, because it happens whenever
10 | // the computer is done and ready, not necessarily when you call it.
11 |
12 | var largeImage;
13 |
14 | function preload() {
15 | largeImage = loadImage('test.gif'); // preloading the image guarantees it will be ready by setup()
16 | };
17 |
18 | function setup() {
19 | createCanvas(1300, 600);
20 | image(largeImage, 0, 0);
21 | };
22 |
23 | function draw() {
24 | // do nothing
25 | };
--------------------------------------------------------------------------------
/examples/async/loadImage/global/test.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/async/loadImage/global/test.gif
--------------------------------------------------------------------------------
/examples/async/loadImage/instance/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/async/loadImage/instance/test.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/async/loadImage/instance/test.gif
--------------------------------------------------------------------------------
/examples/async/loadJSON_callback/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/examples/async/loadJSON_options/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/async/loadJSON_options/sketch.js:
--------------------------------------------------------------------------------
1 | function setup() {
2 | noCanvas();
3 | loadJSON('http://api.openweathermap.org/data/2.5/station?id=5091',parseStuff,'json');
4 |
5 | }
6 |
7 | function parseStuff(data){
8 | console.log(data);
9 | }
--------------------------------------------------------------------------------
/examples/async/loadJSON_preload/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/async/loadStrings_callback/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/async/loadStrings_callback/tenderbuttons_excerpt.txt:
--------------------------------------------------------------------------------
1 | SALAD.
2 | It is a winning cake.
3 | SAUCE.
4 | What is bay labored what is all be section, what is no much. Sauce sam
5 | in.
6 | SALMON.
7 | It was a peculiar bin a bin fond in beside.
8 | ORANGE.
9 | Why is a feel oyster an egg stir. Why is it orange centre.
10 | A show at tick and loosen loosen it so to speak sat.
11 | It was an extra leaker with a see spoon, it was an extra licker with a
12 | see spoon.
13 | ORANGE.
14 | A type oh oh new new not no not knealer knealer of old show beefsteak,
15 | neither neither.
16 | ORANGES.
17 | Build is all right.
--------------------------------------------------------------------------------
/examples/async/loadStrings_preload/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/async/loadStrings_preload/sketch.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Load strings of text into an array of lines.
3 | *
4 | * Display a random line every time the mouse is clicked.
5 | */
6 |
7 | var result;
8 |
9 | function preload() {
10 | result = loadStrings('tenderbuttons_excerpt.txt');
11 | }
12 |
13 | function setup(){
14 | createCanvas(600,100);
15 | textAlign(CENTER);
16 | fill(0);
17 | noStroke();
18 |
19 | pickLine();
20 | }
21 |
22 | function pickLine(){
23 | background(255);
24 | var randomLineNumber = floor(random(0, result.length-1));
25 | var randomLine = result[randomLineNumber];
26 | text(randomLine, width/2, height/2);
27 |
28 | print('Displaying random line number ' + randomLineNumber + ' of ' + result.length);
29 | print('Click the mouse to display a different random line!');
30 | }
31 |
32 | // refresh text every time the mouse is clicked
33 | function mouseClicked(){
34 | pickLine();
35 | }
--------------------------------------------------------------------------------
/examples/async/loadStrings_preload/tenderbuttons_excerpt.txt:
--------------------------------------------------------------------------------
1 | SALAD.
2 | It is a winning cake.
3 | SAUCE.
4 | What is bay labored what is all be section, what is no much. Sauce sam
5 | in.
6 | SALMON.
7 | It was a peculiar bin a bin fond in beside.
8 | ORANGE.
9 | Why is a feel oyster an egg stir. Why is it orange centre.
10 | A show at tick and loosen loosen it so to speak sat.
11 | It was an extra leaker with a see spoon, it was an extra licker with a
12 | see spoon.
13 | ORANGE.
14 | A type oh oh new new not no not knealer knealer of old show beefsteak,
15 | neither neither.
16 | ORANGES.
17 | Build is all right.
--------------------------------------------------------------------------------
/examples/async/loadTable_callback/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Open the console to view results
9 |
--------------------------------------------------------------------------------
/examples/async/loadTable_callback/sketch.js:
--------------------------------------------------------------------------------
1 | var table;
2 |
3 | function setup() {
4 | loadTable("table.csv", "header", "csv", logResults);
5 | }
6 |
7 | function logResults(results) {
8 | table = results;
9 | console.log(table);
10 | for (var i = 0; i < table.rows.length; i++) {
11 | for (var j = 0; j < table.columns.length; j++ ) {
12 | console.log(table.columns[j] +': '+ table.rows[i].getString(j) );
13 | }
14 | console.log('---');
15 | }
16 | }
--------------------------------------------------------------------------------
/examples/async/loadTable_callback/table.csv:
--------------------------------------------------------------------------------
1 | id,species,name
2 | 0,Capra hircus,Goat
3 | 1,Panthera pardus,Leopard
4 | 2,Equus zebra,Zebra
--------------------------------------------------------------------------------
/examples/async/loadTable_options/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Open the console to view results
9 |
--------------------------------------------------------------------------------
/examples/async/loadTable_options/sketch.js:
--------------------------------------------------------------------------------
1 | var table;
2 |
3 | function setup() {
4 | loadTable('table.csv', 'tsv', logResults);
5 | }
6 |
7 | function logResults(results) {
8 | table = results;
9 | console.log(table);
10 | for (var i = 0; i < table.rows.length; i++) {
11 | for (var j = 0; j < table.columns.length; j++ ) {
12 | console.log(table.columns[j] +': '+ table.rows[i].getString(j) );
13 | }
14 | console.log('---');
15 | }
16 | }
--------------------------------------------------------------------------------
/examples/async/loadTable_options/table.csv:
--------------------------------------------------------------------------------
1 | 0 Capra hircus Goat
2 | 1 Panthera pardus Leopard
3 | 2 Equus zebra Zebra
--------------------------------------------------------------------------------
/examples/async/loadTable_preload/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Open the console to view results
9 |
--------------------------------------------------------------------------------
/examples/async/loadTable_preload/sketch.js:
--------------------------------------------------------------------------------
1 | var table;
2 |
3 | function preload() {
4 | table = loadTable('table.csv', 'header');
5 | }
6 |
7 | function setup() {
8 | console.log(table);
9 | for (var i = 0; i < table.rows.length; i++) {
10 | for (var j = 0; j < table.columns.length; j++ ) {
11 | console.log(table.columns[j] +': '+ table.rows[i].getString(j) );
12 | }
13 | console.log('---');
14 | }
15 | }
--------------------------------------------------------------------------------
/examples/async/loadTable_preload/table.csv:
--------------------------------------------------------------------------------
1 | id,species,name
2 | 0,Capra hircus,Goat
3 | 1,Panthera pardus,Leopard
4 | 2,Equus zebra,Zebra
--------------------------------------------------------------------------------
/examples/empty-example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/empty-example/sketch.js:
--------------------------------------------------------------------------------
1 | function setup() {
2 | // put setup code here
3 | createCanvas(600, 400);
4 | }
5 |
6 | function draw() {
7 | // put drawing code here
8 | }
--------------------------------------------------------------------------------
/examples/env/cursor/banana.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/env/cursor/banana.png
--------------------------------------------------------------------------------
/examples/env/cursor/cursor.js:
--------------------------------------------------------------------------------
1 | var r, g, b, y;
2 |
3 | function setup(){
4 | createCanvas(400,400);
5 | r = color(255,0,0);
6 | g = color(50,200,0);
7 | b = color(0,0,255);
8 | y = color(255,255,0);
9 | };
10 |
11 | function draw() {
12 | noStroke();
13 | background(b);
14 | fill(r);
15 | rect(0,0,200,200);
16 | fill(g);
17 | rect(200,0,200,200);
18 | fill(y);
19 | rect(0,200,200,200);
20 |
21 | if (mouseX < 200 && mouseY < 200) {
22 | //cursor("http://www.mariowiki.com/images/8/87/SMK_Banana.png");
23 | cursor("banana.png", 0, 60);
24 | ellipse(mouseX, mouseY, 5, 5);
25 | } else if (mouseX > 200 && mouseY < 200) {
26 | cursor(CROSS);
27 | } else if (mouseX > 200 && mouseY > 200) {
28 | cursor(WAIT);
29 | } else if (mouseX < 200 && mouseY > 200) {
30 | cursor(HAND);
31 | } else {
32 | cursor(ARROW);
33 | }
34 | }
--------------------------------------------------------------------------------
/examples/env/cursor/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | P5.js - cursor(img)
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/instantiation-global/case1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/instantiation-global/case1/sketch.js:
--------------------------------------------------------------------------------
1 | // CASE 1
2 | // Only setup().
3 | // setup() runs once and createCanvas() gets called automatically with defaults.
4 | function setup() {
5 | background(255, 0, 0);
6 | noStroke();
7 | ellipse(0, 0, 50, 50);
8 | }
--------------------------------------------------------------------------------
/examples/instantiation-global/case2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/instantiation-global/case2/sketch.js:
--------------------------------------------------------------------------------
1 | // CASE 2
2 | // Only setup() and createCanvas().
3 | // setup() runs once and createCanvas() returns a pointer to the canvas created
4 | // with the input size, at 0,0. Holding the pointer is optional.
5 | function setup() {
6 | createCanvas(400, 400);
7 | background(255, 0, 0);
8 | noStroke();
9 | ellipse(0, 0, 50, 50);
10 | }
--------------------------------------------------------------------------------
/examples/instantiation-global/case3/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/instantiation-global/case3/sketch.js:
--------------------------------------------------------------------------------
1 | // CASE 3
2 | // Only draw().
3 | // createCanvas() is called automatically with defaults.
4 | function draw() {
5 | ellipse(random(0, 400), random(0, 400), 50, 50);
6 | }
--------------------------------------------------------------------------------
/examples/instantiation-global/case4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/instantiation-global/case4/sketch.js:
--------------------------------------------------------------------------------
1 | // CASE 4
2 | // setup() and draw() without createCanvas().
3 | // createCanvas() is called automatically with defaults.
4 | function setup() {
5 | background(255, 0, 0);
6 | }
7 | function draw() {
8 | ellipse(random(0, 400), random(0, 400), 50, 50);
9 | }
--------------------------------------------------------------------------------
/examples/instantiation-global/case5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/instantiation-global/case5/sketch.js:
--------------------------------------------------------------------------------
1 | // CASE 5
2 | // setup() and draw() with createCanvas().
3 | function setup() {
4 | createCanvas(400, 400);
5 | background(255, 255, 0);
6 | }
7 | function draw() {
8 | ellipse(random(0, 400), random(0, 400), 50, 50);
9 | }
--------------------------------------------------------------------------------
/examples/instantiation-global/case6/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/examples/instantiation-global/case6/sketch.js:
--------------------------------------------------------------------------------
1 | // CASE 6
2 | // setup() and draw() with createCanvas(), holding pointer
3 | // parent call moves canvas to div with given id
4 | var canvas;
5 | function setup() {
6 | canvas = createCanvas(400, 400);
7 | canvas.parent('test');
8 | background(255, 255, 0);
9 | }
10 | function draw() {
11 | ellipse(random(0, 400), random(0, 400), 50, 50);
12 | //console.log(mouseX);
13 | }
--------------------------------------------------------------------------------
/examples/instantiation-instance/case0/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/instantiation-instance/case0/sketch.js:
--------------------------------------------------------------------------------
1 | // CASE 0: no node specified
2 | // Canvas is auto-generated and appended to body.
3 | var s = function( sketch ) {
4 |
5 | var gray = 0;
6 |
7 | sketch.draw = function() {
8 | sketch.background(gray);
9 | sketch.rect(sketch.width/2, sketch.height/2, 50, 50);
10 | }
11 |
12 | sketch.mousePressed = function() {
13 | gray += 10;
14 | }
15 |
16 | };
17 |
18 | var myp5 = new p5(s);
--------------------------------------------------------------------------------
/examples/instantiation-instance/case1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/instantiation-instance/case1/sketch.js:
--------------------------------------------------------------------------------
1 | // CASE 1: no node specified, createCanvas called
2 | // Canvas is generated and appended to body.
3 |
4 |
5 | var s = function( p ) {
6 |
7 | var gray = 0;
8 |
9 | p.setup = function() {
10 | p.createCanvas(400, 400);
11 | };
12 |
13 | p.draw = function() {
14 | p.background(gray);
15 | p.rect(p.width/2, p.height/2, 50, 50);
16 | }
17 |
18 | p.mousePressed = function() {
19 | gray += 10;
20 | }
21 |
22 | };
23 |
24 | var myp5 = new p5(s);
25 |
26 |
--------------------------------------------------------------------------------
/examples/instantiation-instance/case3/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/examples/instantiation-instance/case3/sketch.js:
--------------------------------------------------------------------------------
1 | // CASE 2: node specified, node is a DIV ELEMENT ID
2 | // A canvas with p5 attached will be inserted inside of it.
3 | var s = function( sketch ) {
4 |
5 | var gray = 0;
6 |
7 | sketch.setup = function() {
8 | sketch.createCanvas(400, 400);
9 | };
10 |
11 | sketch.draw = function() {
12 | sketch.background(gray);
13 | sketch.rect(sketch.width/2, sketch.height/2, 50, 50);
14 | }
15 |
16 | sketch.mousePressed = function() {
17 | gray += 10;
18 | }
19 |
20 | };
21 |
22 | var myp5 = new p5(s, 'p5-container');
--------------------------------------------------------------------------------
/examples/instantiation-instance/case4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/examples/instantiation-instance/case4/sketch.js:
--------------------------------------------------------------------------------
1 | // CASE 2: node specified, node is a DIV ELEMENT
2 | // A canvas with p5 attached will be inserted inside of it.
3 | var s = function( sketch ) {
4 |
5 | var gray = 0;
6 |
7 | sketch.setup = function() {
8 | sketch.createCanvas(400, 400);
9 | };
10 |
11 | sketch.draw = function() {
12 | sketch.background(gray);
13 | sketch.rect(sketch.width/2, sketch.height/2, 50, 50);
14 | }
15 |
16 | sketch.mousePressed = function() {
17 | gray += 10;
18 | }
19 |
20 | };
21 |
22 | window.onload = function() {
23 | var containerNode = document.getElementById( 'p5-container' );
24 | var myp5 = new p5(s, containerNode);
25 | };
--------------------------------------------------------------------------------
/examples/instantiation-instance/case5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/instantiation-instance/case5/sketch.js:
--------------------------------------------------------------------------------
1 | // CASE 3: alternate syntax
2 | // Canvas is auto-generated and appended to body.
3 | var myp5 = new p5(function( sketch ) {
4 |
5 | var gray = 0;
6 |
7 | sketch.setup = function() {
8 | sketch.createCanvas(400, 400);
9 | };
10 |
11 | sketch.draw = function() {
12 | sketch.background(gray);
13 | sketch.rect(sketch.width/2, sketch.height/2, 50, 50);
14 | }
15 |
16 | sketch.mousePressed = function() {
17 | gray += 10;
18 | }
19 |
20 | });
--------------------------------------------------------------------------------
/examples/instantiation-instance/case6/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp1/example_1_1.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // ported by Lauren McCarthy
6 |
7 | // Example 1-1: stroke and fill
8 |
9 | function setup(){
10 | createCanvas(200,200);
11 | background(255);
12 | };
13 |
14 | function draw(){
15 | stroke(0);
16 | fill(150);
17 | rect(50,50,75,100);
18 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp1/example_1_2.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 1-2: noFill
8 | function setup(){
9 | createCanvas(200,200);
10 | smooth();
11 | background(255);
12 | // noFill() leaves the shape with only an outline.
13 | noFill();
14 | stroke(0);
15 | };
16 |
17 | function draw(){
18 | ellipse(60,60,100,100);
19 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp1/example_1_3.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 1-3: RGB Color
8 | function setup(){
9 | smooth();
10 | background(255);
11 | noStroke();
12 | };
13 |
14 | function draw(){
15 |
16 |
17 | // Bright red
18 | fill(255,0,0);
19 | ellipse(20,20,16,16);
20 |
21 | // Dark red
22 | fill(127,0,0);
23 | ellipse(40,20,16,16);
24 |
25 | // Pink (pale red)
26 | fill(255,200,200);
27 | ellipse(60,20,16,16);
28 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp1/example_1_4.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 1-4: Alpha Transparency
8 |
9 | function setup(){
10 | createCanvas(200,200);
11 | noStroke();
12 | };
13 |
14 | function draw(){
15 |
16 | background(0);
17 |
18 | // No fourth argument means 100% opacity.
19 | fill(0,0,255);
20 | rect(0,0,100,200);
21 |
22 | // 255 means 100% opacity.
23 | fill(255,0,0,255);
24 | rect(0,0,200,40);
25 |
26 | // 75% opacity.
27 | fill(255,0,0,191);
28 | rect(0,50,200,40);
29 |
30 | // 55% opacity.
31 | fill(255,0,0,127);
32 | rect(0,100,200,40);
33 |
34 | // 25% opacity.
35 | fill(255,0,0,63);
36 | rect(0,150,200,40);
37 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp1/example_1_5.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 1-5: Zoog
8 |
9 | function setup(){
10 | createCanvas(200,200);
11 | background(255);
12 | smooth();
13 | ellipseMode(CENTER);
14 | rectMode(CENTER);
15 | };
16 |
17 | function draw(){
18 | // Body
19 | stroke(0);
20 | fill(150);
21 | rect(100,100,20,100);
22 |
23 | // Head
24 | fill(255);
25 | ellipse(100,70,60,60);
26 |
27 | // Eyes
28 | fill(0);
29 | ellipse(81,70,16,32);
30 | ellipse(119,70,16,32);
31 |
32 | // Legs
33 | stroke(0);
34 | line(90,150,80,160);
35 | line(110,150,120,160);
36 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_1/catcher.js:
--------------------------------------------------------------------------------
1 |
2 | // Catch class
3 |
4 | function Catcher(tempR) {
5 |
6 | this.r = tempR; // radius
7 | this.x = 0; // location
8 | this.y = 0;
9 | }
10 |
11 | Catcher.prototype.setLocation = function(tempX, tempY) {
12 | this.x = tempX;
13 | this.y = tempY;
14 | };
15 |
16 | Catcher.prototype.display = function() {
17 | stroke(0);
18 | fill(175);
19 | ellipse(this.x, this.y, this.r*2, this.r*2);
20 | };
21 |
22 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_1/example_10_1.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 10-1: Catcher
8 |
9 | var catcher;
10 |
11 | function setup(){
12 | createCanvas(400,400);
13 | catcher = new Catcher(32);
14 | smooth();
15 | };
16 |
17 | function draw(){
18 | background(255);
19 | catcher.setLocation(mouseX,mouseY);
20 | catcher.display();
21 | };
22 |
23 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_10/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_2/example_10_2.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 10-2: Bouncing ball class
8 |
9 | // Two ball variables
10 | var ball1;
11 | var ball2;
12 |
13 | function setup(){
14 | createCanvas(400,400);
15 | smooth();
16 |
17 | // Initialize balls
18 | ball1 = new Ball(64);
19 | ball2 = new Ball(32);
20 | };
21 |
22 | function draw(){
23 | background(255);
24 |
25 | // Move and display balls
26 | ball1.move();
27 | ball2.move();
28 | ball1.display();
29 | ball2.display();
30 | };
31 |
32 |
33 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_3/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_4/example_10_4.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // example 10-4: Implementing a timer
8 |
9 | var savedTime;
10 | var totalTime = 5000;
11 |
12 | function setup(){
13 | createCanvas(200,200);
14 | background(0);
15 | savedTime = millis();
16 | };
17 |
18 | function draw(){
19 | // Calculate how much time has passed
20 | var passedTime = millis() - savedTime;
21 | // Has five seconds passed?
22 | if (passedTime > totalTime) {
23 | println( " 5 seconds have passed! " );
24 | background(random(255)); // Color a new background
25 | savedTime = millis(); // Save the current time to restart the timer!
26 | }
27 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_5/example_10_5.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 10-5: Object-oriented timer
8 |
9 | var timer;
10 |
11 | function setup(){
12 | createCanvas(200,200);
13 | background(0);
14 | timer = new Timer(5000);
15 | timer.start();
16 | };
17 |
18 | function draw(){
19 | if (timer.isFinished()) {
20 | background(random(255));
21 | timer.start();
22 | }
23 | };
24 |
25 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_5/timer.js:
--------------------------------------------------------------------------------
1 |
2 | // Timer class
3 |
4 | function Timer(tempTotalTime) {
5 | this.savedTime = 0; // When Timer started
6 | this.totalTime = tempTotalTime; // How long Timer should last
7 | }
8 |
9 | // Starting the timer
10 | Timer.prototype.start = function() {
11 | // When the timer starts it stores the current time in milliseconds.
12 | this.savedTime = millis();
13 | };
14 |
15 | // The function isFinished() returns true if 5,000 ms have passed.
16 | // The work of the timer is farmed out to this method.
17 | Timer.prototype.isFinished = function() {
18 | // Check how much time has passed
19 | var passedTime = millis() - this.savedTime;
20 | if (passedTime > this.totalTime) {
21 | return true;
22 | } else {
23 | return false;
24 | }
25 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_6/example_10_6.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 10-6: Simple raindrop behavior
8 |
9 | // Variables for drop location
10 | var x,y;
11 |
12 | function setup(){
13 | createCanvas(400,400);
14 | background(0);
15 | x = width/2;
16 | y = 0;
17 | smooth();
18 | };
19 |
20 | function draw(){
21 | background(255);
22 | // Display the drop
23 | fill(50,100,150);
24 | noStroke();
25 | ellipse(x,y,16,16);
26 | // Move the drop
27 | y++ ;
28 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_6/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_7/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_8/example_10_8.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 10-8: Fancier looking raindrop
8 |
9 | function setup(){
10 | background(255);
11 | smooth();
12 | };
13 |
14 | function draw(){
15 | for (var i = 2; i < 8; i++ ) {
16 | noStroke();
17 | fill(0);
18 | ellipse(width/2, height/2 + i*4, i*2, i*2);
19 | }
20 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_8/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_9/catcher.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 10-1: Catcher
8 |
9 | function Catcher(tempR) {
10 | this.r = tempR; // radius
11 | this.x = 0; // location
12 | this.y = 0;
13 | }
14 |
15 | Catcher.prototype.setLocation = function(tempX, tempY) {
16 | this.x = tempX;
17 | this.y = tempY;
18 | };
19 |
20 | Catcher.prototype.display = function() {
21 | stroke(0);
22 | fill(175);
23 | ellipse(this.x, this.y, this.r*2, this.r*2);
24 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp10/example_10_9/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp2/example_2_1.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 2-1: Zoog again
8 |
9 | function setup(){
10 | createCanvas(200,200); // Set the size of the window
11 | background(255); // Draw a black background
12 | smooth();
13 |
14 | // Set ellipses and rects to CENTER mode
15 | ellipseMode(CENTER);
16 | rectMode(CENTER);
17 | };
18 |
19 | function draw(){
20 | // Draw Zoog's body
21 | stroke(0);
22 | fill(150);
23 | rect(100,100,20,100);
24 |
25 | // Draw Zoog's head
26 | fill(255);
27 | ellipse(100,70,60,60);
28 |
29 | // Draw Zoog's eyes
30 | fill(0);
31 | ellipse(81,70,16,32);
32 | ellipse(119,70,16,32);
33 |
34 | // Draw Zoog's legs
35 | stroke(0);
36 | line(90,150,80,160);
37 | line(110,150,120,160);
38 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp3/example_3_2.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 3-2: mouseX and mouseY
8 |
9 | function setup(){
10 | createCanvas(200,200);
11 | };
12 |
13 | function draw(){
14 | // Try moving background() to setup() and see the difference!
15 | background(255);
16 |
17 | // Body
18 | stroke(0);
19 | fill(175);
20 | rectMode(CENTER);
21 |
22 | // mouseX is a keyword that the sketch replaces with the horizontal position of the mouse.
23 | // mouseY is a keyword that the sketch replaces with the vertical position of the mouse.
24 | rect(mouseX,mouseY,50,50);
25 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp3/example_3_4.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 3-4: Drawing a continuous line
8 | function setup(){
9 | createCanvas(200, 200);
10 | background(255);
11 | smooth();
12 | };
13 |
14 | function draw(){
15 | stroke(0);
16 | // Draw a line from previous mouse location to current mouse location.
17 | line(pmouseX, pmouseY, mouseX, mouseY);
18 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp3/example_3_5.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 3-5: mousePressed and keyPressed
8 | function setup(){
9 | createCanvas(200,200);
10 | background(255);
11 | }
12 |
13 | function draw(){
14 | // Nothing happens in draw() in this example!
15 | }
16 |
17 | // Whenever a user clicks the mouse the code written inside mousePressed() is executed.
18 | function mousePressed() {
19 | stroke(0);
20 | fill(175);
21 | rectMode(CENTER);
22 | rect(mouseX,mouseY,16,16);
23 | }
24 |
25 | // Whenever a user presses a key the code written inside keyPressed() is executed.
26 | function keyPressed() {
27 | background(255);
28 | }
--------------------------------------------------------------------------------
/examples/learningprocessing/chp3/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp4/example_4_2.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 4-2: Using variables
8 |
9 | // Declare and initialize two variables at the top of the code.
10 | var circleX = 100;
11 | var circleY = 100;
12 |
13 | function setup(){
14 | createCanvas(200,200);
15 | smooth();
16 | };
17 |
18 | function draw(){
19 | background(255);
20 | stroke(0);
21 | fill(175);
22 | // Use the variables to specify the location of an ellipse.
23 | ellipse(circleX,circleY,50,50);
24 | };
25 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp4/example_4_3.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 4-3: Varying variables
8 |
9 | // Declare and initialize two variables at the top of the code.
10 | var circleX = 0;
11 | var circleY = 100;
12 |
13 | function setup(){
14 | createCanvas(200,200);
15 | smooth();
16 | };
17 |
18 | function draw(){
19 | background(255);
20 | stroke(0);
21 | fill(175);
22 | // Use the variables to specify the location of an ellipse.
23 | ellipse(circleX,circleY,50,50);
24 |
25 | // An assignment operation that increments the value of circleX by 1.
26 | circleX = circleX + 1;
27 | };
28 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp4/example_4_5.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 4-5: Using system variables
8 | function setup(){
9 | createCanvas(200,200);
10 | smooth();
11 | }
12 |
13 | function draw(){
14 | background(100);
15 | stroke(255);
16 | // frameCount is used to color a rectangle.
17 | fill(frameCount / 2);
18 | rectMode(CENTER);
19 | // The rectangle will always be in the middle of the window
20 | // if it is located at (width/2, height/2).
21 | rect(width/2,height/2,mouseX+10,mouseY+10);
22 | }
23 |
24 | function keyPressed() {
25 | println(key);
26 | }
27 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp4/example_4_6.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 4-6: Ellipse with variables
8 |
9 | // Declare and initialize your variables!
10 | var r = 100;
11 | var g = 150;
12 | var b = 200;
13 | var a = 200;
14 |
15 | var diam = 20;
16 | var x = 100;
17 | var y = 100;
18 |
19 | function setup(){
20 | createCanvas(200,200);
21 | background(255);
22 | smooth();
23 | };
24 |
25 | function draw(){
26 | // Use those variables to draw an ellipse
27 | stroke(0);
28 | fill(r,g,b,a); // (Remember, the fourth argument for a color is transparency.
29 | ellipse(x,y,diam,diam);
30 | };
31 |
32 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp4/example_4_7.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 4-7: Filling variables with random values
8 |
9 | var r;
10 | var g;
11 | var b;
12 | var a;
13 |
14 | var diam;
15 | var x;
16 | var y;
17 |
18 | function setup(){
19 | createCanvas(200,200);
20 | background(255);
21 | smooth();
22 | };
23 |
24 | function draw(){
25 | // Each time through draw(), new random numbers are picked for a new ellipse.
26 | r = random(255);
27 | g = random(255);
28 | b = random(255);
29 | a = random(255);
30 | diam = random(20);
31 | x = random(width);
32 | y = random(height);
33 |
34 | // Use values to draw an ellipse
35 | noStroke();
36 | fill(r,g,b,a);
37 | ellipse(x,y,diam,diam);
38 | };
39 |
40 |
41 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp5/example_5_1.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 5-1: Conditionals
8 |
9 | // Variables
10 | var r = 150;
11 | var g = 0;
12 | var b = 0;
13 |
14 | function setup(){
15 | createCanvas(200,200);
16 | };
17 |
18 | function draw(){
19 | // Draw stuff
20 | background(r,g,b);
21 | stroke(255);
22 | line(width/2,0,width/2,height);
23 |
24 |
25 | // If the mouse is on the right side of the screen is equivalent to
26 | // "if mouseX is greater than width divided by 2."
27 | if(mouseX > width/2) {
28 | r = r + 1;
29 | } else {
30 | r = r - 1;
31 | }
32 |
33 | // If r is greater than 255, set it back to 255.
34 | // If r is less than 0, set it back to 0.
35 | if (r > 255) {
36 | r = 255;
37 | } else if (r < 0) {
38 | r = 0;
39 | }
40 | };
41 |
42 |
43 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp5/example_5_3.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 5-3: Rollovers
8 | function setup(){
9 | createCanvas(200,200);
10 | };
11 |
12 | function draw(){
13 | background(255);
14 | stroke(0);
15 | line(100,0,100,200);
16 | line(0,100,200,100);
17 |
18 | // Fill a black color
19 | noStroke();
20 | fill(0);
21 |
22 | // Depending on the mouse location, a different rectangle is displayed.
23 | if (mouseX < 100 && mouseY < 100) {
24 | rect(0,0,100,100);
25 | } else if (mouseX > 100 && mouseY < 100) {
26 | rect(100,0,100,100);
27 | } else if (mouseX < 100 && mouseY > 100) {
28 | rect(0,100,100,100);
29 | } else if (mouseX > 100 && mouseY > 100) {
30 | rect(100,100,100,100);
31 | }
32 | };
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp5/example_5_4.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 5-4: Hold down the button
8 | var button = false;
9 |
10 | var x = 50;
11 | var y = 50;
12 | var w = 100;
13 | var h = 75;
14 |
15 | function setup(){
16 | createCanvas(200,200);
17 | };
18 |
19 | function draw(){
20 | // The button is pressed if (mouseX,mouseY) is inside the rectangle and mousePressed is true.
21 | if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h && isMousePressed()) {
22 | button = true;
23 | } else {
24 | button = false;
25 | }
26 |
27 | if (button) {
28 | background(255);
29 | stroke(0);
30 | } else {
31 | background(0);
32 | stroke(255);
33 | }
34 |
35 | fill(175);
36 | rect(x,y,w,h);
37 | };
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp5/example_5_5.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 5-5: Button as switch
8 | var button = false;
9 |
10 | var x = 50;
11 | var y = 50;
12 | var w = 100;
13 | var h = 75;
14 |
15 | function setup(){
16 | createCanvas(200,200);
17 | }
18 |
19 | function draw(){
20 | if (button) {
21 | background(255);
22 | stroke(0);
23 | } else {
24 | background(0);
25 | stroke(255);
26 | }
27 |
28 | fill(175);
29 | rect(x,y,w,h);
30 | }
31 |
32 | // When the mouse is pressed, the state of the button is toggled.
33 | // Try moving this code to draw() like in the rollover example. What goes wrong?
34 | function mousePressed() {
35 | if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) {
36 | button = !button;
37 | }
38 | }
39 |
40 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp5/example_5_6.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 5-6: Bouncing Ball
8 | var x = 0;
9 | var speed = 1;
10 |
11 | function setup(){
12 | createCanvas(200,200);
13 | smooth();
14 | };
15 |
16 | function draw(){
17 | background(255);
18 |
19 | // Add the current speed to the x location.
20 | x = x + speed;
21 |
22 | // Remember, || means "or."
23 | if ((x > width) || (x < 0)) {
24 | // If the object reaches either edge, multiply speed by -1 to turn it around.
25 | speed = speed * -1;
26 | }
27 |
28 | // Display circle at x location
29 | stroke(0);
30 | fill(175);
31 | ellipse(x,100,32,32);
32 | };
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp6/example_6_1.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 6-1: Many lines
8 |
9 | function setup(){
10 | createCanvas(200,200);
11 | background(255);
12 | };
13 |
14 | function draw(){
15 | // Legs
16 | stroke(0);
17 | line(50,60,50,80);
18 | line(60,60,60,80);
19 | line(70,60,70,80);
20 | line(80,60,80,80);
21 | line(90,60,90,80);
22 | line(100,60,100,80);
23 | line(110,60,110,80);
24 | line(120,60,120,80);
25 | line(130,60,130,80);
26 | line(140,60,140,80);
27 | line(150,60,150,80);
28 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp6/example_6_3.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 6-3: While loop
8 |
9 | var y = 80; // Vertical location of each line
10 | var x = 50; // Initial horizontal location for first line
11 | var spacing = 10; // How far apart is each line
12 | var len = 20; // Length of each line
13 | var endLegs = 150; // A variable to mark where the legs end.
14 |
15 |
16 | function setup(){
17 | createCanvas(200,200);
18 | background(255);
19 | stroke(0);
20 | };
21 |
22 | function draw(){
23 | // Draw each leg inside a while loop.
24 | while (x <= endLegs) {
25 | line (x,y,x,y + len);
26 | x = x + spacing;
27 | }
28 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp6/example_6_4.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 6-4: Infinite loop. Don't do this!
8 |
9 | var x = 0;
10 |
11 | function setup(){
12 |
13 | while (x < 10) {
14 | println(x);
15 | // Decrementing x results in an infinite loop here because the value of x will never be 10 or greater.
16 | // Be careful!
17 | x = x - 1;
18 |
19 | // This line quits the loop so that this sketch does not crash
20 | // Comment it out to see Processing crash! (save everything else first!)
21 | break;
22 | }
23 | };
24 |
25 | function draw(){
26 |
27 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp6/example_6_6.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 6-6: Legs with a for loop
8 |
9 | var y = 80; // Vertical location of each line
10 | var spacing = 10; // How far apart is each line
11 | var len = 20; // Length of each line
12 |
13 | function setup(){
14 | createCanvas(200,200);
15 | background(255);
16 | };
17 |
18 | function draw(){
19 | // Translation of the legs while loop to a for loop.
20 | for (var x = 50; x <= 150; x += spacing) {
21 | line(x,y,x,y + len);
22 | }
23 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp6/example_6_8.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 6-8: Lines one at a time
8 |
9 | // No for loop here. Instead, a global variable.
10 | var y = 0;
11 |
12 | function setup(){
13 | createCanvas(200,200);
14 | background(255);
15 | // Slowing down the frame rate so we can easily see the effect.
16 | setFrameRate(5);
17 | };
18 |
19 | function draw(){
20 | // Draw a line
21 | stroke(0);
22 | // Only one line is drawn each time through draw().
23 | line(0,y,width,y);
24 | // Increment y
25 | y += 10;
26 |
27 | // Reset y back to 0 when it gets to the bottom of window
28 | if (y > height) {
29 | y = 0;
30 | }
31 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp6/example_6_9.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 6-9: Simple while loop with interactivity
8 |
9 | function setup(){
10 | createCanvas(255,255);
11 | };
12 |
13 | function draw(){
14 | background(0);
15 |
16 | // Start with i as 0
17 | var i = 0;
18 |
19 | // While i is less than the width of the window
20 | while (i < width) {
21 | noStroke();
22 | // The distance between the current rectangle and the mouse is equal to the absolute value of the difference between i and mouseX.
23 | var distance = abs(mouseX - i);
24 | // That distance is used to fill the color of a rectangle at horizontal location i.
25 | fill(distance);
26 | rect(i,0,10,height);
27 | // Increase i by 10
28 | i += 10;
29 | }
30 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp6/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp7/example_7_1.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 7-1: Defining a function
8 | var drawBlackCircle = function() {
9 | fill(0);
10 | ellipse(50,50,20,20);
11 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp7/example_7_2.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 7-2: Calling a function
8 |
9 | function setup(){
10 | createCanvas(100,100);
11 | smooth();
12 | };
13 |
14 | function draw(){
15 | background(255);
16 | drawBlackCircle();
17 | };
18 |
19 | var drawBlackCircle = function() {
20 | fill(0);
21 | ellipse(50,50,20,20);
22 | };
--------------------------------------------------------------------------------
/examples/learningprocessing/chp7/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp8/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp9/example_9_2.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 9-2: Initializing the elements of an array one at a time
8 |
9 | var stuff = [];
10 | stuff[0] = 8; // The first element of the array equals 8
11 | stuff[1] = 3; // The second element of the array equals 3
12 | stuff[2] = 1; // The third element of the array equals 1
--------------------------------------------------------------------------------
/examples/learningprocessing/chp9/example_9_3.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 9-3: Initializing the elements of an array all at once
8 |
9 | var arrayOfInts = {1,5,8,9,4,5};
10 | var floatArray = {1.2,3.5,2.0,3.4123,9.9};
--------------------------------------------------------------------------------
/examples/learningprocessing/chp9/example_9_4.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 9-4: Using a while loop to initialize all elements of an array
8 |
9 | var values = [];
10 |
11 | var n = 0;
12 | while (n < 1000) {
13 | values[n] = random(0,10);
14 | n = n + 1;
15 | }
--------------------------------------------------------------------------------
/examples/learningprocessing/chp9/example_9_5.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 9-5: Using a for loop to initialize all elements of an array
8 |
9 | var values = [];
10 |
11 | for (var n = 0; n < 1000; n ++ ) {
12 | values[n] = random(0,10);
13 | }
--------------------------------------------------------------------------------
/examples/learningprocessing/chp9/example_9_6.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 9-6: An array operation
8 |
9 | var values = [];
10 |
11 | for (var i = 0; i < 1000; i ++ ) {
12 | values[i] = values[i] * 2;
13 | }
--------------------------------------------------------------------------------
/examples/learningprocessing/chp9/example_9_7.js:
--------------------------------------------------------------------------------
1 | // Learning Processing
2 | // Daniel Shiffman
3 | // http://www.learningprocessing.com
4 |
5 | // Ported by Lauren McCarthy
6 |
7 | // Example 9-7: An array operation using dot length
8 |
9 | var values = [];
10 | values.length = 100;
11 |
12 | for (var i = 0; i < values.length; i ++ ) {
13 | values[i] = 0;
14 | }
15 |
--------------------------------------------------------------------------------
/examples/learningprocessing/chp9/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/loadingscreen/banana.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/loadingscreen/banana.png
--------------------------------------------------------------------------------
/examples/mouse-events/fingers.mov:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/mouse-events/fingers.mov
--------------------------------------------------------------------------------
/examples/mouse-events/global-mousex-offset/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | (0, 0)
9 | mouseX: -100
10 | mouseY: -100
11 | winMouseX: 0
12 | winMouseY: 0
13 |
14 | (100, 100)
15 | mouseX: 0
16 | mouseY: 0
17 | winMouseX: 100
18 | winMouseY: 100
19 |
20 | (400, 400)
21 | mouseX: 300
22 | mouseY: 300
23 | winMouseX: 400
24 | winMouseY: 400
25 |
26 |
27 |
--------------------------------------------------------------------------------
/examples/mouse-events/global-mousex-offset/sketch.js:
--------------------------------------------------------------------------------
1 | function setup() {
2 | var c = createCanvas(200, 200);
3 | c.position(100, 100);
4 | }
5 |
6 | function draw() {
7 | background(125);
8 | ellipse(mouseX, mouseY, 20, 20);
9 | console.log('mx:'+mouseX+' my:'+mouseY+' wmx:'+winMouseX+' wmy:'+winMouseY);
10 | }
--------------------------------------------------------------------------------
/examples/mouse-events/global-mousex/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | (0, 0)
9 | mouseX: 0
10 | mouseY: 0
11 | winMouseX: 0
12 | winMouseY: 0
13 |
14 | (100, 100)
15 | mouseX: 100
16 | mouseY: 100
17 | winMouseX: 100
18 | winMouseY: 100
19 |
20 | (400, 400)
21 | mouseX: 400
22 | mouseY: 400
23 | winMouseX: 400
24 | winMouseY: 400
25 |
26 |
27 |
--------------------------------------------------------------------------------
/examples/mouse-events/global-mousex/sketch.js:
--------------------------------------------------------------------------------
1 | function setup() {
2 | createCanvas(200, 200);
3 | ellipseMode(CENTER);
4 | }
5 |
6 | function draw() {
7 | background(125);
8 | console.log('mx:'+mouseX+' my:'+mouseY+' wmx:'+winMouseX+' wmy:'+winMouseY);
9 | ellipse(mouseX, mouseY, 20, 20);
10 | }
--------------------------------------------------------------------------------
/examples/mouse-events/instance-mousex-css/sketch.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | var sketch = function(s) {
4 | s.setup = function() {
5 | s.createCanvas(300,300);
6 | s.background(200);
7 | }
8 | s.draw = function() {
9 | s.ellipse(s.mouseX, s.mouseY, 50, 50);
10 | }
11 | };
12 |
13 | var p = new p5(sketch, 'canvas1');
14 |
15 |
--------------------------------------------------------------------------------
/examples/mouse-events/instance-mousex-offset/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | (0, 0)
9 | mouseX: -100
10 | mouseY: -100
11 | winMouseX: 0
12 | winMouseY: 0
13 |
14 | (100, 100)
15 | mouseX: 0
16 | mouseY: 0
17 | winMouseX: 100
18 | winMouseY: 100
19 |
20 | (400, 400)
21 | mouseX: 300
22 | mouseY: 300
23 | winMouseX: 400
24 | winMouseY: 400
25 |
26 |
27 |
--------------------------------------------------------------------------------
/examples/mouse-events/instance-mousex-offset/sketch.js:
--------------------------------------------------------------------------------
1 | var s = function(sketch) {
2 |
3 | var c;
4 |
5 | sketch.setup = function() {
6 |
7 | c = sketch.createCanvas(200, 200);
8 | c.position(100, 100);
9 | };
10 |
11 | sketch.draw = function() {
12 | sketch.background(125);
13 | sketch.ellipse(sketch.mouseX, sketch.mouseY, 20, 20);
14 | console.log('mx:'+sketch.mouseX+' my:'+sketch.mouseY+' wmx:'+sketch.winMouseX+' wmy:'+sketch.winMouseY);
15 | };
16 | };
17 |
18 | var myp5 = new p5(s);
--------------------------------------------------------------------------------
/examples/mouse-events/instance-mousex/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | (0, 0)
9 | mouseX: 0
10 | mouseY: 0
11 | winMouseX: 0
12 | winMouseY: 0
13 |
14 | (100, 100)
15 | mouseX: 100
16 | mouseY: 100
17 | winMouseX: 100
18 | winMouseY: 100
19 |
20 | (400, 400)
21 | mouseX: 400
22 | mouseY: 400
23 | winMouseX: 400
24 | winMouseY: 400
25 |
26 |
27 |
--------------------------------------------------------------------------------
/examples/mouse-events/instance-mousex/sketch.js:
--------------------------------------------------------------------------------
1 | var s = function(sketch) {
2 |
3 | var c;
4 |
5 | sketch.setup = function() {
6 | sketch.createCanvas(200, 200);
7 | };
8 |
9 | sketch.draw = function() {
10 | sketch.background(125);
11 | sketch.ellipse(sketch.mouseX, sketch.mouseY, 20, 20);
12 | console.log('mx:'+sketch.mouseX+' my:'+sketch.mouseY+' wmx:'+sketch.winMouseX+' wmy:'+sketch.winMouseY);
13 | };
14 | };
15 |
16 | var myp5 = new p5(s);
--------------------------------------------------------------------------------
/examples/p5.Image/cat-with-alpha.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/p5.Image/cat-with-alpha.png
--------------------------------------------------------------------------------
/examples/p5.Image/cat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/p5.Image/cat.jpg
--------------------------------------------------------------------------------
/examples/p5.Image/copying-images.js:
--------------------------------------------------------------------------------
1 | var image1;
2 | var image2;
3 |
4 | function setup() {
5 | frameRate(1);
6 | createCanvas(600, 600);
7 | background(200);
8 |
9 | //Copy image 1 into image 2
10 | image1 = createImage(40,40);
11 | image2 = loadImage("unicorn.jpg", function(img){
12 | image1.copy(img, 0, 0, 36, 36, 0, 0, 40, 40);
13 |
14 | image(image1, 10, 10);
15 | image(img, 10, 75);
16 | });
17 |
18 |
19 | //Copy an image into iself
20 | image3 = loadImage("cat.jpg", function(img){
21 |
22 | img.copy(img.width/2, 0, img.width/2, img.height, 0, 0, img.width/2, img.height);
23 |
24 | image(img, 10, 350);
25 | });
26 | }
27 |
28 |
29 |
--------------------------------------------------------------------------------
/examples/p5.Image/copying.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/p5.Image/drawing.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/p5.Image/filter.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/p5.Image/manipulate-images.js:
--------------------------------------------------------------------------------
1 | var image1;
2 | var image2;
3 |
4 | function setup() {
5 | frameRate(1);
6 | createCanvas(600, 600);
7 | background(200);
8 |
9 | //blend image 1 into image 2
10 | loadImage("cat.jpg", function(img){
11 | image(img, 10, 10, 100, 100);
12 |
13 | loadImage("unicorn.jpg", function(img2){
14 | image(img2, 120, 10, 100, 100);
15 |
16 | img2.blend(img, 0, 0, img.width, img.height, 0, 0, img2.width, img2.height, "multiply");
17 | image(img2, 250, 10);
18 | });
19 |
20 | });
21 |
22 |
23 | // mask image 2 with image 1 (using image 1 alpha channel)
24 | loadImage("cat-with-alpha.png", function(img){
25 | image(img, 10, 300, 100, 100);
26 |
27 | loadImage("unicorn.jpg", function(img2){
28 | image(img2, 120, 300, 100, 100);
29 |
30 | img2.mask(img);
31 | image(img2, 250, 300);
32 | });
33 |
34 | });
35 |
36 | }
37 |
38 |
39 |
--------------------------------------------------------------------------------
/examples/p5.Image/manipulate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/p5.Image/saving-images.js:
--------------------------------------------------------------------------------
1 | function setup() {
2 | // frameRate(1);
3 | createCanvas(600, 600);
4 | background(200);
5 |
6 | var i = loadImage("unicorn.jpg", function(img){
7 | image(img, 10, 10);
8 |
9 | setTimeout(function(){
10 | console.log("Save image")
11 | save(img, "unicorn.jpeg");
12 | }, 1000);
13 |
14 | });
15 | }
16 |
17 |
18 |
--------------------------------------------------------------------------------
/examples/p5.Image/saving.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/p5.Image/unicorn.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/p5.Image/unicorn.jpg
--------------------------------------------------------------------------------
/examples/p5.Shape/test0/circle.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/examples/p5.Shape/test0/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/p5.Shape/test0/sketch.js:
--------------------------------------------------------------------------------
1 | function setup() {
2 |
3 | }
4 |
5 | function draw() {
6 |
7 | }
--------------------------------------------------------------------------------
/examples/p5.Table/findRows/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Open the console to view results
9 |
--------------------------------------------------------------------------------
/examples/p5.Table/findRows/sketch.js:
--------------------------------------------------------------------------------
1 | var table;
2 |
3 | function setup() {
4 |
5 | table = new p5.Table();
6 |
7 | table.addColumn('name');
8 | table.addColumn('type');
9 |
10 | var newRow = table.addRow();
11 | newRow.setString('name', 'Lion');
12 | newRow.setString('type', 'Mammal');
13 |
14 | newRow = table.addRow();
15 | newRow.setString('name', 'Snake');
16 | newRow.setString('type', 'Reptile');
17 |
18 | newRow = table.addRow();
19 | newRow.setString('name', 'Mosquito');
20 | newRow.setString('type', 'Insect');
21 |
22 | newRow = table.addRow();
23 | newRow.setString('name', 'Lizard');
24 | newRow.setString('type', 'Reptile');
25 |
26 | var rows = table.findRows('Reptile', 'type');
27 | for (var i = 0; i < rows.length; i++){
28 | println(rows[i].getString('name') + ': ' + rows[i].getString('type'));
29 | }
30 | }
31 |
32 | // Sketch prints:
33 | // Snake: Reptile
34 | // Lizard: Reptile
--------------------------------------------------------------------------------
/examples/p5.Table/getColumn/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Open the console to view results
9 |
--------------------------------------------------------------------------------
/examples/p5.Table/getColumn/sketch.js:
--------------------------------------------------------------------------------
1 | var table;
2 |
3 | function setup() {
4 |
5 | table = new p5.Table();
6 |
7 | table.addColumn("name");
8 | table.addColumn("type");
9 |
10 | var newRow = table.addRow();
11 | newRow.setString("name", "Lion");
12 | newRow.setString("type", "Mammal");
13 |
14 | newRow = table.addRow();
15 | newRow.setString("name", "Snake");
16 | newRow.setString("type", "Reptile");
17 |
18 | newRow = table.addRow();
19 | newRow.setString("name", "Mosquito");
20 | newRow.setString("type", "Insect");
21 |
22 | println(table.getColumn("name"));
23 | }
24 |
25 | // Sketch prints:
26 | // ["Lion", "Snake", "Mosquito"]
--------------------------------------------------------------------------------
/examples/p5.Table/matchRow/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Open the console to view results
9 |
--------------------------------------------------------------------------------
/examples/p5.Table/matchRow/sketch.js:
--------------------------------------------------------------------------------
1 | var table;
2 |
3 | function setup() {
4 |
5 | table = new p5.Table();
6 |
7 | table.addColumn("name");
8 | table.addColumn("type");
9 |
10 | var newRow = table.addRow();
11 | newRow.setString("name", "Lion");
12 | newRow.setString("type", "Mammal");
13 |
14 | newRow = table.addRow();
15 | newRow.setString("name", "Snake");
16 | newRow.setString("type", "Reptile");
17 |
18 | newRow = table.addRow();
19 | newRow.setString("name", "Mosquito");
20 | newRow.setString("type", "Insect");
21 |
22 | var result = table.matchRow("R.*", "type");
23 | println(result.getString("name")); // Prints "Snake"
24 |
25 | }
--------------------------------------------------------------------------------
/examples/p5.Table/matchRows/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Open the console to view results
9 |
--------------------------------------------------------------------------------
/examples/p5.Table/matchRows/sketch.js:
--------------------------------------------------------------------------------
1 | var table;
2 |
3 | function setup() {
4 |
5 | table = new p5.Table();
6 |
7 | table.addColumn("name");
8 | table.addColumn("type");
9 |
10 | var newRow = table.addRow();
11 | newRow.setString("name", "Lion");
12 | newRow.setString("type", "Mammal");
13 |
14 | newRow = table.addRow();
15 | newRow.setString("name", "Snake");
16 | newRow.setString("type", "Reptile");
17 |
18 | newRow = table.addRow();
19 | newRow.setString("name", "Mosquito");
20 | newRow.setString("type", "Insect");
21 |
22 | newRow = table.addRow();
23 | newRow.setString("name", "Lizard");
24 | newRow.setString("type", "Reptile");
25 |
26 | var rows = table.matchRows("R.*", "type");
27 | for (var i = 0; i < rows.length; i++) {
28 | println(rows[i].getString("name") + ": " + rows[i].getString("type"));
29 | }
30 | }
31 |
32 | // Sketch prints:
33 | // Snake: Reptile
34 | // Lizard: Reptile
--------------------------------------------------------------------------------
/examples/p5.Table/removeTokens/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Open the console to view results
9 |
--------------------------------------------------------------------------------
/examples/p5.Table/removeTokens/sketch.js:
--------------------------------------------------------------------------------
1 | var table;
2 |
3 | function setup() {
4 |
5 | table = new p5.Table();
6 |
7 | table.addColumn("name");
8 | table.addColumn("type");
9 |
10 | var newRow = table.addRow();
11 | newRow.setString("name", " $Lion ,");
12 | newRow.setString("type", ",,,Mammal");
13 |
14 | newRow = table.addRow();
15 | newRow.setString("name", "$Snake ");
16 | newRow.setString("type", ",,,Reptile");
17 |
18 | newRow = table.addRow();
19 | newRow.setString("name", " $Mosquito , ");
20 | newRow.setString("type", ",,,Insect");
21 |
22 | println(table.getColumn("name"));
23 | println(table.getColumn("type"));
24 |
25 | table.removeTokens(",$ ");
26 |
27 | println(table.getColumn("name"));
28 | println(table.getColumn("type"));
29 | }
--------------------------------------------------------------------------------
/examples/p5.Table/saveTable/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | This example downloads a file. File download behavior depends on your browser.
8 |
--------------------------------------------------------------------------------
/examples/p5.Table/saveTable/sketch.js:
--------------------------------------------------------------------------------
1 | var table;
2 |
3 | function setup() {
4 |
5 | table = new p5.Table();
6 |
7 | table.addColumn('name');
8 | table.addColumn('type');
9 |
10 | var newRow = table.addRow();
11 | newRow.setString('name', 'Lion');
12 | newRow.setString('type', 'Mammal');
13 |
14 | newRow = table.addRow();
15 | newRow.setString('name', 'Snake');
16 | newRow.setString('type', 'Reptile');
17 |
18 | newRow = table.addRow();
19 | newRow.setString('name', 'Mosquito');
20 | newRow.setString('type', 'Insect');
21 |
22 | save(table, 'animals.csv');
23 | }
24 |
25 | // Sketch saves the following to a file called 'animals.csv':
26 | //
27 | // name,type
28 | // Lion,Mammal
29 | // Snake,Reptile
30 | // Mosquito,Insect
31 |
--------------------------------------------------------------------------------
/examples/p5.Table/trim/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Open the console to view results
9 |
--------------------------------------------------------------------------------
/examples/p5.Vector/NOC_2_5_fluidresistance/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/examples/p5.Vector/NOC_2_7_attraction_many/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/examples/p5.Vector/NOC_6_09_Flocking/flock.js:
--------------------------------------------------------------------------------
1 | // The Nature of Code
2 | // Daniel Shiffman
3 | // http://natureofcode.com
4 |
5 | // Flock object
6 | // Does very little, simply manages the array of all the boids
7 |
8 | function Flock() {
9 | // An array for all the boids
10 | this.boids = []; // Initialize the array
11 | }
12 |
13 | Flock.prototype.run = function() {
14 | for (var i = 0; i < this.boids.length; i++) {
15 | this.boids[i].run(this.boids); // Passing the entire list of boids to each boid individually
16 | }
17 | }
18 |
19 | Flock.prototype.addBoid = function(b) {
20 | this.boids.push(b);
21 | }
22 |
23 |
--------------------------------------------------------------------------------
/examples/p5.Vector/NOC_6_09_Flocking/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | The Nature of Code Example 6.1 Seek
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/pixel/set-pixels.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/pixel/set-pixels.js:
--------------------------------------------------------------------------------
1 |
2 | var img;
3 | var radius=60;
4 | var smoothAmount;
5 | var canvasImg;
6 |
7 | function preload() {
8 |
9 | img = loadImage("unicorn.jpg"); // Load an image into the program
10 | }
11 |
12 | function setup() {
13 | createCanvas(256, 256);
14 | loadPixels();
15 | set(width/2, height/2, img);
16 | }
17 |
18 |
19 | function draw() {
20 |
21 | for (var i=-5; i<5; i++) {
22 | set(mouseX+i, mouseY, [0, 0, 255, 100]);
23 | }
24 | set(mouseX, mouseY, [255, 0, 255, 255]);
25 | set(mouseX+10, mouseY+10, 0);
26 | updatePixels();
27 | }
28 |
--------------------------------------------------------------------------------
/examples/pixel/unicorn.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/pixel/unicorn.jpg
--------------------------------------------------------------------------------
/examples/pixel/update-pixels.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/pixel/update-pixels.js:
--------------------------------------------------------------------------------
1 | var img;
2 | var radius=60;
3 | var smoothAmount;
4 | var canvasImg;
5 |
6 | function preload() {
7 |
8 | img = loadImage("unicorn.jpg"); // Load an image into the program
9 | }
10 |
11 | function setup() {
12 | createCanvas(256, 256);
13 | loadPixels();
14 | }
15 |
16 |
17 | function draw() {
18 |
19 | for (var y=0 ; y
2 |
3 |
4 |
5 |
6 |
7 | This example downloads a file. File download behavior depends on your browser.
8 |
--------------------------------------------------------------------------------
/examples/saveData/saveJSONObject/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | This example downloads a file. File download behavior depends on your browser.
8 |
--------------------------------------------------------------------------------
/examples/saveData/saveJSONObject/sketch.js:
--------------------------------------------------------------------------------
1 | var json;
2 |
3 | function setup() {
4 |
5 | json = {}; // new JSON Object
6 |
7 | json.id = 0;
8 | json.species = 'Panthera leo';
9 | json.name = 'Lion';
10 |
11 | save(json, 'lion.json');
12 | }
13 |
14 | // Sketch saves the following to a file called "lion.json":
15 | // {
16 | // "id": 0,
17 | // "species": "Panthera leo",
18 | // "name": "Lion"
19 | // }
20 |
--------------------------------------------------------------------------------
/examples/saveData/saveStrings/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | This example downloads a file. File download behavior depends on your browser.
8 |
--------------------------------------------------------------------------------
/examples/saveData/saveStrings/sketch.js:
--------------------------------------------------------------------------------
1 | // Example: saveStrings
2 | function setup() {
3 | var words = 'apple bear cat dog';
4 |
5 | // split outputs an array
6 | var list = split(words, ' ');
7 |
8 | // Writes the strings to a file, each on a separate line
9 | save(list, 'nouns.txt');
10 | }
11 |
--------------------------------------------------------------------------------
/examples/tint/flowers.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/tint/flowers.jpg
--------------------------------------------------------------------------------
/examples/tint/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/tint/sketch.js:
--------------------------------------------------------------------------------
1 | var img;
2 |
3 | function preload() {
4 | img = loadImage("flowers.jpg");
5 | }
6 |
7 | function setup() {
8 | createCanvas(800,160);
9 | fill(255, 255, 255);
10 | rect(0, 0, 480, 160);
11 | image(img, 0, 0);
12 | tint(0, 0, 150, 150); // Tint alpha blue
13 | image(img, 160, 0);
14 | tint(255, 255, 255);
15 | image(img, 320, 0);
16 | tint(0, 153, 150); // Tint turquoise
17 | image(img, 480, 0);
18 | noTint();
19 | image(img, 640, 0);
20 | }
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/0/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | HI THIS IS THE HEADER
8 |
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/3/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/6/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/7/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/8/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/dom_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/tutorials/DOM-extensions/dom_1.png
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/dom_2-0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/tutorials/DOM-extensions/dom_2-0.png
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/dom_2-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/tutorials/DOM-extensions/dom_2-1.png
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/dom_5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/tutorials/DOM-extensions/dom_5.png
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/dom_7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/tutorials/DOM-extensions/dom_7.png
--------------------------------------------------------------------------------
/examples/tutorials/DOM-extensions/dom_8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/tutorials/DOM-extensions/dom_8.png
--------------------------------------------------------------------------------
/examples/tutorials/Integrating-other-libraries/0/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/tutorials/Integrating-other-libraries/0/rhodes_loop.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/tutorials/Integrating-other-libraries/0/rhodes_loop.wav
--------------------------------------------------------------------------------
/examples/tutorials/Integrating-other-libraries/1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/tutorials/Integrating-other-libraries/1/red.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/tutorials/Integrating-other-libraries/1/red.jpg
--------------------------------------------------------------------------------
/examples/tutorials/Integrating-other-libraries/1/rhodes_loop.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/tutorials/Integrating-other-libraries/1/rhodes_loop.wav
--------------------------------------------------------------------------------
/examples/tutorials/Integrating-other-libraries/1/sketch.js:
--------------------------------------------------------------------------------
1 | // Combinging a third-party JS library with a sketch
2 | // Just use the normal third-party JS library code
3 | // Usually, you want to use the third-party code in setup
4 | // Unless you'd like to use things in certain event functions like mousePressed
5 |
6 | // Initializing a variable using the third-party library buzz object
7 | var mySound = new buzz.sound('rhodes_loop.wav');
8 | var myImage;
9 |
10 | function setup() {
11 | createCanvas(300, 300);
12 | myImage = loadImage('red.jpg');
13 | }
14 |
15 | function draw() {
16 | background(255, 200, 200);
17 | image(myImage, 20, 20, 150, 150);
18 | }
19 |
20 | function mousePressed() {
21 | // Using the third-party library to call play() on the buzz object
22 | mySound.play();
23 | }
24 |
--------------------------------------------------------------------------------
/examples/tutorials/Integrating-other-libraries/2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/examples/tutorials/Integrating-other-libraries/2/red.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/tutorials/Integrating-other-libraries/2/red.jpg
--------------------------------------------------------------------------------
/examples/tutorials/Integrating-other-libraries/2/rhodes_loop.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robynitp/p5.js/596221ef8f52dfced1ed0569b1e5fc86e287b8d5/examples/tutorials/Integrating-other-libraries/2/rhodes_loop.wav
--------------------------------------------------------------------------------
/src/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "boss": true,
3 | "curly": true,
4 | "trailing": true,
5 | "indent": 2,
6 | "devel": true,
7 | "eqeqeq": true,
8 | "eqnull": true,
9 | "immed": true,
10 | "latedef": "nofunc",
11 | "newcap": false,
12 | "noarg": true,
13 | "quotmark": "single",
14 | "undef": true,
15 | "unused": "vars",
16 | "maxlen": 80,
17 |
18 | "browser": true,
19 | "globals": {
20 | "define": false,
21 | "require": false,
22 | "PImage": false
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/math/math.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module Math
3 | * @submodule Math
4 | * @for p5
5 | * @requires core
6 | */
7 | define(function (require) {
8 |
9 | 'use strict';
10 |
11 | var p5 = require('core');
12 |
13 |
14 | /**
15 | * Creates a new p5.Vector (the datatype for storing vectors). This provides a
16 | * two or three dimensional vector, specifically a Euclidean (also known as
17 | * geometric) vector. A vector is an entity that has both magnitude and
18 | * direction.
19 | *
20 | * @method createVector
21 | * @param {Number} [x] x component of the vector
22 | * @param {Number} [y] y component of the vector
23 | * @param {Number} [z] z component of the vector
24 | */
25 | p5.prototype.createVector = function() {
26 | return new p5.Vector(this, arguments);
27 | };
28 |
29 | return p5;
30 |
31 | });
32 |
--------------------------------------------------------------------------------
/src/objects/p5.Shape.js:
--------------------------------------------------------------------------------
1 | // /**
2 | // * @module Shape
3 | // * @submodule Shape
4 | // * @for p5.Shape
5 | // */
6 | // define(function(require) {
7 |
8 | // var p5 = require('core');
9 | // var reqwest = require('reqwest');
10 | // //var constants = require('constants');
11 |
12 | // p5.Shape = function(path, pInst, callback) {
13 | // var self = this;
14 | // reqwest({url: path, type: 'svg', success: function (resp) {
15 | // var s = resp.responseXML.documentElement;
16 | // self.svg = s;
17 | // if (typeof callback !== 'undefined') {
18 | // callback(self);
19 | // }
20 | // }});
21 | // };
22 |
23 | // return p5.Graphics;
24 | // });
25 |
--------------------------------------------------------------------------------
/src/var/polargeometry.js:
--------------------------------------------------------------------------------
1 | define(function(require) {
2 |
3 | return {
4 |
5 | degreesToRadians: function(x) {
6 | return 2 * Math.PI * x / 360;
7 | },
8 |
9 | radiansToDegrees: function(x) {
10 | return 360 * x / (2 * Math.PI);
11 | }
12 |
13 | };
14 |
15 | });
--------------------------------------------------------------------------------
/src/var/shim.js:
--------------------------------------------------------------------------------
1 | define(function(require) {
2 |
3 | // requestAnim shim layer by Paul Irish
4 | window.requestDraw = (function(){
5 | return window.requestAnimationFrame ||
6 | window.webkitRequestAnimationFrame ||
7 | window.mozRequestAnimationFrame ||
8 | window.oRequestAnimationFrame ||
9 | window.msRequestAnimationFrame ||
10 | function(callback, element){
11 | // should '60' here be framerate?
12 | window.setTimeout(callback, 1000 / 60);
13 | };
14 | })();
15 | });
--------------------------------------------------------------------------------
/test/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "boss": true,
3 | "curly": true,
4 | "eqeqeq": true,
5 | "eqnull": true,
6 | "immed": true,
7 | "latedef": "nofunc",
8 | "newcap": true,
9 | "noarg": true,
10 | "quotmark": "single",
11 | "undef": true,
12 | "unused": "vars",
13 |
14 | "browser": true,
15 | "globals": {
16 | "assert": false,
17 | "suite": false,
18 | "setup": false,
19 | "teardown": false,
20 | "test": false,
21 | "afterEach": false,
22 | "beforeEach": false,
23 | "define": false,
24 | "describe": false,
25 | "expect": false,
26 | "it": false,
27 | "sinon": false,
28 | "console": false,
29 | "PElement": false,
30 | "p5": false,
31 | "PVector": false,
32 | "testRender": false
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/test/js/testRender.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Expects an image file and a p5 instance and checks that they are
3 | * similar. Sends result to the callback.
4 | */
5 | var testRender = function(file, sketch, callback) {
6 | sketch.loadPixels();
7 | var p = sketch.pixels;
8 | var ctx = sketch;
9 |
10 | sketch.clear();
11 |
12 | sketch.loadImage(file, function(img) { // TODO: Handle case where file doesn't load
13 | ctx.image(img, 0, 0, 100, 100);
14 |
15 | ctx.loadPixels();
16 | var n = 0;
17 | for (var i=0; i