24 |
25 |
26 |
27 | 
11 |
12 |
13 |
14 |
18 |
15 | 
16 |
17 |
16 |
11 |
12 |
13 |
16 | To run this example locally, you will need 6 | * at least an image file and a running local server.
7 | */ 8 | var img; 9 | 10 | function preload() { 11 | img = loadImage("assets/moonwalk.jpg"); 12 | } 13 | 14 | function setup() { 15 | createCanvas(720, 200); 16 | pixelDensity(1); 17 | img.loadPixels(); 18 | loadPixels(); 19 | } 20 | 21 | function draw() { 22 | for (var x = 0; x < img.width; x++) { 23 | for (var y = 0; y < img.height; y++ ) { 24 | // Calculate the 1D location from a 2D grid 25 | var loc = (x + y*img.width)*4; 26 | // Get the R,G,B values from image 27 | var r,g,b; 28 | r = img.pixels[loc]; 29 | // Calculate an amount to change brightness based on proximity to the mouse 30 | var maxdist = 50; 31 | var d = dist(x, y, mouseX, mouseY); 32 | var adjustbrightness = 255*(maxdist-d)/maxdist; 33 | r += adjustbrightness; 34 | // Constrain RGB to make sure they are within 0-255 color range 35 | r = constrain(r, 0, 255); 36 | // Make a new color and set pixel in the window 37 | //color c = color(r, g, b); 38 | var pixloc = (y*width + x)*4; 39 | pixels[pixloc] = r; 40 | pixels[pixloc+1] = r; 41 | pixels[pixloc+2] = r; 42 | pixels[pixloc+3] = 255; 43 | } 44 | } 45 | updatePixels(); 46 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Color/03_Color_Variables.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Color Variables 3 | * @description (Homage to Albers.) This example creates variables for colors 4 | * that may be referred to in the program by a name, rather than a number. 5 | */ 6 | function setup() { 7 | createCanvas(710, 400); 8 | noStroke(); 9 | background(51, 0, 0); 10 | 11 | var inside = color(204, 102, 0); 12 | var middle = color(204, 153, 0); 13 | var outside = color(153, 51, 0); 14 | 15 | // These statements are equivalent to the statements above. 16 | // Programmers may use the format they prefer. 17 | //color inside = #CC6600; 18 | //color middle = #CC9900; 19 | //color outside = #993300; 20 | 21 | push(); 22 | translate(80, 80); 23 | fill(outside); 24 | rect(0, 0, 200, 200); 25 | fill(middle); 26 | rect(40, 60, 120, 120); 27 | fill(inside); 28 | rect(60, 90, 80, 80); 29 | pop(); 30 | 31 | push(); 32 | translate(360, 80); 33 | fill(inside); 34 | rect(0, 0, 200, 200); 35 | fill(outside); 36 | rect(40, 60, 120, 120); 37 | fill(middle); 38 | rect(60, 90, 80, 80); 39 | pop(); 40 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Color/04_Relativity.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Relativity 3 | * @description Each color is perceived in relation to other colors. The top 4 | * and bottom bars each contain the same component colors, but a different 5 | * display order causes individual colors to appear differently. 6 | */ 7 | var a, b, c, d, e; 8 | 9 | function setup() { 10 | createCanvas(710, 400); 11 | noStroke(); 12 | a = color(165, 167, 20); 13 | b = color(77, 86, 59); 14 | c = color(42, 106, 105); 15 | d = color(165, 89, 20); 16 | e = color(146, 150, 127); 17 | noLoop(); // Draw only one time 18 | } 19 | 20 | function draw() { 21 | drawBand(a, b, c, d, e, 0, width/128); 22 | drawBand(c, a, d, b, e, height/2, width/128); 23 | } 24 | 25 | function drawBand(v, w, x, y, z, ypos, barWidth) { 26 | var num = 5; 27 | var colorOrder = [ v, w, x, y, z ]; 28 | for(var i = 0; i < width; i += barWidth*num) { 29 | for(var j = 0; j < num; j++) { 30 | fill(colorOrder[j]); 31 | rect(i+j*barWidth, ypos, barWidth, height/2); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Color/05_Linear_Gradient.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Linear Gradient 3 | * @description The lerpColor() function is useful for interpolating between 4 | * two colors. 5 | */ 6 | // Constants 7 | var Y_AXIS = 1; 8 | var X_AXIS = 2; 9 | var b1, b2, c1, c2; 10 | 11 | function setup() { 12 | createCanvas(710, 400); 13 | 14 | // Define colors 15 | b1 = color(255); 16 | b2 = color(0); 17 | c1 = color(204, 102, 0); 18 | c2 = color(0, 102, 153); 19 | 20 | noLoop(); 21 | } 22 | 23 | function draw() { 24 | // Background 25 | setGradient(0, 0, width/2, height, b1, b2, X_AXIS); 26 | setGradient(width/2, 0, width/2, height, b2, b1, X_AXIS); 27 | // Foreground 28 | setGradient(50, 90, 540, 80, c1, c2, Y_AXIS); 29 | setGradient(50, 190, 540, 80, c2, c1, X_AXIS); 30 | } 31 | 32 | function setGradient(x, y, w, h, c1, c2, axis) { 33 | 34 | noFill(); 35 | 36 | if (axis == Y_AXIS) { // Top to bottom gradient 37 | for (var i = y; i <= y+h; i++) { 38 | var inter = map(i, y, y+h, 0, 1); 39 | var c = lerpColor(c1, c2, inter); 40 | stroke(c); 41 | line(x, i, x+w, i); 42 | } 43 | } 44 | else if (axis == X_AXIS) { // Left to right gradient 45 | for (var i = x; i <= x+w; i++) { 46 | var inter = map(i, x, x+w, 0, 1); 47 | var c = lerpColor(c1, c2, inter); 48 | stroke(c); 49 | line(i, y, i, y+h); 50 | } 51 | } 52 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Color/06_Radial_Gradient.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Radial Gradient 3 | * @description Draws a series of concentric circles to create a gradient 4 | * from one color to another. 5 | */ 6 | var dim; 7 | 8 | function setup() { 9 | createCanvas(710, 400); 10 | dim = width/2; 11 | background(0); 12 | colorMode(HSB, 360, 100, 100); 13 | noStroke(); 14 | ellipseMode(RADIUS); 15 | frameRate(1); 16 | } 17 | 18 | function draw() { 19 | background(0); 20 | for (var x = 0; x <= width; x+=dim) { 21 | drawGradient(x, height/2); 22 | } 23 | } 24 | 25 | function drawGradient(x, y) { 26 | var radius = dim/2; 27 | var h = random(0, 360); 28 | for (var r = radius; r > 0; --r) { 29 | fill(h, 90, 90); 30 | ellipse(x, y, r, r); 31 | h = (h + 1) % 360; 32 | } 33 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Color/07_Lerp_Color.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Lerp Color 3 | * @description Loop random shapes, 4 | * lerp color from red to blue. 5 | */ 6 | function setup() { 7 | createCanvas(720, 400); 8 | background(255); 9 | noStroke(); 10 | } 11 | 12 | function draw() { 13 | background(255); 14 | from = color(255, 0, 0, 0.2 * 255); 15 | to = color(0, 0, 255, 0.2 * 255); 16 | c1 = lerpColor(from, to, .33); 17 | c2 = lerpColor(from, to, .66); 18 | for (var i = 0; i < 15; i++) { 19 | fill(from); 20 | quad(random(-40, 220), random(height), 21 | random(-40, 220), random(height), 22 | random(-40, 220), random(height), 23 | random(-40, 220), random(height)); 24 | fill(c1); 25 | quad(random(140, 380), random(height), 26 | random(140, 380), random(height), 27 | random(140, 380), random(height), 28 | random(140, 380), random(height)); 29 | fill(c2); 30 | quad(random(320, 580), random(height), 31 | random(320, 580), random(height), 32 | random(320, 580), random(height), 33 | random(320, 580), random(height)); 34 | fill(to); 35 | quad(random(500, 760), random(height), 36 | random(500, 760), random(height), 37 | random(500, 760), random(height), 38 | random(500, 760), random(height)); 39 | } 40 | frameRate(5); 41 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Control/00_Iteration.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Iteration 3 | * @description Iteration with a "for" structure to construct repetitive forms. 4 | */ 5 | var y; 6 | var num = 14; 7 | 8 | function setup() { 9 | 10 | createCanvas(720, 360); 11 | background(102); 12 | noStroke(); 13 | 14 | // Draw white bars 15 | fill(255); 16 | y = 60; 17 | for(var i = 0; i < num/3; i++) { 18 | rect(50, y, 475, 10); 19 | y+=20; 20 | } 21 | 22 | // Gray bars 23 | fill(51); 24 | y = 40; 25 | for(var i = 0; i < num; i++) { 26 | rect(405, y, 30, 10); 27 | y += 20; 28 | } 29 | y = 50; 30 | for(var i = 0; i < num; i++) { 31 | rect(425, y, 30, 10); 32 | y += 20; 33 | } 34 | 35 | // Thin lines 36 | y = 45; 37 | fill(0); 38 | for(var i = 0; i < num-1; i++) { 39 | rect(120, y, 40, 1); 40 | y+= 20; 41 | } 42 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Control/01_Embedded_Iteration.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Embedded Iteration 3 | * @description Embedding "for" structures allows repetition in two dimensions. 4 | */ 5 | function setup() { 6 | 7 | createCanvas(720, 360); 8 | background(0); 9 | noStroke(); 10 | 11 | var gridSize = 35; 12 | 13 | for (var x = gridSize; x <= width - gridSize; x += gridSize) { 14 | for (var y = gridSize; y <= height - gridSize; y += gridSize) { 15 | noStroke(); 16 | fill(255); 17 | rect(x-1, y-1, 3, 3); 18 | stroke(255, 50); 19 | line(x, y, width/2, height/2); 20 | } 21 | } 22 | 23 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Control/02_Conditionals_1.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Conditionals 1 3 | * @description Conditions are like questions. 4 | * They allow a program to decide to take one action if 5 | * the answer to a question is true or to do another action 6 | * if the answer to the question is false. 7 | * The questions asked within a program are always logical 8 | * or relational statements. For example, if the variable 'i' is 9 | * equal to zero then draw a line. 10 | */ 11 | function setup() { 12 | 13 | createCanvas(720, 360); 14 | background(0); 15 | 16 | for(var i = 10; i < width; i += 10) { 17 | // If 'i' divides by 20 with no remainder draw the first line 18 | // else draw the second line 19 | if(i%20 == 0) { 20 | stroke(255); 21 | line(i, 80, i, height/2); 22 | } else { 23 | stroke(153); 24 | line(i, 20, i, 180); 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Control/03_Conditionals_2.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Conditionals 2 3 | * @description We extend the language of conditionals from the previous 4 | * example by adding the keyword "else". This allows conditionals 5 | * to ask two or more sequential questions, each with a different 6 | * action. 7 | */ 8 | function setup() { 9 | 10 | createCanvas(720, 360); 11 | background(0); 12 | 13 | for(var i = 2; i < width-2; i += 4) { 14 | // If 'i' divides by 20 with no remainder 15 | if((i % 20) == 0) { 16 | stroke(255); 17 | line(i, 80, i, height/2); 18 | // If 'i' divides by 10 with no remainder 19 | } else if ((i % 10) == 0) { 20 | stroke(153); 21 | line(i, 20, i, 180); 22 | // If neither of the above two conditions are met 23 | // then draw this line 24 | } else { 25 | stroke(102); 26 | line(i, height/2, i, height-20); 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Control/04_Logical_Operators.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Logical Operators 3 | * @description The logical operators for AND (&&) and OR (||) are used to 4 | * combine simple relational statements into more complex expressions. 5 | * The NOT (!) operator is used to negate a boolean statement. 6 | */ 7 | var test = false; 8 | 9 | function setup() { 10 | 11 | createCanvas(720, 360); 12 | background(126); 13 | 14 | for (var i = 5; i <= height; i += 5) { 15 | // Logical AND 16 | stroke(0); 17 | if((i > 35) && (i < 100)) { 18 | line(width/4, i, width/2, i); 19 | test = false; 20 | } 21 | 22 | // Logical OR 23 | stroke(76); 24 | if ((i <= 35) || (i >= 100)) { 25 | line(width/2, i, width, i); 26 | test = true; 27 | } 28 | 29 | // Testing if a boolean value is "true" 30 | // The expression "if(test)" is equivalent to "if(test == true)" 31 | if (test) { 32 | stroke(0); 33 | point(width/3, i); 34 | } 35 | 36 | // Testing if a boolean value is "false" 37 | // The expression "if(!test)" is equivalent to "if(test == false)" 38 | if (!test) { 39 | stroke(255); 40 | point(width/4, i); 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Data/00_Variables.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Variables 3 | * @description Variables are used for storing values. In this example, change 4 | * the values of variables to affect the composition. 5 | */ 6 | function setup() { 7 | 8 | createCanvas(720, 400); 9 | background(0); 10 | stroke(153); 11 | strokeWeight(4); 12 | strokeCap(SQUARE); 13 | 14 | var a = 50; 15 | var b = 120; 16 | var c = 180; 17 | 18 | line(a, b, a+c, b); 19 | line(a, b+10, a+c, b+10); 20 | line(a, b+20, a+c, b+20); 21 | line(a, b+30, a+c, b+30); 22 | 23 | a = a + c; 24 | b = height-b; 25 | 26 | line(a, b, a+c, b); 27 | line(a, b+10, a+c, b+10); 28 | line(a, b+20, a+c, b+20); 29 | line(a, b+30, a+c, b+30); 30 | 31 | a = a + c; 32 | b = height-b; 33 | 34 | line(a, b, a+c, b); 35 | line(a, b+10, a+c, b+10); 36 | line(a, b+20, a+c, b+20); 37 | line(a, b+30, a+c, b+30); 38 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Data/01_True_and_False.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name True and False 3 | * @description A Boolean variable has only two possible values: true or false. 4 | * It is common to use Booleans with control statements to determine the flow 5 | * of a program. In this example, when the boolean value "x" is true, vertical 6 | * black lines are drawn and when the boolean value "x" is false, horizontal 7 | * gray lines are drawn. 8 | */ 9 | function setup() { 10 | 11 | createCanvas(720, 400); 12 | background(0); 13 | stroke(255); 14 | 15 | var b = false; 16 | var d = 20; 17 | var middle = width/2;; 18 | 19 | for (var i = d; i <= width; i += d) { 20 | 21 | if (i < middle) { 22 | b = true; 23 | } else { 24 | b = false; 25 | } 26 | 27 | if (b == true) { 28 | // Vertical line 29 | line(i, d, i, height-d); 30 | } 31 | 32 | if (b == false) { 33 | // Horizontal line 34 | line(middle, i - middle + d, width-d, i - middle + d); 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Data/03_Variable_Scope.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Variable Scope 3 | * @description Variables have a global or local "scope". For example, 4 | * variables declared within either the setup() or draw() functions may be 5 | * only used in these functions. Global variables, variables declared outside 6 | * of setup() and draw(), may be used anywhere within the program. If a local 7 | * variable is declared with the same name as a global variable, the program 8 | * will use the local variable to make its calculations within the current 9 | * scope. Variables are localized within each block, the space between a { 10 | * and }. 11 | */ 12 | var a = 80; // Create a global variable "a" 13 | 14 | function setup() { 15 | createCanvas(720, 400); 16 | background(0); 17 | stroke(255); 18 | noLoop(); 19 | } 20 | 21 | function draw() { 22 | // Draw a line using the global variable "a" 23 | line(a, 0, a, height); 24 | 25 | // Create a new variable "a" local to the for() statement 26 | for (var a = 120; a < 200; a += 3) { 27 | line(a, 0, a, height); 28 | } 29 | 30 | // Create a new variable "a" local to the draw() function 31 | var a = 300; 32 | // Draw a line using the new local variable "a" 33 | line(a, 0, a, height); 34 | 35 | // Make a call to the custom function drawAnotherLine() 36 | drawAnotherLine(); 37 | 38 | // Make a call to the custom function drawYetAnotherLine() 39 | drawYetAnotherLine(); 40 | } 41 | 42 | function drawAnotherLine() { 43 | // Create a new variable "a" local to this method 44 | var a = 320; 45 | // Draw a line using the local variable "a" 46 | line(a, 0, a, height); 47 | } 48 | 49 | function drawYetAnotherLine() { 50 | // Because no new local variable "a" is set, 51 | // this line draws using the original global 52 | // variable "a" which is set to the value 20. 53 | line(a+3, 0, a+3, height); 54 | } 55 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Dom/03_Input_Button.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Input and Button 3 | * @description You will need to include the 4 | * p5.dom library 5 | * for this example to work in your own project.Create DOM elements and modify their properties every time 5 | * draw() is called. You will need to include the 6 | * p5.dom library 7 | * for this example to work in your own project.
8 | */ 9 | var dancingWords = []; 10 | 11 | function DanceSpan(element, x, y) { 12 | element.position(x, y); 13 | 14 | this.brownian = function() { 15 | x += random(-6, 6); 16 | y += random(-6, 6); 17 | element.position(x, y); 18 | }; 19 | }; 20 | 21 | function setup() { 22 | // This paragraph is created aside of the main block of code. 23 | // It's to differentiate the creation of an element from its 24 | // selection. Selected elements doesn't need to be created by 25 | // p5js, they can be just plain HTML. 26 | createP('I learne in this Letter, that Don Peter of Arragon, ' 27 | + ' comes this night to Messina').addClass('text'); 28 | 29 | // This line grabs the paragraph just created, but it would 30 | // also grab any other elements with class 'text' in the HTML 31 | // page. 32 | var texts = selectAll('.text'); 33 | 34 | for (var i=0; iTo run this example locally, you will need at least 7 | * one video file, and the 8 | * p5.dom library.
9 | */ 10 | var playing = false; 11 | var fingers; 12 | var button; 13 | 14 | 15 | function setup() { 16 | // specify multiple formats for different browsers 17 | fingers = createVideo(['assets/fingers.mov', 18 | 'assets/fingers.webm']); 19 | button = createButton('play'); 20 | button.mousePressed(toggleVid); // attach button listener 21 | } 22 | 23 | // plays or pauses the video depending on current state 24 | function toggleVid() { 25 | if (playing) { 26 | fingers.pause(); 27 | button.html('play'); 28 | } else { 29 | fingers.loop(); 30 | button.html('pause'); 31 | } 32 | playing = !playing; 33 | } 34 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Dom/09_Video_Canvas.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Video Canvas 3 | * @descriptionLoad a video with multiple formats and draw it to the canvas.
4 | *To run this example locally, you will need the 5 | * p5.dom library 6 | * at least one video file, and a running local server.
7 | */ 8 | var fingers; 9 | 10 | function setup() { 11 | createCanvas(710, 400); 12 | // specify multiple formats for different browsers 13 | fingers = createVideo(['assets/fingers.mov', 14 | 'assets/fingers.webm']); 15 | fingers.loop(); // set the video to loop and start playing 16 | fingers.hide(); // by default video shows up in separate dom 17 | // element. hide it and draw it to the canvas 18 | // instead 19 | } 20 | 21 | function draw() { 22 | background(150); 23 | image(fingers,10,10); // draw the video frame to canvas 24 | filter('GRAY'); 25 | image(fingers,150,150); // draw a second copy to canvas 26 | } 27 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Dom/10_Video_Pixels.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Video Pixels 3 | * @frame 320,240 4 | * @descriptionLoad a video, manipulate its pixels and draw to canvas. 5 | *
To run this example locally, you will need the 6 | * p5.dom library 7 | * at least one video file, and a running local server.
8 | */ 9 | var fingers; 10 | 11 | function setup() { 12 | createCanvas(320, 240); 13 | // specify multiple formats for different browsers 14 | fingers = createVideo(['assets/fingers.mov', 15 | 'assets/fingers.webm']); 16 | fingers.loop(); 17 | fingers.hide(); 18 | noStroke(); 19 | fill(0); 20 | } 21 | 22 | function draw() { 23 | background(255); 24 | fingers.loadPixels(); 25 | var stepSize = round(constrain(mouseX / 8, 6, 32)); 26 | for (var y=0; yTo run this example locally, you will need the 6 | * p5.dom library. 7 | *
8 | */ 9 | 10 | // for red, green, and blue color values 11 | var r, g, b; 12 | 13 | function setup() { 14 | createCanvas(720, 400); 15 | // Pick colors randomly 16 | r = random(255); 17 | g = random(255); 18 | b = random(255); 19 | } 20 | 21 | function draw() { 22 | background(127); 23 | // Draw a circle 24 | strokeWeight(2); 25 | stroke(r, g, b); 26 | fill(r, g, b, 127); 27 | ellipse(360, 200, 200, 200); 28 | } 29 | 30 | // When the user clicks the mouse 31 | function mousePressed() { 32 | // Check if mouse is inside the circle 33 | var d = dist(mouseX, mouseY, 360, 200); 34 | if (d < 100) { 35 | // Pick new random color values 36 | r = random(255); 37 | g = random(255); 38 | b = random(255); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Hello/03_interactivity.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Interactivity 2 3 | * @frame 720,425 4 | * @description The circle changes color when you move the slider. 5 | * You will need to include the 6 | * p5.dom library 7 | * for this example to work in your own project. 8 | */ 9 | 10 | // A HTML range slider 11 | var slider; 12 | 13 | function setup() { 14 | createCanvas(720, 400); 15 | // hue, saturation, and brightness 16 | colorMode(HSB, 255); 17 | // slider has a range between 0 and 255 with a starting value of 127 18 | slider = createSlider(0, 255, 127); 19 | } 20 | 21 | function draw() { 22 | background(127); 23 | strokeWeight(2); 24 | 25 | // Set the hue according to the slider 26 | stroke(slider.value(), 255, 255); 27 | fill(slider.value(), 255, 255, 127); 28 | ellipse(360, 200, 200, 200); 29 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Hello/04_animate.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Animation 3 | * @description The circle moves. 4 | */ 5 | // Where is the circle 6 | var x, y; 7 | 8 | function setup() { 9 | createCanvas(720, 400); 10 | // Starts in the middle 11 | x = width / 2; 12 | y = height; 13 | } 14 | 15 | function draw() { 16 | background(200); 17 | 18 | // Draw a circle 19 | stroke(50); 20 | fill(100); 21 | ellipse(x, y, 24, 24); 22 | 23 | // Jiggling randomly on the horizontal axis 24 | x = x + random(-1, 1); 25 | // Moving up at a constant speed 26 | y = y - 1; 27 | 28 | // Reset to the bottom 29 | if (y < 0) { 30 | y = height; 31 | } 32 | } 33 | 34 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Hello/05_weather.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Weather 3 | * @frame 720,280 4 | * @description This example grabs JSON weather data from apixu.com. 5 | * You will need to include the 6 | * p5.dom library 7 | * for this example to work in your own project. 8 | */ 9 | 10 | // A wind direction vector 11 | var wind; 12 | // Circle position 13 | var position; 14 | 15 | function setup() { 16 | createCanvas(720, 200); 17 | // Request the data from apixu.com 18 | var url = 'https://api.apixu.com/v1/current.json?key=513d8003c8b348f1a2461629162106&q=NYC'; 19 | loadJSON(url, gotWeather); 20 | // Circle starts in the middle 21 | position = createVector(width/2, height/2); 22 | // wind starts as (0,0) 23 | wind = createVector(); 24 | } 25 | 26 | function draw() { 27 | background(200); 28 | 29 | // This section draws an arrow pointing in the direction of wind 30 | push(); 31 | translate(32, height - 32); 32 | // Rotate by the wind's angle 33 | rotate(wind.heading() + PI/2); 34 | noStroke(); 35 | fill(255); 36 | ellipse(0, 0, 48, 48); 37 | 38 | stroke(45, 123, 182); 39 | strokeWeight(3); 40 | line(0, -16, 0, 16); 41 | 42 | noStroke(); 43 | fill(45, 123, 182); 44 | triangle(0, -18, -6, -10, 6, -10); 45 | pop(); 46 | 47 | // Move in the wind's direction 48 | position.add(wind); 49 | 50 | stroke(0); 51 | fill(51); 52 | ellipse(position.x, position.y, 16, 16); 53 | 54 | if (position.x > width) position.x = 0; 55 | if (position.x < 0) position.x = width; 56 | if (position.y > height) position.y = 0; 57 | if (position.y < 0) position.y = height; 58 | 59 | 60 | } 61 | 62 | function gotWeather(weather) { 63 | 64 | // Get the angle (convert to radians) 65 | var angle = radians(Number(weather.current.wind_degree)); 66 | // Get the wind speed 67 | var windmag = Number(weather.current.wind_mph); 68 | 69 | // Display as HTML elements 70 | var temperatureDiv = createDiv(floor(weather.current.temp_f) + '°'); 71 | var windDiv = createDiv("WIND " + windmag + " MPH"); 72 | 73 | // Make a vector 74 | wind = p5.Vector.fromAngle(angle); 75 | } 76 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Image/00_Load_and_Display_Image.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Load and Display Image 3 | * @description Images can be loaded and displayed to the screen at their 4 | * actual size or any other size. 5 | *To run this example locally, you will need an 6 | * image file, and a running 7 | * local server.
8 | 9 | */ 10 | var img; // Declare variable 'img'. 11 | 12 | function setup() { 13 | createCanvas(720, 400); 14 | img = loadImage("assets/moonwalk.jpg"); // Load the image 15 | } 16 | 17 | function draw() { 18 | // Displays the image at its actual size at point (0,0) 19 | image(img, 0, 0); 20 | // Displays the image at point (0, height/2) at half size 21 | image(img, 0, height/2, img.width/2, img.height/2); 22 | } 23 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Image/01_Background_Image.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Background Image 3 | * @description This example presents the fastest way to load a 4 | * background image. To load an image as the background, 5 | * it must be the same width and height as the program. 6 | *To run this example locally, you will need an 7 | * image file, and a running 8 | * local server.
9 | */ 10 | var bg; 11 | var y = 0; 12 | 13 | function setup() { 14 | // The background image must be the same size as the parameters 15 | // into the createCanvas() method. In this program, the size of 16 | // the image is 720x400 pixels. 17 | bg = loadImage("assets/moonwalk.jpg"); 18 | createCanvas(720, 400); 19 | } 20 | 21 | function draw() { 22 | background(bg); 23 | 24 | stroke(226, 204, 0); 25 | line(0, y, width, y); 26 | 27 | y++; 28 | if (y > height) { 29 | y = 0; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Image/02_Transparency.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Transparency 3 | * @description Move the pointer left and right across the image to change its 4 | * position. This program overlays one image over another by modifying the 5 | * alpha value of the image with the tint() function. 6 | *To run this example locally, you will need an 7 | * image file, and a running 8 | * local server.
9 | */ 10 | var img; 11 | var offset = 0; 12 | var easing = 0.05; 13 | 14 | function setup() { 15 | createCanvas(720, 400); 16 | img = loadImage("assets/moonwalk.jpg"); // Load an image into the program 17 | } 18 | 19 | function draw() { 20 | image(img, 0, 0); // Display at full opacity 21 | var dx = (mouseX-img.width/2) - offset; 22 | offset += dx * easing; 23 | tint(255, 127); // Display at half opacity 24 | image(img, offset, 0); 25 | } 26 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Image/03_Alpha_Mask.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Alpha Mask 3 | * @description Loads a "mask" for an image to specify the transparency in 4 | * different parts of the image. The two images are blended together using 5 | * the mask() method of p5.Image. 6 | *To run this example locally, you will need two 7 | * image files, and a running 8 | * local server.
9 | */ 10 | var img; 11 | var imgMask; 12 | 13 | function preload() { 14 | img = loadImage("assets/moonwalk.jpg"); 15 | imgMask = loadImage("assets/mask.png"); 16 | } 17 | 18 | function setup() { 19 | createCanvas(720, 400); 20 | img.mask(imgMask); 21 | imageMode(CENTER); 22 | } 23 | 24 | function draw() { 25 | background(0, 102, 153); 26 | image(img, width/2, height/2); 27 | image(img, mouseX, mouseY); 28 | } 29 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Image/04_Create_Image.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Create Image 3 | * @description The createImage() function provides a fresh buffer of pixels to 4 | * play with. This example creates an image gradient. 5 | */ 6 | var img; // Declare variable 'img'. 7 | 8 | function setup() { 9 | createCanvas(720, 400); 10 | img = createImage(230, 230); 11 | img.loadPixels(); 12 | for(var x = 0; x < img.width; x++) { 13 | for(var y = 0; y < img.height; y++) { 14 | var a = map(y, 0, img.height, 255, 0); 15 | img.set(x, y, [0, 153, 204, a]); 16 | } 17 | } 18 | img.updatePixels(); 19 | } 20 | 21 | function draw() { 22 | background(0); 23 | image(img, 90, 80); 24 | image(img, mouseX-img.width/2, mouseY-img.height/2); 25 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Image/05_Pointillism.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Pointillism 3 | * @description By Dan Shiffman. Mouse horizontal location controls size of 4 | * dots. Creates a simple pointillist effect using ellipses colored according 5 | * to pixels in an image. 6 | *To run this example locally, you will need an 7 | * image file, and a running 8 | * local server.
9 | */ 10 | var img; 11 | var smallPoint, largePoint; 12 | 13 | function preload() { 14 | img = loadImage("assets/moonwalk.jpg"); 15 | } 16 | 17 | function setup() { 18 | createCanvas(720, 400); 19 | smallPoint = 4; 20 | largePoint = 40; 21 | imageMode(CENTER); 22 | noStroke(); 23 | background(255); 24 | img.loadPixels(); 25 | } 26 | 27 | function draw() { 28 | var pointillize = map(mouseX, 0, width, smallPoint, largePoint); 29 | var x = floor(random(img.width)); 30 | var y = floor(random(img.height)); 31 | var pix = img.get(x, y); 32 | fill(pix, 128); 33 | ellipse(x, y, pointillize, pointillize); 34 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Instance/01_Instantiating.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Instantiation 3 | * @description Create a p5 instance, which keeps all variables 4 | * out of the global scope of your page. 5 | */ 6 | var sketch = function( p ) { 7 | 8 | var x = 100; 9 | var y = 100; 10 | 11 | p.setup = function() { 12 | p.createCanvas(700, 410); 13 | }; 14 | 15 | p.draw = function() { 16 | p.background(0); 17 | p.fill(255); 18 | p.rect(x,y,50,50); 19 | }; 20 | }; 21 | 22 | var myp5 = new p5(sketch); 23 | 24 | // Compare to "global mode" 25 | // var x = 100; 26 | // var y = 100; 27 | 28 | // function setup() { 29 | // createCanvas(200,200); 30 | // } 31 | 32 | // function draw() { 33 | // background(0); 34 | // fill(255); 35 | // ellipse(x,y,50,50); 36 | // } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Interaction/10_Tickle.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Tickle 3 | * @description The word "tickle" jitters when the cursor hovers over. 4 | * Sometimes, it can be tickled off the screen. 5 | */ 6 | var message = "tickle", 7 | font, 8 | bounds, // holds x, y, w, h of the text's bounding box 9 | fontsize = 60, 10 | x, y; // x and y coordinates of the text 11 | 12 | function preload() { 13 | font = loadFont('assets/LeagueGothic-Regular.otf'); 14 | } 15 | 16 | function setup() { 17 | createCanvas(710, 400); 18 | 19 | // set up the font 20 | textFont(font); 21 | textSize(fontsize); 22 | 23 | // get the width and height of the text so we can center it initially 24 | bounds = font.textBounds(message, 0, 0, fontsize); 25 | x = width / 2 - bounds.w / 2; 26 | y = height / 2 - bounds.h / 2; 27 | } 28 | 29 | function draw() { 30 | // instead of clearing the background, fade it by drawing 31 | // a semi-transparent rectangle on top 32 | fill(204, 120); 33 | rect(0, 0, width, height); 34 | 35 | // write the text in black and get its bounding box 36 | fill(0); 37 | text(message, x, y); 38 | bounds = font.textBounds(message,x,y,fontsize); 39 | 40 | // check if the mouse is inside the bounding box and tickle if so 41 | if ( mouseX >= bounds.x && mouseX <= bounds.x + bounds.w && 42 | mouseY >= bounds.y && mouseY <= bounds.y + bounds.h) { 43 | x += random(-5, 5); 44 | y += random(-5, 5); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Interaction/20_Follow1.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Follow 1 3 | * @frame 710,400 4 | * @description A line segment is pushed and pulled by the cursor. 5 | * Based on code from Keith Peters. 6 | */ 7 | var x = 100, 8 | y = 100, 9 | angle1 = 0.0, 10 | segLength = 50; 11 | 12 | 13 | function setup() { 14 | createCanvas(710, 400); 15 | strokeWeight(20.0); 16 | stroke(255, 100); 17 | } 18 | 19 | function draw() { 20 | background(0); 21 | 22 | dx = mouseX - x; 23 | dy = mouseY - y; 24 | angle1 = atan2(dy, dx); 25 | x = mouseX - (cos(angle1) * segLength); 26 | y = mouseY - (sin(angle1) * segLength); 27 | 28 | segment(x, y, angle1); 29 | ellipse(x, y, 20, 20); 30 | } 31 | 32 | function segment(x, y, a) { 33 | push(); 34 | translate(x, y); 35 | rotate(a); 36 | line(0, 0, segLength, 0); 37 | pop(); 38 | } 39 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Interaction/21_Follow2.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Follow 2 3 | * @frame 710,400 4 | * @description A two-segmented arm follows the cursor position. The relative 5 | * angle between the segments is calculated with atan2() and the position 6 | * calculated with sin() and cos(). Based on code from Keith Peters. 7 | */ 8 | var x = [0,0], 9 | y = [0,0], 10 | segLength = 50; 11 | 12 | function setup() { 13 | createCanvas(710, 400); 14 | strokeWeight(20.0); 15 | stroke(255, 100); 16 | } 17 | 18 | function draw() { 19 | background(0); 20 | dragSegment(0, mouseX, mouseY); 21 | dragSegment(1, x[0], y[0]); 22 | } 23 | 24 | function dragSegment(i, xin, yin) { 25 | var dx = xin - x[i]; 26 | var dy = yin - y[i]; 27 | var angle = atan2(dy, dx); 28 | x[i] = xin - cos(angle) * segLength; 29 | y[i] = yin - sin(angle) * segLength; 30 | segment(x[i], y[i], angle); 31 | } 32 | 33 | function segment(x, y, a) { 34 | push(); 35 | translate(x, y); 36 | rotate(a); 37 | line(0, 0, segLength, 0); 38 | pop(); 39 | } 40 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Interaction/22_Follow3.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Follow 3 3 | * @frame 710,400 4 | * @description A segmented line follows the mouse. The relative angle from 5 | * each segment to the next is calculated with atan2() and the position of 6 | * the next is calculated with sin() and cos(). Based on code from Keith Peters. 7 | */ 8 | var x = [], 9 | y = [], 10 | segNum = 20, 11 | segLength = 18; 12 | 13 | for (var i = 0; i < segNum; i++) { 14 | x[i] = 0; 15 | y[i] = 0; 16 | } 17 | 18 | function setup() { 19 | createCanvas(710, 400); 20 | strokeWeight(9); 21 | stroke(255, 100); 22 | } 23 | 24 | function draw() { 25 | background(0); 26 | dragSegment(0, mouseX, mouseY); 27 | for( var i=0; iTechnically, due to patent issues, there is no single 4 | * sound format that is supported by all web browsers. While 5 | * mp3 is supported across the 6 | * latest versions of major browsers on OS X and Windows, for example, 7 | * it may not be available on some less mainstream operating systems and 8 | * browsers.
9 | * 10 | *To ensure full compatibility, you can include the same sound file 11 | * in multiple formats, e.g. 'sound.mp3' and 'sound.ogg'. (Ogg is an 12 | * open source alternative to mp3.) You can convert audio files 13 | * into web friendly formats for free online at media.io
. 15 | * 16 | *The soundFormats() method tells loadSound which formats 17 | * we have included with our sketch. Then, loadSound will 18 | * attempt to load the first format that is supported by the 19 | * client's web browser.
20 | * 21 | *To run this example locally, you will need the 22 | * p5.sound library 23 | * a sound file, and a running local server.
24 | */ 25 | var song; 26 | 27 | function preload() { 28 | // we have included both an .ogg file and an .mp3 file 29 | soundFormats('ogg', 'mp3'); 30 | 31 | // if mp3 is not supported by this browser, 32 | // loadSound will load the ogg file 33 | // we have included with our sketch 34 | song = loadSound('assets/lucky_dragons_-_power_melody.mp3'); 35 | } 36 | 37 | function setup() { 38 | createCanvas(710, 200); 39 | 40 | // song loaded during preload(), ready to play in setup() 41 | song.play(); 42 | background(0,255,0); 43 | } 44 | 45 | function mousePressed() { 46 | if ( song.isPlaying() ) { // .isPlaying() returns a boolean 47 | song.pause(); 48 | background(255,0,0); 49 | } else { 50 | song.play(); // playback will resume from the pause position 51 | background(0,255,0); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/03_Play_Mode.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Play Mode 3 | * @description 4 | *In 'sustain' mode, the sound will overlap with itself. 5 | * In 'restart' mode it will stop and then start again. 6 | * Click mouse to play a sound file. 7 | * Trigger lots of sounds at once! Press any key to change playmode.
8 | *To run this example locally, you will need the 9 | * p5.sound library 10 | * a sound file, and a running local server.
11 | */ 12 | var playMode = 'sustain'; 13 | var sample; 14 | 15 | function setup() { 16 | createCanvas(710,50); 17 | soundFormats('mp3', 'ogg'); 18 | sample = loadSound('assets/Damscray_-_Dancing_Tiger_02.mp3'); 19 | } 20 | 21 | function draw() { 22 | background(255,255,0); 23 | var str = 'Click here to play! Press key to toggle play mode.'; 24 | str += ' Current Play Mode: ' + playMode+'.'; 25 | text(str, 10, height/2); 26 | } 27 | 28 | function mouseClicked() { 29 | sample.play(); 30 | } 31 | function keyPressed(k) { 32 | togglePlayMode(); 33 | } 34 | 35 | function togglePlayMode(){ 36 | if (playMode == 'sustain'){ 37 | playMode = 'restart'; 38 | } 39 | else { 40 | playMode = 'sustain'; 41 | } 42 | sample.playMode(playMode); 43 | } 44 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/04_Pan_SoundFile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Pan Sound 3 | * @descriptionClick mouse to play the sound. 4 | * Ball position follows mouse and correlates to panning of sound.
5 | *To run this example locally, you will need the 6 | * p5.sound library 7 | * a sound file, and a running local server.
8 | * 9 | */ 10 | var ball = {}; 11 | var soundFile; 12 | 13 | function preload() { 14 | soundFormats('mp3', 'ogg'); 15 | soundFile = loadSound('assets/beatbox.ogg'); 16 | } 17 | 18 | function setup() { 19 | createCanvas(710, 100); 20 | } 21 | 22 | function draw() { 23 | background(0); 24 | ball.x = constrain(mouseX, 0, width); 25 | ellipse(ball.x, height/2, 100, 100) 26 | } 27 | 28 | function mousePressed(){ 29 | // map the ball's x location to a panning degree 30 | // between -1.0 (left) and 1.0 (right) 31 | var panning = map(ball.x, 0., width,-1.0, 1.0); 32 | soundFile.pan(panning); 33 | soundFile.play(); 34 | } 35 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/05_Sound_Effect.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Sound Effect 3 | * @descriptionPlay a sound effect when the mouse is clicked inside the circle.
4 | *To run this example locally, you will need the 5 | * p5.sound library 6 | * a sound file, and a running local server.
7 | */ 8 | // Adapted from Learning Processing by Daniel Shiffman 9 | // http://www.learningprocessing.com 10 | // Doorbell sample by Corsica_S via freesound.org, 11 | // Creative Commons BY 3.0 12 | 13 | // A sound file object 14 | var dingdong; 15 | 16 | // A doorbell object (that will trigger the sound) 17 | var doorbell; 18 | 19 | function setup() { 20 | createCanvas(200, 200); 21 | 22 | // Load the sound file. 23 | // We have included both an MP3 and an OGG version. 24 | soundFormats('mp3', 'ogg'); 25 | dingdong = loadSound('assets/doorbell.mp3'); 26 | 27 | // Create a new doorbell 28 | doorbell = new Doorbell(width/2, height/2, 64); 29 | } 30 | 31 | function draw() { 32 | background(255); 33 | // Show the doorbell 34 | doorbell.display(mouseX, mouseY); 35 | } 36 | 37 | function mousePressed() { 38 | // If the user clicks on the doorbell, play the sound! 39 | if (doorbell.contains(mouseX, mouseY)) { 40 | dingdong.play(); 41 | } 42 | } 43 | 44 | // A Class to describe a "doorbell" (really a button) 45 | var Doorbell = function(x_, y_, r_) { 46 | // Location and size 47 | var x = x_; 48 | var y = y_; 49 | var r = r_; 50 | 51 | // Is a point inside the doorbell? (used for mouse rollover, etc.) 52 | this.contains = function(mx, my) { 53 | if (dist(mx, my, x, y) < r) { 54 | return true; 55 | } else { 56 | return false; 57 | } 58 | }; 59 | 60 | // Show the doorbell (hardcoded colors, could be improved) 61 | this.display = function(mx, my) { 62 | if (this.contains(mx, my)) { 63 | fill(100); 64 | } else { 65 | fill(175); 66 | } 67 | stroke(0); 68 | strokeWeight(4); 69 | ellipse(x, y, r, r); 70 | }; 71 | }; 72 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/06_Manipulate_Sound.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Playback Rate 3 | * @descriptionLoad a SoundFile and map its playback rate to 4 | * mouseY, volume to mouseX. Playback rate is the speed with 5 | * which the web audio context processings the sound file information. 6 | * Slower rates not only increase the duration of the sound, but also 7 | * decrease the pitch because it is being played back at a slower frequency.
8 | *To run this example locally, you will need the 9 | * p5.sound library 10 | * a sound file, and a running local server.
11 | */ 12 | // A sound file object 13 | var song; 14 | 15 | function preload() { 16 | // Load a sound file 17 | song = loadSound('assets/Damscray_DancingTiger.mp3'); 18 | } 19 | 20 | function setup() { 21 | createCanvas(710, 400); 22 | 23 | // Loop the sound forever 24 | // (well, at least until stop() is called) 25 | song.loop(); 26 | } 27 | 28 | function draw() { 29 | background(200); 30 | 31 | // Set the volume to a range between 0 and 1.0 32 | var volume = map(mouseX, 0, width, 0, 1); 33 | volume = constrain(volume, 0, 1); 34 | song.amp(volume); 35 | 36 | // Set the rate to a range between 0.1 and 4 37 | // Changing the rate alters the pitch 38 | var speed = map(mouseY, 0.1, height, 0, 2); 39 | speed = constrain(speed, 0.01, 4); 40 | song.rate(speed); 41 | 42 | // Draw some circles to show what is going on 43 | stroke(0); 44 | fill(51, 100); 45 | ellipse(mouseX, 100, 48, 48); 46 | stroke(0); 47 | fill(51, 100); 48 | ellipse(100, mouseY, 48, 48); 49 | } 50 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/07_Amplitude_Analysis.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Measuring Amplitude 3 | * @descriptionAnalyze the amplitude of sound with 4 | * p5.Amplitude.
5 | * 6 | *Amplitude is the magnitude of vibration. Sound is vibration, 7 | * so its amplitude is is closely related to volume / loudness.
8 | * 9 | *The getLevel() method takes an array
10 | * of amplitude values collected over a small period of time (1024 samples).
11 | * Then it returns the Root Mean Square (RMS) of these values.
The original amplitude values for digital audio are between -1.0 and 1.0. 14 | * But the RMS will always be positive, because it is squared. 15 | * And, rather than use instantanous amplitude readings that are sampled at a rate 16 | * of 44,100 times per second, the RMS is an average over time (1024 samples, in this case), 17 | * which better represents how we hear amplitude. 18 | *
19 | *To run this example locally, you will need the 20 | * p5.sound library 21 | * a sound file, and a running local server.
22 | */ 23 | var song, analyzer; 24 | 25 | function preload() { 26 | song = loadSound('assets/lucky_dragons_-_power_melody.mp3'); 27 | } 28 | 29 | function setup() { 30 | createCanvas(710, 200); 31 | song.loop(); 32 | 33 | // create a new Amplitude analyzer 34 | analyzer = new p5.Amplitude(); 35 | 36 | // Patch the input to an volume analyzer 37 | analyzer.setInput(song); 38 | } 39 | 40 | function draw() { 41 | background(255); 42 | 43 | // Get the average (root mean square) amplitude 44 | var rms = analyzer.getLevel(); 45 | fill(127); 46 | stroke(0); 47 | 48 | // Draw an ellipse with size based on volume 49 | ellipse(width/2, height/2, 10+rms*200, 10+rms*200); 50 | } 51 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/08_Noise_Envelope.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Noise Drum Envelope 3 | * @descriptionWhite Noise is a random audio signal with equal energy 4 | * at every part of the frequency spectrum
5 | * 6 | *An Envelope is a series of fades, defined 7 | * as time / value pairs.
8 | * 9 | *In this example, the p5.Env 10 | * will be used to "play" the p5.Noise like a drum by controlling its output 11 | * amplitude. A p5.Amplitude will get the level of all sound in the sketch, and 12 | * we'll use this value to draw a green rectangle that shows the envelope 13 | * in action.
14 | *To run this example locally, you will need the 15 | * p5.sound library and a 16 | * sound file.
17 | */ 18 | var noise, env, analyzer; 19 | 20 | function setup() { 21 | createCanvas(710, 200); 22 | noise = new p5.Noise(); // other types include 'brown' and 'pink' 23 | noise.start(); 24 | 25 | // multiply noise volume by 0 26 | // (keep it quiet until we're ready to make noise!) 27 | noise.amp(0); 28 | 29 | env = new p5.Env(); 30 | // set attackTime, decayTime, sustainRatio, releaseTime 31 | env.setADSR(0.001, 0.1, 0.2, 0.1); 32 | // set attackLevel, releaseLevel 33 | env.setRange(1, 0); 34 | 35 | // p5.Amplitude will analyze all sound in the sketch 36 | // unless the setInput() method is used to specify an input. 37 | analyzer = new p5.Amplitude(); 38 | } 39 | 40 | function draw() { 41 | background(0); 42 | 43 | // get volume reading from the p5.Amplitude analyzer 44 | var level = analyzer.getLevel(); 45 | 46 | // use level to draw a green rectangle 47 | var levelHeight = map(level, 0, .4, 0, height); 48 | fill(100,250,100); 49 | rect(0, height, width, - levelHeight); 50 | } 51 | 52 | function mousePressed() { 53 | env.play(noise); 54 | } 55 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/09_Note_Envelope.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Note Envelope 3 | * @descriptionAn Envelope is a series of fades, defined
4 | * as time / value pairs. In this example, the envelope
5 | * will be used to "play" a note by controlling the output
6 | * amplitude of an oscillator.
7 | * The p5.Oscillator sends its output through
8 | * an internal Web Audio GainNode (p5.Oscillator.output).
9 | * By default, that node has a constant value of 0.5. It can
10 | * be reset with the osc.amp() method. Or, in this example, an
11 | * Envelope takes control of that node, turning the amplitude
12 | * up and down like a volume knob.
To run this example locally, you will need the 14 | * p5.sound library and a 15 | * sound file.
16 | */ 17 | var osc, envelope, fft; 18 | 19 | var scaleArray = [60, 62, 64, 65, 67, 69, 71, 72]; 20 | var note = 0; 21 | 22 | function setup() { 23 | createCanvas(710, 200); 24 | osc = new p5.SinOsc(); 25 | 26 | // Instantiate the envelope 27 | envelope = new p5.Env(); 28 | 29 | // set attackTime, decayTime, sustainRatio, releaseTime 30 | envelope.setADSR(0.001, 0.5, 0.1, 0.5); 31 | 32 | // set attackLevel, releaseLevel 33 | envelope.setRange(1, 0); 34 | 35 | osc.start(); 36 | 37 | fft = new p5.FFT(); 38 | noStroke(); 39 | } 40 | 41 | function draw() { 42 | background(20); 43 | 44 | if (frameCount % 60 == 0 || frameCount == 1) { 45 | var midiValue = scaleArray[note]; 46 | var freqValue = midiToFreq(midiValue); 47 | osc.freq(freqValue); 48 | 49 | envelope.play(osc, 0, 0.1); 50 | note = (note + 1) % scaleArray.length; 51 | } 52 | 53 | // plot FFT.analyze() frequency analysis on the canvas 54 | var spectrum = fft.analyze(); 55 | for (var i = 0; i < spectrum.length/20; i++) { 56 | fill(spectrum[i], spectrum[i]/10, 0); 57 | var x = map(i, 0, spectrum.length/20, 0, width); 58 | var h = map(spectrum[i], 0, 255, 0, height); 59 | rect(x, height, spectrum.length/20, -h); 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/10_Oscillator_Waveform.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Oscillator Frequency 3 | * @descriptionControl an Oscillator and view the waveform using FFT. 4 | * MouseX is mapped to frequency, mouseY is mapped to amplitude.
5 | *To run this example locally, you will need the 6 | * p5.sound library and a 7 | * sound file.
8 | */ 9 | var osc, fft; 10 | 11 | function setup() { 12 | createCanvas(720, 256); 13 | 14 | osc = new p5.TriOsc(); // set frequency and type 15 | osc.amp(.5); 16 | 17 | fft = new p5.FFT(); 18 | osc.start(); 19 | } 20 | 21 | function draw() { 22 | background(255); 23 | 24 | var waveform = fft.waveform(); // analyze the waveform 25 | beginShape(); 26 | strokeWeight(5); 27 | for (var i = 0; i < waveform.length; i++){ 28 | var x = map(i, 0, waveform.length, 0, width); 29 | var y = map(waveform[i], -1, 1, height, 0); 30 | vertex(x, y); 31 | } 32 | endShape(); 33 | 34 | // change oscillator frequency based on mouseX 35 | var freq = map(mouseX, 0, width, 40, 880); 36 | osc.freq(freq); 37 | 38 | var amp = map(mouseY, 0, height, 1, .01); 39 | osc.amp(amp); 40 | } 41 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/11_Live_Input.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Mic Input 3 | * @descriptionGet audio input from your computer's microphone. 4 | * Make noise to float the ellipse.
5 | *Note: p5.AudioIn contains its own p5.Amplitude object, 6 | * so you can call getLevel on p5.AudioIn without 7 | * creating a p5.Amplitude.
8 | *To run this example locally, you will need the 9 | * p5.sound library 10 | * and a running local server.
11 | */ 12 | var mic; 13 | 14 | function setup() { 15 | createCanvas(710, 200); 16 | 17 | // Create an Audio input 18 | mic = new p5.AudioIn(); 19 | 20 | // start the Audio Input. 21 | // By default, it does not .connect() (to the computer speakers) 22 | mic.start(); 23 | } 24 | 25 | function draw() { 26 | background(200); 27 | 28 | // Get the overall volume (between 0 and 1.0) 29 | var vol = mic.getLevel(); 30 | fill(127); 31 | stroke(0); 32 | 33 | // Draw an ellipse with height based on volume 34 | var h = map(vol, 0, 1, height, 0); 35 | ellipse(width/2, h - 25, 50, 50); 36 | } 37 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/12_FFT_Spectrum.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Frequency Spectrum 3 | * @descriptionVisualize the frequency spectrum of live audio input.
4 | *To run this example locally, you will need the 5 | * p5.sound library 6 | * and a running local server.
7 | */ 8 | var mic, fft; 9 | 10 | function setup() { 11 | createCanvas(710,400); 12 | noFill(); 13 | 14 | mic = new p5.AudioIn(); 15 | mic.start(); 16 | fft = new p5.FFT(); 17 | fft.setInput(mic); 18 | } 19 | 20 | function draw() { 21 | background(200); 22 | 23 | var spectrum = fft.analyze(); 24 | 25 | beginShape(); 26 | for (i = 0; iTo run this example locally, you will need the 6 | * p5.sound library 7 | * and a running local server.
8 | */ 9 | // Adapted from Learning Processing, Daniel Shiffman 10 | // learningprocessing.com 11 | var input; 12 | var analyzer; 13 | 14 | function setup() { 15 | createCanvas(710, 200); 16 | background(255); 17 | 18 | // Create an Audio input 19 | input = new p5.AudioIn(); 20 | 21 | input.start(); 22 | } 23 | 24 | function draw() { 25 | // Get the overall volume (between 0 and 1.0) 26 | var volume = input.getLevel(); 27 | 28 | // If the volume > 0.1, a rect is drawn at a random location. 29 | // The louder the volume, the larger the rectangle. 30 | var threshold = 0.1; 31 | if (volume > threshold) { 32 | stroke(0); 33 | fill(0, 100); 34 | rect(random(40, width), random(height), volume*50, volume*50); 35 | } 36 | 37 | // Graph the overall potential volume, w/ a line at the threshold 38 | var y = map(volume, 0, 1, height, 0); 39 | var ythreshold = map(threshold, 0, 1, height, 0); 40 | 41 | noStroke(); 42 | fill(175); 43 | rect(0, 0, 20, height); 44 | // Then draw a rectangle on the graph, sized according to volume 45 | fill(0); 46 | rect(0, y, 20, y); 47 | stroke(0); 48 | line(0, ythreshold, 19, ythreshold); 49 | } 50 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/14_Filter_LowPass.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Filter LowPass 3 | * @description Apply a p5.LowPass filter to a p5.SoundFile. 4 | * Visualize the sound with FFT. 5 | * Map mouseX to the the filter's cutoff frequency 6 | * and mouseY to resonance/width of the a BandPass filter 7 | * 8 | *To run this example locally, you will need the 9 | * p5.sound library 10 | * a sound file, and a running local server.
11 | */ 12 | var soundFile; 13 | var fft; 14 | 15 | var filter, filterFreq, filterRes; 16 | 17 | function preload() { 18 | soundFormats('mp3', 'ogg'); 19 | soundFile = loadSound('assets/beat'); 20 | } 21 | 22 | function setup() { 23 | createCanvas(710, 256); 24 | fill(255, 40, 255); 25 | 26 | // loop the sound file 27 | soundFile.loop(); 28 | 29 | filter = new p5.LowPass(); 30 | 31 | // Disconnect soundfile from master output. 32 | // Then, connect it to the filter, so that we only hear the filtered sound 33 | soundFile.disconnect(); 34 | soundFile.connect(filter); 35 | 36 | fft = new p5.FFT(); 37 | } 38 | 39 | function draw() { 40 | background(30); 41 | 42 | // Map mouseX to a the cutoff frequency from the lowest 43 | // frequency (10Hz) to the highest (22050Hz) that humans can hear 44 | filterFreq = map (mouseX, 0, width, 10, 22050); 45 | 46 | // Map mouseY to resonance (volume boost) at the cutoff frequency 47 | filterRes = map(mouseY, 0, height, 15, 5); 48 | 49 | // set filter parameters 50 | filter.set(filterFreq, filterRes); 51 | 52 | // Draw every value in the FFT spectrum analysis where 53 | // x = lowest (10Hz) to highest (22050Hz) frequencies, 54 | // h = energy (amplitude / volume) at that frequency 55 | var spectrum = fft.analyze(); 56 | noStroke(); 57 | for (var i = 0; i< spectrum.length; i++){ 58 | var x = map(i, 0, spectrum.length, 0, width); 59 | var h = -height + map(spectrum[i], 0, 255, height, 0); 60 | rect(x, height, width/spectrum.length, h) ; 61 | } 62 | 63 | } 64 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/15_Filter_BandPass.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Filter BandPass 3 | * @description Apply a p5.BandPass filter to white noise. 4 | * Visualize the sound with FFT. 5 | * Map mouseX to the bandpass frequency 6 | * and mouseY to resonance/width of the a BandPass filter 7 | * 8 | *To run this example locally, you will need the 9 | * p5.sound library 10 | * a sound file, and a running local server.
11 | */ 12 | var noise; 13 | var fft; 14 | var filter, filterFreq, filterWidth; 15 | 16 | function setup() { 17 | createCanvas(710, 256); 18 | fill(255, 40, 255); 19 | 20 | filter = new p5.BandPass(); 21 | 22 | noise = new p5.Noise(); 23 | 24 | noise.disconnect(); // Disconnect soundfile from master output... 25 | filter.process(noise); // ...and connect to filter so we'll only hear BandPass. 26 | noise.start(); 27 | 28 | fft = new p5.FFT(); 29 | } 30 | 31 | function draw() { 32 | background(30); 33 | 34 | // Map mouseX to a bandpass freq from the FFT spectrum range: 10Hz - 22050Hz 35 | filterFreq = map (mouseX, 0, width, 10, 22050); 36 | // Map mouseY to resonance/width 37 | filterWidth = map(mouseY, 0, height, 0, 90); 38 | // set filter parameters 39 | filter.set(filterFreq, filterWidth); 40 | 41 | // Draw every value in the FFT spectrum analysis where 42 | // x = lowest (10Hz) to highest (22050Hz) frequencies, 43 | // h = energy / amplitude at that frequency 44 | var spectrum = fft.analyze(); 45 | noStroke(); 46 | for (var i = 0; i< spectrum.length; i++){ 47 | var x = map(i, 0, spectrum.length, 0, width); 48 | var h = -height + map(spectrum[i], 0, 255, height, 0); 49 | rect(x, height, width/spectrum.length, h) ; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/16_Delay.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Delay 3 | * @description 4 | * Click the mouse to hear the p5.Delay process a SoundFile. 5 | * MouseX controls the p5.Delay Filter Frequency. 6 | * MouseY controls both the p5.Delay Time and Resonance. 7 | * Visualize the resulting sound's volume with an Amplitude object. 8 | * 9 | *To run this example locally, you will need the 10 | * p5.sound library 11 | * a sound file, and a running local server.
12 | */ 13 | 14 | var soundFile, analyzer, delay; 15 | 16 | function preload() { 17 | soundFormats('ogg', 'mp3'); 18 | soundFile = loadSound('assets/beatbox.mp3'); 19 | } 20 | 21 | function setup() { 22 | createCanvas(710, 400); 23 | 24 | soundFile.disconnect(); // so we'll only hear delay 25 | 26 | delay = new p5.Delay(); 27 | delay.process(soundFile, .12, .7, 2300); 28 | delay.setType('pingPong'); // a stereo effect 29 | 30 | analyzer = new p5.Amplitude(); 31 | } 32 | 33 | function draw() { 34 | background(0); 35 | 36 | // get volume reading from the p5.Amplitude analyzer 37 | var level = analyzer.getLevel(); 38 | 39 | // use level to draw a green rectangle 40 | var levelHeight = map(level, 0, .1, 0, height); 41 | fill(100,250,100); 42 | rect(0, height, width, - levelHeight); 43 | 44 | var filterFreq = map(mouseX, 0, width, 60, 15000); 45 | filterFreq = constrain(filterFreq, 60, 15000); 46 | var filterRes = map(mouseY, 0, height, 3, 0.01); 47 | filterRes = constrain(filterRes, 0.01, 3); 48 | delay.filter(filterFreq, filterRes); 49 | var delTime = map(mouseY, 0, width, .2, .01); 50 | delTime = constrain(delTime, .01, .2); 51 | delay.delayTime(delTime); 52 | } 53 | 54 | function mousePressed() { 55 | soundFile.play(); 56 | } 57 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/17_Reverb.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Reverb 3 | * @description Reverb gives depth and perceived space to a sound. Here, 4 | * noise is processed with reverb. 5 | * 6 | *To run this example locally, you will need the 7 | * p5.sound library 8 | * a sound file, and a running local server.
9 | */ 10 | var sound, reverb; 11 | 12 | function preload() { 13 | soundFormats('mp3', 'ogg'); 14 | soundFile = loadSound('assets/Damscray_DancingTiger'); 15 | 16 | // disconnect the default connection 17 | // so that we only hear the sound via the reverb.process 18 | soundFile.disconnect(); 19 | } 20 | 21 | function setup() { 22 | createCanvas(720,100); 23 | background(0); 24 | 25 | reverb = new p5.Reverb(); 26 | 27 | // sonnects soundFile to reverb with a 28 | // reverbTime of 6 seconds, decayRate of 0.2% 29 | reverb.process(soundFile, 6, 0.2); 30 | 31 | reverb.amp(4); // turn it up! 32 | } 33 | 34 | function mousePressed() { 35 | soundFile.play(); 36 | } 37 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Sound/19_Record_Save.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Record Save Audio 3 | * @description Record a sound, play it back and save 4 | * it as a .wav file to the client's computer. 5 | * We need three objects: a p5.AudioIn (mic / sound source), 6 | * p5.SoundRecorder (records the sound), and a 7 | * p5.SoundFile (play back / save). 8 | *To run this example locally, you will need the 9 | * p5.sound library 10 | * a sound file, and a running local server.
11 | */ 12 | var mic, recorder, soundFile; 13 | 14 | var state = 0; // mousePress will increment from Record, to Stop, to Play 15 | 16 | function setup() { 17 | createCanvas(400,400); 18 | background(200); 19 | fill(0); 20 | text('Enable mic and click the mouse to begin recording', 20, 20); 21 | 22 | // create an audio in 23 | mic = new p5.AudioIn(); 24 | 25 | // users must manually enable their browser microphone for recording to work properly! 26 | mic.start(); 27 | 28 | // create a sound recorder 29 | recorder = new p5.SoundRecorder(); 30 | 31 | // connect the mic to the recorder 32 | recorder.setInput(mic); 33 | 34 | // create an empty sound file that we will use to playback the recording 35 | soundFile = new p5.SoundFile(); 36 | } 37 | 38 | function mousePressed() { 39 | // use the '.enabled' boolean to make sure user enabled the mic (otherwise we'd record silence) 40 | if (state === 0 && mic.enabled) { 41 | 42 | // Tell recorder to record to a p5.SoundFile which we will use for playback 43 | recorder.record(soundFile); 44 | 45 | background(255,0,0); 46 | text('Recording now! Click to stop.', 20, 20); 47 | state++; 48 | } 49 | 50 | else if (state === 1) { 51 | recorder.stop(); // stop recorder, and send the result to soundFile 52 | 53 | background(0,255,0); 54 | text('Recording stopped. Click to play & save', 20, 20); 55 | state++; 56 | } 57 | 58 | else if (state === 2) { 59 | soundFile.play(); // play the result! 60 | saveSound(soundFile, 'mySound.wav'); // save file 61 | state++; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Structure/00_Coordinates.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Coordinates 3 | * @description All shapes drawn to the screen have a position that is 4 | * specified as a coordinate. All coordinates are measured as the distance from 5 | * the origin in units of pixels. The origin [0, 0] is the coordinate in the 6 | * upper left of the window and the coordinate in the lower right is [width-1, 7 | * height-1]. 8 | */ 9 | function setup() { 10 | // Sets the screen to be 640 pixels wide and 360 pixels high 11 | createCanvas(720, 400); 12 | } 13 | 14 | function draw() { 15 | // Set the background to black and turn off the fill color 16 | background(0); 17 | noFill(); 18 | 19 | // The two parameters of the point() method each specify 20 | // coordinates. 21 | // The first parameter is the x-coordinate and the second is the Y 22 | stroke(255); 23 | point(width * 0.5, height * 0.5); 24 | point(width * 0.5, height * 0.25); 25 | 26 | // Coordinates are used for drawing all shapes, not just points. 27 | // Parameters for different functions are used for different 28 | // purposes. For example, the first two parameters to line() 29 | // specify the coordinates of the first endpoint and the second 30 | // two parameters specify the second endpoint 31 | stroke(0, 153, 255); 32 | line(0, height*0.33, width, height*0.33); 33 | 34 | // By default, the first two parameters to rect() are the 35 | // coordinates of the upper-left corner and the second pair 36 | // is the width and height 37 | stroke(255, 153, 0); 38 | rect(width*0.25, height*0.1, width * 0.5, height * 0.8); 39 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Structure/01_Width_and_Height.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Width and Height 3 | * @description The 'width' and 'height' variables contain the 4 | * width and height of the display window as defined in the createCanvas() 5 | * function. 6 | */ 7 | function setup() { 8 | createCanvas(720, 400); 9 | } 10 | 11 | function draw() { 12 | background(127); 13 | noStroke(); 14 | for (var i = 0; i < height; i += 20) { 15 | fill(129, 206, 15); 16 | rect(0, i, width, 10); 17 | fill(255); 18 | rect(i, 0, 10, height); 19 | } 20 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Structure/02_Setup_and_Draw.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Setup and Draw 3 | * @description The code inside the draw() function runs continuously from top 4 | * to bottom until the program is stopped. 5 | */ 6 | var y = 100; 7 | 8 | // The statements in the setup() function 9 | // execute once when the program begins 10 | function setup() { 11 | // createCanvas must be the first statement 12 | createCanvas(720, 400); 13 | stroke(255); // Set line drawing color to white 14 | frameRate(30); 15 | } 16 | // The statements in draw() are executed until the 17 | // program is stopped. Each statement is executed in 18 | // sequence and after the last line is read, the first 19 | // line is executed again. 20 | function draw() { 21 | background(0); // Set the background to black 22 | y = y - 1; 23 | if (y < 0) { 24 | y = height; 25 | } 26 | line(0, y, width, y); 27 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Structure/03_No_Loop.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name No Loop 3 | * @description The noLoop() function causes draw() to only execute once. 4 | * Without calling noLoop(), the code inside draw() is run continually. 5 | */ 6 | var y; 7 | 8 | // The statements in the setup() function 9 | // execute once when the program begins 10 | function setup() 11 | { 12 | // createCanvas should be the first statement 13 | createCanvas(720, 400); 14 | stroke(255); // Set line drawing color to white 15 | noLoop(); 16 | 17 | y = height * 0.5; 18 | } 19 | 20 | // The statements in draw() are executed until the 21 | // program is stopped. Each statement is executed in 22 | // sequence and after the last line is read, the first 23 | // line is executed again. 24 | function draw() 25 | { 26 | background(0); // Set the background to black 27 | y = y - 1; 28 | if (y < 0) { y = height; } 29 | line(0, y, width, y); 30 | } 31 | -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Structure/04_Loop.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Loop 3 | * @description The code inside the draw() function runs continuously from top 4 | * to bottom until the program is stopped. 5 | */ 6 | var y = 100; 7 | 8 | // The statements in the setup() function 9 | // execute once when the program begins 10 | function setup() { 11 | createCanvas(720, 400); // Size must be the first statement 12 | stroke(255); // Set line drawing color to white 13 | frameRate(30); 14 | } 15 | // The statements in draw() are executed until the 16 | // program is stopped. Each statement is executed in 17 | // sequence and after the last line is read, the first 18 | // line is executed again. 19 | function draw() { 20 | background(0); // Set the background to black 21 | y = y - 1; 22 | if (y < 0) { 23 | y = height; 24 | } 25 | line(0, y, width, y); 26 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Structure/05_Redraw.js: -------------------------------------------------------------------------------- 1 | /* 2 | *@name Redraw 3 | *@description The redraw() function makes draw() execute once. In this example, 4 | *draw() is executed once every time the mouse is clicked. 5 | */ 6 | 7 | var y; 8 | 9 | // The statements in the setup() function 10 | // execute once when the program begins 11 | function setup() { 12 | createCanvas(720, 400); 13 | stroke(255); 14 | noLoop(); 15 | y = height * 0.5; 16 | } 17 | 18 | // The statements in draw() are executed until the 19 | // program is stopped. Each statement is executed in 20 | // sequence and after the last line is read, the first 21 | // line is executed again. 22 | function draw() { 23 | background(0); 24 | y = y - 4; 25 | if (y < 0) { 26 | y = height; 27 | } 28 | line(0, y, width, y); 29 | } 30 | 31 | function mousePressed() { 32 | redraw(); 33 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Structure/06_Functions.js: -------------------------------------------------------------------------------- 1 | /* 2 | *@name Functions 3 | *@description The drawTarget() function makes it easy to draw many distinct 4 | *targets. Each call to drawTarget() specifies the position, size, and number of 5 | *rings for each target. 6 | */ 7 | 8 | function setup() { 9 | createCanvas(720, 400); 10 | background(51); 11 | noStroke(); 12 | noLoop(); 13 | } 14 | 15 | function draw() { 16 | drawTarget(width*0.25, height*0.4, 200, 4); 17 | drawTarget(width*0.5, height*0.5, 300, 10); 18 | drawTarget(width*0.75, height*0.3, 120, 6); 19 | } 20 | 21 | function drawTarget(xloc, yloc, size, num) { 22 | grayvalues = 255/num; 23 | steps = size/num; 24 | for (i = 0; i < num; i++) { 25 | fill(i*grayvalues); 26 | ellipse(xloc, yloc, size - i*steps, size - i*steps); 27 | } 28 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Structure/07_Recursion.js: -------------------------------------------------------------------------------- 1 | /* 2 | *@name Recursion 3 | *@description A demonstration of recursion, which means functions call themselves. 4 | * Notice how the drawCircle() function calls itself at the end of its block. 5 | * It continues to do this until the variable "level" is equal to 1. 6 | */ 7 | 8 | function setup() { 9 | createCanvas(720, 400); 10 | noStroke(); 11 | noLoop(); 12 | } 13 | 14 | function draw() { 15 | drawCircle(width/2, 280, 6); 16 | } 17 | 18 | function drawCircle(x, radius, level) { 19 | var tt = 126 * level/4.0; 20 | fill(tt); 21 | ellipse(x, height/2, radius*2, radius*2); 22 | if(level > 1) { 23 | level = level - 1; 24 | drawCircle(x - radius/2, radius/2, level); 25 | drawCircle(x + radius/2, radius/2, level); 26 | } 27 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/examples/Structure/08_Create_Graphics.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Create Graphics 3 | * @description Creates and returns a new p5.Renderer object. Use this 4 | * class if you need to draw into an off-screen graphics buffer. The two parameters 5 | * define the width and height in pixels. 6 | */ 7 | 8 | var pg; 9 | 10 | function setup(){ 11 | createCanvas(710, 400); 12 | pg = createGraphics(400, 250); 13 | } 14 | 15 | function draw(){ 16 | fill(0, 12); 17 | rect(0, 0, width, height); 18 | fill(255); 19 | noStroke(); 20 | ellipse(mouseX, mouseY, 60, 60); 21 | 22 | pg.background(51); 23 | pg.noFill(); 24 | pg.stroke(255); 25 | pg.ellipse(mouseX-150, mouseY-75, 60, 60); 26 | 27 | //Draw the offscreen buffer to the screen with image() 28 | image(pg, 150, 75); 29 | } -------------------------------------------------------------------------------- /public/mode_assets/p5/server.js: -------------------------------------------------------------------------------- 1 | var serialserver = require('p5.serialserver'); 2 | serialserver.start(); 3 | -------------------------------------------------------------------------------- /public/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "p5", 3 | "version": "0.6.2", 4 | "main": "boot.html", 5 | "window": { 6 | "title": "Untitled", 7 | "toolbar": false, 8 | "frame": true, 9 | "position": "center", 10 | "width": 1024, 11 | "height": 768, 12 | "show": false, 13 | "focus": true, 14 | "resizable": true 15 | }, 16 | "dependencies": { 17 | "chokidar": "1.0.5", 18 | "node-static": "0.7.6", 19 | "p5.serialserver": "0.0.22", 20 | "portscanner": "1.0.0", 21 | "rimraf": "^2.3.4", 22 | "semver": "~3.0.1", 23 | "serialport": "git://github.com/julianduque/node-serialport.git#master", 24 | "trash": "~0.1.2", 25 | "wrench": "~1.5.8" 26 | }, 27 | "devDependencies": { 28 | "request": "^2.58.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /public/serial.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 8 | serial 9 | 10 | -------------------------------------------------------------------------------- /release-howto.md: -------------------------------------------------------------------------------- 1 | # Setup 2 | 3 | 1. Install wine (and xquartz), instructions [here](http://www.davidbaumgold.com/tutorials/wine-mac/). 4 | 5 | # How to make a release 6 | 7 | First, it's a good idea to download the latest build of p5, examples & offline reference: 8 | 9 | ``` 10 | gulp p5 11 | gulp getExamples 12 | gulp getOfflineReference 13 | ``` 14 | 15 | Update the version number in `package.json` and `public/package.json` 16 | ``` 17 | "version": "0.5.7", 18 | ``` 19 | 20 | **Very important: do NOT push to master yet!** 21 | 22 | Next, run the build task. 23 | 24 | ``` 25 | gulp build 26 | ``` 27 | This should create a new folder `dist/p5 - v[VERSION_NUMBER]` with your build. Test it out and make sure that nothing is busted. Things that should always be tested manually are: 28 | * playing mp4s/mp3s 29 | * serial communication 30 | * the version number in the about window 31 | 32 | Zip the release: 33 | ``` 34 | gulp latest 35 | ``` 36 | This will create zip files of the Mac and Windows releases and put them in `dist/latest`. 37 | 38 | Then, make a new release on github. 39 | 40 | * Make the tag look like this: `v0.5.8` 41 | * And the title look like this: `p5.js Editor v0.5.8` 42 | * Upload the zips to the release 43 | * Save 44 | 45 | Finally, push to github. Again, it's very important that you only push AFTER you make the release. The editor reads the version number from github to determine when users should be prompted to download a new version. There is probably a smarter way to do this, but that's how it works now. 46 | 47 | 48 | 49 | 50 | --------------------------------------------------------------------------------