28 |
29 |
50 |
51 |
30 |
32 |
33 |
34 |
36 |
37 |
38 |
41 |
42 |
43 |
44 |
45 |
46 |
48 |
49 |
2 |
To run this example locally, you will need the 5 | * p5.sound library 6 | * a sound file, and a running local server. 7 | */ 8 | var song; 9 | 10 | function setup() { 11 | song = loadSound('assets/lucky_dragons_-_power_melody.mp3'); 12 | createCanvas(720, 200); 13 | background(255,0,0); 14 | } 15 | 16 | function mousePressed() { 17 | if ( song.isPlaying() ) { // .isPlaying() returns a boolean 18 | song.stop(); 19 | background(255,0,0); 20 | } else { 21 | song.play(); 22 | background(0,255,0); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /public/examples_src/04_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 | } -------------------------------------------------------------------------------- /app/settings.js: -------------------------------------------------------------------------------- 1 | var defaults = { 2 | fontSize: 18, 3 | tabSize: 2, 4 | tabType: "spaces", 5 | consoleOrientation: "horizontal", 6 | showSidebar: false, 7 | showEditor: true, 8 | wordWrap: false, 9 | runInFrame: true, // determines whether to run in iframe, or in newWindow 10 | editorTheme: 'light-theme', 11 | fullCanvas: false, // automatically make canvas full width/height of screen 12 | }; 13 | 14 | var userSettings = {}; 15 | 16 | module.exports.load = function() { 17 | 18 | // get settings from local storage if they exist 19 | var settings = localStorage.userSettings; 20 | if (!settings) { 21 | settings = defaults; 22 | } else { 23 | try { 24 | settings = JSON.parse(settings); 25 | } catch(err) { 26 | settings = defaults; 27 | } 28 | } 29 | 30 | userSettings = settings; 31 | return settings; 32 | }; 33 | 34 | module.exports.defaults = defaults; -------------------------------------------------------------------------------- /public/examples_src/00_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/examples_src/02_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/examples_src/05_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 | *
2 |
3 |
4 |
11 |
--------------------------------------------------------------------------------
/public/examples_src/01_Form/01_Shape_Primitives.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @name Shape Primitives
3 | * @description The basic shape primitive functions are triangle(),
4 | * rect(), quad(), ellipse(), and arc(). Squares are made with rect()
5 | * and circles are made with ellipse(). Each of these functions requires
6 | * a number of parameters to determine the shape's position and size.
7 | */
8 | function setup() {
9 |
10 | // Sets the screen to be 720 pixels wide and 400 pixels high
11 | createCanvas(720, 400);
12 | background(0);
13 | noStroke();
14 |
15 | fill(204);
16 | triangle(18, 18, 18, 360, 81, 360);
17 |
18 | fill(102);
19 | rect(81, 81, 63, 63);
20 |
21 | fill(204);
22 | quad(189, 18, 216, 18, 216, 360, 144, 360);
23 |
24 | fill(255);
25 | ellipse(252, 144, 72, 72);
26 |
27 | fill(204);
28 | triangle(288, 18, 351, 360, 288, 360);
29 |
30 | fill(255);
31 | arc(479, 300, 280, 280, PI, TWO_PI);
32 | }
--------------------------------------------------------------------------------
/public/examples_src/16_Dom/11_Capture.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @name Video Capture
3 | * @frame 710,240
4 | * @description
7 | * Capture video from the webcam and display 8 | * on the canvas as well with invert filter. Note that by 9 | * default the capture feed shows up, too. You can hide the 10 | * feed by uncommenting the capture.hide() line. 11 | */ 12 | var capture; 13 | 14 | function setup() { 15 | createCanvas(390, 240); 16 | capture = createCapture(VIDEO); 17 | capture.size(320, 240); 18 | //capture.hide(); 19 | } 20 | 21 | function draw() { 22 | background(255); 23 | image(capture, 0, 0, 320, 240); 24 | filter('INVERT'); 25 | } 26 | -------------------------------------------------------------------------------- /public/examples_src/00_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/examples_src/01_Form/00_Points_and_Lines.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Points and Lines 3 | * @description Points and lines can be used to draw basic geometry. 4 | * Change the value of the variable 'd' to scale the form. The four 5 | * variables set the positions based on the value of 'd'. 6 | */ 7 | function setup() { 8 | 9 | var d = 70; 10 | var p1 = d; 11 | var p2 = p1+d; 12 | var p3 = p2+d; 13 | var p4 = p3+d; 14 | 15 | // Sets the screen to be 720 pixels wide and 400 pixels high 16 | createCanvas(720, 400); 17 | background(0); 18 | noSmooth(); 19 | 20 | translate(140, 0); 21 | 22 | // Draw gray box 23 | stroke(153); 24 | line(p3, p3, p2, p3); 25 | line(p2, p3, p2, p2); 26 | line(p2, p2, p3, p2); 27 | line(p3, p2, p3, p3); 28 | 29 | // Draw white points 30 | stroke(255); 31 | point(p1, p1); 32 | point(p1, p3); 33 | point(p2, p4); 34 | point(p3, p1); 35 | point(p4, p2); 36 | point(p4, p4); 37 | } -------------------------------------------------------------------------------- /public/examples_src/11_Objects/01_Objects.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Objects 3 | * @description Create a Jitter class, instantiate an object, 4 | * and move it around the screen. Adapted from Getting Started with 5 | * Processing by Casey Reas and Ben Fry. 6 | */ 7 | var bug; // Declare object 8 | 9 | function setup() { 10 | createCanvas(710, 400); 11 | // Create object 12 | bug = new Jitter(); 13 | } 14 | 15 | function draw() { 16 | background(50, 89, 100); 17 | bug.move(); 18 | bug.display(); 19 | } 20 | 21 | // Jitter class 22 | function Jitter() { 23 | this.x = random(width); 24 | this.y = random(height); 25 | this.diameter = random(10, 30); 26 | this.speed = 1; 27 | 28 | this.move = function() { 29 | this.x += random(-this.speed, this.speed); 30 | this.y += random(-this.speed, this.speed); 31 | }; 32 | 33 | this.display = function() { 34 | ellipse(this.x, this.y, this.diameter, this.diameter); 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /public/examples_src/05_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 | *
6 | * Move the sliders to control the R, G, B values of the background. 7 | */ 8 | var rSlider, gSlider, bSlider; 9 | 10 | function setup() { 11 | // create canvas 12 | createCanvas(710, 400); 13 | textSize(15) 14 | noStroke(); 15 | 16 | // create sliders 17 | rSlider = createSlider(0, 255, 100); 18 | rSlider.position(20, 20); 19 | gSlider = createSlider(0, 255, 0); 20 | gSlider.position(20, 50); 21 | bSlider = createSlider(0, 255, 255); 22 | bSlider.position(20, 80); 23 | } 24 | 25 | function draw() { 26 | var r = rSlider.value(); 27 | var g = gSlider.value(); 28 | var b = bSlider.value(); 29 | background(r, g, b); 30 | text("red", 165, 35); 31 | text("green", 165, 65); 32 | text("blue", 165, 95); 33 | } 34 | -------------------------------------------------------------------------------- /public/examples_src/05_Image/01_Background_Image.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Background Image 3 | * @description This example presents the fastest way to load a 4 | * background image into Processing. To load an image as the background, 5 | * it must be the same width and height as the program. 6 | *
2 |
3 |
4 |
13 |
--------------------------------------------------------------------------------
/public/examples_src/02_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/examples_src/05_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 | *
6 | * Drag an image file onto the canvas to see it displayed. 7 | */ 8 | 9 | function setup() { 10 | // create canvas 11 | var c = createCanvas(710, 400); 12 | background(100); 13 | // Add an event for when a file is dropped onto the canvas 14 | c.drop(gotFile); 15 | } 16 | 17 | function draw() { 18 | fill(255); 19 | noStroke(); 20 | textSize(24); 21 | textAlign(CENTER); 22 | text('Drag an image file onto the canvas.', width/2, height/2); 23 | noLoop(); 24 | } 25 | 26 | function gotFile(file) { 27 | // If it's an image file 28 | if (file.type === 'image') { 29 | // Create an image DOM element but don't show it 30 | var img = createImg(file.data).hide(); 31 | // Draw the image onto the canvas 32 | image(img, 0, 0, width, height); 33 | } else { 34 | println('Not an image file!'); 35 | } 36 | } -------------------------------------------------------------------------------- /public/images/expanded.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | -------------------------------------------------------------------------------- /public/images/collapsed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | -------------------------------------------------------------------------------- /public/images/sidebar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /public/examples_src/07_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/examples_src/33_Sound/04_Pan_SoundFile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Pan Sound 3 | * @description
6 | * Input text and click the button to see it affect the the canvas. 7 | */ 8 | var input, button, greeting; 9 | 10 | function setup() { 11 | 12 | // create canvas 13 | createCanvas(710, 400); 14 | 15 | input = createInput(); 16 | input.position(20, 65); 17 | 18 | button = createButton('submit'); 19 | button.position(150, 65); 20 | button.mousePressed(greet); 21 | 22 | greeting = createElement('h2', 'what is your name?'); 23 | greeting.position(20, 5); 24 | 25 | textAlign(CENTER) 26 | textSize(50); 27 | } 28 | 29 | function greet() { 30 | var name = input.value(); 31 | greeting.html('hello '+name+'!'); 32 | input.value(''); 33 | 34 | for (var i=0; i<200; i++) { 35 | push(); 36 | fill(random(255), 255, 255); 37 | translate(random(width), random(height)); 38 | rotate(random(2*PI)); 39 | text(name, 0, 0); 40 | pop(); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /public/images/filemenu-gray.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | -------------------------------------------------------------------------------- /public/examples_src/33_Sound/07_Amplitude_Analysis.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Amplitude Analysis 3 | * @description
The atan2() function computes the angle from each eye to the cursor. 4 | */ 5 | var e1, e2, e3; 6 | 7 | function setup() { 8 | createCanvas(720, 400); 9 | noStroke(); 10 | e1 = new Eye(250, 16, 120); 11 | e2 = new Eye(164, 185, 80); 12 | e3 = new Eye(420, 230, 220); 13 | } 14 | 15 | function draw() { 16 | background(102); 17 | e1.update(mouseX, mouseY); 18 | e2.update(mouseX, mouseY); 19 | e3.update(mouseX, mouseY); 20 | e1.display(); 21 | e2.display(); 22 | e3.display(); 23 | } 24 | 25 | function Eye(tx, ty, ts) { 26 | this.x = tx; 27 | this.y = ty; 28 | this.size = ts; 29 | this.angle = 0; 30 | 31 | this.update = function (mx, my) { 32 | this.angle = atan2(my - this.y, mx - this.x); 33 | }; 34 | 35 | this.display = function () { 36 | push(); 37 | translate(this.x, this.y); 38 | fill(255); 39 | ellipse(0, 0, this.size, this.size); 40 | rotate(this.angle); 41 | fill(153, 204, 0); 42 | ellipse(this.size / 4, 0, this.size / 2, this.size / 2); 43 | pop(); 44 | }; 45 | } -------------------------------------------------------------------------------- /public/images/filemenu-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | -------------------------------------------------------------------------------- /public/examples_src/08_Math/14_noisewave.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Noise Wave 3 | * @description Using Perlin Noise to generate a wave-like pattern. 4 | * Original by Daniel Shiffman. 5 | */ 6 | var yoff = 0.0; // 2nd dimension of perlin noise 7 | 8 | function setup() { 9 | createCanvas(710, 400); 10 | } 11 | 12 | function draw() { 13 | background(51); 14 | 15 | fill(255); 16 | // We are going to draw a polygon out of the wave points 17 | beginShape(); 18 | 19 | var xoff = 0; // Option #1: 2D Noise 20 | // float xoff = yoff; // Option #2: 1D Noise 21 | 22 | // Iterate over horizontal pixels 23 | for (var x = 0; x <= width; x += 10) { 24 | // Calculate a y value according to noise, map to 25 | 26 | // Option #1: 2D Noise 27 | var y = map(noise(xoff, yoff), 0, 1, 200,300); 28 | 29 | // Option #2: 1D Noise 30 | // float y = map(noise(xoff), 0, 1, 200,300); 31 | 32 | // Set the vertex 33 | vertex(x, y); 34 | // Increment x dimension for noise 35 | xoff += 0.05; 36 | } 37 | // increment y dimension for noise 38 | yoff += 0.01; 39 | vertex(width, height); 40 | vertex(0, height); 41 | endShape(CLOSE); 42 | } -------------------------------------------------------------------------------- /public/examples_src/07_Color/02_Brightness.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Brightness 3 | * @description By Dan Shiffman. This program adjusts the brightness of a part 4 | * of the image by calculating the distance of each pixel to the mouse. 5 | *Control 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 9 | * p5.sound library 10 | * a sound file, and a running local server. 11 | */ 12 | 13 | var song; 14 | 15 | function preload() { 16 | song = loadSound('assets/lucky_dragons_-_power_melody.mp3'); 17 | } 18 | 19 | function setup() { 20 | createCanvas(710, 200); 21 | song.loop(); // song is ready to play during setup() because it was loaded during preload 22 | background(0,255,0); 23 | } 24 | 25 | function mousePressed() { 26 | if ( song.isPlaying() ) { // .isPlaying() returns a boolean 27 | song.pause(); // .play() will resume from .pause() position 28 | background(255,0,0); 29 | } else { 30 | song.play(); 31 | background(0,255,0); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /public/examples_src/08_Math/02_distance1d.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Distance 1D 3 | * @description Move the mouse left and right to control 4 | * the speed and direction of the moving shapes. 5 | */ 6 | var xpos1; 7 | var xpos2; 8 | var xpos3; 9 | var xpos4; 10 | var thin = 8; 11 | var thick = 36; 12 | 13 | function setup() { 14 | createCanvas(710, 400); 15 | noStroke(); 16 | xpos1 = width/2; 17 | xpos2 = width/2; 18 | xpos3 = width/2; 19 | xpos4 = width/2; 20 | } 21 | 22 | function draw() { 23 | background(0); 24 | 25 | var mx = mouseX * 0.4 - width/5.0; 26 | 27 | fill(102); 28 | rect(xpos2, 0, thick, height/2); 29 | fill(204); 30 | rect(xpos1, 0, thin, height/2); 31 | fill(102); 32 | rect(xpos4, height/2, thick, height/2); 33 | fill(204); 34 | rect(xpos3, height/2, thin, height/2); 35 | 36 | xpos1 += mx/16; 37 | xpos2 += mx/64; 38 | xpos3 -= mx/16; 39 | xpos4 -= mx/64; 40 | 41 | if(xpos1 < -thin) { xpos1 = width; } 42 | if(xpos1 > width) { xpos1 = -thin; } 43 | if(xpos2 < -thick) { xpos2 = width; } 44 | if(xpos2 > width) { xpos2 = -thick; } 45 | if(xpos3 < -thin) { xpos3 = width; } 46 | if(xpos3 > width) { xpos3 = -thin; } 47 | if(xpos4 < -thick) { xpos4 = width; } 48 | if(xpos4 > width) { xpos4 = -thick; } 49 | } 50 | -------------------------------------------------------------------------------- /public/examples_src/03_Arrays/00_Array.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Array 3 | * @description An array is a list of data. Each piece of data in an array 4 | * is identified by an index number representing its position in 5 | * the array. Arrays are zero based, which means that the first 6 | * element in the array is [0], the second element is [1], and so on. 7 | * In this example, an array named "coswav" is created and 8 | * filled with the cosine values. This data is displayed three 9 | * separate ways on the screen. 10 | */ 11 | var coswave = []; 12 | 13 | function setup() { 14 | 15 | createCanvas(720, 360); 16 | for (var i = 0; i < width; i++) { 17 | var amount = map(i, 0, width, 0, PI); 18 | coswave[i] = abs(cos(amount)); 19 | } 20 | background(255); 21 | noLoop(); 22 | } 23 | 24 | function draw() { 25 | var y1 = 0; 26 | var y2 = height/3; 27 | for (var i = 0; i < width; i+=3) { 28 | stroke(coswave[i]*255); 29 | line(i, y1, i, y2); 30 | } 31 | 32 | y1 = y2; 33 | y2 = y1 + y1; 34 | for (var i = 0; i < width; i+=3) { 35 | stroke(coswave[i]*255 / 4); 36 | line(i, y1, i, y2); 37 | } 38 | 39 | y1 = y2; 40 | y2 = height; 41 | for (var i = 0; i < width; i+=3) { 42 | stroke(255 - coswave[i]*255); 43 | line(i, y1, i, y2); 44 | } 45 | } -------------------------------------------------------------------------------- /app-server/login.js: -------------------------------------------------------------------------------- 1 | var User = require('./models/user.js'); 2 | var db = require('./dbcontroller.js'); 3 | var settings = require('./settings.js'); 4 | 5 | module.exports = function(app, passport, GithubStrategy, gh_clientID, gh_secret) { 6 | 7 | // via http://blog.revathskumar.com/2014/06/express-github-authentication-with-passport.html 8 | passport.use('github', new GithubStrategy({ 9 | clientID: gh_clientID, 10 | clientSecret: gh_secret, 11 | callbackURL: settings.address + '/auth-gh/callback' 12 | }, function(accessToken, refreshToken, profile, done){ 13 | 14 | db.createOrFindUser(accessToken, refreshToken, profile, done) 15 | 16 | })); 17 | 18 | passport.serializeUser(function(user, done) { 19 | // for the time being you can serialize the user 20 | // In the real app you might be storing on the id like user.profile.id 21 | done(null, user._id); 22 | }); 23 | 24 | passport.deserializeUser(function(id, done) { 25 | // If you are storing the whole user on session we can just pass to the done method, 26 | // But if you are storing the user id you need to query your db and get the user 27 | //object and pass to done() 28 | User.findById(id, function (err, user) { 29 | done(err, user); 30 | }); 31 | // done(null, user); 32 | }); 33 | 34 | }; -------------------------------------------------------------------------------- /public/examples_src/35_Mobile/00_acceleration_ballBounce.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Acceleration Ball Bounce 3 | * @description Move an ellipse around based on accelerationX and accelerationY values, and bounces when touch the edge of the canvas. 4 | */ 5 | 6 | // Position Variables 7 | var x = 0; 8 | var y = 0; 9 | 10 | // Speed - Velocity 11 | var vx = 0; 12 | var vy = 0; 13 | 14 | // Acceleration 15 | var ax = 0; 16 | var ay = 0; 17 | 18 | var vMultiplier = 0.007; 19 | var bMultiplier = 0.6; 20 | 21 | function setup() { 22 | createCanvas(displayWidth, displayHeight); 23 | fill(0); 24 | } 25 | 26 | function draw() { 27 | background(255); 28 | ballMove(); 29 | ellipse(x, y, 30, 30); 30 | } 31 | 32 | function ballMove() { 33 | 34 | ax = accelerationX; 35 | ay = accelerationY; 36 | 37 | vx = vx + ay; 38 | vy = vy + ax; 39 | y = y + vy * vMultiplier; 40 | x = x + vx * vMultiplier; 41 | 42 | // Bounce when touch the edge of the canvas 43 | if (x < 0) { 44 | x = 0; 45 | vx = -vx * bMultiplier; 46 | } 47 | if (y < 0) { 48 | y = 0; 49 | vy = -vy * bMultiplier; 50 | } 51 | if (x > width - 20) { 52 | x = width - 20; 53 | vx = -vx * bMultiplier; 54 | } 55 | if (y > height - 20) { 56 | y = height - 20; 57 | vy = -vy * bMultiplier; 58 | } 59 | 60 | } 61 | 62 | -------------------------------------------------------------------------------- /public/examples_src/03_Arrays/01_Array_2d.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Array 2D 3 | * @description Demonstrates the syntax for creating a two-dimensional (2D) 4 | * array. Values in a 2D array are accessed through two index values. 5 | * 2D arrays are useful for storing images. In this example, each dot 6 | * is colored in relation to its distance from the center of the image. 7 | */ 8 | var distances = []; 9 | var maxDistance; 10 | var spacer; 11 | 12 | function setup() { 13 | createCanvas(720, 360); 14 | maxDistance = dist(width/2, height/2, width, height); 15 | for (var x = 0; x < width; x++) { 16 | distances[x] = []; // create nested array 17 | for (var y = 0; y < height; y++) { 18 | var distance = dist(width/2, height/2, x, y); 19 | distances[x][y] = distance/maxDistance * 255; 20 | } 21 | } 22 | spacer = 10; 23 | noLoop(); // Run once and stop 24 | } 25 | 26 | function draw() { 27 | background(0); 28 | // This embedded loop skips over values in the arrays based on 29 | // the spacer variable, so there are more values in the array 30 | // than are drawn here. Change the value of the spacer variable 31 | // to change the density of the points 32 | for (var x = 0; x < width; x += spacer) { 33 | for (var y = 0; y < height; y += spacer) { 34 | stroke(distances[x][y]); 35 | point(x + spacer/2, y + spacer/2); 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /public/examples_src/33_Sound/03_Play_Mode.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Play Mode 3 | * @description 4 | *Load 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 | * we.P5
10 |
11 |
12 |
13 |
14 |
15 |
16 |
3 |
--------------------------------------------------------------------------------
/public/open-iconic/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "open-iconic",
3 | "description": "An open source icon set in SVG, webfont and raster formats",
4 | "version": "1.1.1",
5 | "license": [
6 | "MIT",
7 | "OFL-1.1"
8 | ],
9 | "homepage": "https://useiconic.com/open",
10 | "repository": {
11 | "type": "git",
12 | "url": "git://github.com/iconic/open-iconic.git"
13 | },
14 | "main": [
15 | "./sprite/open-iconic.min.svg"
16 | ],
17 | "ignore": [
18 | "*.json",
19 | "*.md"
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/public/examples_src/00_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/sketch/template/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/app/sketchframe/style.scss:
--------------------------------------------------------------------------------
1 | // resizable
2 | #sketchframe-container {
3 | height: 100%;
4 | right: 0;
5 | display: block;
6 | position: relative;
7 | max-width: 100%;
8 | flex-direction: row;
9 | padding: 0;
10 | flex: 1;
11 | }
12 |
13 | #sketchPane {
14 | width: auto;
15 | height: 100%;
16 | right: 0;
17 | display: block;
18 | position: relative;
19 | max-width: 100%;
20 | flex-direction: row;
21 | padding:0;
22 | flex: 1;
23 | background:white;
24 |
25 | &.hidden {
26 | display:none;
27 | }
28 | }
29 |
30 | #sketchFrame {
31 | width:100%;
32 | height: 100%;
33 | }
--------------------------------------------------------------------------------
/app/tabs/template.html:
--------------------------------------------------------------------------------
1 |
4 |
10 |
5 | >_ console
6 |
7 | X
8 |
9 |
11 |
12 |
2 |
--------------------------------------------------------------------------------
/public/examples_src/01_Form/06_Bezier.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @name Bezier
3 | * @description The first two parameters for the bezier() function specify the
4 | * first point in the curve and the last two parameters specify the last point.
5 | * The middle parameters set the control points that define the shape of the
6 | * curve.
7 | */
8 | function setup() {
9 | createCanvas(720, 400);
10 | stroke(255);
11 | noFill();
12 | }
13 |
14 | function draw() {
15 | background(0);
16 | for (var i = 0; i < 200; i += 20) {
17 | bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0));
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/app/floatingmenu/index.js:
--------------------------------------------------------------------------------
1 | var Vue = require('vue');
2 |
3 | module.exports = Vue.extend({
4 | template: require('./template.html'),
5 |
6 | computed: {
7 | showEditorClass: function() {
8 | // return this.$root.editorHidden ? 'show' : 'hide';
9 | return this.$root.settings.showEditor ? 'isviz' : 'show';
10 | },
11 | },
12 |
13 | ready: function() {
14 | // this would make it draggable
15 | // $('#floating-menu').draggable({ cancel: ".prevent-drag"} );
16 | },
17 |
18 | methods: {
19 | toggleEditor: function() {
20 | console.log('toggle');
21 | this.$root.toggleEditor();
22 | }
23 | }
24 |
25 | });
--------------------------------------------------------------------------------
/public/examples_src/04_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/examples_src/08_Math/11_doubleRandom.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @name Double Random
3 | * @frame 720,400 (optional)
4 | * @description Using two random() calls and the point()
5 | * function to create an irregular sawtooth line.
6 | * Original by by Ira Greenberg.
7 | */
8 | var totalPts = 300;
9 | var steps = totalPts + 1;
10 |
11 | function setup() {
12 | createCanvas(710, 400);
13 | stroke(255);
14 | frameRate(1);
15 | }
16 |
17 | function draw() {
18 | background(0);
19 | var rand = 0;
20 | for (var i = 1; i < steps; i++) {
21 | point( (width/steps) * i, (height/2) + random(-rand, rand) );
22 | rand += random(-5, 5);
23 | }
24 | }
--------------------------------------------------------------------------------
/public/examples_src/08_Math/03_distance2d.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @name Distance 2D
3 | * @description Move the mouse across the image to obscure
4 | * and reveal the matrix. Measures the distance from the mouse
5 | * to each square and sets the size proportionally.
6 | */
7 | var max_distance;
8 |
9 | function setup() {
10 | createCanvas(710, 400);
11 | noStroke();
12 | max_distance = dist(0, 0, width, height);
13 | }
14 |
15 | function draw() {
16 | background(0);
17 |
18 | for(var i = 0; i <= width; i += 20) {
19 | for(var j = 0; j <= height; j += 20) {
20 | var size = dist(mouseX, mouseY, i, j);
21 | size = size/max_distance * 66;
22 | ellipse(i, j, size, size);
23 | }
24 | }
25 | }
--------------------------------------------------------------------------------
/public/examples_src/08_Math/04_sine.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @name Sine
3 | * @description Smoothly scaling size with the sin() function.
4 | */
5 | var diameter;
6 | var angle = 0;
7 |
8 | function setup() {
9 | createCanvas(710, 400);
10 | diameter = height - 10;
11 | noStroke();
12 | fill(255, 204, 0);
13 | }
14 |
15 | function draw() {
16 | background(0);
17 |
18 | var d1 = 10 + (sin(angle) * diameter/2) + diameter/2;
19 | var d2 = 10 + (sin(angle + PI/2) * diameter/2) + diameter/2;
20 | var d3 = 10 + (sin(angle + PI) * diameter/2) + diameter/2;
21 |
22 | ellipse(0, height/2, d1, d1);
23 | ellipse(width/2, height/2, d2, d2);
24 | ellipse(width, height/2, d3, d3);
25 |
26 | angle += 0.02;
27 | }
28 |
--------------------------------------------------------------------------------
/public/images/browser.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/examples_src/05_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/examples_src/07_Color/00_Hue.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @name Hue
3 | * @description Hue is the color reflected from or transmitted through an
4 | * object and is typically referred to as the name of the color (red, blue,
5 | * yellow, etc.) Move the cursor vertically over each bar to alter its hue.
6 | */
7 | var barWidth = 20;
8 | var lastBar = -1;
9 |
10 | function setup() {
11 | createCanvas(720, 400);
12 | colorMode(HSB, height, height, height);
13 | noStroke();
14 | background(0);
15 | }
16 |
17 | function draw() {
18 | var whichBar = mouseX / barWidth;
19 | if (whichBar !== lastBar) {
20 | var barX = whichBar * barWidth;
21 | fill(mouseY, height, height);
22 | rect(barX, 0, barWidth, height);
23 | lastBar = whichBar;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/public/examples_src/35_Mobile/02_accelerationColor.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @name Acceleration Color
3 | * @description Use deviceMoved() to detect when the device is rotated. The background RGB color values are mapped to accelerationX, accelerationY, and accelerationZ values.
4 | */
5 |
6 | var r, g, b;
7 |
8 | function setup() {
9 | createCanvas(displayWidth, displayHeight);
10 | r = random(50, 255);
11 | g = random(0, 200);
12 | b = random(50, 255);
13 | }
14 |
15 | function draw() {
16 | background(r, g, b);
17 | console.log('draw');
18 | }
19 |
20 | function deviceMoved() {
21 | r = map(accelerationX, -90, 90, 100, 175);
22 | g = map(accelerationY, -90, 90, 100, 200);
23 | b = map(accelerationZ, -90, 90, 100, 200);
24 | }
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/public/images/wordWrap.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/examples_src/01_Form/02_Pie_Chart.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @name Pie Chart
3 | * @description Uses the arc() function to generate a pie chart from the data
4 | * stored in an array.
5 | */
6 | var angles = [ 30, 10, 45, 35, 60, 38, 75, 67 ];
7 |
8 | function setup() {
9 | createCanvas(720, 400);
10 | noStroke();
11 | noLoop(); // Run once and stop
12 | }
13 |
14 | function draw() {
15 | background(100);
16 | pieChart(300, angles);
17 | }
18 |
19 | function pieChart(diameter, data) {
20 | var lastAngle = 0;
21 | for (var i = 0; i < data.length; i++) {
22 | var gray = map(i, 0, data.length, 0, 255);
23 | fill(gray);
24 | arc(width/2, height/2, diameter, diameter, lastAngle, lastAngle+radians(angles[i]));
25 | lastAngle += radians(angles[i]);
26 | }
27 | }
--------------------------------------------------------------------------------
/app/sidebar/sidebar.html:
--------------------------------------------------------------------------------
1 | -
3 |
- 6 | + 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
2 |
23 |
24 |
25 |
27 |
28 |
--------------------------------------------------------------------------------
/public/examples_src/15_Instance_Mode/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/examples_src/07_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/examples_src/07_Color/01_Saturation.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @name Saturation
3 | * @description Saturation is the strength or purity of the color and
4 | * represents the amount of gray in proportion to the hue. A "saturated"
5 | * color is pure and an "unsaturated" color has a large percentage of gray.
6 | * Move the cursor vertically over each bar to alter its saturation.
7 | */
8 | var barWidth = 20;
9 | var lastBar = -1;
10 |
11 | function setup() {
12 | createCanvas(720, 400);
13 | colorMode(HSB, width, height, 100);
14 | noStroke();
15 | }
16 |
17 | function draw() {
18 | var whichBar = mouseX / barWidth;
19 | if (whichBar != lastBar) {
20 | var barX = whichBar * barWidth;
21 | fill(barX, mouseY, 66);
22 | rect(barX, 0, barWidth, height);
23 | lastBar = whichBar;
24 | }
25 | }
--------------------------------------------------------------------------------
/public/sketch/output.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/examples_src/00_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/examples_src/00_Structure/07_Recursion.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/examples_src/08_Math/13_noise1D.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @name Noise1D
3 | * @description Using 1D Perlin Noise to assign location.
4 | */
5 | var xoff = 0.0;
6 | var xincrement = 0.01;
7 |
8 | function setup() {
9 | createCanvas(710, 400);
10 | background(0);
11 | noStroke();
12 | }
13 |
14 | function draw() {
15 | // Create an alpha blended background
16 | fill(0, 10);
17 | rect(0,0,width,height);
18 |
19 | //float n = random(0,width); // Try this line instead of noise
20 |
21 | // Get a noise value based on xoff and scale
22 | // it according to the window's width
23 | var n = noise(xoff)*width;
24 |
25 | // With each cycle, increment xoff
26 | xoff += xincrement;
27 |
28 | // Draw the ellipse at the value produced by perlin noise
29 | fill(200);
30 | ellipse(n,height/2, 64, 64);
31 | }
--------------------------------------------------------------------------------
/public/open-iconic/.bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "open-iconic",
3 | "description": "An open source icon set in SVG, webfont and raster formats",
4 | "version": "1.1.1",
5 | "license": [
6 | "MIT",
7 | "OFL-1.1"
8 | ],
9 | "homepage": "https://useiconic.com/open",
10 | "repository": {
11 | "type": "git",
12 | "url": "git://github.com/iconic/open-iconic.git"
13 | },
14 | "main": [
15 | "./sprite/open-iconic.min.svg"
16 | ],
17 | "ignore": [
18 | "*.json",
19 | "*.md"
20 | ],
21 | "_release": "1.1.1",
22 | "_resolution": {
23 | "type": "version",
24 | "tag": "1.1.1",
25 | "commit": "5f154e7a1482b54d91443142b7b3c747be4b3b64"
26 | },
27 | "_source": "git://github.com/iconic/open-iconic.git",
28 | "_target": "~1.1.1",
29 | "_originalSource": "open-iconic",
30 | "_direct": true
31 | }
--------------------------------------------------------------------------------
/public/examples_src/05_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/examples_src/00_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/examples_src/00_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/examples_src/04_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/examples_src/08_Math/00_incrementdecrement.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Increment Decrement 3 | * @description Writing "a++" is equivalent to "a = a + 1". 4 | * Writing "a--" is equivalent to "a = a - 1". 5 | */ 6 | var a; 7 | var b; 8 | var direction; 9 | 10 | function setup() { 11 | createCanvas(710, 400); 12 | colorMode(RGB, width); 13 | a = 0; 14 | b = width; 15 | direction = true; 16 | frameRate(30); 17 | } 18 | 19 | function draw() { 20 | a++; 21 | if(a > width) { 22 | a = 0; 23 | direction = !direction; 24 | } 25 | if(direction == true){ 26 | stroke(a); 27 | } else { 28 | stroke(width-a); 29 | } 30 | line(a, 0, a, height/2); 31 | 32 | b--; 33 | if(b < 0) { 34 | b = width; 35 | } 36 | if(direction == true) { 37 | stroke(width-b); 38 | } else { 39 | stroke(b); 40 | } 41 | line(b, height/2+1, b, height); 42 | } -------------------------------------------------------------------------------- /public/templates/editbutton.html: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | 
11 |
12 |
13 |
11 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/public/examples_src/33_Sound/00_Load_and_Play_Sound.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @name Load and Play Sound
3 | * @description Load sound during preload(). Play a sound when canvas is clicked.
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 | var song; 9 | 10 | function setup() { 11 | song = loadSound('assets/lucky_dragons_-_power_melody.mp3'); 12 | createCanvas(720, 200); 13 | background(255,0,0); 14 | } 15 | 16 | function mousePressed() { 17 | if ( song.isPlaying() ) { // .isPlaying() returns a boolean 18 | song.stop(); 19 | background(255,0,0); 20 | } else { 21 | song.play(); 22 | background(0,255,0); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /public/examples_src/04_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 | } -------------------------------------------------------------------------------- /app/settings.js: -------------------------------------------------------------------------------- 1 | var defaults = { 2 | fontSize: 18, 3 | tabSize: 2, 4 | tabType: "spaces", 5 | consoleOrientation: "horizontal", 6 | showSidebar: false, 7 | showEditor: true, 8 | wordWrap: false, 9 | runInFrame: true, // determines whether to run in iframe, or in newWindow 10 | editorTheme: 'light-theme', 11 | fullCanvas: false, // automatically make canvas full width/height of screen 12 | }; 13 | 14 | var userSettings = {}; 15 | 16 | module.exports.load = function() { 17 | 18 | // get settings from local storage if they exist 19 | var settings = localStorage.userSettings; 20 | if (!settings) { 21 | settings = defaults; 22 | } else { 23 | try { 24 | settings = JSON.parse(settings); 25 | } catch(err) { 26 | settings = defaults; 27 | } 28 | } 29 | 30 | userSettings = settings; 31 | return settings; 32 | }; 33 | 34 | module.exports.defaults = defaults; -------------------------------------------------------------------------------- /public/examples_src/00_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/examples_src/02_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/examples_src/05_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/images/plus-thin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | -------------------------------------------------------------------------------- /public/images/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 13 | -------------------------------------------------------------------------------- /public/images/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 13 | -------------------------------------------------------------------------------- /public/images/sidebar-handle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 13 | -------------------------------------------------------------------------------- /public/examples_src/04_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/examples_src/33_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 5 | * p5.dom library 6 | * at least one video file, and a running local server.
7 | * Capture video from the webcam and display 8 | * on the canvas as well with invert filter. Note that by 9 | * default the capture feed shows up, too. You can hide the 10 | * feed by uncommenting the capture.hide() line. 11 | */ 12 | var capture; 13 | 14 | function setup() { 15 | createCanvas(390, 240); 16 | capture = createCapture(VIDEO); 17 | capture.size(320, 240); 18 | //capture.hide(); 19 | } 20 | 21 | function draw() { 22 | background(255); 23 | image(capture, 0, 0, 320, 240); 24 | filter('INVERT'); 25 | } 26 | -------------------------------------------------------------------------------- /public/examples_src/00_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/examples_src/01_Form/00_Points_and_Lines.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Points and Lines 3 | * @description Points and lines can be used to draw basic geometry. 4 | * Change the value of the variable 'd' to scale the form. The four 5 | * variables set the positions based on the value of 'd'. 6 | */ 7 | function setup() { 8 | 9 | var d = 70; 10 | var p1 = d; 11 | var p2 = p1+d; 12 | var p3 = p2+d; 13 | var p4 = p3+d; 14 | 15 | // Sets the screen to be 720 pixels wide and 400 pixels high 16 | createCanvas(720, 400); 17 | background(0); 18 | noSmooth(); 19 | 20 | translate(140, 0); 21 | 22 | // Draw gray box 23 | stroke(153); 24 | line(p3, p3, p2, p3); 25 | line(p2, p3, p2, p2); 26 | line(p2, p2, p3, p2); 27 | line(p3, p2, p3, p3); 28 | 29 | // Draw white points 30 | stroke(255); 31 | point(p1, p1); 32 | point(p1, p3); 33 | point(p2, p4); 34 | point(p3, p1); 35 | point(p4, p2); 36 | point(p4, p4); 37 | } -------------------------------------------------------------------------------- /public/examples_src/11_Objects/01_Objects.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Objects 3 | * @description Create a Jitter class, instantiate an object, 4 | * and move it around the screen. Adapted from Getting Started with 5 | * Processing by Casey Reas and Ben Fry. 6 | */ 7 | var bug; // Declare object 8 | 9 | function setup() { 10 | createCanvas(710, 400); 11 | // Create object 12 | bug = new Jitter(); 13 | } 14 | 15 | function draw() { 16 | background(50, 89, 100); 17 | bug.move(); 18 | bug.display(); 19 | } 20 | 21 | // Jitter class 22 | function Jitter() { 23 | this.x = random(width); 24 | this.y = random(height); 25 | this.diameter = random(10, 30); 26 | this.speed = 1; 27 | 28 | this.move = function() { 29 | this.x += random(-this.speed, this.speed); 30 | this.y += random(-this.speed, this.speed); 31 | }; 32 | 33 | this.display = function() { 34 | ellipse(this.x, this.y, this.diameter, this.diameter); 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /public/examples_src/05_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/examples_src/16_Dom/04_Slider.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Slider 3 | * @description You will need to include the 4 | * p5.dom library 5 | * for this example to work in your own project.6 | * Move the sliders to control the R, G, B values of the background. 7 | */ 8 | var rSlider, gSlider, bSlider; 9 | 10 | function setup() { 11 | // create canvas 12 | createCanvas(710, 400); 13 | textSize(15) 14 | noStroke(); 15 | 16 | // create sliders 17 | rSlider = createSlider(0, 255, 100); 18 | rSlider.position(20, 20); 19 | gSlider = createSlider(0, 255, 0); 20 | gSlider.position(20, 50); 21 | bSlider = createSlider(0, 255, 255); 22 | bSlider.position(20, 80); 23 | } 24 | 25 | function draw() { 26 | var r = rSlider.value(); 27 | var g = gSlider.value(); 28 | var b = bSlider.value(); 29 | background(r, g, b); 30 | text("red", 165, 35); 31 | text("green", 165, 65); 32 | text("blue", 165, 95); 33 | } 34 | -------------------------------------------------------------------------------- /public/examples_src/05_Image/01_Background_Image.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Background Image 3 | * @description This example presents the fastest way to load a 4 | * background image into Processing. 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 | -------------------------------------------------------------------------------- /app-server/models/file.js: -------------------------------------------------------------------------------- 1 | /** 2 | * not currently in use, 8/20/2015 3 | * bringing back 12/26/2015 4 | */ 5 | 6 | var mongoose = require('mongoose'); 7 | var Schema = mongoose.Schema; 8 | 9 | var fileSchema = new Schema({ 10 | name: String, 11 | project_ids: [{ 12 | type: Schema.Types.ObjectId, 13 | ref: 'Project' 14 | }], 15 | created_at: Date, 16 | updated_at: Date, 17 | contents: String, 18 | 19 | // TO DO: 20 | is_library: { type: Boolean, default: false }, 21 | library_name: String 22 | }, { collection: 'pfiles' }); 23 | 24 | 25 | fileSchema.pre('save', function(next) { 26 | // get the current date 27 | var currentDate = new Date(); 28 | 29 | // change the updated_at field to current date 30 | this.updated_at = currentDate; 31 | 32 | // if created_at doesn't exist, add to that field 33 | if (!this.created_at) 34 | this.created_at = currentDate; 35 | 36 | next(); 37 | }); 38 | 39 | var PFile = mongoose.model('PFile', fileSchema); 40 | 41 | module.exports = PFile; -------------------------------------------------------------------------------- /public/examples_src/11_Objects/03_Objects_Array.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Array of Objects 3 | * @description Create a Jitter class, instantiate an array of objects 4 | * and move them around the screen. 5 | */ 6 | var bugs = []; // array of Jitter objects 7 | 8 | function setup() { 9 | createCanvas(710, 400); 10 | // Create objects 11 | for (var i=0; i<50; i++) { 12 | bugs.push(new Jitter()); 13 | } 14 | } 15 | 16 | function draw() { 17 | background(50, 89, 100); 18 | for (var i=0; iTo 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 setup() { 14 | createCanvas(720, 400); 15 | img = loadImage("assets/moonwalk.jpg"); 16 | smallPoint = 4; 17 | largePoint = 40; 18 | imageMode(CENTER); 19 | noStroke(); 20 | background(255); 21 | } 22 | 23 | function draw() { 24 | var pointillize = map(mouseX, 0, width, smallPoint, largePoint); 25 | var x = floor(random(img.width)); 26 | var y = floor(random(img.height)); 27 | var pix = img.get(x, y); 28 | fill(pix, 128); 29 | ellipse(x, y, pointillize, pointillize); 30 | } 31 | -------------------------------------------------------------------------------- /public/examples_src/07_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/examples_src/16_Dom/08_Video.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Video 3 | * @frame 710,250 4 | * @descriptionLoad a video with multiple formats and toggle between playing 5 | * and paused with a button press. 6 | *
To 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/examples_src/16_Dom/12_Drop.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Drop 3 | * @description You will need to include the 4 | * p5.dom library 5 | * for this example to work in your own project.6 | * Drag an image file onto the canvas to see it displayed. 7 | */ 8 | 9 | function setup() { 10 | // create canvas 11 | var c = createCanvas(710, 400); 12 | background(100); 13 | // Add an event for when a file is dropped onto the canvas 14 | c.drop(gotFile); 15 | } 16 | 17 | function draw() { 18 | fill(255); 19 | noStroke(); 20 | textSize(24); 21 | textAlign(CENTER); 22 | text('Drag an image file onto the canvas.', width/2, height/2); 23 | noLoop(); 24 | } 25 | 26 | function gotFile(file) { 27 | // If it's an image file 28 | if (file.type === 'image') { 29 | // Create an image DOM element but don't show it 30 | var img = createImg(file.data).hide(); 31 | // Draw the image onto the canvas 32 | image(img, 0, 0, width, height); 33 | } else { 34 | println('Not an image file!'); 35 | } 36 | } -------------------------------------------------------------------------------- /public/images/expanded.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | -------------------------------------------------------------------------------- /public/images/collapsed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | -------------------------------------------------------------------------------- /public/images/sidebar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /public/examples_src/07_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/examples_src/33_Sound/04_Pan_SoundFile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Pan Sound 3 | * @description
Click 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/examples_src/08_Math/08_polartocartesian.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name PolarToCartesian 3 | * @description Convert a polar coordinate (r,theta) 4 | * to cartesian (x,y): x = rcos(theta) y = rsin(theta) 5 | * Original by Daniel Shiffman. 6 | */ 7 | var r; 8 | 9 | // Angle and angular velocity, accleration 10 | var theta; 11 | var theta_vel; 12 | var theta_acc; 13 | 14 | function setup() { 15 | createCanvas(710, 400); 16 | 17 | // Initialize all values 18 | r = height * 0.45; 19 | theta = 0; 20 | theta_vel = 0; 21 | theta_acc = 0.0001; 22 | } 23 | 24 | function draw() { 25 | 26 | background(0); 27 | 28 | // Translate the origin point to the center of the screen 29 | translate(width/2, height/2); 30 | 31 | // Convert polar to cartesian 32 | var x = r * cos(theta); 33 | var y = r * sin(theta); 34 | 35 | // Draw the ellipse at the cartesian coordinate 36 | ellipseMode(CENTER); 37 | noStroke(); 38 | fill(200); 39 | ellipse(x, y, 32, 32); 40 | 41 | // Apply acceleration and velocity to angle 42 | // (r remains static in this example) 43 | theta_vel += theta_acc; 44 | theta += theta_vel; 45 | } -------------------------------------------------------------------------------- /app/tooltip/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 46 | 47 | 48 | 49 | 50 | message goes here 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /public/examples_src/01_Form/05_Triangle_Strip.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Triangle Strip 3 | * @description Example by Ira Greenberg. Generate a closed ring using the 4 | * vertex() function and beginShape(TRIANGLE_STRIP) mode. The outsideRadius 5 | * and insideRadius variables control ring's radii respectively. 6 | */ 7 | var x; 8 | var y; 9 | var outsideRadius = 150; 10 | var insideRadius = 100; 11 | 12 | function setup() { 13 | createCanvas(720, 400); 14 | background(204); 15 | x = width/2; 16 | y = height/2; 17 | } 18 | 19 | function draw() { 20 | background(204); 21 | 22 | var numPoints = int(map(mouseX, 0, width, 6, 60)); 23 | var angle = 0; 24 | var angleStep = 180.0/numPoints; 25 | 26 | beginShape(TRIANGLE_STRIP); 27 | for (var i = 0; i <= numPoints; i++) { 28 | var px = x + cos(radians(angle)) * outsideRadius; 29 | var py = y + sin(radians(angle)) * outsideRadius; 30 | angle += angleStep; 31 | vertex(px, py); 32 | px = x + cos(radians(angle)) * insideRadius; 33 | py = y + sin(radians(angle)) * insideRadius; 34 | vertex(px, py); 35 | angle += angleStep; 36 | } 37 | endShape(); 38 | } 39 | -------------------------------------------------------------------------------- /public/examples_src/11_Objects/02_Multiple_Objects.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Multiple Objects 3 | * @description Create a Jitter class, instantiate multiple objects, 4 | * and move it around the screen. 5 | */ 6 | var bug1; // Declare objects 7 | var bug2; 8 | var bug3; 9 | var bug4; 10 | 11 | function setup() { 12 | createCanvas(710, 400); 13 | // Create object 14 | bug1 = new Jitter(); 15 | bug2 = new Jitter(); 16 | bug3 = new Jitter(); 17 | bug4 = new Jitter(); 18 | } 19 | 20 | function draw() { 21 | background(50, 89, 100); 22 | bug1.move(); 23 | bug1.display(); 24 | bug2.move(); 25 | bug2.display(); 26 | bug3.move(); 27 | bug3.display(); 28 | bug4.move(); 29 | bug4.display(); 30 | } 31 | 32 | // Jitter class 33 | function Jitter() { 34 | this.x = random(width); 35 | this.y = random(height); 36 | this.diameter = random(10, 30); 37 | this.speed = 1; 38 | 39 | this.move = function() { 40 | this.x += random(-this.speed, this.speed); 41 | this.y += random(-this.speed, this.speed); 42 | }; 43 | 44 | this.display = function() { 45 | ellipse(this.x, this.y, this.diameter, this.diameter); 46 | }; 47 | } -------------------------------------------------------------------------------- /public/examples_src/16_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/examples_src/16_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.6 | * Input text and click the button to see it affect the the canvas. 7 | */ 8 | var input, button, greeting; 9 | 10 | function setup() { 11 | 12 | // create canvas 13 | createCanvas(710, 400); 14 | 15 | input = createInput(); 16 | input.position(20, 65); 17 | 18 | button = createButton('submit'); 19 | button.position(150, 65); 20 | button.mousePressed(greet); 21 | 22 | greeting = createElement('h2', 'what is your name?'); 23 | greeting.position(20, 5); 24 | 25 | textAlign(CENTER) 26 | textSize(50); 27 | } 28 | 29 | function greet() { 30 | var name = input.value(); 31 | greeting.html('hello '+name+'!'); 32 | input.value(''); 33 | 34 | for (var i=0; i<200; i++) { 35 | push(); 36 | fill(random(255), 255, 255); 37 | translate(random(width), random(height)); 38 | rotate(random(2*PI)); 39 | text(name, 0, 0); 40 | pop(); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /public/images/filemenu-gray.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | -------------------------------------------------------------------------------- /public/examples_src/33_Sound/07_Amplitude_Analysis.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Amplitude Analysis 3 | * @description
Analyze the amplitude (volume) of sound with 4 | * p5.Amplitude.
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 | var song, analyzer; 10 | 11 | function preload() { 12 | song = loadSound('assets/lucky_dragons_-_power_melody.mp3'); 13 | } 14 | 15 | function setup() { 16 | createCanvas(710, 200); 17 | song.loop(); 18 | 19 | // create a new Amplitude analyzer 20 | analyzer = new p5.Amplitude(); 21 | 22 | // Patch the input to an volume analyzer 23 | analyzer.setInput(song); 24 | } 25 | 26 | function draw() { 27 | background(255); 28 | 29 | // Get the overall volume (between 0 and 1.0) 30 | var vol = analyzer.getLevel(); 31 | fill(127); 32 | stroke(0); 33 | 34 | // Draw an ellipse with size based on volume 35 | ellipse(width/2, height/2, 10+vol*200, 10+vol*200); 36 | } 37 | -------------------------------------------------------------------------------- /public/examples_src/33_Sound/10_Amplitude_Analysis.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Amplitude (Volume) 3 | * @descriptionAnalyze the amplitude (volume) of sound with 4 | * p5.Amplitude.
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 | var song, analyzer; 10 | 11 | function preload() { 12 | song = loadSound('assets/lucky_dragons_-_power_melody.mp3'); 13 | } 14 | 15 | function setup() { 16 | createCanvas(710, 200); 17 | song.loop(); 18 | 19 | // create a new Amplitude analyzer 20 | analyzer = new p5.Amplitude(); 21 | 22 | // Patch the input to an volume analyzer 23 | analyzer.setInput(song); 24 | } 25 | 26 | function draw() { 27 | background(255); 28 | 29 | // Get the overall volume (between 0 and 1.0) 30 | var vol = analyzer.getLevel(); 31 | fill(127); 32 | stroke(0); 33 | 34 | // Draw an ellipse with size based on volume 35 | ellipse(width/2, height/2, 10+vol*200, 10+vol*200); 36 | } 37 | -------------------------------------------------------------------------------- /public/examples_src/33_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/open-iconic/ICON-LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Waybury 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /public/examples_src/08_Math/15_arctangent.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Arctangent 3 | * @description Move the mouse to change the direction of the eyes.The atan2() function computes the angle from each eye to the cursor. 4 | */ 5 | var e1, e2, e3; 6 | 7 | function setup() { 8 | createCanvas(720, 400); 9 | noStroke(); 10 | e1 = new Eye(250, 16, 120); 11 | e2 = new Eye(164, 185, 80); 12 | e3 = new Eye(420, 230, 220); 13 | } 14 | 15 | function draw() { 16 | background(102); 17 | e1.update(mouseX, mouseY); 18 | e2.update(mouseX, mouseY); 19 | e3.update(mouseX, mouseY); 20 | e1.display(); 21 | e2.display(); 22 | e3.display(); 23 | } 24 | 25 | function Eye(tx, ty, ts) { 26 | this.x = tx; 27 | this.y = ty; 28 | this.size = ts; 29 | this.angle = 0; 30 | 31 | this.update = function (mx, my) { 32 | this.angle = atan2(my - this.y, mx - this.x); 33 | }; 34 | 35 | this.display = function () { 36 | push(); 37 | translate(this.x, this.y); 38 | fill(255); 39 | ellipse(0, 0, this.size, this.size); 40 | rotate(this.angle); 41 | fill(153, 204, 0); 42 | ellipse(this.size / 4, 0, this.size / 2, this.size / 2); 43 | pop(); 44 | }; 45 | } -------------------------------------------------------------------------------- /public/images/filemenu-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | -------------------------------------------------------------------------------- /public/examples_src/08_Math/14_noisewave.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Noise Wave 3 | * @description Using Perlin Noise to generate a wave-like pattern. 4 | * Original by Daniel Shiffman. 5 | */ 6 | var yoff = 0.0; // 2nd dimension of perlin noise 7 | 8 | function setup() { 9 | createCanvas(710, 400); 10 | } 11 | 12 | function draw() { 13 | background(51); 14 | 15 | fill(255); 16 | // We are going to draw a polygon out of the wave points 17 | beginShape(); 18 | 19 | var xoff = 0; // Option #1: 2D Noise 20 | // float xoff = yoff; // Option #2: 1D Noise 21 | 22 | // Iterate over horizontal pixels 23 | for (var x = 0; x <= width; x += 10) { 24 | // Calculate a y value according to noise, map to 25 | 26 | // Option #1: 2D Noise 27 | var y = map(noise(xoff, yoff), 0, 1, 200,300); 28 | 29 | // Option #2: 1D Noise 30 | // float y = map(noise(xoff), 0, 1, 200,300); 31 | 32 | // Set the vertex 33 | vertex(x, y); 34 | // Increment x dimension for noise 35 | xoff += 0.05; 36 | } 37 | // increment y dimension for noise 38 | yoff += 0.01; 39 | vertex(width, height); 40 | vertex(0, height); 41 | endShape(CLOSE); 42 | } -------------------------------------------------------------------------------- /public/examples_src/07_Color/02_Brightness.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Brightness 3 | * @description By Dan Shiffman. This program adjusts the brightness of a part 4 | * of the image by calculating the distance of each pixel to the mouse. 5 | *
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 | img.loadPixels(); 17 | loadPixels(); 18 | } 19 | 20 | function draw() { 21 | for (var x = 0; x < width; x++) { 22 | for (var y = 0; y < height; y++ ) { 23 | // Calculate the 1D location from a 2D grid 24 | var loc = 4*(x + y*width); 25 | var r = img.pixels[loc]; 26 | var maxdist = 50; 27 | var d = dist(x, y, mouseX, mouseY); 28 | var adjustbrightness = 255*(maxdist-d)/maxdist; 29 | r += adjustbrightness; 30 | r = constrain(r, 0, 255); 31 | pixels[4*(y*width + x)+3] = 255-r; 32 | } 33 | } 34 | updatePixels(); 35 | } 36 | -------------------------------------------------------------------------------- /public/examples_src/01_Form/03_Regular_Polygon.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Regular Polygon 3 | * @description What is your favorite? Pentagon? Hexagon? Heptagon? No? 4 | * What about the icosagon? The polygon() function created for this example is 5 | * capable of drawing any regular polygon. Try placing different numbers into 6 | * the polygon() function calls within draw() to explore. 7 | */ 8 | function setup() { 9 | createCanvas(720, 400); 10 | } 11 | 12 | function draw() { 13 | background(102); 14 | 15 | push(); 16 | translate(width*0.2, height*0.5); 17 | rotate(frameCount / 200.0); 18 | polygon(0, 0, 82, 3); 19 | pop(); 20 | 21 | push(); 22 | translate(width*0.5, height*0.5); 23 | rotate(frameCount / 50.0); 24 | polygon(0, 0, 80, 20); 25 | pop(); 26 | 27 | push(); 28 | translate(width*0.8, height*0.5); 29 | rotate(frameCount / -100.0); 30 | polygon(0, 0, 70, 7); 31 | pop(); 32 | } 33 | 34 | function polygon(x, y, radius, npoints) { 35 | var angle = TWO_PI / npoints; 36 | beginShape(); 37 | for (var a = 0; a < TWO_PI; a += angle) { 38 | var sx = x + cos(a) * radius; 39 | var sy = y + sin(a) * radius; 40 | vertex(sx, sy); 41 | } 42 | endShape(CLOSE); 43 | } -------------------------------------------------------------------------------- /public/examples_src/04_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/examples_src/08_Math/05_sincosine.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Sine Cosine 3 | * @description Linear movement with sin() and cos(). 4 | * Numbers between 0 and PI*2 (TWO_PI which angles roughly 6.28) 5 | * are put into these functions and numbers between -1 and 1 are returned. 6 | * These values are then scaled to produce larger movements. 7 | */ 8 | var angle1=0; 9 | var angle2=0; 10 | var scalar = 70; 11 | 12 | function setup() { 13 | createCanvas(710, 400); 14 | noStroke(); 15 | rectMode(CENTER); 16 | } 17 | 18 | function draw() { 19 | background(0); 20 | 21 | var ang1 = radians(angle1); 22 | var ang2 = radians(angle2); 23 | 24 | var x1 = width/2 + (scalar * cos(ang1)); 25 | var x2 = width/2 + (scalar * cos(ang2)); 26 | 27 | var y1 = height/2 + (scalar * sin(ang1)); 28 | var y2 = height/2 + (scalar * sin(ang2)); 29 | 30 | fill(255); 31 | rect(width*0.5, height*0.5, 140, 140); 32 | 33 | fill(0, 102, 153); 34 | ellipse(x1, height*0.5 - 120, scalar, scalar); 35 | ellipse(x2, height*0.5 + 120, scalar, scalar); 36 | 37 | fill(255, 204, 0); 38 | ellipse(width*0.5 - 120, y1, scalar, scalar); 39 | ellipse(width*0.5 + 120, y2, scalar, scalar); 40 | 41 | angle1 += 2; 42 | angle2 += 3; 43 | } 44 | -------------------------------------------------------------------------------- /public/examples_src/16_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.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/examples_src/33_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 input; 13 | var analyzer; 14 | 15 | function setup() { 16 | createCanvas(710, 200); 17 | 18 | // Create an Audio input 19 | mic = new p5.AudioIn(); 20 | 21 | // start the Audio Input. 22 | // By default, it does not .connect() (to the computer speakers) 23 | mic.start(); 24 | } 25 | 26 | function draw() { 27 | background(200); 28 | 29 | // Get the overall volume (between 0 and 1.0) 30 | var vol = mic.getLevel(); 31 | fill(127); 32 | stroke(0); 33 | 34 | // Draw an ellipse with height based on volume 35 | var h = map(vol, 0, 1, height, 0); 36 | ellipse(width/2, h - 25, 50, 50); 37 | } 38 | -------------------------------------------------------------------------------- /public/images/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | -------------------------------------------------------------------------------- /app/projloader.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | module.exports = { 4 | 5 | // init example with reference to main 6 | initExample: function(sketchContents, name, main) { 7 | var pFile = require('./models/pfile'); 8 | var Project = require('./models/project'); 9 | 10 | // make examples full screen ~ they look cool! 11 | var createCanvasLines = sketchContents.match(/createCanvas\((.*?)\)/gmi); 12 | if (createCanvasLines.length === 1) { 13 | sketchContents = sketchContents.replace(createCanvasLines[0], 'createCanvas(windowWidth, windowHeight)'); 14 | } 15 | 16 | if (typeof (sketchContents) == 'undefined') { 17 | main.$broadcast('Error loading sketch ' + name); 18 | } else { 19 | // create a new project with default files 20 | // except for a custom sketch and name 21 | var sketchFile = new pFile('sketch.js', sketchContents); 22 | 23 | var projectOptions = { 24 | 'name': name, 25 | 'openFileName': 'sketch.js', 26 | 'openTabNames': ['sketch.js'], 27 | 'fileObjects': [new pFile('p5.js'), new pFile('p5.dom.js'), new pFile('p5.sound.js'), sketchFile, new pFile('index.html'), new pFile('style.css')] 28 | } 29 | 30 | var newProj = new Project(projectOptions); 31 | main.closeProject(); 32 | main.openProject(newProj); 33 | } 34 | } 35 | 36 | } -------------------------------------------------------------------------------- /public/examples_src/01_Form/04_Star.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Star 3 | * @description The star() function created for this example is capable of 4 | * drawing a wide range of different forms. Try placing different numbers 5 | * into the star() function calls within draw() to explore. 6 | */ 7 | function setup() { 8 | createCanvas(720, 400); 9 | } 10 | 11 | function draw() { 12 | background(102); 13 | 14 | push(); 15 | translate(width*0.2, height*0.5); 16 | rotate(frameCount / 200.0); 17 | star(0, 0, 5, 70, 3); 18 | pop(); 19 | 20 | push(); 21 | translate(width*0.5, height*0.5); 22 | rotate(frameCount / 50.0); 23 | star(0, 0, 80, 100, 40); 24 | pop(); 25 | 26 | push(); 27 | translate(width*0.8, height*0.5); 28 | rotate(frameCount / -100.0); 29 | star(0, 0, 30, 70, 5); 30 | pop(); 31 | } 32 | 33 | function star(x, y, radius1, radius2, npoints) { 34 | var angle = TWO_PI / npoints; 35 | var halfAngle = angle/2.0; 36 | beginShape(); 37 | for (var a = 0; a < TWO_PI; a += angle) { 38 | var sx = x + cos(a) * radius2; 39 | var sy = y + sin(a) * radius2; 40 | vertex(sx, sy); 41 | sx = x + cos(a+halfAngle) * radius1; 42 | sy = y + sin(a+halfAngle) * radius1; 43 | vertex(sx, sy); 44 | } 45 | endShape(CLOSE); 46 | } -------------------------------------------------------------------------------- /public/examples_src/33_Sound/01_Preload_Sound.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Preload SoundFile 3 | * @description Call loadSound() during preload() to ensure that the 4 | * sound is completely loaded before setup() is called. It's best to always 5 | * call loadSound() in preload(), otherwise sounds won't necessarily be loaded 6 | * by the time you want to play them in your sketch. 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 | 13 | var song; 14 | 15 | function preload() { 16 | song = loadSound('assets/lucky_dragons_-_power_melody.mp3'); 17 | } 18 | 19 | function setup() { 20 | createCanvas(710, 200); 21 | song.loop(); // song is ready to play during setup() because it was loaded during preload 22 | background(0,255,0); 23 | } 24 | 25 | function mousePressed() { 26 | if ( song.isPlaying() ) { // .isPlaying() returns a boolean 27 | song.pause(); // .play() will resume from .pause() position 28 | background(255,0,0); 29 | } else { 30 | song.play(); 31 | background(0,255,0); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /public/examples_src/08_Math/02_distance1d.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Distance 1D 3 | * @description Move the mouse left and right to control 4 | * the speed and direction of the moving shapes. 5 | */ 6 | var xpos1; 7 | var xpos2; 8 | var xpos3; 9 | var xpos4; 10 | var thin = 8; 11 | var thick = 36; 12 | 13 | function setup() { 14 | createCanvas(710, 400); 15 | noStroke(); 16 | xpos1 = width/2; 17 | xpos2 = width/2; 18 | xpos3 = width/2; 19 | xpos4 = width/2; 20 | } 21 | 22 | function draw() { 23 | background(0); 24 | 25 | var mx = mouseX * 0.4 - width/5.0; 26 | 27 | fill(102); 28 | rect(xpos2, 0, thick, height/2); 29 | fill(204); 30 | rect(xpos1, 0, thin, height/2); 31 | fill(102); 32 | rect(xpos4, height/2, thick, height/2); 33 | fill(204); 34 | rect(xpos3, height/2, thin, height/2); 35 | 36 | xpos1 += mx/16; 37 | xpos2 += mx/64; 38 | xpos3 -= mx/16; 39 | xpos4 -= mx/64; 40 | 41 | if(xpos1 < -thin) { xpos1 = width; } 42 | if(xpos1 > width) { xpos1 = -thin; } 43 | if(xpos2 < -thick) { xpos2 = width; } 44 | if(xpos2 > width) { xpos2 = -thick; } 45 | if(xpos3 < -thin) { xpos3 = width; } 46 | if(xpos3 > width) { xpos3 = -thin; } 47 | if(xpos4 < -thick) { xpos4 = width; } 48 | if(xpos4 > width) { xpos4 = -thick; } 49 | } 50 | -------------------------------------------------------------------------------- /public/examples_src/03_Arrays/00_Array.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Array 3 | * @description An array is a list of data. Each piece of data in an array 4 | * is identified by an index number representing its position in 5 | * the array. Arrays are zero based, which means that the first 6 | * element in the array is [0], the second element is [1], and so on. 7 | * In this example, an array named "coswav" is created and 8 | * filled with the cosine values. This data is displayed three 9 | * separate ways on the screen. 10 | */ 11 | var coswave = []; 12 | 13 | function setup() { 14 | 15 | createCanvas(720, 360); 16 | for (var i = 0; i < width; i++) { 17 | var amount = map(i, 0, width, 0, PI); 18 | coswave[i] = abs(cos(amount)); 19 | } 20 | background(255); 21 | noLoop(); 22 | } 23 | 24 | function draw() { 25 | var y1 = 0; 26 | var y2 = height/3; 27 | for (var i = 0; i < width; i+=3) { 28 | stroke(coswave[i]*255); 29 | line(i, y1, i, y2); 30 | } 31 | 32 | y1 = y2; 33 | y2 = y1 + y1; 34 | for (var i = 0; i < width; i+=3) { 35 | stroke(coswave[i]*255 / 4); 36 | line(i, y1, i, y2); 37 | } 38 | 39 | y1 = y2; 40 | y2 = height; 41 | for (var i = 0; i < width; i+=3) { 42 | stroke(255 - coswave[i]*255); 43 | line(i, y1, i, y2); 44 | } 45 | } -------------------------------------------------------------------------------- /app-server/login.js: -------------------------------------------------------------------------------- 1 | var User = require('./models/user.js'); 2 | var db = require('./dbcontroller.js'); 3 | var settings = require('./settings.js'); 4 | 5 | module.exports = function(app, passport, GithubStrategy, gh_clientID, gh_secret) { 6 | 7 | // via http://blog.revathskumar.com/2014/06/express-github-authentication-with-passport.html 8 | passport.use('github', new GithubStrategy({ 9 | clientID: gh_clientID, 10 | clientSecret: gh_secret, 11 | callbackURL: settings.address + '/auth-gh/callback' 12 | }, function(accessToken, refreshToken, profile, done){ 13 | 14 | db.createOrFindUser(accessToken, refreshToken, profile, done) 15 | 16 | })); 17 | 18 | passport.serializeUser(function(user, done) { 19 | // for the time being you can serialize the user 20 | // In the real app you might be storing on the id like user.profile.id 21 | done(null, user._id); 22 | }); 23 | 24 | passport.deserializeUser(function(id, done) { 25 | // If you are storing the whole user on session we can just pass to the done method, 26 | // But if you are storing the user id you need to query your db and get the user 27 | //object and pass to done() 28 | User.findById(id, function (err, user) { 29 | done(err, user); 30 | }); 31 | // done(null, user); 32 | }); 33 | 34 | }; -------------------------------------------------------------------------------- /public/examples_src/35_Mobile/00_acceleration_ballBounce.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Acceleration Ball Bounce 3 | * @description Move an ellipse around based on accelerationX and accelerationY values, and bounces when touch the edge of the canvas. 4 | */ 5 | 6 | // Position Variables 7 | var x = 0; 8 | var y = 0; 9 | 10 | // Speed - Velocity 11 | var vx = 0; 12 | var vy = 0; 13 | 14 | // Acceleration 15 | var ax = 0; 16 | var ay = 0; 17 | 18 | var vMultiplier = 0.007; 19 | var bMultiplier = 0.6; 20 | 21 | function setup() { 22 | createCanvas(displayWidth, displayHeight); 23 | fill(0); 24 | } 25 | 26 | function draw() { 27 | background(255); 28 | ballMove(); 29 | ellipse(x, y, 30, 30); 30 | } 31 | 32 | function ballMove() { 33 | 34 | ax = accelerationX; 35 | ay = accelerationY; 36 | 37 | vx = vx + ay; 38 | vy = vy + ax; 39 | y = y + vy * vMultiplier; 40 | x = x + vx * vMultiplier; 41 | 42 | // Bounce when touch the edge of the canvas 43 | if (x < 0) { 44 | x = 0; 45 | vx = -vx * bMultiplier; 46 | } 47 | if (y < 0) { 48 | y = 0; 49 | vy = -vy * bMultiplier; 50 | } 51 | if (x > width - 20) { 52 | x = width - 20; 53 | vx = -vx * bMultiplier; 54 | } 55 | if (y > height - 20) { 56 | y = height - 20; 57 | vy = -vy * bMultiplier; 58 | } 59 | 60 | } 61 | 62 | -------------------------------------------------------------------------------- /public/examples_src/03_Arrays/01_Array_2d.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Array 2D 3 | * @description Demonstrates the syntax for creating a two-dimensional (2D) 4 | * array. Values in a 2D array are accessed through two index values. 5 | * 2D arrays are useful for storing images. In this example, each dot 6 | * is colored in relation to its distance from the center of the image. 7 | */ 8 | var distances = []; 9 | var maxDistance; 10 | var spacer; 11 | 12 | function setup() { 13 | createCanvas(720, 360); 14 | maxDistance = dist(width/2, height/2, width, height); 15 | for (var x = 0; x < width; x++) { 16 | distances[x] = []; // create nested array 17 | for (var y = 0; y < height; y++) { 18 | var distance = dist(width/2, height/2, x, y); 19 | distances[x][y] = distance/maxDistance * 255; 20 | } 21 | } 22 | spacer = 10; 23 | noLoop(); // Run once and stop 24 | } 25 | 26 | function draw() { 27 | background(0); 28 | // This embedded loop skips over values in the arrays based on 29 | // the spacer variable, so there are more values in the array 30 | // than are drawn here. Change the value of the spacer variable 31 | // to change the density of the points 32 | for (var x = 0; x < width; x += spacer) { 33 | for (var y = 0; y < height; y += spacer) { 34 | stroke(distances[x][y]); 35 | point(x + spacer/2, y + spacer/2); 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /public/examples_src/33_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/examples_src/07_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/images/package.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | -------------------------------------------------------------------------------- /public/examples_src/08_Math/06_sinewave.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Sine Wave 3 | * @description Render a simple sine wave. 4 | * Original by Danial Shiffman. 5 | */ 6 | 7 | var xspacing = 16; // Distance between each horizontal location 8 | var w; // Width of entire wave 9 | var theta = 0.0; // Start angle at 0 10 | var amplitude = 75.0; // Height of wave 11 | var period = 500.0; // How many pixels before the wave repeats 12 | var dx; // Value for incrementing x 13 | var yvalues; // Using an array to store height values for the wave 14 | 15 | function setup() { 16 | createCanvas(710, 400); 17 | w = width+16; 18 | dx = (TWO_PI / period) * xspacing; 19 | yvalues = new Array(floor(w/xspacing)); 20 | } 21 | 22 | function draw() { 23 | background(0); 24 | calcWave(); 25 | renderWave(); 26 | } 27 | 28 | function calcWave() { 29 | // Increment theta (try different values for 30 | // 'angular velocity' here 31 | theta += 0.02; 32 | 33 | // For every x value, calculate a y value with sine function 34 | var x = theta; 35 | for (var i = 0; i < yvalues.length; i++) { 36 | yvalues[i] = sin(x)*amplitude; 37 | x+=dx; 38 | } 39 | } 40 | 41 | function renderWave() { 42 | noStroke(); 43 | fill(255); 44 | // A simple way to draw the wave with an ellipse at each location 45 | for (var x = 0; x < yvalues.length; x++) { 46 | ellipse(x*xspacing, height/2+yvalues[x], 16, 16); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /app/keybindings.js: -------------------------------------------------------------------------------- 1 | var $ = require('jquery'); 2 | var editor = require('./editor'); 3 | 4 | // mousetrap ~ https://craig.is/killing/mice 5 | var Mousetrap = require('br-mousetrap'); 6 | 7 | module.exports = function(app) { 8 | 9 | Mousetrap.bind(['escape', 'delete'], function(e) { 10 | return false; 11 | }); 12 | 13 | Mousetrap.bind(['command+s', 'ctrl+s'], function(e) { 14 | console.log('save!'); 15 | 16 | app.saveToCloud(); 17 | // prevent default 18 | return false; 19 | }); 20 | 21 | Mousetrap.bind(['command+n', 'ctrl+n'], function(e) { 22 | console.log('new!'); 23 | app.newProject(); 24 | // prevent default 25 | return false; 26 | }); 27 | 28 | Mousetrap.bind(['command+r', 'ctrl+r'], function(e) { 29 | console.log('run!'); 30 | 31 | app.run(); 32 | // prevent default 33 | return false; 34 | }); 35 | 36 | Mousetrap.bind(['command+p', 'ctrl+p'], function(e) { 37 | console.log('play!'); 38 | 39 | app.run(); 40 | // prevent default 41 | return false; 42 | }); 43 | 44 | // konami code! 45 | Mousetrap.bind('up up down down left right left right b a enter', function() { 46 | console.log('konami code'); 47 | }); 48 | 49 | // $(window).keydown(function(event) { 50 | 51 | // // command / control-S to save 52 | // if( (event.ctrlKey || event.metaKey) && event.keyCode == 83) { 53 | // event.preventDefault(); 54 | // } 55 | 56 | // // cmd-N --> New 57 | // if( (event.ctrlKey || event.metaKey) && event.keyCode == 78 ) { 58 | // event.preventDefault(); 59 | // } 60 | 61 | // }); 62 | }; -------------------------------------------------------------------------------- /public/examples_src/00_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 is 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/images/textAdjust.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 24 | -------------------------------------------------------------------------------- /public/examples_src/33_Sound/13_Mic_Threshold.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Mic Threshold 3 | * @descriptionTrigger an event (draw a rectangle) when the Audio Input 4 | * volume surpasses a threshold.
5 | *To 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/examples_src/03_Arrays/02_Array_Objects.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Array Objects 3 | * @description Demonstrates the syntax for creating an array of custom objects. 4 | */ 5 | var unit = 40; 6 | var count; 7 | var mods = []; 8 | 9 | function setup() { 10 | createCanvas(720, 360); 11 | noStroke(); 12 | var wideCount = width / unit; 13 | var highCount = height / unit; 14 | count = wideCount * highCount; 15 | 16 | var index = 0; 17 | for (var y = 0; y < highCount; y++) { 18 | for (var x = 0; x < wideCount; x++) { 19 | mods[index++] = new Module(x*unit, y*unit, unit/2, unit/2, 20 | random(0.05, 0.8), unit); 21 | } 22 | } 23 | } 24 | 25 | function draw() { 26 | background(0); 27 | for (var i = 0; i < count; i++) { 28 | mods[i].update(); 29 | mods[i].draw(); 30 | } 31 | } 32 | 33 | 34 | function Module(_xOff, _yOff, _x, _y, _speed, _unit) { 35 | this.xOff = _xOff; 36 | this.yOff = _yOff; 37 | this.x = _x; 38 | this.y = _y; 39 | this.speed = _speed; 40 | this.unit = _unit; 41 | this.xDir = 1; 42 | this.yDir = 1; 43 | } 44 | 45 | // Custom method for updating the variables 46 | Module.prototype.update = function() { 47 | this.x = this.x + (this.speed * this.xDir); 48 | if (this.x >= this.unit || this.x <= 0) { 49 | this.xDir *= -1; 50 | this.x = this.x + (1 * this.xDir); 51 | this.y = this.y + (1 * this.yDir); 52 | } 53 | if (this.y >= this.unit || this.y <= 0) { 54 | this.yDir *= -1; 55 | this.y = this.y + (1 * this.yDir); 56 | } 57 | } 58 | 59 | // Custom method for drawing the object 60 | Module.prototype.draw = function() { 61 | fill(255); 62 | ellipse(this.xOff + this.x, this.yOff + this.y, 6, 6); 63 | } -------------------------------------------------------------------------------- /app-server/models/user.js: -------------------------------------------------------------------------------- 1 | // thx https://scotch.io/tutorials/using-mongoosejs-in-node-js-and-mongodb-applications 2 | 3 | // grab the things we need 4 | var mongoose = require('mongoose'); 5 | var Schema = mongoose.Schema; 6 | 7 | // create a schema 8 | var userSchema = new Schema({ 9 | name: String, 10 | username: { type: String, required: true, unique: true }, 11 | password: { type: String }, 12 | admin: { 13 | type: Boolean, 14 | default: false 15 | }, 16 | 17 | github_uid: Number, 18 | github_profile_url: String, 19 | github_oa: String, 20 | 21 | email: String, 22 | avatar_url: String, 23 | 24 | tokens: { 25 | github: String 26 | }, 27 | 28 | meta: { 29 | bio: String, 30 | website: String, 31 | location: String 32 | }, 33 | 34 | created_at: { 35 | type: Date, 36 | default: Date.now 37 | }, 38 | updated_at: { 39 | type: Date, 40 | default: Date.now 41 | }, 42 | 43 | projects: [{ 44 | type: Schema.Types.ObjectId, 45 | ref: 'Project' 46 | }], 47 | 48 | user_settings: String 49 | 50 | }); 51 | 52 | // on every save, add the date 53 | userSchema.pre('save', function(next) { 54 | // get the current date 55 | var currentDate = new Date(); 56 | 57 | // change the updated_at field to current date 58 | this.updated_at = currentDate; 59 | 60 | // if created_at doesn't exist, add to that field 61 | if (!this.created_at) 62 | this.created_at = currentDate; 63 | 64 | next(); 65 | }); 66 | 67 | // the schema is useless so far 68 | // we need to create a model using it 69 | var User = mongoose.model('User', userSchema); 70 | 71 | // make this available to our users in our Node applications 72 | module.exports = User; -------------------------------------------------------------------------------- /public/examples_src/16_Dom/07_Modify_DOM.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Modifying the DOM 3 | * @frame 710,300 4 | * @descriptionCreate 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 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/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
27 |
54 |
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/app/files.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Files module to handle the file tree
3 | */
4 |
5 | var _ = require('underscore');
6 | var Path = require('path');
7 |
8 |
9 | var Files = {
10 |
11 | /**
12 | * Setup a file
13 | *
14 | * @param {String} path path to file (relative to project root)
15 | * @param {Object} options [description]
16 | * @return {File} a file object that has been setup with options
17 | */
18 | setup: function(path, options) {
19 | var name = Path.basename(path);
20 | var ext = Path.extname(path);
21 |
22 | // for now, path = name = id
23 |
24 | var fileObject = {
25 | name: name,
26 | path: path,
27 | id: path,
28 | ext: ext,
29 | type: 'file', // not sure why Vue throws unknown component: 'file' error here
30 | open: false,
31 | contents: '',
32 | originalContents: undefined
33 | };
34 |
35 | return _.extend(fileObject, options);
36 | },
37 |
38 | addToTree: function(fileObject, fileArray, projectRoot) {
39 | // if (Path.dirname(fileObject.path) === projectRoot && !Files.contains(fileArray, fileObject)) {
40 | fileArray.push(fileObject);
41 | return true;
42 | // }
43 | // to do: handle folders...
44 | },
45 |
46 | find: function(files, path) {
47 | var result = null;
48 | _find(files, path)
49 | return result;
50 |
51 | function _find(files, path) {
52 | if (result) return false;
53 | var f = _.findWhere(files, {
54 | path: path
55 | });
56 | if (f) {
57 | result = f;
58 | return true;
59 | }
60 |
61 | // to do: handle folders...
62 |
63 | // files.forEach(function(f) {
64 | // if (f.type === 'folder') {
65 | // _find(f.children, path)
66 | // }
67 | // })
68 | }
69 | }
70 |
71 |
72 |
73 | };
74 |
75 | module.exports = Files;
--------------------------------------------------------------------------------
/app/sketchbook/style.scss:
--------------------------------------------------------------------------------
1 | .sketchbook-container{
2 | color: #333;
3 |
4 | .table-container {
5 | max-height:150px;
6 | overflow:scroll;
7 | }
8 |
9 | .table-wrapper {
10 | position:relative;
11 | margin-bottom: 20px;
12 |
13 | table {
14 | width:100%;
15 | background-color: #fff;
16 | border-collapse: collapse;
17 | }
18 |
19 | table thead th .th-content{
20 | position:absolute;
21 | top:-20px;
22 | z-index:2;
23 | height:20px;
24 | width:35%;
25 | cursor: pointer;
26 | -webkit-user-select: none;
27 | -moz-user-select: none;
28 | -user-select: none;
29 | color:#B4B4B4;
30 |
31 | &.active {
32 | color: #777;
33 | .arrow {
34 | opacity: 1;
35 | }
36 | }
37 |
38 | }
39 |
40 | table tbody tr .text {
41 | max-width: 100px;
42 | display: block;
43 | overflow: scroll;
44 | -webkit-user-select: none;
45 | -moz-user-select: none;
46 | -user-select: none;
47 | }
48 |
49 | table tbody tr {
50 | cursor: pointer;
51 | border-bottom: .1em ridge;
52 |
53 | &:nth-child(even) {
54 | background:#F4F4F4;
55 | }
56 | &:nth-child(odd) {
57 | background:#FDFDFD;
58 | }
59 | &:hover {
60 | // background-color:#ED225D;
61 | background-color:rgba(45, 123, 182, 0.34);
62 | }
63 | &:active {
64 | background-color:#ED225D;
65 | }
66 | }
67 |
68 | table tbody td {
69 | padding: 0;
70 | }
71 |
72 | }
73 |
74 | .table-scroll {
75 | height:150px;
76 | overflow:auto;
77 | margin-top:20px;
78 | border: 2px solid #42b983;
79 | border-radius: 3px;
80 | }
81 |
82 |
83 | .list {
84 | max-height:150px;
85 | overflow:scroll;
86 |
87 | li {
88 | text-decoration:none;
89 | list-style: none;
90 | }
91 | }
92 |
93 | }
--------------------------------------------------------------------------------
/public/images/image.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
21 |
--------------------------------------------------------------------------------
/app/sketchbook/template.html:
--------------------------------------------------------------------------------
1 |
2 |
Sketchbook
3 | 4 | 5 |
6 |
8 |
9 |
3 |
4 |
23 |
--------------------------------------------------------------------------------
/public/images/stop-gray.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
24 |
--------------------------------------------------------------------------------
/public/examples_src/33_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 | *
10 |
57 |
11 |
12 |
13 |
55 |
56 | | 17 | 19 | {{key.displayName}} 20 | 22 | 23 | 24 | | 25 | 26 |||
|---|---|---|
| 37 | 38 | {{entry.name}} 39 | 40 | | 41 |42 | {{entry.dateModified}} 43 | | 44 | 45 | 46 |47 | {{entry.dateCreated}} 48 | | 49 | 50 |
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/examples_src/08_Math/07_additivewave.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Additive Wave 3 | * @description Create a more complex wave by adding two waves together. 4 | * Original by Daniel Shiffman 5 | */ 6 | var xspacing = 8; // Distance between each horizontal location 7 | var w; // Width of entire wave 8 | var maxwaves = 4; // total # of waves to add together 9 | 10 | var theta = 0.0; 11 | var amplitude = new Array(maxwaves); // Height of wave 12 | // Value for incrementing X, to be calculated 13 | // as a function of period and xspacing 14 | var dx = new Array(maxwaves); 15 | // Using an array to store height values 16 | // for the wave (not entirely necessary) 17 | var yvalues; 18 | 19 | function setup() { 20 | createCanvas(710, 400); 21 | frameRate(30); 22 | colorMode(RGB, 255, 255, 255, 100); 23 | w = width + 16; 24 | 25 | for (var i = 0; i < maxwaves; i++) { 26 | amplitude[i] = random(10,30); 27 | var period = random(100,300); // Num pixels before wave repeats 28 | dx[i] = (TWO_PI / period) * xspacing; 29 | } 30 | 31 | yvalues = new Array(floor(w/xspacing)); 32 | } 33 | 34 | function draw() { 35 | background(0); 36 | calcWave(); 37 | renderWave(); 38 | } 39 | 40 | function calcWave() { 41 | // Increment theta (try different values 42 | // for 'angular velocity' here 43 | theta += 0.02; 44 | 45 | // Set all height values to zero 46 | for (var i = 0; i < yvalues.length; i++) { 47 | yvalues[i] = 0; 48 | } 49 | 50 | // Accumulate wave height values 51 | for (var j = 0; j < maxwaves; j++) { 52 | var x = theta; 53 | for (var i = 0; i < yvalues.length; i++) { 54 | // Every other wave is cosine instead of sine 55 | if (j % 2 == 0) yvalues[i] += sin(x)*amplitude[j]; 56 | else yvalues[i] += cos(x)*amplitude[j]; 57 | x+=dx[j]; 58 | } 59 | } 60 | } 61 | 62 | function renderWave() { 63 | // A simple way to draw the wave with an ellipse at each location 64 | noStroke(); 65 | fill(255,50); 66 | ellipseMode(CENTER); 67 | for (var x = 0; x < yvalues.length; x++) { 68 | ellipse(x*xspacing,width/2+yvalues[x],16,16); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /public/examples_src/33_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/images/stop-orange.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/examples_src/33_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/images/stop-red.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 27 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | require('dotenv').load(); 2 | 3 | var express = require('express'); 4 | var bodyParser = require('body-parser') 5 | var cookieParser = require('cookie-parser'); 6 | var session = require('express-session'); 7 | const MongoStore = require('connect-mongo')(session); 8 | var compression = require('compression'); 9 | 10 | var favicon = require('serve-favicon'); 11 | 12 | var settings = require('./app-server/settings.js'); 13 | var port = settings.port; 14 | var gh_clientID = settings.GHCLIENT; 15 | var gh_secret = settings.GHSECRET; 16 | var databaseURL = settings.dbURL; 17 | 18 | var passport = require('passport'); 19 | var GithubStrategy = require('passport-github').Strategy; 20 | 21 | var app = express(); 22 | app.use(compression()) 23 | 24 | // set up db 25 | app.db = require('./app-server/dbcontroller.js'); // load our routes and pass in our app and fully configured passport 26 | app.db.init(app, function() { 27 | console.log('db initted'); 28 | }); 29 | 30 | app.use(cookieParser()); 31 | app.use(session({ 32 | secret: 'mysecret', 33 | resave: true, 34 | saveUninitialized: true, 35 | unset: 'destroy', 36 | store: new MongoStore({ mongooseConnection: app.mongooseConnection }), 37 | cookie: { 38 | maxAge: 60000000000 39 | } 40 | })); 41 | app.use(passport.initialize()); 42 | app.use(passport.session()); 43 | 44 | app.use( bodyParser.json() ); // to support JSON-encoded bodies 45 | app.use(bodyParser.urlencoded({ // to support URL-encoded bodies 46 | limit: '50mb', 47 | extended: true 48 | })); 49 | 50 | app.enable('view cache'); 51 | 52 | // // view engine setup 53 | app.set('views', __dirname + '/public/views') 54 | app.set('view engine', 'jade'); 55 | app.set('view options', { basedir: process.env.__dirname}) 56 | 57 | // public static 58 | app.use(express.static('public', { maxAge: 86400000*2 })); 59 | app.use(favicon(__dirname + '/public/images/favicon.ico')); 60 | 61 | // routes 62 | require('./app-server/routes.js')(app, passport); // load our routes and pass in our app and fully configured passport 63 | 64 | require('./app-server/login.js')(app, passport, GithubStrategy, gh_clientID, gh_secret); 65 | 66 | app.listen(port, function(err) { 67 | console.log('Running on port ' + port); 68 | }); -------------------------------------------------------------------------------- /app/dialog/style.scss: -------------------------------------------------------------------------------- 1 | #dialog-container { 2 | z-index:1000; 3 | width:100%; 4 | height:100%; 5 | position:absolute; 6 | margin:auto; 7 | left: 0; 8 | right: 0; 9 | 10 | *.hidden { 11 | display:none; 12 | } 13 | } 14 | 15 | #dialog-container.hidden { 16 | display:none; 17 | } 18 | 19 | .dialog-hidden { 20 | display:none; 21 | } 22 | 23 | .dialog 24 | { 25 | position: relative; 26 | margin: auto; 27 | top: 50px; 28 | left: 0px; 29 | right: 0px; 30 | bottom: 0px; 31 | max-width: 42%; 32 | max-height: 75%; 33 | text-align: left; 34 | background-color: #F4F4F4; 35 | border: 1px solid #CBDBE7; 36 | padding: 20px 30px; 37 | font-size: 14px; 38 | -webkit-border-radius: 30px; 39 | -moz-border-radius: 30px; 40 | border-radius: 1px; 41 | box-shadow: 2px 2px 20px #C8C8C8; 42 | 43 | div { 44 | display: block; 45 | margin-bottom: 10px; 46 | } 47 | 48 | input { 49 | width: 300px; 50 | margin-left:10px; 51 | margin-bottom: 10px; 52 | padding: 5px; 53 | line-height: 20px; 54 | font-size: large; 55 | } 56 | 57 | .label-container { 58 | width:120px; 59 | display:inline-block; 60 | } 61 | 62 | .dialog-warning { 63 | color: #ed225d; 64 | font-style: italic; 65 | } 66 | 67 | h5 { 68 | color: #777; 69 | font-weight: 300; 70 | } 71 | } 72 | 73 | p.dialog-title{ 74 | text-align: left; 75 | font-size: 18px; 76 | font-weight: bold; 77 | line-height: 100%; 78 | } 79 | 80 | .dialog-button{ 81 | margin-right: 5px; 82 | margin-left: 5px; 83 | border: 1px solid #C8C8C8; 84 | background-color: #F4F4F4; 85 | width: 45%; 86 | line-height: 200%; 87 | cursor: pointer; 88 | outline: none; 89 | } 90 | 91 | .dialog-button:hover { 92 | background-color: #ED225D; 93 | border: 1px solid #ED225D; 94 | color: white; 95 | } 96 | 97 | #dialog-right{ 98 | float:right; 99 | } 100 | 101 | 102 | /* class to add to the rest of the container */ 103 | .blurred { 104 | -webkit-filter: blur(2px); 105 | -moz-filter: blur(2px); 106 | -o-filter: blur(2px); 107 | -ms-filter: blur(2px); 108 | filter: blur(2px); 109 | pointer-events:none; 110 | } 111 | 112 | .wep5 { 113 | color: #ED225D; 114 | 115 | sup { 116 | font-size: xx-small; 117 | color: #ED225D; 118 | } 119 | } -------------------------------------------------------------------------------- /public/images/library.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 25 | -------------------------------------------------------------------------------- /app/sketchbook/index.js: -------------------------------------------------------------------------------- 1 | // use list.js from /libs folder (not browserify safe) 2 | 3 | var $ = require('jquery'); 4 | var timeago = require('timeago'); 5 | var Vue = require('vue'); 6 | Vue.filter('reverse', function (value) { 7 | return value.reverse(); 8 | }); 9 | 10 | module.exports = Vue.extend({ 11 | template: require('./template.html'), 12 | 13 | replace: true, 14 | 15 | data: function() { 16 | var cols = [ 17 | {'displayName': 'Name', 18 | 'slug': 'name', 19 | 'sortVal': 'name', 20 | }, 21 | { 22 | 'displayName': 'Modified', 23 | 'slug': 'dateModified', 24 | 'sortVal': 'timestampMod' 25 | }, 26 | { 27 | 'displayName': 'Created', 28 | 'slug': 'dateCreated', 29 | 'sortVal': 'timestampCreated' 30 | } 31 | ]; 32 | var sortOrders = {}; 33 | 34 | cols.forEach(function (key) { 35 | sortOrders[key.slug] = 1; 36 | }); 37 | 38 | return { 39 | columns: cols, 40 | sortKey: '', 41 | sortOrders: sortOrders, 42 | fkey: '', 43 | projectList : [] 44 | } 45 | }, 46 | 47 | ready: function() { 48 | var self = this; 49 | window._table = this; 50 | 51 | this.$on('dialog-open', function(e) { 52 | this.projectList = this.$root.recentProjects; 53 | 54 | // not sure why this is needed 55 | setTimeout(function(){ 56 | console.log('time go'); 57 | $("td.timeago").timeago(); 58 | // self.update(); 59 | }, 10); 60 | }); 61 | 62 | this.$on('dialog-close', function(e) { 63 | document.getElementById('project-search-term').value=''; 64 | // this.list.update(); 65 | }); 66 | }, 67 | 68 | methods: { 69 | 70 | sortBy: function(key){ 71 | this.sortKey = key.slug; 72 | this.sortOrders[key.slug] = this.sortOrders[key.slug] * -1; 73 | }, 74 | 75 | // TO DO: pass custom data to the update function 76 | update: function() { 77 | try { 78 | // this.list = new List('projects', { 79 | // 'valueNames': ['proj-name', 'timestamp-mod', 'timestamp-created'] 80 | // }); 81 | // console.log('list size: ' + this.list.size()); 82 | } catch(e) { 83 | console.log(e); 84 | } 85 | }, 86 | 87 | clickedOnProject: function(projectID) { 88 | console.log('clicked on proj'); 89 | this.$root.loadProjectByOurID(projectID); 90 | this.$dispatch('close-dialog'); 91 | } 92 | } 93 | 94 | }); -------------------------------------------------------------------------------- /app/tabs/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * tabs 3 | */ 4 | var _ = require('underscore'); 5 | var Vue = require('vue'); 6 | 7 | var PTab = Vue.extend({ 8 | 9 | // two way binding 10 | props: ['tab'], 11 | 12 | template: require('./tab.html'), 13 | computed: { 14 | hidden: function() { 15 | return this.tab.name[0] === '.' 16 | }, 17 | className: function() { 18 | var c = ''; 19 | if (this.$root.currentFile == this.tab.file) { 20 | c += 'selected'; 21 | } 22 | 23 | // themes: 24 | c += ' ' + this.$root.theme; 25 | 26 | return c; 27 | } 28 | } 29 | }); 30 | 31 | 32 | module.exports = Vue.extend({ 33 | template: require('./template.html'), 34 | 35 | // two-way binding 36 | props: ['tabs'], 37 | 38 | components: { 39 | ptab: PTab 40 | }, 41 | 42 | methods: { 43 | 44 | // closeFile 45 | closeTab: function(fileName, tabs) { 46 | // find if there is a matching tab 47 | var target_tabs = tabs.filter( function(tab) { 48 | return tab.name === fileName; 49 | }); 50 | 51 | if (target_tabs[0]) { 52 | var newTarget; 53 | var index = _.indexOf(tabs, target_tabs[0]); 54 | switch(index) { 55 | case 0: 56 | newTarget = 0; 57 | break; 58 | case tabs.length -1: 59 | newTarget = tabs.length -2; 60 | break; 61 | default: 62 | newTarget = index -1; 63 | break; 64 | } 65 | 66 | tabs.splice(index, 1); 67 | try { 68 | this.$root.openFile( tabs[newTarget].name ); 69 | } catch(e) { 70 | console.log('no file to open'); 71 | this.$root.clearEditor(); 72 | } 73 | } 74 | }, 75 | 76 | 77 | addTab: function(fileObject, tabs) { 78 | // make sure tab is not already open 79 | var tabExists = _.findWhere(tabs, {name: fileObject.name}); 80 | if (tabExists) { 81 | // console.log('tab exists'); 82 | return; 83 | } 84 | 85 | if (fileObject.open) { 86 | var tabObject = { 87 | name: fileObject.name, 88 | path: fileObject.path, 89 | id: fileObject.path, 90 | type: 'file', 91 | open: true, 92 | file: fileObject 93 | }; 94 | 95 | tabs.push(tabObject); 96 | } 97 | } 98 | }, 99 | 100 | ready: function() { 101 | this.$on('add-tab', this.addTab); 102 | this.$on('close-tab', this.closeTab); 103 | } 104 | }); -------------------------------------------------------------------------------- /app-server/projectBuilder.js: -------------------------------------------------------------------------------- 1 | var jsdom = require('jsdom'); 2 | var jquery = require('jquery')(jsdom.jsdom().defaultView); 3 | 4 | module.exports = { 5 | 6 | build: function(data, proj, res) { 7 | console.log('found the project, it belongs to this user'); 8 | data.projName = proj.name; 9 | 10 | data.jsFiles = proj.files.filter(function(fileObj) { 11 | if (fileObj.name.substr(fileObj.name.length - 2) == 'js') { 12 | return true; 13 | } else { 14 | console.log(fileObj.name); 15 | return false; 16 | } 17 | }); 18 | 19 | data.cssFiles = proj.files.filter(function(fileObj) { 20 | if (fileObj.name.substr(fileObj.name.length - 3) == 'css') { 21 | return true; 22 | } else { 23 | return false; 24 | } 25 | }); 26 | 27 | var htmlIndexArray = proj.files.filter(function(fileObj) { 28 | if (fileObj.name == 'index.html') { 29 | return true; 30 | } else { 31 | return false; 32 | } 33 | }); 34 | 35 | console.log(htmlIndexArray); 36 | 37 | data.htmlIndex = htmlIndexArray[0]; 38 | 39 | // index contents will be only the body 40 | var docContents = data.htmlIndex.contents; 41 | var localScriptsInOrder = []; 42 | var docBody = ''; 43 | 44 | // filter index.html to parse out scripts that we have locally 45 | jsdom.env({ 46 | html: docContents, 47 | done: function(err, window) { 48 | var head = window.document.getElementsByTagName('head')[0]; 49 | var scriptTags = window.document.getElementsByTagName('script'); 50 | for (var i = 0; i < scriptTags.length; i++) { 51 | var sTag = scriptTags[i]; 52 | var src = sTag.src; 53 | var indexOfMatch = 0; 54 | 55 | // to do: remove these items from the head ONLY if they refer to localfiles 56 | if (data.jsFiles.filter(function(f) { 57 | if (f.name == src) { 58 | indexOfMatch = data.jsFiles.indexOf(f); 59 | // remove src and change content of script tag 60 | jquery(sTag).removeAttr('src'); 61 | jquery(sTag).text(data.jsFiles[indexOfMatch].contents); 62 | return true; 63 | } else { 64 | return false; 65 | } 66 | })) { 67 | 68 | } 69 | } 70 | 71 | var headContent = head.innerHTML; 72 | var bodyContent = window.document.getElementsByTagName('body')[0].innerHTML 73 | 74 | data.htmlHead = headContent; 75 | data.htmlBody = bodyContent; 76 | res.render('viewproject', data); 77 | } 78 | }); 79 | } 80 | 81 | } 82 | 83 | -------------------------------------------------------------------------------- /public/examples_src/09_Simulate/04_WolframCA.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @name Wolfram CA 3 | * @description Simple demonstration of a Wolfram 1-dimensional cellular automata 4 | * (natureofcode.com) 5 | */ 6 | 7 | var w = 10; 8 | // An array of 0s and 1s 9 | var cells; 10 | 11 | // We arbitrarily start with just the middle cell having a state of "1" 12 | var generation = 0; 13 | 14 | // An array to store the ruleset, for example {0,1,1,0,1,1,0,1} 15 | var ruleset = [0, 1, 0, 1, 1, 0, 1, 0]; 16 | 17 | function setup() { 18 | createCanvas(640, 400); 19 | cells = Array(floor(width/w)); 20 | for (var i = 0; i < cells.length; i++) { 21 | cells[i] = 0; 22 | } 23 | cells[cells.length/2] = 1; 24 | 25 | } 26 | 27 | function draw() { 28 | for (var i = 0; i < cells.length; i++) { 29 | if (cells[i] === 1) { 30 | fill(200); 31 | } else { 32 | fill(51); 33 | noStroke(); 34 | rect(i*w, generation*w, w, w); 35 | } 36 | } 37 | if (generation < height/w) { 38 | generate(); 39 | } 40 | } 41 | 42 | // The process of creating the new generation 43 | function generate() { 44 | // First we create an empty array for the new values 45 | var nextgen = Array(cells.length); 46 | // For every spot, determine new state by examing current state, and neighbor states 47 | // Ignore edges that only have one neighor 48 | for (var i = 1; i < cells.length-1; i++) { 49 | var left = cells[i-1]; // Left neighbor state 50 | var me = cells[i]; // Current state 51 | var right = cells[i+1]; // Right neighbor state 52 | nextgen[i] = rules(left, me, right); // Compute next generation state based on ruleset 53 | } 54 | // The current generation is the new generation 55 | cells = nextgen; 56 | generation++; 57 | } 58 | 59 | 60 | // Implementing the Wolfram rules 61 | // Could be improved and made more concise, but here we can explicitly see what is going on for each case 62 | function rules(a, b, c) { 63 | if (a == 1 && b == 1 && c == 1) return ruleset[0]; 64 | if (a == 1 && b == 1 && c == 0) return ruleset[1]; 65 | if (a == 1 && b == 0 && c == 1) return ruleset[2]; 66 | if (a == 1 && b == 0 && c == 0) return ruleset[3]; 67 | if (a == 0 && b == 1 && c == 1) return ruleset[4]; 68 | if (a == 0 && b == 1 && c == 0) return ruleset[5]; 69 | if (a == 0 && b == 0 && c == 1) return ruleset[6]; 70 | if (a == 0 && b == 0 && c == 0) return ruleset[7]; 71 | return 0; 72 | } 73 | 74 | -------------------------------------------------------------------------------- /public/images/file.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 29 | -------------------------------------------------------------------------------- /app-server/examples.js: -------------------------------------------------------------------------------- 1 | /** 2 | * list all of the examples 3 | */ 4 | 5 | var fs = require('fs'); 6 | var path = require('path'); 7 | 8 | var exampleDir = "./public/examples_src" 9 | var subDirs = [ '00_Structure', 10 | '01_Form', 11 | '02_Data', 12 | '03_Arrays', 13 | '04_Control', 14 | '05_Image', 15 | '07_Color', 16 | '08_Math', 17 | '09_Simulate', 18 | '11_Objects' 19 | ]; 20 | 21 | // get proper prefixes for examples 22 | var directoryAlias = { 23 | './public/examples_src/00_Structure' : 'Structure', 24 | './public/examples_src/01_Form' : 'Form', 25 | './public/examples_src/02_Data' : 'Data', 26 | './public/examples_src/03_Arrays' : 'Arrays', 27 | './public/examples_src/04_Control' : 'Control', 28 | './public/examples_src/05_Image' : 'Image', 29 | './public/examples_src/07_Color' : 'Color', 30 | './public/examples_src/08_Math' : 'Math', 31 | './public/examples_src/09_Simulate' : 'Simulate', 32 | './public/examples_src/11_Objects' : 'Objects', 33 | './public/examples_src/15_Instance_Mode' : 'Instance Mode', 34 | './public/examples_src/16_Dom' : 'Dom', 35 | './public/examples_src/33_Sound' : 'Sound', 36 | './public/examples_src/35_Mobile' : 'Mobile' 37 | } 38 | 39 | module.exports = { 40 | 41 | fetchExamples: function(callback) { 42 | 43 | // thank you http://stackoverflow.com/questions/5827612/node-js-fs-readdir-recursive-directory-search 44 | var walk = function(dir, done) { 45 | var results = []; 46 | fs.readdir(dir, function(err, list) { 47 | 48 | var prefix = directoryAlias[dir]; 49 | 50 | if (err) return done(err); 51 | var i = 0; 52 | (function next() { 53 | var filePath = list[i++]; 54 | if (!filePath) return done(null, results); 55 | filePath = dir + '/' + filePath; 56 | fs.stat(filePath, function(err, stat) { 57 | if (stat && stat.isDirectory()) { 58 | walk(filePath, function(err, res) { 59 | results = results.concat(res); 60 | next(); 61 | }); 62 | } else { 63 | if (prefix) { 64 | results.push({ 65 | 'folder' : prefix, 66 | 'name': filePath.split('/').pop().split('.js')[0].split(/_(.+)?/)[1].replace(/_/g, ' '), 67 | 'path': filePath.slice(1,filePath.length) // <-- necessary to chop off . ? 68 | }); 69 | } 70 | next(); 71 | } 72 | }); 73 | })(); 74 | }); 75 | }; 76 | 77 | walk(exampleDir, callback); 78 | 79 | } 80 | 81 | } -------------------------------------------------------------------------------- /public/js/debug-console.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var original = window.console; 4 | window.console = {}; 5 | 6 | ["log", "warn", "error"].forEach(function(func){ 7 | window.console[func] = function(msg) { 8 | var style = null; 9 | 10 | if (arguments[2] && arguments[0].indexOf('%c') > -1) { 11 | style = arguments[1]; 12 | } 13 | 14 | var data = {msg: msg, style: style, type: func }; 15 | parent.postMessage(JSON.stringify(data), window.location.origin); 16 | original[func].apply(original, arguments); 17 | }; 18 | }); 19 | 20 | 21 | window.onerror = function (msg, url, num, column, errorObj) { 22 | var data = { num: num, msg: msg, type: 'error' }; 23 | parent.postMessage(JSON.stringify(data), window.location.origin); 24 | return false; 25 | }; 26 | 27 | function trace() { 28 | var stack = Error().stack; 29 | var line = stack.split('\n')[3]; 30 | line = (line.indexOf(' (') >= 0 ? line.split(' (')[1].substring(0, line.length - 1) : line.split('at ')[1]); 31 | return line; 32 | } 33 | 34 | // message input 35 | parent.addEventListener('message', outputReceiveMessage, false); 36 | 37 | function outputReceiveMessage(e) { 38 | var data = JSON.parse(e.data); 39 | var msg = data.msg; 40 | 41 | switch(msg) { 42 | case 'pause': 43 | window.noLoop(); 44 | break; 45 | case 'stop': 46 | window.background(175); 47 | window.remove(); 48 | break; 49 | } 50 | } 51 | 52 | 53 | // catch key and mouse events, inspired by http://stackoverflow.com/a/16914658/2994108 54 | var eventsToCatch = ['keyup', 'keydown', 'keypress', 55 | 'mouseup', 'mousedown', 'mousemove', 'click', 'mouseenter', 'mouseleave', 'mouseover', 'mouseout', 56 | 'touchstart', 'touchend', 'touchcancel', 'touchleave', 'touchmove']; 57 | 58 | for (var i = 0; i < eventsToCatch.length; i++) { 59 | var evt = eventsToCatch[i]; 60 | parent.document.body.addEventListener(evt, catchEvent); 61 | } 62 | 63 | function catchEvent(e) { 64 | var ev = document.createEvent('Event'); 65 | ev.initEvent(e.type, true, false); 66 | for (var key in e) { 67 | // we dont wanna clone target and we are not able to access "private members" of the cloned event. 68 | if (key[0] == key[0].toLowerCase() && ['__proto__', 'srcElement', 'target', 'toElement'].indexOf(key) == -1) { 69 | ev[key] = e[key]; 70 | } 71 | } 72 | document.dispatchEvent(ev); 73 | } 74 | 75 | })(); 76 | -------------------------------------------------------------------------------- /public/images/sliders.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 27 | -------------------------------------------------------------------------------- /public/images/file1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 30 | -------------------------------------------------------------------------------- /public/images/play-gray.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 34 | --------------------------------------------------------------------------------