adding hindi base for translation

Author: Lauren McCarthy

Gruntfile.js

@@ -243,6 +243,12 @@ module.exports = function(grunt) {
         src: ['**'],
         dest: '<%= config.dist %>/es/reference'
       },
+      reference_hi: {
+        expand: true,
+        cwd: '<%= config.dist %>/reference',
+        src: ['**'],
+        dest: '<%= config.dist %>/hi/reference'
+      },
       reference_zh_Hans: {
         expand: true,
         cwd: '<%= config.dist %>/reference',

package.json

@@ -5,6 +5,7 @@
   "languages": [
     "en",
     "es",
+    "hi",
     "zh-Hans"
   ],
   "homepage": "https://github.com/processing/p5.js-website",

src/data/examples/hi/00_Structure/00_Coordinates.js

@@ -0,0 +1,39 @@
+/*
+ * @name Coordinates
+ * @description All shapes drawn to the screen have a position that is
+ * specified as a coordinate. All coordinates are measured as the distance from
+ * the origin in units of pixels. The origin [0, 0] is the coordinate in the
+ * upper left of the window and the coordinate in the lower right is [width-1,
+ * height-1].
+ */
+function setup() {
+  // Sets the screen to be 720 pixels wide and 400 pixels high
+  createCanvas(720, 400);
+}
+
+function draw() {
+  // Set the background to black and turn off the fill color
+  background(0);
+  noFill();
+
+  // The two parameters of the point() method each specify
+  // coordinates.
+  // The first parameter is the x-coordinate and the second is the Y
+  stroke(255);
+  point(width * 0.5, height * 0.5);
+  point(width * 0.5, height * 0.25);
+
+  // Coordinates are used for drawing all shapes, not just points.
+  // Parameters for different functions are used for different
+  // purposes. For example, the first two parameters to line()
+  // specify the coordinates of the first endpoint and the second
+  // two parameters specify the second endpoint
+  stroke(0, 153, 255);
+  line(0, height * 0.33, width, height * 0.33);
+
+  // By default, the first two parameters to rect() are the
+  // coordinates of the upper-left corner and the second pair
+  // is the width and height
+  stroke(255, 153, 0);
+  rect(width * 0.25, height * 0.1, width * 0.5, height * 0.8);
+}

src/data/examples/hi/00_Structure/01_Width_and_Height.js

@@ -0,0 +1,20 @@
+/*
+ * @name Width and Height
+ * @description The 'width' and 'height' variables contain the
+ * width and height of the display window as defined in the createCanvas()
+ * function.
+ */
+function setup() {
+  createCanvas(720, 400);
+}
+
+function draw() {
+  background(127);
+  noStroke();
+  for (let i = 0; i < height; i += 20) {
+    fill(129, 206, 15);
+    rect(0, i, width, 10);
+    fill(255);
+    rect(i, 0, 10, height);
+  }
+}

src/data/examples/hi/00_Structure/02_Setup_and_Draw.js

@@ -0,0 +1,27 @@
+/*
+ * @name Setup and Draw
+ * @description The code inside the draw() function runs continuously from top
+ * to bottom until the program is stopped.
+ */
+let y = 100;
+
+// The statements in the setup() function
+// execute once when the program begins
+function setup() {
+  // createCanvas must be the first statement
+  createCanvas(720, 400);
+  stroke(255); // Set line drawing color to white
+  frameRate(30);
+}
+// The statements in draw() are executed until the
+// program is stopped. Each statement is executed in
+// sequence and after the last line is read, the first
+// line is executed again.
+function draw() {
+  background(0); // Set the background to black
+  y = y - 1;
+  if (y < 0) {
+    y = height;
+  }
+  line(0, y, width, y);
+}

src/data/examples/hi/00_Structure/03_No_Loop.js

@@ -0,0 +1,30 @@
+/*
+ * @name No Loop
+ * @description The noLoop() function causes draw() to only execute once.
+ * Without calling noLoop(), the code inside draw() is run continually.
+ */
+let y;
+
+// The statements in the setup() function
+// execute once when the program begins
+function setup() {
+  // createCanvas should be the first statement
+  createCanvas(720, 400);
+  stroke(255); // Set line drawing color to white
+  noLoop();
+
+  y = height * 0.5;
+}
+
+// The statements in draw() are executed until the
+// program is stopped. Each statement is executed in
+// sequence and after the last line is read, the first
+// line is executed again.
+function draw() {
+  background(0); // Set the background to black
+  y = y - 1;
+  if (y < 0) {
+    y = height;
+  }
+  line(0, y, width, y);
+}

src/data/examples/hi/00_Structure/04_Loop.js

@@ -0,0 +1,26 @@
+/*
+ * @name Loop
+ * @description The code inside the draw() function runs continuously from top
+ * to bottom until the program is stopped.
+ */
+let y = 100;
+
+// The statements in the setup() function
+// execute once when the program begins
+function setup() {
+  createCanvas(720, 400); // Size must be the first statement
+  stroke(255); // Set line drawing color to white
+  frameRate(30);
+}
+// The statements in draw() are executed until the
+// program is stopped. Each statement is executed in
+// sequence and after the last line is read, the first
+// line is executed again.
+function draw() {
+  background(0); // Set the background to black
+  y = y - 1;
+  if (y < 0) {
+    y = height;
+  }
+  line(0, y, width, y);
+}

src/data/examples/hi/00_Structure/05_Redraw.js

@@ -0,0 +1,33 @@
+/*
+ * @name Redraw
+ * @description The redraw() function makes draw() execute once. In this example,
+ * draw() is executed once every time the mouse is clicked.
+ */
+
+let y;
+
+// The statements in the setup() function
+// execute once when the program begins
+function setup() {
+  createCanvas(720, 400);
+  stroke(255);
+  noLoop();
+  y = height * 0.5;
+}
+
+// The statements in draw() are executed until the
+// program is stopped. Each statement is executed in
+// sequence and after the last line is read, the first
+// line is executed again.
+function draw() {
+  background(0);
+  y = y - 4;
+  if (y < 0) {
+    y = height;
+  }
+  line(0, y, width, y);
+}
+
+function mousePressed() {
+  redraw();
+}

src/data/examples/hi/00_Structure/06_Functions.js

@@ -0,0 +1,28 @@
+/*
+ *@name Functions
+ *@description The drawTarget() function makes it easy to draw many distinct
+ *targets. Each call to drawTarget() specifies the position, size, and number of
+ *rings for each target.
+ */
+
+function setup() {
+  createCanvas(720, 400);
+  background(51);
+  noStroke();
+  noLoop();
+}
+
+function draw() {
+  drawTarget(width * 0.25, height * 0.4, 200, 4);
+  drawTarget(width * 0.5, height * 0.5, 300, 10);
+  drawTarget(width * 0.75, height * 0.3, 120, 6);
+}
+
+function drawTarget(xloc, yloc, size, num) {
+  const grayvalues = 255 / num;
+  const steps = size / num;
+  for (let i = 0; i < num; i++) {
+    fill(i * grayvalues);
+    ellipse(xloc, yloc, size - i * steps, size - i * steps);
+  }
+}

src/data/examples/hi/00_Structure/07_Recursion.js

@@ -0,0 +1,27 @@
+/*
+ *@name Recursion
+ *@description A demonstration of recursion, which means functions call themselves.
+ * Notice how the drawCircle() function calls itself at the end of its block.
+ * It continues to do this until the variable "level" is equal to 1.
+ */
+
+function setup() {
+  createCanvas(720, 400);
+  noStroke();
+  noLoop();
+}
+
+function draw() {
+  drawCircle(width / 2, 280, 6);
+}
+
+function drawCircle(x, radius, level) {
+  const tt = (126 * level) / 4.0;
+  fill(tt);
+  ellipse(x, height / 2, radius * 2, radius * 2);
+  if (level > 1) {
+    level = level - 1;
+    drawCircle(x - radius / 2, radius / 2, level);
+    drawCircle(x + radius / 2, radius / 2, level);
+  }
+}