Initial content push

src/content/examples/en/00_Structure/01_Coordinates.js

@@ -0,0 +1,32 @@
+
+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/content/examples/en/00_Structure/01_Coordinates.mdx

@@ -0,0 +1,13 @@
+---
+title: Coordinates
+arialabel: >-
+  Black background with a orange outline of a square in the middle and a blue
+  line across at the top ⅓ point of the square
+---
+
+
+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].

src/content/examples/en/00_Structure/02_Width_and_Height.js

@@ -0,0 +1,15 @@
+
+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/content/examples/en/00_Structure/02_Width_and_Height.mdx

@@ -0,0 +1,13 @@
+---
+title: Width and Height
+arialabel: >-
+  Pattern of grey and green horizontal lines. The left half also has white
+  vertical lines. The left half is broken up into two triangular shapes, one
+  which is predominately green stripes, and one which is white with the white
+  stripes
+---
+
+
+The 'width' and 'height' variables contain the
+width and height of the display window as defined in the createCanvas()
+function.

src/content/examples/en/00_Structure/03_Setup_and_Draw.js

@@ -0,0 +1,23 @@
+
+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/content/examples/en/00_Structure/03_Setup_and_Draw.mdx

@@ -0,0 +1,11 @@
+---
+title: Setup and Draw
+arialabel: >-
+  Animated horizontal white line on a black background that moves from the
+  bottom to the top of the screen
+---
+
+
+The code inside the draw() function runs continuously from top
+to bottom until the program is stopped. The
+code in setup() is run once when the program starts.

src/content/examples/en/00_Structure/04_No_Loop.js

@@ -0,0 +1,26 @@
+
+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/content/examples/en/00_Structure/04_No_Loop.mdx

@@ -0,0 +1,8 @@
+---
+title: No Loop
+arialabel: Horizontal white line across the middle of a black background
+---
+
+
+The noLoop() function causes draw() to only execute once.
+Without calling noLoop(), the code inside draw() is run continually.

src/content/examples/en/00_Structure/05_Loop.js

@@ -0,0 +1,27 @@
+
+let y = 0;
+
+// 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);
+  noLoop();
+}
+// 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);
+}
+
+function mousePressed(){
+  loop();
+}

src/content/examples/en/00_Structure/05_Loop.mdx

@@ -0,0 +1,12 @@
+---
+title: Loop
+arialabel: >-
+  Horizontal white line on a black background that moves from the bottom to the
+  top of the screen parallel to the x-axis
+---
+
+
+If noLoop() is run in setup(), the code in draw()
+is only run once. In this example, click the mouse
+to run the loop() function to cause the draw() the
+run continuously.

src/content/examples/en/00_Structure/06_Redraw.js

@@ -0,0 +1,29 @@
+
+
+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/content/examples/en/00_Structure/06_Redraw.mdx

@@ -0,0 +1,10 @@
+---
+title: Redraw
+arialabel: >-
+  Horizontal white line across a black background that moves higher on the
+  screen with each mouse click
+---
+
+
+The redraw() function makes draw() execute once. In this example,
+draw() is executed once every time the mouse is clicked.

src/content/examples/en/00_Structure/07_Functions.js

@@ -0,0 +1,23 @@
+
+
+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/content/examples/en/00_Structure/07_Functions.mdx

@@ -0,0 +1,11 @@
+---
+title: Functions
+arialabel: >-
+  Three targets are created in the shape of black circles. There is a gradient
+  from white to black from the center of the circle to the outer edge.
+---
+
+
+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.

src/content/examples/en/00_Structure/08_Recursion.js

@@ -0,0 +1,28 @@
+
+
+function setup() {
+  createCanvas(720, 560);
+  noStroke();
+  noLoop();
+}
+
+function draw() {
+  drawCircle(width / 2, 280, 6);
+}
+
+function drawCircle(x, radius, level) {
+  // 'level' is the variable that terminates the recursion once it reaches 
+  // a certain value (here, 1). If a terminating condition is not 
+  // specified, a recursive function keeps calling itself again and again
+  // until it runs out of stack space - not a favourable outcome! 
+  const tt = (126 * level) / 4.0;
+  fill(tt);
+  ellipse(x, height / 2, radius * 2, radius * 2);
+  if (level > 1) {  
+    // 'level' decreases by 1 at every step and thus makes the terminating condition
+    // attainable
+    level = level - 1;  
+    drawCircle(x - radius / 2, radius / 2, level);
+    drawCircle(x + radius / 2, radius / 2, level);
+  }
+}

src/content/examples/en/00_Structure/08_Recursion.mdx

@@ -0,0 +1,14 @@
+---
+title: Recursion
+arialabel: >-
+  Grey circle with two grey circles across its middle. Each of these two grey
+  circles have more grey circles across its middle. This pattern continues until
+  no more can be drawn within them.
+---
+
+
+A demonstration of recursion, which means functions call themselves.
+A recursive function must have a terminating condition, without which it will
+go into an infinite loop. 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.

src/content/examples/en/00_Structure/09_Create_Graphics.js

@@ -0,0 +1,24 @@
+
+
+let pg;
+
+function setup() {
+  createCanvas(710, 400);
+  pg = createGraphics(400, 250);
+}
+
+function draw() {
+  fill(0, 12);
+  rect(0, 0, width, height);
+  fill(255);
+  noStroke();
+  ellipse(mouseX, mouseY, 60, 60);
+
+  pg.background(51);
+  pg.noFill();
+  pg.stroke(255);
+  pg.ellipse(mouseX - 150, mouseY - 75, 60, 60);
+
+  //Draw the offscreen buffer to the screen with image()
+  image(pg, 150, 75);
+}

src/content/examples/en/00_Structure/09_Create_Graphics.mdx

@@ -0,0 +1,11 @@
+---
+title: Create Graphics
+arialabel: >-
+  Black background with a very dark grey rectangle in the middle. The user’s
+  mouse draws in white but not on the center rectangle.
+---
+
+
+Creates and returns a new p5.Renderer object. Use this
+class if you need to draw into an off-screen graphics buffer. The two parameters
+define the width and height in pixels.

src/content/examples/en/01_Form/00_Points_and_Lines.js

@@ -0,0 +1,31 @@
+
+function setup() {
+  let d = 70;
+  let p1 = d;
+  let p2 = p1 + d;
+  let p3 = p2 + d;
+  let p4 = p3 + d;
+
+  // Sets the screen to be 720 pixels wide and 400 pixels high
+  createCanvas(720, 400);
+  background(0);
+  noSmooth();
+
+  translate(140, 0);
+
+  // Draw gray box
+  stroke(153);
+  line(p3, p3, p2, p3);
+  line(p2, p3, p2, p2);
+  line(p2, p2, p3, p2);
+  line(p3, p2, p3, p3);
+
+  // Draw white points
+  stroke(255);
+  point(p1, p1);
+  point(p1, p3);
+  point(p2, p4);
+  point(p3, p1);
+  point(p4, p2);
+  point(p4, p4);
+}

src/content/examples/en/01_Form/00_Points_and_Lines.mdx

@@ -0,0 +1,9 @@
+---
+title: Points and Lines
+arialabel: White outline of a square on a black background
+---
+
+
+Points and lines can be used to draw basic geometry.
+Change the value of the variable 'd' to scale the form. The four
+variables set the positions based on the value of 'd'.