Merge branch 'master' of github.com:processing/p5.js

Author: Lauren McCarthy

developer_docs/project_wrapups/README.md

@@ -1,6 +1,38 @@
-This folder contains wrapup reports for projects from Google Summer of Code, Processing Fellowships, and others.
+This folder contains wrapup reports for projects from p5.js related [Google Summer of Code](https://summerofcode.withgoogle.com/organizations/4915113891463168/) projects, [Processing Fellowships](https://processingfoundation.org/fellowships), and others.
+
+
+*Note for contributors: Embedded images and media are welcome. Please host these files externally rather than placing in this repo to avoid adding growing the repository filesize too much.*
+
+
+
+### Processing Foundation Fellowships 2018
+* [A p5.js Dissection Manual](https://medium.com/processing-foundation/a-p5-js-dissection-manual-38959ff8522e) by Vijith Assar, 2018
+* [Chinese Translation for p5.js and preparing a future of more translations](https://medium.com/processing-foundation/chinese-translation-for-p5-js-and-preparing-a-future-of-more-translations-b56843ea096e), [p5.js 的中文翻译 — 为支持更多种语言翻译做准备](https://medium.com/processing-foundation/p5-js-%E7%9A%84%E4%B8%AD%E6%96%87%E7%BF%BB%E8%AF%91-%E4%B8%BA%E6%94%AF%E6%8C%81%E6%9B%B4%E5%A4%9A%E7%A7%8D%E8%AF%AD%E8%A8%80%E7%BF%BB%E8%AF%91%E5%81%9A%E5%87%86%E5%A4%87-a0fa94da770f) by Kenneth Lim, 2018
+* [Making p5.js Accessible](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0) by Luis Morales-Navarro and Mathura Govindarajan, 2018
+* [Introducing the 2018 Processing Foundation Fellows](https://medium.com/processing-foundation/introducing-the-2018-processing-foundation-fellows-a16ae4e87f80)
+
+### Google Summer of Code 2018 
 
 * [A Platform for Algorithmic Composition on p5.js-sound](https://github.com/processing/p5.js/blob/master/developer_docs/project_wrapups/junshern_gsoc_2018.md) by Chan Jun Shern, 2018
 * [New JavaScript console in p5.js web editor](https://github.com/processing/p5.js/blob/master/developer_docs/project_wrapups/liang_gsoc_2018.md) by Liang Tang, 2018
 * [Updates to WebGL Mode](https://github.com/processing/p5.js/blob/master/developer_docs/project_wrapups/aidannelson_gsoc_2018.md) by Aidan Nelson, 2018
+* [Implementing missing primitives in p5.js WebGL mode](https://github.com/processing/p5.js/blob/master/developer_docs/project_wrapups/adilrabbani_gsoc_2018.md) by Adil Rabbani, 2018
+
+### Processing Foundation Fellowships 2017
+* [p5 Accessibility](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8) by Claire Kearney-Volpe, 2017
+* [A p5.js Web Editor for All](https://medium.com/processing-foundation/a-p5-js-web-editor-for-all-64aaa3f9d767) by Cassie Tarakajian, 2017
+* [Community and Code](https://medium.com/processing-foundation/community-and-code-882b00e6ee32) by Saskia Freeke, 2017
+* [¡Manos a la obra! Empecemos. (Creative Coding in p5.js)](https://medium.com/processing-foundation/manos-a-la-obra-empecemos-creative-coding-in-p5-js-a2bfe3e059ce) by DIY Girls, Sylvia Aguiñaga (Director of Curriculum) and Vanessa Landes (Program Leader), 2017
+* [Features and Fixes in the p5.js Editor](https://medium.com/processing-foundation/features-and-fixes-in-the-p5-js-editor-722e4b56495e) by Andrew Nicolaou, 2017
+* [Everyone Can Code: A creative coding curriculum for students with low computer literacy](https://medium.com/processing-foundation/anyone-can-code-a-creative-coding-curriculum-for-students-with-low-computer-literacy-69e121149abc) by Niklas Peters, 2017
+* [Creative Coding with p5.js for Prisons in Washington State](https://medium.com/processing-foundation/creative-coding-with-p5-js-for-prisons-in-washington-state-3bd1d342d769) by Susan Evans, 2017
+* [Announcing our 2017 Processing Foundation Fellows](https://medium.com/processing-foundation/announcing-our-2017-processing-foundation-fellows-8b9e7c8bd2f)
+
+### Google Summer of Code 2017 ([archive](https://summerofcode.withgoogle.com/archive/2017/organizations/5256745899261952/))
+
+* [Processing Foundation: GSOC Grand Wrap-Up Post](https://medium.com/processing-foundation/2017-google-summer-of-code-grand-wrap-up-post-16680b1438db)
 * [Improving Developer Operations](https://github.com/processing/p5.js/blob/master/developer_docs/project_wrapups/sakshamsaxena_gsoc_2017.md) by Saksham Saxena, 2017
+* [Maps, Maps, Maps!](https://medium.com/processing-foundation/maps-maps-maps-f0914218c87b) by Cristobal Valenzuela, 2017
+* [Friendly Error System for p5.js](https://medium.com/processing-foundation/2017-marks-the-processing-foundations-sixth-year-participating-in-google-summer-of-code-d365f62fc463) by A. Mira Chung, 2017
+* [Processing Foundation: Our Summer of Code Has Begun!](https://medium.com/processing-foundation/our-summer-of-code-has-begun-dffc1bbddb7c)
+

developer_docs/project_wrapups/adilrabbani_gsoc_2018.md

@@ -0,0 +1,70 @@
+# Implementing missing WebGL primitives
+#### by Adil Rabbani ([@adilrabbani](https://github.com/AdilRabbani))
+
+This summer I worked on improving p5.js WebGL mode, along side [Aidan Nelson](https://github.com/AidanNelson) with the help of our mentors [Stalgia Grigg](https://github.com/mlarghydracept)
+and [Kate Hollenbach](https://github.com/kjhollen). My tasks for the summer included implementing missing primitives in p5.js WebGL mode i.e arc, point, bezierVertex,
+curveVertex, quadraticVertex and text.
+
+## Contribution
+
+My first contribution to p5.js was when I was writing my GSOC proposal. This was just a minor change in [reference examples](https://github.com/processing/p5.js/pull/2737) for curves
+and some examples for [vertex()](https://github.com/processing/p5.js/pull/2798). These small changes helped me in understanding the use of grunt, lint, and other node modules being
+used in the build process. I was really happy (and surprised) when my proposal got accepted 😄. I was about to contribute to one of my favourite libraries. We had a shared branch on 
+[git](https://github.com/processing/p5.js/tree/webgl-gsoc-2018) where we would compare our pull requests to be merged.
+
+### arc
+
+I started by going through [manual examples](https://github.com/processing/p5.js/tree/master/test/manual-test-examples/webgl), debugging them in browser and watching the code jump from 
+function to function. I have to admit though, it was a little daunting at first. My first task was to implement arc for WebGL mode and so I decided to go through already implemented ellipse 
+and debugging it in the chrome editor.
+
+The code started to make sense after a while and I started to make small changes so as to move forward in implementing arc. Before my first evaluation I was able to implement arc [#2942](https://github.com/processing/p5.js/pull/2942) with all three modes
+(OPEN, PIE, CHORD) and add documentation and [test examples](https://github.com/processing/p5.js/tree/webgl-gsoc-2018/test/manual-test-examples/webgl/arc). Ellipse was now refactored by using 
+the same arc implementation. This closed issue [#2181](https://github.com/processing/p5.js/issues/2181).
+
+### point
+
+WebGL by default renders square points. Looking through some resources on web gave me an idea of discarding pixels from a square point further to render a circular point. Adding the shader in p5.js was 
+relatively simple. But I was stuck on a bug for a while that didn't go off no matter what. Thankfully with the help of my mentor I was able to debug it and come up with a solution.
+
+One small problem was still there though. A good approach on rendering points would be to use the default square point when the size of the point was really small and when it became big enough, it should 
+render good looking circular points. I posted this issue on Github and [Adam Ferris](https://github.com/aferriss) who have been working on this before, suggested to use his shader which worked the same way 
+as mentioned. Read the discussion [here](https://github.com/processing/p5.js/issues/3017). Finally, I opened a [pull request](https://github.com/processing/p5.js/pull/3031) for point and added two test examples 
+for the primitive. This closed issue [#2662](https://github.com/processing/p5.js/issues/2662) and [#2184](https://github.com/processing/p5.js/issues/2184)
+
+### bezierVertex, curveVertex and quadraticVertex
+
+I decided to go for curves next. I went through a great [article](https://pomax.github.io/bezierinfo/) on bezier curves for this task. Reading the article I came to know that a bezier curve can be easily converted 
+to Catmull Rom Splines so this meant that if I was able to implement bezierVertex, implementing curveVertex was relatively simple (just converting the points). While quadraticVertex can be implemented by changing the formula used to compute 
+coefficients for curves.
+
+I finally added the required functions and started testing curves. Everything worked quite well, except just one. Filling curves gave weird results. At first, I thought maybe there was something wrong going on in 
+my code but a further researching revealed that we can't just fill curves with all the intersections and loops without a proper triangulation algorithm. After approval from Kate and Stalgia, I started testing different 
+triangulation libraries ([Earcut](https://github.com/mapbox/earcut), [Libtess](https://github.com/brendankenny/libtess.js/), [Tess2](https://github.com/diatomic/tess2)). Earcut was the most precise but wasn't giving correct results.
+After a quick discussion with Earcut's creator, it was decided that Earcut wasn't a good option for us.
+
+Tess2 wasn't really a good option either. It wasn't giving correct results and was too big in size. Libtess seemed to work really well and this was also because it was based on the same [GLU Tesselator implementation](https://github.com/processing/processing-android/tree/master/core/src/processing/opengl/tess) that was being used in Processing. The only problem with Libtess was that it was quite bigger than Earcut. We contacted [Lauren](https://github.com/lmccart) 
+if it was okay with integrating this library for the triangulation part. She encouraged us by saying that we can add the library as a node module just as opentype was being used for 2D text in p5.js. After integrating libtess, 
+I decided to improve the code further for some performance gains. I was able to implement a look up table with the help of which, we wouldn't need to compute coefficients after rendering curve, the first time. This was a huge performance boost from the 
+previous trivial implementation. All that was left was to submit a [pull request](https://github.com/processing/p5.js/pull/3085) with an [example](https://github.com/processing/p5.js/tree/webgl-gsoc-2018/test/manual-test-examples/webgl/curves) showcasing what you can do with WebGL curves in p5.js. This closed issues [#2185](https://github.com/processing/p5.js/issues/2185), [#2186](https://github.com/processing/p5.js/issues/2186) and [#2187](https://github.com/processing/p5.js/issues/2187).
+
+### text
+
+Now I had one big task left : Implementing text for p5.js WebGL mode. Let me just mention one thing though, "One does not simply implement text in WebGL 😥"
+
+I went through different methods for rendering text in WebGL. At the end I was able to pick 2 methods that looked perfect for rendering text. The first one was [Signed Distance Field Rendering](http://hack.chrons.me/opengl-text-rendering/). The other being a [GPU based rendering](http://wdobbie.com/post/gpu-text-rendering-with-vector-textures/) approach. After a [discussion](https://github.com/processing/p5.js/issues/2183) on github we decided to go for the GPU based approach. I was not able to implement this approach as [Spongman](https://github.com/Spongman) had already done most of the work for text using the same technique. We decided to pull that implementation and polish it further (looking for bugs, improvements) instead of writing everything from scratch. The pull request is being reviewed [here](https://github.com/processing/p5.js/pull/3110).
+
+### Other minor contributions
+
+Fixed a minor issue with triangle stroke in 2D mode [#3075](https://github.com/processing/p5.js/pull/3075) closing [#3065](https://github.com/processing/p5.js/issues/3065).
+Ported some examples from Processing to p5.js [#242](https://github.com/processing/p5.js-website/pull/242).
+
+## Support
+Any questions pertaining to this project may be addressed via Issues on the [p5.js repository](https://github.com/processing/p5.js). Simply create a new Issue and either assign or tag me in the conversation with @adilrabbani. For anything else, don't hesitate to get in touch at 14bscsarabbani@seecs.edu.pk!
+
+## Conclusion
+
+I learned a lot this summer. I would like to thank my mentor, [Stalgia Grigg](https://github.com/mlarghydracept) for all the guidance and help throughout the project as well as all the members of Processing Foundation for giving me a chance to contribute
+to this library.
+
+Thanks everyone! 😃

lib/addons/p5.dom.js

@@ -784,6 +784,80 @@
     return self;
   };
 
+  /**
+   * Creates a colorPicker element in the DOM for color input.
+   * The .value() method will return a hex string (#rrggbb) of the color.
+   * The .color() method will return a p5.Color object with the current chosen color.
+   *
+   * @method createColorPicker
+   * @param {String|p5.Color} [value] default color of element
+   * @return {p5.Element} pointer to <a href="#/p5.Element">p5.Element</a> holding created node
+   * @example
+   * <div>
+   * <code>
+   * var inp1, inp2;
+   * function setup() {
+   *   createCanvas(100, 100);
+   *   background('grey');
+   *   inp1 = createColorPicker('#ff0000');
+   *   inp2 = createColorPicker(color('yellow'));
+   *   inp1.input(setShade1);
+   *   inp2.input(setShade2);
+   *   setMidShade();
+   * }
+   *
+   * function setMidShade() {
+   *   // Finding a shade between the two
+   *   var commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);
+   *   fill(commonShade);
+   *   rect(20, 20, 60, 60);
+   * }
+   *
+   * function setShade1() {
+   *   setMidShade();
+   *   console.log('You are choosing shade 1 to be : ', this.value());
+   * }
+   * function setShade2() {
+   *   setMidShade();
+   *   console.log('You are choosing shade 2 to be : ', this.value());
+   * }
+   * </code>
+   * </div>
+   */
+  p5.prototype.createColorPicker = function(value) {
+    p5._validateParameters('createColorPicker', arguments);
+    var elt = document.createElement('input');
+    var self;
+    elt.type = 'color';
+    if (value) {
+      if (value instanceof p5.Color) {
+        elt.value = value.toString('#rrggbb');
+      } else {
+        p5.prototype._colorMode = 'rgb';
+        p5.prototype._colorMaxes = {
+          rgb: [255, 255, 255, 255],
+          hsb: [360, 100, 100, 1],
+          hsl: [360, 100, 100, 1]
+        };
+        elt.value = p5.prototype.color(value).toString('#rrggbb');
+      }
+    } else {
+      elt.value = '#000000';
+    }
+    self = addElement(elt, this);
+    // Method to return a p5.Color object for the given color.
+    self.color = function() {
+      if (value.mode) {
+        p5.prototype._colorMode = value.mode;
+      }
+      if (value.maxes) {
+        p5.prototype._colorMaxes = value.maxes;
+      }
+      return p5.prototype.color(this.elt.value);
+    };
+    return self;
+  };
+
   /**
    * Creates an &lt;input&gt;&lt;/input&gt; element in the DOM for text input.
    * Use .<a href="#/p5.Element/size">size()</a> to set the display length of the box.

test/manual-test-examples/addons/p5.dom/color_picker/index.html

@@ -0,0 +1,11 @@
+<html>
+  <head>
+    <script language="javascript" type="text/javascript" src="../../../../../lib/p5.js"></script>
+    <script language="javascript" type="text/javascript" src="../../../../../lib/addons/p5.dom.js"></script>
+    <script language="javascript" src="sketch.js"></script>
+  </head>
+
+  <body>
+      <div id="test"></div>
+  </body>
+</html>

test/manual-test-examples/addons/p5.dom/color_picker/sketch.js

@@ -0,0 +1,28 @@
+var inp1, inp2;
+function setup() {
+  createCanvas(100, 100);
+  background('grey');
+  var c1 = '#ff0000';
+  inp1 = createColorPicker(c1);
+  var c2 = color('yellow');
+  inp2 = createColorPicker(c2);
+  inp1.input(setShade1);
+  inp2.input(setShade2);
+  setMidShade();
+}
+
+function setMidShade() {
+  // Finding a shade between the two
+  var commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);
+  fill(commonShade);
+  rect(20, 20, 60, 60);
+}
+
+function setShade1() {
+  setMidShade();
+  console.log('You are choosing shade 1 to be : ', this.value());
+}
+function setShade2() {
+  setMidShade();
+  console.log('You are choosing shade 2 to be : ', this.value());
+}