Repository: bmoren/p5js-cheat-sheet
Branch: master
Commit: b482c202f930
Files: 28
Total size: 106.9 KB

Directory structure:
gitextract_0jy1tvqk/

├── .gitignore
├── README.md
├── build/
│   ├── index.js
│   └── package.json
└── docs/
    ├── ca.html
    ├── de.html
    ├── diagram.js
    ├── es.html
    ├── fonts/
    │   ├── FiraCode-Bold.otf
    │   ├── FiraCode-Light.otf
    │   ├── FiraCode-Medium.otf
    │   ├── FiraCode-Regular.otf
    │   └── inconsolata.otf
    ├── fr.html
    ├── id.html
    ├── index.html
    ├── it.html
    ├── ja.html
    ├── ko.html
    ├── menu.js
    ├── nl.html
    ├── prism.css
    ├── prism.js
    ├── pt.html
    ├── style.css
    ├── tr.html
    ├── zh-tw.html
    └── zh.html

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# Ignore Mac DS_Store files
.DS_Store
debug.log
.vscode/settings.json

node_modules


================================================
FILE: README.md
================================================
# [a p5js cheat sheet for beginners!](https://bmoren.github.io/p5js-cheat-sheet/)

This is a [web based cheat sheet](https://bmoren.github.io/p5js-cheat-sheet/) to help folks get started with [p5.js](http://p5js.org)! The cheat sheet is fully formatted for printing on a single sheet of paper for easy reference, classroom, and workshop usage. There are several translations available:

+ [English](https://bmoren.github.io/p5js-cheat-sheet/)
  + Translation by: [Ben Moren](https://github.com/bmoren)
+ [French](https://bmoren.github.io/p5js-cheat-sheet/fr.html)
  + Translation by: [@rich-gg](https://github.com/rich-gg)
+ [Japanese](https://bmoren.github.io/p5js-cheat-sheet/ja.html)
  + Translation by: [Takawo Shunsuke](https://twitter.com/takawo)
+ [German](https://bmoren.github.io/p5js-cheat-sheet/de.html)
   + Translation by: [Philipp Lehmann](https://github.com/philipp-lehmann)
+ [Nederlands](https://bmoren.github.io/p5js-cheat-sheet/nl.html)
  + Translation by: [Vincent Sijben](https://github.com/vincentsijben)
+ [Korean](https://bmoren.github.io/p5js-cheat-sheet/ko.html)
  + Translation by: [Yi donghoon](https://github.com/icq4ever)
+ [Italian](https://bmoren.github.io/p5js-cheat-sheet/it.html)
  + Translation by: [Antonio Belluscio](https://codesthesia.net)
+ [Spanish](https://bmoren.github.io/p5js-cheat-sheet/es.html)
  + Translation by: [Andy Valdés Valdés](https://andyvaldesvaldes.com/)
+ [Catalan](https://bmoren.github.io/p5js-cheat-sheet/ca.html)
  + Translation by: [Daniel Fernández](https://github.com/trikaphundo)
+ [Indonesia](https://bmoren.github.io/p5js-cheat-sheet/id.html)
  + Translation by: [Zul Hilmi](https://github.com/hilmizul)
+ [Portuguese](https://bmoren.github.io/p5js-cheat-sheet/pt.html)
  + Translation by: [Felipe Turcheti](https://github.com/fturcheti)
+ [Chinese](https://bmoren.github.io/p5js-cheat-sheet/zh.html)
  + Translation by: [Drafffffff](https://github.com/draffffff)
+ [Traditional Chinese](https://bmoren.github.io/p5js-cheat-sheet/zh-tw.html)
  + Translation by: [eziraros](https://twitter.com/s_r_r_z_)
+ [Turkish](https://bmoren.github.io/p5js-cheat-sheet/tr.html)
  + Translation by: [Bedirhan Ugur](https://github.com/bedirxanugur)

There are also pre-compiled PDF's available within this repository for each translation for folks who would like to get off-line ASAP, or who would like an immediate copy of a cheat sheet.

# Making a new translation!

I'm looking for help translating this cheat sheet into as many languages as possible! If you can assist, please reach out via in the issues tab or via the [p5.js forum post](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/7)!

### If you're not comfortable with HTML & Git:
No worries! – Please respond to (or open) the associated language issue with the translations for each cheatsheet section and a contributor will implement and confirm them with you before pushing them live!

### If you are comfortable with HTML & making git pull requests:
+ clone the repository
+ navigate to the `docs` folder
+ copy `index.html` & rename to `langcode.html` (where langcode is the [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for the language you are translating.
+ make all translation changes inside of the  `<code class="language-javaScript"></code>` tags
+ make all translation changes to the `terms` JSON object at the bottom of the HTML page.
+ add your name as the translator + a link to yourself in the `<footer>` section
+ make a pull request against the repository!

### bonus tasks (if you have time or are able)
#### update the readme:
+ add a link to the new translation in the readme.md
+ add your name as the translator + link to the readme.md

#### update the menu:
+ in the `docs` folder, find the `menu.js` file and add a link to the translation page

#### add a pdf:
+ export a pdf and add to the root (print to PDF in *^chrome*), please name it `p5cheatsheet-▵LC.pdf`
+ verify that it will all fit on one page, if there is overflow, some minor custom CSS may need to be implemented.

*^it's critical that it's in chrome, for best rendering and color accuracy*.

*▵ the LC here refers to Language Code, please use the appropriate [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for the language you are translating*

---

[Creative Commons BY NC SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)

With thanks to past cheat sheets like [Ryo Sakai's p5.js sheet](https://twitter.com/ryodejaneiro/status/827314983948210176) !

Special thanks to [Kenneth Lim](https://github.com/limzykenneth) for initializing the HTML version which will make this cheat sheet much easier to translate.


================================================
FILE: build/index.js
================================================
const puppeteer = require("puppeteer");
const path = require("path");
const fs = require("fs");

/**
 * Creates a Buffer containing a PDF from a specified URL.
 */
async function createPDF(browser, url) {
    const page = await browser.newPage();
    await page.goto(url, {waitUntil: "networkidle0"});
    const pdf = await page.pdf({
        // These are the options that Chrome gave by default.
        margin: {
            top: "1cm",
            right: "1cm",
            bottom: "1cm",
            left: "1cm",
        },
    });

    return pdf;
}

/**
 * Formats a language code (HTML file name without the extension) into
 * one which can be used by a PDF file. It will either output a `-` followed
 * by the formatted language code, or nothing (for `index.html`).
 */
function formatLangCode(name) {
    // We need to make text before the - uppercase, and
    // leave text before it lowercase. Also, if we get
    // index, we'll leave it blank.
    if(name === "index") return "";

    const split = name.split("-");
    if(split.length !== 1 && split.length !== 2)
        throw new Error(name + "is not a valid file name!");

    if(split.length === 1) return "-" + split[0].toUpperCase();
    if(split.length === 2) return "-" + split[0].toUpperCase() + "-" + split[1].toLowerCase();
}

(async () => {
    // Each HTML file in ../docs must be converted to a PDF file, saved in .. .
    // These HTML files follow the format of LANG.html, where LANG is lowercased.
    // The PDF files follow the format of p5cheatsheet-LANG.pdf, where LANG is correctly
    // formatted. For example, it.html becomes p5cheatsheet-IT.pdf, while zh-tw.html
    // becomes p5cheatsheet-ZH-tw.pdf. Also, index.html becomes p5cheatsheet.pdf.
    //
    // We'll start off by getting every HTML file, getting its PDF name, and finally,
    // converting it to a PDF.
    const HTMLDir = path.resolve(path.join(__dirname, "../", "docs"));
    const PDFDir = path.resolve(path.join(__dirname, "../"));

    const browser = await puppeteer.launch({
        // CORS blocks font loading.
        args: [
            "--disable-web-security",
        ],
        headless: true,

    });

    for(const fileName of fs.readdirSync(HTMLDir)) {
        if(!fileName.endsWith(".html")) continue;

        const filePath = path.join(HTMLDir, fileName);

        const name = path.basename(fileName, ".html");
        const newName = "p5cheatsheet" + formatLangCode(name) + ".pdf";

        fs.writeFileSync(path.join(PDFDir, newName), await createPDF(browser, "file://" + filePath));
        console.log("Saved " + newName + ".");
    }

    await browser.close();
})();


================================================
FILE: build/package.json
================================================
{
    "private": true,
    "dependencies": {
        "puppeteer": "^19.2.0"
    }
}


================================================
FILE: docs/ca.html
================================================
<!DOCTYPE html>
<html>

<head>
	<title>p5.js Cheat Sheet</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css" media="all">
	<link rel="stylesheet" href="prism.css">

</head>

<body>

	<!-- Include the menu, there's likely a more elegent way to do this -->
	<script src="menu.js"></script>

		<article id="cheat-sheet">
			<div class="column">

			<header>
				<h1 id="title">p5.js</h1>
				<p id="subtitle">un breu resum <br>per a principiants!</p>
			</header>

			<section>
				<h1>estructura del programa</h1>
				<pre><code class="language-javaScript">//s'executa només un cop quan s'inicia el programa
function setup(){
  createCanvas(800,600); //amplada, alçada en píxels
}

//s'executa contínuament després de la funció setup
function draw(){
  //codi que s'executarà en bucle
}
</code></pre>
			</section>

			<section>
				<h1>variables del sistema</h1>
				<pre><code class="language-javaScript">windowWidth / windowHeight
//amplada / alçada de la finestra

width / height
//amplada / alçada del llenç

mouseX / mouseY
//posició actual horitzontal / vertical del ratolí
</code></pre>
			</section>

			<section>
				<h1>Informació via la consola</h1>
				<pre><code class="language-javaScript">print();
//escriu dades a la consola

//dues barres inclinades per a comentar el codi
//(el programa ignora els comentaris)
</code></pre>
			</section>

			<section>
				<h1>color</h1>
				<pre><code class="language-javaScript">fill(120); //escala de grisos: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //nom del color
fill('#ccc'); //hexadecimal de 3 dígits
fill('#222222'); //hexadecimal de 6 dígits
color(0, 0, 255); //objecte p5.Color
</code></pre>
			</section>


	</div>
	<!-- End First Col -->

	<div class="column">

		<section>
			<h1>matemàtiques</h1>
			<pre><code class="language-javaScript">+ - / *  //operadors matemàtics bàsics

random(min, max); //nombre aleatori entre min i max

map(valor, entr1, entr2, sort1, sort2);
//converteix un valor entre entr1 i entr2
//a un valor entre sort1 i sort2
</code></pre>
		</section>

<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->
		<!-- <section>
			<h1>variable definition</h1>
			<pre><code class="language-javaScript">//let & keyword defines a variable
// use single = to store data in the variable
let variableName = 100;
let myWords = "a string of text!";
let randStorage = random(0,255); // store returned data
</code></pre>
		</section> -->

		<section>
			<h1>primitives 2d</h1>
			<pre><code class="language-javaScript">line(x1, y1, x2, y2);

ellipse(x, y, amplada, altura);

rect(x, y, amplada, altura);

arc(x, y, amplada, altura, inici, final);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //afegiu més vèrtex
endShape(CLOSE);

text("string", x, y, ampleCaixa, alturaCaixa);
</code></pre>

			<ul>
				<li class="canvas-container">
					<h2>graella</h2>
					<div id="grid-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>line()</h2>
					<div id="line-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>ellipse()</h2>
					<div id="ellipse-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>rect()</h2>
					<div id="rect-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>arc()</h2>
					<div id="arc-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>vertex()</h2>
					<div id="vertex-canvas"></div>
				</li>
			</ul>
		</section>



	</div>
	<!-- End Second Col -->
	<div class="column">

		<section>
			<h1>atributs</h1>
			<pre><code class="language-javaScript">background(color);
//estableix el color de llenç

fill(color);
//estableix el color d'emplenat

noFill();
//desactiva l'emplenat

stroke(color);
//estableix el color del traç

strokeWeight(gruix);
//estableix el gruix del traç, en píxels

noStroke();
//desactiva el traç

ellipseMode(MODE);
rectMode(MODE);
//CENTER,CORNER (centre o cantonada)

textSize(pixels);
</code></pre>
		</section>

		<section>
			<h1>lògica si/aleshores</h1>
			<div class="logic">
				<pre><code class="language-javaScript">if(condició){
  //instruccions
}

===  //igual a
!==  //no igual a
>   //major que
<   //menor que
>=  //major o igual que
<=  //menor o igual que

</code></pre>
<div id="ifelse-canvas"></div>

		</div>

		</section>

		<footer>
			Compiled by Ben Moren <a href="http://benmoren.com">http://benmoren.com</a> CC-BY-SA-NC-4.0
			<br>
			Translation by <a href="https://github.com/trikaphundo">Daniel Fernández</a>
		</footer>

	</div>

	</article>


  <!-- In the flow diagram, the words "test", "true"
  and "false" must be translated so that their genders
  match. Since "condició" is feminine, so must be
  the translations of "true" (certa) and "false" (falsa)-->
	<script type="text/javascript">
		// Terms to translate for diagrams
		var terms = {
			"width": "amplada",
			"height": "alçada",
			"stop": "final",
			"start": "inici",
			"true": "certa",
			"false": "falsa",
			"continue_program": "continua el programa",
			"test": "condició",
			"statements": "instruccions"
		};
	</script>

	<script src="prism.js"></script>
	<script src="p5.min.js"></script>
	<script src="diagram.js"></script>
</body>

</html>


================================================
FILE: docs/de.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <title>p5.js Cheat Sheet</title>
    <meta content="no-cache" http-equiv="pragma"/>
    <meta content="no-cache" http-equiv="cache-control"/>

    <link href="style.css" media="all" rel="stylesheet" type="text/css">
    <link href="prism.css" media="all" rel="stylesheet" type="text/css">


  </head>
  <body>
    <!-- Include the menu, there's likely a more elegent way to do this -->
    <script src="menu.js"></script>

    <article id="cheat-sheet">
      <div class="column">
        <header>
          <h1 id="title">p5.js</h1>
          <p id="subtitle">
            Spickzettel
            <br>
            für Anfänger!</p>
        </header>

        <section>
          <h1>Programmstruktur</h1>
          <pre><code class="language-javaScript">//wird einmal bei Programmstart ausgeführt
function setup(){
  createCanvas(800,600);
}

//läuft fortwährend
function draw(){
  //Ausgabeschleife
}
</code></pre>
        </section>

        <section>
          <h1>Systemvariablen</h1>
          <pre><code class="language-javaScript">windowWidth / windowHeight
//Breite / Höhe des fensters

width / height
//Breite / Höhe des canvas

mouseX / mouseY
//aktuelle horizontale / vertikale Mausposition
</code></pre>
        </section>

        <section>
          <h1>Konsolenausgabe</h1>
          <pre><code class="language-javaScript">
print();
//Daten in der Konsole ausgeben
</code></pre>
        </section>

        <section>
          <h1>Farbe</h1>
          <pre><code class="language-javaScript">fill(120); //grau: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //Farbbezeichnung
fill('#ccc'); //3-stelliger Farbcode in Hexadecimal
fill('#222222'); //6-stelliger Farbcode in Hexadecimal
color(0, 0, 255); //p5 Farbobjekt
</code></pre>
        </section>
      </div>

      <div class="column">

        <section>
          <h1>Mathe</h1>
          <pre><code class="language-javaScript">+ - / *

random(minimum,maximum);

map(wert, in1, in2, out1, out2);
//transformiert einen Wert von der Eingabeskala in die Ausgabeskala
</code></pre>
        </section>

        <section>
          <h1>2D-Formen</h1>
          <pre><code class="language-javaScript">line(x1, y1, x2, y2);

ellipse(x, y, breite, höhe);

rect(x, y, breite, höhe); //Rechteck

//Bogen
arc(x, y, breite, höhe, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
endShape(CLOSE);

text("Begriff", x, y, breite, höhe);
</code></pre>

          <ul>
            <li class="canvas-container">
              <h2>Rastersystem</h2>
              <div id="grid-canvas"></div>
            </li>
            <li class="canvas-container">
              <h2>line()</h2>
              <div id="line-canvas"></div>
            </li>
            <li class="canvas-container">
              <h2>ellipse()</h2>
              <div id="ellipse-canvas"></div>
            </li>
            <li class="canvas-container">
              <h2>rect()</h2>
              <div id="rect-canvas"></div>
            </li>
            <li class="canvas-container">
              <h2>arc()</h2>
              <div id="arc-canvas"></div>
            </li>
            <li class="canvas-container">
              <h2>vertex()</h2>
              <div id="vertex-canvas"></div>
            </li>
          </ul>
        </section>

      </div>

      <div class="column">
        <section>
          <h1>Attribute</h1>
          <pre><code class="language-javaScript">background(Farbe);
//Hintergrundfarbe setzen

fill(Farbe);
//Füllfarbe setzen

noFill();
//keine Füllfarbe

stroke(farbe);
//Strichfarbe setzen

strokeWeight(stärke);
//Strichstärke einstellen

noStroke();
//kein Strich zeichnen

ellipseMode(Modus);
rectMode(Modus);
//CENTER oder CORNER

textSize(pixels);
</code></pre>
        </section>

        <section>
          <h1>wenn/dann Logik</h1>
          <div class="logic">
            <pre><code class="language-javaScript">if(Bedingung){
  //Programmcode
}

=== //gleich wie
!== //ungleich
>  //grösser als
<  //kleiner als
>= //grösser oder gleich wie
<= //kleiner oder gleich wie
</code></pre>
            <div id="ifelse-canvas"></div>
          </section>

          <footer>
            Erstellt von Ben Moren
            <a href="http://benmoren.com">http://benmoren.com</a>
            CC BY SA NC 4.0<br/>
            Übersetzt von
            <a href="https://github.com/philipp-lehmann">Philipp Lehmann</a>,
            <a href="https://github.com/gruselhaus">Nico Finkernagel</a>
          </footer>
        </div>


      </div>
    </article>


    <script type="text/javascript">

      // Terms to translate for diagrams
      var terms = {
        "width": "Breite",
        "height": "Höhe",
        "stop": "Stop",
        "start": "Start",
        "true": "wahr",
        "false": "falsch",
        "continue_program": "Programm wird\nweitergeführt",
        "test": "Bedingung",
        "statements": "Programmcode"
      };
    </script>
    <script src="prism.js"></script>
    <script src="p5.min.js"></script>
    <script src="diagram.js"></script>
  </body>
</html>


================================================
FILE: docs/diagram.js
================================================
var canvasSize = 220;
var p5Pink = "#ed225d";
let txtSz = 18
let fontFile = 'fonts/FiraCode-Bold.otf'

var gridSketch = function(p){
	var canvas;

	var fira;
	p.preload = function(){
		fira = p.loadFont(fontFile);
	}

	p.setup = function(){
		canvas = p.createCanvas(canvasSize, canvasSize);
		canvas.parent("grid-canvas");
		p.strokeWeight(0.25);
		p.translate(canvasSize/15, canvasSize/15);


		var gridSize = canvasSize - 2 * canvasSize / 15;
		for(var x=0; x<=10; x++){
			p.line(gridSize / 10 * x, 0, gridSize / 10 * x, gridSize);
		}
		for(var y=0; y<=10; y++){
			p.line(0, gridSize / 10 * y, gridSize, gridSize / 10 * y);
		}

		p.noStroke();
		p.fill("#000000");
		p.ellipse(0, 0, gridSize/20, gridSize/20);

		p.textSize(txtSz);
		p.textAlign(p.LEFT, p.TOP);
		p.textFont(fira);
		p.text("(0,0)", 5, 5);
	};
};

var lineSketch = function(p){
	var canvas;

	var fira;
	p.preload = function(){
		fira = p.loadFont(fontFile);
	}

	p.setup = function(){
		canvas = p.createCanvas(canvasSize, canvasSize);
		canvas.parent("line-canvas");
		p.strokeWeight(0.25);
		p.translate(canvasSize/15, canvasSize/15);

		var gridSize = canvasSize - 2 * canvasSize / 15;
		for(var x=0; x<=10; x++){
			p.line(gridSize / 10 * x, 0, gridSize / 10 * x, gridSize);
		}
		for(var y=0; y<=10; y++){
			p.line(0, gridSize / 10 * y, gridSize, gridSize / 10 * y);
		}

		p.noStroke();
		p.fill("#000000");
		var x1 = gridSize / 10 * 4;
		var y1 = gridSize / 10 * 3;
		var x2 = gridSize / 10 * 7;
		var y2 = gridSize / 10 * 7;
		p.ellipse(x1, y1, gridSize/20, gridSize/20);
		p.ellipse(x2, y2, gridSize/20, gridSize/20);
		p.stroke("#000000");
		p.strokeWeight(2);
		p.line(x1, y1, x2, y2);

		p.textSize(txtSz);
		p.textFont(fira);
		p.noStroke();
		p.textAlign(p.RIGHT, p.BOTTOM);
		p.text("(x1,y1)", x1+10, y1-10);

		p.textAlign(p.CENTER, p.TOP);
		p.text("(x2,y2)", x2+5, y2+10);
	};
};

var ellipseSketch = function(p){
	var canvas;

	var fira;
	p.preload = function(){
		fira = p.loadFont(fontFile);
	}

	p.setup = function(){
		canvas = p.createCanvas(canvasSize, canvasSize);
		canvas.parent("ellipse-canvas");
		p.strokeWeight(0.25);
		p.push();
		p.translate(canvasSize/15, canvasSize/15);

		var gridSize = canvasSize - 2 * canvasSize / 15;
		for(var x=0; x<=10; x++){
			p.line(gridSize / 10 * x, 0, gridSize / 10 * x, gridSize);
		}
		for(var y=0; y<=10; y++){
			p.line(0, gridSize / 10 * y, gridSize, gridSize / 10 * y);
		}
		p.pop();

		var x = p.width/2;
		var y = p.width/2;
		p.stroke("#000000");
		p.strokeWeight(2);
		p.fill(p5Pink);
		p.ellipse(x, y, gridSize / 10 * 6.5, gridSize / 10 * 6.5);

		p.noStroke();
		p.fill("#000000");
		p.ellipse(x, y, gridSize/20, gridSize/20);

		p.textSize(txtSz);
		p.textFont(fira);
		p.noStroke();
		p.textAlign(p.CENTER, p.BOTTOM);
		p.text("(x,y)", x, y-10);

		p.push();
		p.translate(p.width/2, p.height/2 + (gridSize / 10 * 6.5)/2 + 7);
		p.textAlign(p.CENTER, p.TOP);
		p.text(terms.width, 0, 0);
		p.pop();

		p.push();
		p.translate(p.width/2, p.height/2);
		p.rotate(-p.PI/2);
		p.textAlign(p.CENTER, p.TOP);
		p.text(terms.height, 0, (gridSize / 10 * 6.5)/2 + 7);
		p.pop();
	};
};

var rectSketch = function(p){
	var canvas;

	var fira;
	p.preload = function(){
		fira = p.loadFont(fontFile);
	}

	p.setup = function(){
		canvas = p.createCanvas(canvasSize, canvasSize);
		canvas.parent("rect-canvas");
		p.strokeWeight(0.25);
		p.textSize(txtSz);
		p.textFont(fira);
		p.push();
		p.translate(canvasSize/20, canvasSize/15);

		var gridSize = canvasSize - 2 * canvasSize / 15;
		for(var x=0; x<=10; x++){
			p.line(gridSize / 10 * x, 0, gridSize / 10 * x, gridSize);
		}
		for(var y=0; y<=10; y++){
			p.line(0, gridSize / 10 * y, gridSize, gridSize / 10 * y);
		}

		var x = gridSize / 10 * 2;
		var y = gridSize / 10 * 2;
		p.stroke("#000000");
		p.strokeWeight(2);

		p.fill(p5Pink);
		p.rect(x, y, gridSize / 10 * 5, gridSize / 10 * 5);

		p.noStroke();
		p.fill("#000000");
		p.ellipse(x, y, gridSize/20, gridSize/20);

		p.noStroke();
		p.textAlign(p.CENTER, p.BOTTOM);
		p.text("(x,y)", x, y-10);
		p.pop();

		p.push();
		p.translate(p.width/2, p.height/2);
		p.textAlign(p.CENTER, p.TOP);
		p.text(terms.width, -10, (gridSize/10*5) / 2);
		p.pop();

		p.push();
		p.translate(p.width/2, p.height/2);
		p.rotate(-p.PI/2);
		p.text(terms.height, -25, (gridSize/10*5) / 2 + 7);
		p.pop();
	};
};

var arcSketch = function(p){
	var canvas;

	var fira;
	p.preload = function(){
		fira = p.loadFont(fontFile);
	}

	p.setup = function(){
		canvas = p.createCanvas(canvasSize, canvasSize);
		canvas.parent("arc-canvas");
		p.strokeWeight(0.25);
		p.push();
		p.translate(canvasSize/15, canvasSize/15);

		var gridSize = canvasSize - 2 * canvasSize / 15;
		for(var x=0; x<=10; x++){
			p.line(gridSize / 10 * x, 0, gridSize / 10 * x, gridSize);
		}
		for(var y=0; y<=10; y++){
			p.line(0, gridSize / 10 * y, gridSize, gridSize / 10 * y);
		}
		p.pop();

		p.push();
		var x = 0;
		var y = 0;
		p.fill(p5Pink);
		p.stroke("#000000");
		p.strokeWeight(2);
		p.translate(p.width/2, p.height/2);
		p.arc(x, y, gridSize / 10 * 7, gridSize / 10 * 7, p.PI / 2, 2 * p.PI);

		p.noStroke();
		p.fill("#000000");
		p.ellipse(0, 0, gridSize/20, gridSize/20);
		p.pop();

		p.push();
			p.translate(p.width/2, p.height/2);
			p.textSize(txtSz);
			p.textFont(fira);
			p.textAlign(p.CENTER, p.BOTTOM);
			p.text("(x,y)", 0, -15);

			p.textAlign(p.CENTER, p.TOP);
			p.text(terms.width, 0, gridSize / 10 * 7.5 / 2 );

			p.text(terms.stop, gridSize / 10 * 6.5 / 4, 3)

			p.push();
				p.rotate(p.PI/2);
				p.text(terms.start, gridSize / 10 * 7.0 / 4, 0);
			p.pop();

			p.push();
				p.rotate(-p.PI/2);
				p.textAlign(p.CENTER, p.BOTTOM);
				p.text(terms.height, 0, -gridSize / 10 * 7.5 / 2 );
			p.pop();
		p.pop();
	};
};

var vertexSketch = function(p){
	var canvas;

	var fira;
	p.preload = function(){
		fira = p.loadFont(fontFile);
	}

	p.setup = function(){
		canvas = p.createCanvas(canvasSize, canvasSize);
		canvas.parent("vertex-canvas");
		p.strokeWeight(0.25);
		p.translate(canvasSize/15, canvasSize/15);

		var gridSize = canvasSize - 2 * canvasSize / 15;
		for(var x=0; x<=10; x++){
			p.line(gridSize / 10 * x, 0, gridSize / 10 * x, gridSize);
		}
		for(var y=0; y<=10; y++){
			p.line(0, gridSize / 10 * y, gridSize, gridSize / 10 * y);
		}

		var x1 = gridSize / 10 * 2;
		var y1 = gridSize / 10 * 2;
		var x2 = gridSize / 10 * 7;
		var y2 = gridSize / 10 * 6;
		var x3 = gridSize / 10 * 2;
		var y3 = gridSize / 10 * 7;

		p.fill(p5Pink);
		p.stroke("#000000");
		p.strokeWeight(2);
		p.beginShape();
			p.vertex(x1, y1);
			p.vertex(x2, y2);
			p.vertex(x3, y3);
		p.endShape(p.CLOSE);

		p.noStroke();
		p.fill("#000000");
		p.ellipse(x1, y1, gridSize/20, gridSize/20);
		p.ellipse(x2, y2, gridSize/20, gridSize/20);
		p.ellipse(x3, y3, gridSize/20, gridSize/20);

		p.textAlign(p.CENTER, p.BOTTOM);
		p.textSize(txtSz);
		p.textFont(fira);
		p.text("(x1,y1)", x1 +7, y1 - 7);

		p.textAlign(p.CENTER, p.TOP);
		p.text("(x2,y2)", x2+7, y2 + 10);
		p.text("(x3,y3)", x3+7, y3 + 7);
	};
};

var ifelseSketch = function(p){
	var canvas;

	var fira;
	p.preload = function(){
		fira = p.loadFont(fontFile);
	}

	p.setup = function(){
		canvas = p.createCanvas(225, 235);
		canvas.parent("ifelse-canvas");
		p.translate(5, 5);

		p.noFill();
		// test
		p.beginShape();
			p.vertex(90, 0);
			p.vertex(170, 20);
			p.vertex(90, 40);
			p.vertex(10, 20);
		p.endShape(p.CLOSE);

		// statements
		p.rect(10, 90, 160, 50);

		// true
		p.line(90, 40, 90, 90);

		// continue program
		p.line(90, 140, 90, 190);

		// false
		p.line(90, 160, 190, 160);
		p.line(190, 160, 190, 20);
		p.line(190, 20, 170, 20);

		// arrows
		p.fill("#000000");
		p.triangle(90, 90, 80, 80, 100, 80);
		p.triangle(90, 190, 80, 180, 100, 180);

		// text
		p.textFont(fira);
		p.text(terms.true, 100, 65);
		p.textAlign(p.CENTER, p.BOTTOM);
		p.text(terms.false, 190, 20);
		p.textAlign(p.CENTER, p.TOP);
		p.text(terms.continue_program, 90, 200);

		p.textStyle(p.BOLD);
		p.textAlign(p.CENTER, p.CENTER);
		p.text(terms.test, 90, 20);
		p.text(terms.statements, 90, 115);
	};
};

new p5(gridSketch);
new p5(lineSketch);
new p5(ellipseSketch);
new p5(rectSketch);
new p5(arcSketch);
new p5(vertexSketch);
new p5(ifelseSketch);


================================================
FILE: docs/es.html
================================================
<!DOCTYPE html>
<html>

<head>
	<title>p5.js Cheat Sheet</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css" media="all">
	<link rel="stylesheet" href="prism.css">

</head>

<body>

	<!-- Include the menu, there's likely a more elegent way to do this -->
	<script src="menu.js"></script>

		<article id="cheat-sheet">
			<div class="column">

			<header>
				<h1 id="title">p5.js</h1>
				<p id="subtitle">¡Un resumen <br> para principiantes!</p>
			</header>

			<section>
				<h1>estructura del programa</h1>
				<pre><code class="language-javaScript">//corre solo una vez cuando inicia el programa
function setup(){
  createCanvas(800,600); //ancho, alto en píxeles
}

//corre continuamente después de la función setup
function draw(){
  //instrucciones a ejecutar en bucle
}
</code></pre>
			</section>

			<section>
				<h1>variables del sistema</h1>
				<pre><code class="language-javaScript">windowWidth / windowHeight
//ancho / alto de la ventana

width / height
//ancho / alto del lienzo

mouseX / mouseY
//posición actual horizontal / vertical del apuntador
</code></pre>
			</section>

			<section>
				<h1>Información a través de la consola</h1>
				<pre><code class="language-javaScript">print();
//reporta datos a la consola

//doble barra oblicua para comentar el código
//(el programa lo salta)
</code></pre>
			</section>

			<section>
				<h1>color</h1>
				<pre><code class="language-javaScript">fill(120); //gris: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //nombre del color
fill('#ccc'); //hexadecimal de 3 dígitos
fill('#222222'); //hexadecimal de 6 dígitos
color(0, 0, 255); //objecto p5.Color
</code></pre>
			</section>


	</div>
	<!-- End First Col -->

	<div class="column">

		<section>
			<h1>matemáticas</h1>
			<pre><code class="language-javaScript">+ - / *  //operadores básicos matemáticos

random(min, max); //número aleatorio entre min y max

map(valor, entr1, entr2, sal1, sal2);
//mapea un valor del rango de entrada al rango de salida
</code></pre>
		</section>

<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->
		<!-- <section>
			<h1>variable definition</h1>
			<pre><code class="language-javaScript">//let & keyword defines a variable
// use single = to store data in the variable
let variableName = 100;
let myWords = "a string of text!";
let randStorage = random(0,255); // store returned data
</code></pre>
		</section> -->

		<section>
			<h1>primitivas 2d</h1>
			<pre><code class="language-javaScript">line(x1, y1, x2, y2);

ellipse(x, y, ancho, alto);

rect(x, y, ancho, alto);

arc(x, y, ancho, alto, inicio, final);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //agrega más vértices
endShape(CLOSE);

text("string", x, y, anchoCaja, altoCaja);
</code></pre>

			<ul>
				<li class="canvas-container">
					<h2>cuadrícula</h2>
					<div id="grid-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>line()</h2>
					<div id="line-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>ellipse()</h2>
					<div id="ellipse-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>rect()</h2>
					<div id="rect-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>arc()</h2>
					<div id="arc-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>vertex()</h2>
					<div id="vertex-canvas"></div>
				</li>
			</ul>
		</section>



	</div>
	<!-- End Second Col -->
	<div class="column">

		<section>
			<h1>atributos</h1>
			<pre><code class="language-javaScript">background(color);
//define el color del fondo

fill(color);
//define el color para rellenar

noFill();
//deshabilita el relleno

stroke(color);
//define el color del trazo

strokeWeight(grosor);
//define el ancho del trazo en píxeles

noStroke();
//deshabilita el trazo

ellipseMode(MODE);
rectMode(MODE);
//CENTER,CORNER (centro, esquina)

textSize(pixels);
//tamaño del texto en píxeles
</code></pre>
		</section>

		<section>
			<h1>lógica si/entonces</h1>
			<div class="logic">
				<pre><code class="language-javaScript">if(condición){
  //instrucciones
}

===  //igual a
!==  //no es igual a
>   //mayor que
<   //menor que
>=  //mayor o igual que
<=  //menor o igual que

</code></pre>
<div id="ifelse-canvas"></div>

		</div>

		</section>

		<footer>
			Compiled by Ben Moren <a href="http://benmoren.com">http://benmoren.com</a> CC-BY-SA-NC-4.0
			<br>
			Traducción por <a	href="http://andyvaldesvaldes.com">Andy Valdés Valdés</a>
			<br>
      Correcciones por <a href="https://github.com/trikaphundo">Daniel Fernández</a>
		</footer>

	</div>

	</article>


  <!-- The word "condición" is femenine, thus to prevent
  a misgender match with "true/false" in the diagram,
  the words "true" and "false" must translate to
  their femenine gender: "verdadera" and "falsa"-->
	<script type="text/javascript">
		// Terms to translate for diagrams
		var terms = {
			"width": "ancho",
			"height": "alto",
			"stop": "fin",
			"start": "inicio",
			"true": "verdadera",
			"false": "falsa",
			"continue_program": "continua el programa",
			"test": "condición",
			"statements": "instrucciones"
		};
	</script>

	<script src="prism.js"></script>
	<script src="p5.min.js"></script>
	<script src="diagram.js"></script>
</body>

</html>


================================================
FILE: docs/fr.html
================================================
<!DOCTYPE html>
<html>
<head>
	<title>p5.js Cheat Sheet</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />

	<link rel="stylesheet" type="text/css" href="style.css" media="all">
	<link rel="stylesheet" type="text/css" href="prism.css" media="all">

</head>
<body>
	<!-- Include the menu, there's likely a more elegent way to do this -->
	<script src="menu.js"></script>

	<article id="cheat-sheet">
		<div class="column">
			<header>
				<h1 id="title">p5.js</h1>
				<p id="subtitle">l’antiseche <br> des débutants</p>
			</header>

			<section>
				<h1>structure du programme</h1>
				<pre><code class="language-javaScript">//tourne une fois, au démarrage
function setup(){
  createCanvas(800,600);
}

//tourne en boucle, aprés setup()
function draw(){
  //instructions de dessin
}
</code></pre>
			</section>

			<section>
				<h1>variables système</h1>
				<pre><code class="language-javaScript">windowWidth / windowHeight
//largeur / hauteur de fenêtre

width / height
//largueur / hauteur de la toile

mouseX / mouseY
//position horizontale / verticale actuelle de la souris
</code></pre>
			</section>

			<section>
				<h1>feedback non-visuel</h1>
				<pre><code class="language-javaScript">print();
//écrit dans la console
</code></pre>
			</section>

			<section>
				<h1>couleurs</h1>
				<pre><code class="language-javaScript">fill(120); //gris: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //couleur par noms
fill('#ccc'); //3-digit hex
fill('#222222'); //6-digit hex fill
color(0, 0, 255); //object p5.Color
</code></pre>
			</section>
		</div>

		<div class="column">

			<section>
				<h1>math</h1>
				<pre><code class="language-javaScript">+ - / *

random(limite basse,limite haute);

map(valeur, in1, in2, out1, out2);
//map une valeur entre 2 intervales in/out
</code></pre>
			</section>

			<section>
				<h1>primitives 2d</h1>
				<pre><code class="language-javaScript">line(x1, y1, x2, y2);

ellipse(x, y, largeur, hauteur);

rect(x, y, largeur, hauteur);

arc(x, y, largeur, hauteur, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //ajoute plus de vertices
endShape(CLOSE);

text("string", x, y, boxwidth, boxheight);
</code></pre>

				<ul>
					<li class="canvas-container">
						<h2>grille</h2>
						<div id="grid-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>line()</h2>
						<div id="line-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>ellipse()</h2>
						<div id="ellipse-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>rect()</h2>
						<div id="rect-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>arc()</h2>
						<div id="arc-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>vertex()</h2>
						<div id="vertex-canvas"></div>
					</li>
				</ul>
			</section>

		</div>

		<div class="column">
			<section>
				<h1>attributs</h1>
				<pre><code class="language-javaScript">background(couleur);
//définit la couleur de fond

fill(couleur);
//définit la couleur de remplissage

noFill();
//désactive le remplissage

stroke(couleur);
//définit la couleur de contour

strokeWeight(épaisseur);
//définit l’épaisseur de contour

noStroke();
//désactive le contour

ellipseMode(MODE);
rectMode(MODE);
//CENTER,CORNER

textSize(pixels);
</code></pre>
			</section>

			<section>
				<h1>logique if/then</h1>
				<div class="logic">

				<pre><code class="language-javaScript">if(condition){
  //instructions
}

=== égal à
!== différent de
>  supérieur à
<  inférieur à
>= supérieur ou égal à
<= inférieur ou égal à</code></pre>
				<div id="ifelse-canvas"></div>
			</div>

			<footer>
				Compiled by Ben Moren <a href="http://benmoren.com">http://benmoren.com</a> CC BY SA NC 4.0<br/>
				Translation By <a href="https://github.com/rich-gg">@rich-gg</a>
			</footer>

			</section>
		</div>
	</article>



	<script type="text/javascript">

	// Terms to translate
	var terms = {
		"width": "largeur",
		"height": "hauteur",
		"stop": "stop",
		"start": "start",
		"true": "vraie",
		"false": "fausse",
		"continue_program": "continuer\nle\nprogramme",
		"test": "condition",
		"statements": "instructions"
	};

	</script>
	<script src="prism.js"></script>
	<script src="p5.min.js"></script>
	<script src="diagram.js"></script>
</body>
</html>


================================================
FILE: docs/id.html
================================================
<!DOCTYPE html>
<html>

<head>
	<title>p5.js Cheat Sheet</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css" media="all">
	<link rel="stylesheet" href="prism.css">

</head>

<body>

	<!-- Include the menu, there's likely a more elegent way to do this -->
	<script src="menu.js"></script>

		<article id="cheat-sheet">
			<div class="column">

			<header>
				<h1 id="title">p5.js</h1>
				<p id="subtitle">lembar contekan <br> untuk pemula!</p>
			</header>

			<section>
				<h1>struktur program</h1>
				<pre><code class="language-javaScript">//berjalan sekali ketika program dimulai
function setup(){
  createCanvas(800,600); //lebar,tinggi dalam satuan piksel
}

//berjalan terus menerus setelah fungsi setup
function draw(){
  //me-render kode program terus menerus
}
</code></pre>
			</section>

			<section>
				<h1>variabel sistem</h1>
				<pre><code class="language-javaScript">windowWidth / windowHeight
//lebar / tinggi jendela browser

width / height
//lebar / tinggi kanvas

mouseX / mouseY
//posisi mouse horisontal/vertikal saat ini
</code></pre>
			</section>

			<section>
				<h1>umpan balik non-visual</h1>
				<pre><code class="language-javaScript">print();
//menampilkan data ke konsol

//double slash untuk memberikan komentar
//(program akan melewatinya)
</code></pre>
			</section>

			<section>
				<h1>warna</h1>
				<pre><code class="language-javaScript">fill(120); //abu: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alfa/transparansi
fill('red'); //warna dengan bentuk string
fill('#ccc'); //warna dengan 3-digit heksadesimal
fill('#222222'); //warna dengan 6-digit heksadesimal
color(0, 0, 255); //objek p5.Color
</code></pre>
			</section>


	</div>
	<!-- End First Col -->

	<div class="column">

		<section>
			<h1>perhitungan numerik</h1>
			<pre><code class="language-javaScript">+ - / *  //dasar operasi matematika

random(low,high); //mengacak angka yang berkisar

map(value, in1, in2, out1, out2);
//memetakan nilai dari rentang input ke rentang output
</code></pre>
		</section>

<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->
		<!-- <section>
			<h1>variable definition</h1>
			<pre><code class="language-javaScript">//let & keyword defines a variable
// use single = to store data in the variable
let variableName = 100;
let myWords = "a string of text!";
let randStorage = random(0,255); // store returned data
</code></pre>
		</section> -->

		<section>
			<h1>bentuk 2d</h1>
			<pre><code class="language-javaScript">line(x1, y1, x2, y2);

ellipse(x, y, width, height);

rect(x, y, width, height);

arc(x, y, width, height, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //silakan tambahkan lebih banyak simpul/titik
endShape(CLOSE);

text("string", x, y, boxwidth, boxheight);
</code></pre>

			<ul>
				<li class="canvas-container">
					<h2>sistem grid</h2>
					<div id="grid-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>line()</h2>
					<div id="line-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>ellipse()</h2>
					<div id="ellipse-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>rect()</h2>
					<div id="rect-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>arc()</h2>
					<div id="arc-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>vertex()</h2>
					<div id="vertex-canvas"></div>
				</li>
			</ul>
		</section>



	</div>
	<!-- End Second Col -->
	<div class="column">

		<section>
			<h1>atribut</h1>
			<pre><code class="language-javaScript">background(color);
//atur warna latar

fill(color);
//atur warna isian (bentuk 2d)

noFill();
//menonaktifkan isian

stroke(color);
//atur warna stroke (garis luar bentuk 2d)

strokeWeight(weight);
//atur lebar garis dalam piksel

noStroke();
//menonaktifkan stroke

ellipseMode(MODE);
rectMode(MODE);
//CENTER,CORNER

textSize(pixels);
</code></pre>
		</section>

		<section>
			<h1>logika bersyarat if/then</h1>
			<div class="logic">
				<pre><code class="language-javaScript">if(test){
  //pernyataan / statements
}

===  //sama dengan
!==  //tidak sama dengan
>   //lebih dari
<   //kurang dari
>=  //lebih dari atau sama dengan
<=  //kurang dari atau sama dengan

</code></pre>
<div id="ifelse-canvas"></div>

		</div>

		</section>

		<footer>
			Compiled by Ben Moren <a href="http://benmoren.com">http://benmoren.com</a> CC-BY-SA-NC-4.0
			<br>
			Translation by <a href="https://github.com/hilmizul">Zul Hilmi</a>
		</footer>

	</div>

	</article>


	<script type="text/javascript">
		// Terms to translate for diagrams
		var terms = {
			"width": "width",
			"height": "height",
			"stop": "stop",
			"start": "start",
			"true": "true",
			"false": "false",
			"continue_program": "continue program",
			"test": "test",
			"statements": "pernyataan"
		};
	</script>

	<script src="prism.js"></script>
	<script src="p5.min.js"></script>
	<script src="diagram.js"></script>
</body>

</html>


================================================
FILE: docs/index.html
================================================
<!DOCTYPE html>
<html>

<head>
	<title>p5.js Cheat Sheet</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css" media="all">
	<link rel="stylesheet" href="prism.css">

</head>

<body>

	<!-- Include the menu, there's likely a more elegent way to do this -->
	<script src="menu.js"></script>

		<article id="cheat-sheet">
			<div class="column">

			<header>
				<h1 id="title">p5.js</h1>
				<p id="subtitle">a cheat sheet <br> for beginners!</p>
			</header>

			<section>
				<h1>program structure</h1>
				<pre><code class="language-javaScript">//runs once when program starts
function setup(){
  createCanvas(800,600); //width,height in pixels
}

//run continuously after setup
function draw(){
  //rendering loop
}
</code></pre>
			</section>

			<section>
				<h1>system variables</h1>
				<pre><code class="language-javaScript">windowWidth / windowHeight
//width / height of window

width / height
//width / height of canvas

mouseX / mouseY
//current horizontal / vertical mouse position
</code></pre>
			</section>

			<section>
				<h1>non-visual feedback</h1>
				<pre><code class="language-javaScript">print();
//report data to the output console

//double slash to comment code (program skips it)
</code></pre>
			</section>

			<section>
				<h1>color</h1>
				<pre><code class="language-javaScript">fill(120); //gray: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //color string
fill('#ccc'); //3-digit hex
fill('#222222'); //6-digit hex fill
color(0, 0, 255); //p5.Color object
</code></pre>
			</section>


	</div>
	<!-- End First Col -->

	<div class="column">

		<section>
			<h1>math</h1>
			<pre><code class="language-javaScript">+ - / *  //basic math operators

random(low,high); //ranged random number

map(value, in1, in2, out1, out2);
//map a value from input range to output range
</code></pre>
		</section>

<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->
		<!-- <section>
			<h1>variable definition</h1>
			<pre><code class="language-javaScript">//let & keyword defines a variable
// use single = to store data in the variable
let variableName = 100;
let myWords = "a string of text!";
let randStorage = random(0,255); // store returned data
</code></pre>
		</section> -->

		<section>
			<h1>2d primitives</h1>
			<pre><code class="language-javaScript">line(x1, y1, x2, y2);

ellipse(x, y, width, height);

rect(x, y, width, height);

arc(x, y, width, height, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //add more vertex
endShape(CLOSE);

text("string", x, y, boxwidth, boxheight);
</code></pre>

			<ul>
				<li class="canvas-container">
					<h2>grid system</h2>
					<div id="grid-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>line()</h2>
					<div id="line-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>ellipse()</h2>
					<div id="ellipse-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>rect()</h2>
					<div id="rect-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>arc()</h2>
					<div id="arc-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>vertex()</h2>
					<div id="vertex-canvas"></div>
				</li>
			</ul>
		</section>



	</div>
	<!-- End Second Col -->
	<div class="column">

		<section>
			<h1>attributes</h1>
			<pre><code class="language-javaScript">background(color);
//set the background color

fill(color);
//set the fill color

noFill();
//disables fill

stroke(color);
//set the stroke color

strokeWeight(weight);
//set the stroke’s width in pixels

noStroke();
//disables stroke

ellipseMode(MODE);
rectMode(MODE);
//CENTER,CORNER

textSize(pixels);
</code></pre>
		</section>

		<section>
			<h1>if/then logic</h1>
			<div class="logic">
				<pre><code class="language-javaScript">if(test){
  //statements
}

===  //equal to 
!==  //not equal
>   //greater than
<   //less than
>=  //greater than or equal
<=  //less than or equal

</code></pre>
<div id="ifelse-canvas"></div>

		</div>

		</section>

		<footer>
			Compiled by Ben Moren <a href="http://benmoren.com">http://benmoren.com</a> CC-BY-SA-NC-4.0
			<br>
			Translation by Ben Moren
		</footer>

	</div>

	</article>


	<script type="text/javascript">
		// Terms to translate for diagrams
		var terms = {
			"width": "width",
			"height": "height",
			"stop": "stop",
			"start": "start",
			"true": "true",
			"false": "false",
			"continue_program": "continue program",
			"test": "test",
			"statements": "statements"
		};
	</script>

	<script src="prism.js"></script>
	<script src="p5.min.js"></script>
	<script src="diagram.js"></script>
</body>

</html>


================================================
FILE: docs/it.html
================================================
<!DOCTYPE html>
<html>

<head>
	<title>p5.js Cheat Sheet</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css" media="all">
	<link rel="stylesheet" href="prism.css">

</head>

<body>

	<!-- Include the menu, there's likely a more elegent way to do this -->
	<script src="menu.js"></script>

		<article id="cheat-sheet">
			<div class="column">

			<header>
				<h1 id="title">p5.js</h1>
				<p id="subtitle">promemoria <br> per principianti</p>
			</header>

			<section>
				<h1>struttura del programma</h1>
				<pre><code class="language-javaScript">//eseguito una volta all'avvio del programma
function setup(){
  createCanvas(800,600); //larghezza,altezza
}

//eseguito continuamente dopo il setup
function draw(){
  //istruzioni di disegno
}
</code></pre>
			</section>

			<section>
				<h1>variabili di sistema</h1>
				<pre><code class="language-javaScript">windowWidth / windowHeight
//larghezza / altezza della finestra

width / height
//larghezza / altezza dell'area di disegno

mouseX / mouseY
//posizione orizzontale / verticale del mouse
</code></pre>
			</section>

			<section>
				<h1>feedback non grafico</h1>
				<pre><code class="language-javaScript">print();
//visualizza informazioni nella console

//doppia barra per commentare il codice
</code></pre>
			</section>

			<section>
				<h1>colore</h1>
				<pre><code class="language-javaScript">fill(120); //grigio: 0-255
fill(100,125,255); //rosso, verde, blu: 0-255
fill(255, 0, 0, 50); //rosso, verde, blu, alfa
fill('red'); //nome colore (in inglese)
fill('#ccc'); //codice esadecimale a 3 cifre
fill('#222222'); //codice esadecimale a 6 cifre
color(0, 0, 255); //oggetto p5.Color
</code></pre>
			</section>


	</div>
	<!-- End First Col -->

	<div class="column">

		<section>
			<h1>matematica</h1>
			<pre><code class="language-javaScript">+ - / *  //operatori matematici di base

random(minimo, massimo); //numero casuale

map(valore, attuale1, attuale2, nuovo1, nuovo2);
//mappa un valore dall'intervallo attuale a uno nuovo
</code></pre>
		</section>

<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->
		<!-- <section>
			<h1>variable definition</h1>
			<pre><code class="language-javaScript">//let & keyword defines a variable
// use single = to store data in the variable
let variableName = 100;
let myWords = "a string of text!";
let randStorage = random(0,255); // store returned data
</code></pre>
		</section> -->

		<section>
			<h1>primitive 2d</h1>
			<pre><code class="language-javaScript">line(x1, y1, x2, y2); //linea

ellipse(x, y, larghezza, altezza); //ellisse

rect(x, y, larghezza, altezza); //rettangolo

arc(x, y, larghezza, altezza, inizio, fine); //arco

beginShape(); //poligono
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //aggiungi eventuali altri vertici
endShape(CLOSE);

text("testo", x, y, larghezzaParagrafo, altezzaParagrafo);
</code></pre>

			<ul>
				<li class="canvas-container">
					<h2>coordinate</h2>
					<div id="grid-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>line()</h2>
					<div id="line-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>ellipse()</h2>
					<div id="ellipse-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>rect()</h2>
					<div id="rect-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>arc()</h2>
					<div id="arc-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>vertex()</h2>
					<div id="vertex-canvas"></div>
				</li>
			</ul>
		</section>



	</div>
	<!-- End Second Col -->
	<div class="column">

		<section>
			<h1>attributi grafici</h1>
			<pre><code class="language-javaScript">background(colore);
//colora l'intera area di disegno

fill(colore);
//imposta il colore di riempimento

noFill();
//disattiva il riempimento

stroke(colore);
//imposta il colore dei contorni

strokeWeight(spessore);
//imposta lo spessore dei contorni in pixel

noStroke();
//disattiva il disegno dei contorni

ellipseMode(ancoraggio);
rectMode(ancoraggio);
//ancoraggi: CENTER, CORNER

textSize(altezzaCarattere);
</code></pre>
		</section>

		<section>
			<h1>logica se/allora</h1>
			<div class="logic">
				<pre><code class="language-javaScript">if(condizione){
  //istruzioni
}

===  //uguale a
!==  //diverso da
>   //maggiore di
<   //minore di
>=  //maggiore o uguale
<=  //minore o uguale

</code></pre>
<div id="ifelse-canvas"></div>

		</div>

		</section>

		<footer>
			Redatto da Ben Moren <a href="http://benmoren.com">http://benmoren.com</a> CC-BY-SA-NC-4.0
			<br>
			Tradotto da <a href="https:/codesthesia.net">Antonio Belluscio</a>
		</footer>

	</div>

	</article>


	<script type="text/javascript">
		// Terms to translate for diagrams
		var terms = {
			"width": "larghezza",
			"height": "altezza",
			"stop": "fine",
			"start": "inizio ",  // the final space avoids overlapping with the arc
			"true": "vero",
			"false": "falso",
			"continue_program": "continua il programma",
			"test": "condizione",
			"statements": "istruzioni"
		};
	</script>

	<script src="prism.js"></script>
	<script src="p5.min.js"></script>
	<script src="diagram.js"></script>
</body>

</html>


================================================
FILE: docs/ja.html
================================================
<!DOCTYPE html>
<html>
<head>
	<title>p5.js Cheat Sheet</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />

	<link rel="stylesheet" type="text/css" href="style.css" media="all">
	<link rel="stylesheet" type="text/css" href="prism.css" media="all">

</head>
<body id="ja">
	<!-- Include the menu, there's likely a more elegent way to do this -->
	<script src="menu.js"></script>

	<article id="cheat-sheet">
		<div class="column">
			<header>
				<h1 id="title">p5.js</h1>
				<p id="subtitle">ビギナー向けチートシート</p>
			</header>

			<section>
				<h1>プログラムの構造</h1>
				<pre><code class="language-javaScript">// プログラムが開始するとき一度だけ実行
function setup(){
  createCanvas(800,600);
}

// setupが実行された後，継続して実行
function draw(){
  // レンダリングのループ
}
</code></pre>
			</section>

			<section>
				<h1>システム変数</h1>
				<pre><code class="language-javaScript">windowWidth / windowHeight
//ウィンドウの 幅 / 高さ

width / height
//キャンバスの 幅 / 高さ

mouseX / mouseY
//現在の 水平(X方向) / 垂直(Y方向)のマウス位置
</code></pre>
			</section>

			<section>
				<h1>テキストでのフィードバック</h1>
				<pre><code class="language-javaScript">
print(something);
//コンソールにデータを出力して表示
</code></pre>
			</section>

			<section>
				<h1>色</h1>
				<pre><code class="language-javaScript">fill(120); //グレースケール:0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //文字列で色を指定
fill('#ccc'); //3桁のHex
fill('#222222'); //6桁のHex
color(0, 0, 255); //p5.Colorオブジェクト
</code></pre>
			</section>
		</div>

		<div class="column">

			<section>
				<h1>数値計算</h1>
				<pre><code class="language-javaScript">+ - / *

random(low,high);

map(value, in1, in2, out1, out2);
//入力値の範囲にある値を出力値の範囲にマッピングする
</code></pre>
			</section>

			<section>
				<h1>2Dのプリミティブ図形</h1>
				<pre><code class="language-javaScript">line(x1, y1, x2, y2);

ellipse(x, y, width, height);

rect(x, y, width, height);

arc(x, y, width, height, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  // 頂点の追加
endShape(CLOSE);

text("string", x, y, boxwidth, boxheight);
</code></pre>

				<ul>
					<li class="canvas-container">
						<h2>グリッドシステム</h2>
						<div id="grid-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>line()</h2>
						<div id="line-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>ellipse()</h2>
						<div id="ellipse-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>rect()</h2>
						<div id="rect-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>arc()</h2>
						<div id="arc-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>vertex()</h2>
						<div id="vertex-canvas"></div>
					</li>
				</ul>
			</section>

		</div>

		<div class="column">
			<section>
				<h1>属性</h1>
				<pre><code class="language-javaScript">background(color);
//背景色を設定

fill(color);
//塗りつぶしの色を設定

noFill();
//塗りつぶしを無効

stroke(color);
//線の色を設定

strokeWeight(weight);
//線の太さを設定

noStroke();
//線を無効

ellipseMode(MODE);
rectMode(MODE);
//CENTER,CORNER

textSize(pixels);
</code></pre>
			</section>

			<section>
				<h1>条件分岐</h1>

				<div class="logic">
				<pre><code class="language-javaScript">if(test){
  //statements
}

=== 等しい
!== 等しくない
>  より大きい
<  より小さい
>= 以上
<= 以下</code></pre>
				<div id="ifelse-canvas"></div>
			</section>

			<footer>
				Compiled by Ben Moren <a href="http://benmoren.com">http://benmoren.com</a> CC BY SA NC 4.0 <br>
				Translation by: <a href="https://twitter.com/takawo">Takawo Shunsuke</a>
			</footer>
		</div>
		</div>
	</article>



	<script type="text/javascript">


	// Terms to translate for diagrams
	var terms = {
		"width": "width",
		"height": "height",
		"stop": "stop",
		"start": "start",
		"true": "true",
		"false": "false",
		"continue_program": "continue program",
		"test": "test",
		"statements": "statements"
	};




	</script>
	<script src="prism.js"></script>
	<script src="p5.min.js"></script>
	<script src="diagram.js"></script>
</body>
</html>


================================================
FILE: docs/ko.html
================================================
<!DOCTYPE html>
<html>

<head>
	<title>p5.js 한글 치트 시트</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css" media="all">
	<link rel="stylesheet" href="prism.css">

</head>

<body>

	<!-- Include the menu, there's likely a more elegent way to do this -->
	<script src="menu.js"></script>

		<article id="cheat-sheet">
			<div class="column">

			<header>
				<h1 id="title">p5.js</h1>
				<p id="subtitle">초보자를 위한 치트 시트!</p>
			</header>

			<section>
				<h1>프로그램 구조</h1>
				<pre><code class="language-javaScript">// 프로그램이 시작될때 한번 실행됨
function setup(){
  createCanvas(800,600); // 픽셀단위의 가로, 세로 크기
}

// setup이 실행된 이후 반복되서 실행됨
function draw(){
  // 렌더링 반복
}
</code></pre>
			</section>

			<section>
				<h1>시스템 변수들</h1>
				<pre><code class="language-javaScript">windowWidth / windowHeight
// 윈도우의 가로/세로

width / height
// 캔버스의 가로 / 세로

mouseX / mouseY
// 현재의 마우스의 x/y 좌표
</code></pre>
			</section>

			<section>
				<h1> 그래픽으로 출력되지 않는 피드백</h1>
				<pre><code class="language-javaScript">print();
// 브라우저의 콘솔에 출력

// 주석처리를 위해 더블 슬래시를 사용 (프로그램이 무시함)
</code></pre>
			</section>

			<section>
				<h1>컬러</h1>
				<pre><code class="language-javaScript">fill(120); // 흑백 : 0-255의 범주를 가짐
fill(100,125,255); //r, g, b: 0-255의 범주를 가짐
fill(255, 0, 0, 50); //r, g, b, 알파(투명도)
fill('red'); // 컬러 문자열
fill('#ccc'); // 3-digit의 HEX 코드
fill('#222222'); // 6-digit의 HEX로 채움
color(0, 0, 255); // p5.Color 오브젝트
</code></pre>
			</section>


	</div>
	<!-- End First Col -->

	<div class="column">

		<section>
			<h1>수학</h1>
			<pre><code class="language-javaScript">+ - / *  // 기본적인 수학 연산자

random(low,high); // 범위가 있는 난수 생성하기

map(value, in1, in2, out1, out2);
// 어떤 값(value)이 가질수 있는 최소(in1), 최대(in2) 의 범위를 갖는데
// 이를 최소(out1), 최대(out2) 범주로 변환했을때의 값을 계산
</code></pre>
		</section>

<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->
		<!-- <section>
			<h1>variable definition</h1>
			<pre><code class="language-javaScript">//let & keyword defines a variable
// use single = to store data in the variable
let variableName = 100;
let myWords = "a string of text!";
let randStorage = random(0,255); // store returned data
</code></pre>
		</section> -->

		<section>
			<h1>2차원 기초도형</h1>
			<pre><code class="language-javaScript">line(x1, y1, x2, y2);

ellipse(x, y, width, height);

rect(x, y, width, height);

arc(x, y, width, height, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  // 버택스를 추가한다.
endShape(CLOSE);

text("string", x, y, boxwidth, boxheight);
</code></pre>

			<ul>
				<li class="canvas-container">
					<h2>그리드 시스템</h2>
					<div id="grid-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>line()</h2>
					<div id="line-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>ellipse()</h2>
					<div id="ellipse-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>rect()</h2>
					<div id="rect-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>arc()</h2>
					<div id="arc-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>vertex()</h2>
					<div id="vertex-canvas"></div>
				</li>
			</ul>
		</section>



	</div>
	<!-- End Second Col -->
	<div class="column">

		<section>
			<h1>속성들</h1>
			<pre><code class="language-javaScript">background(color);
// 배경색을 지정

fill(color);
// 채울 색을 지정

noFill();
// 채우기를 비활성화 함

stroke(color);
// 선의 색을 지정

strokeWeight(weight);
// 선의 두꼐를 픽셀단위로 지정

noStroke();
// 선을 비활성화

ellipseMode(MODE);
rectMode(MODE);
// CENTER,CORNER

textSize(pixels);
</code></pre>
		</section>

		<section>
			<h1>if/then logic</h1>
			<div class="logic">
				<pre><code class="language-javaScript">if(test){
  // 조건문의 구조
}

===  // 같은가? 
!==  // 다른가?
>   // 큰가?
<   // 작은가?
>=  // 크거나 같은가?
<=  // 작거나 같은가?

</code></pre>
<div id="ifelse-canvas"></div>

		</div>

		</section>

		<footer>
			Compiled by Ben Moren <a href="http://benmoren.com">http://benmoren.com</a> CC-BY-SA-NC-4.0
			<br>
			Translation by <a href="http://github.com/icq4ever">Yi donghoon</a>
		</footer>

	</div>

	</article>


	<script type="text/javascript">
		// Terms to translate for diagrams
		var terms = {
			"width": "width",
			"height": "height",
			"stop": "stop",
			"start": "start",
			"true": "true",
			"false": "false",
			"continue_program": "continue program",
			"test": "test",
			"statements": "statements"
		};
	</script>

	<script src="prism.js"></script>
	<script src="p5.min.js"></script>
	<script src="diagram.js"></script>
</body>

</html>


================================================
FILE: docs/menu.js
================================================
// The menu's option arrtibute should be the ISO code associated with the language & HTML page
document.write(`
<nav id="page-header">
  <ul id="language-selection">
    <li id="print"> 🖨 </li>
    <li> | </li>
    <select id="dropdownmenu" onchange="window.location = this.value + '.html' ">
    <option value="index"> English </option>
    <option value="ca"> Català </option>
    <option value="es"> Español </option>
    <option value="fr"> Français </option>
    <option value="it"> Italiano </option>
    <option value="de"> Deutsch </option>
    <option value="nl"> Nederlands </option>
    <option value="zh"> 中文（简体） </option>
    <option value="zh-tw"> 中文（繁體） </option>
    <option value="ja"> 日本語 </option>
    <option value="ko"> 한국어 </option>
    <option value="id"> Indonesia </option>
    <option value="pt"> Português </option>
    <option value="tr"> Türkçe </option>
    </select>
    <li> | </li>
    <li><a href="https://p5js.org/reference/">p5js Reference</a></li>
  </ul>
</nav>

<style>
  #print:hover{cursor:pointer;}
</style>

`)

//select/toggle the correct language from the dropdown after making a selection (there might be a better way to do this?)
//If path points to a directory, user agent will open the "index.html"
//file in it, but will not append it to the window's path name. So treat
//"" as "index.html"
var path = window.location.pathname.split("/").pop()
if(path === ""){
  path = "index.html";
}
var lang = path.split(".")[0]
// console.log( lang );
document.querySelector(`option[value=${lang}]`).selected = true


//warning for printing to use chrome
document.getElementById('print').addEventListener('click', function(){

  let browser = navigator.userAgent.split(')').reverse()[0].match(/(?!Gecko|Version|[A-Za-z]+?Web[Kk]it)[A-Z][a-z]+/g)[0]

  console.log(browser)
  if(browser != "Chrome"){
    alert('The p5.js cheatsheet prints with best results from Chrome! \n You might consider printing from the PDF available on github for better results! \n https://github.com/bmoren/p5js-cheat-sheet')
  }
  print();
})


================================================
FILE: docs/nl.html
================================================
<!DOCTYPE html>
<html>
<head>
	<title>p5.js Cheat Sheet</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />

	<link rel="stylesheet" type="text/css" href="style.css" media="all">
	<link rel="stylesheet" type="text/css" href="prism.css" media="all">

</head>
<body>
	<!-- Include the menu, there's likely a more elegent way to do this -->
	<script src="menu.js"></script>

	<article id="cheat-sheet">
		<div class="column">
			<header>
				<h1 id="title">p5.js</h1>
				<p id="subtitle">Een spiekbrief <br>voor beginners!</p>
			</header>

			<section>
				<h1>programma structuur</h1>
				<pre><code class="language-javaScript">//wordt eenmaal uitgevoerd bij start programma
function setup(){
  createCanvas(800,600);
}

//draait continu na setup()
function draw(){
  //programmacode
}
</code></pre>
			</section>

			<section>
				<h1>systeemvariabelen</h1>
				<pre><code class="language-javaScript">windowWidth / windowHeight
//breedte / hoogte van het venster

width / height
//breedte / hoogte van het canvas

mouseX / mouseY
//huidige horizontale / verticale muispositie
</code></pre>
			</section>

			<section>
				<h1>console uitvoer</h1>
				<pre><code class="language-javaScript">print("tekst" + variabele);
//geef informatie weer in de console
</code></pre>
			</section>

			<section>
				<h1>kleur</h1>
				<pre><code class="language-javaScript">fill(120); //grijs: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //kleur aanduiding
fill('#ccc'); //3-cijferige hex-code
fill('#222222'); //6-cijferige hex-code
color(0, 0, 255); //p5 kleurobject
</code></pre>
			</section>
		</div>

		<div class="column">
			<section>
				<h1>wiskunde</h1>
				<pre><code class="language-javaScript">+ - / *

random(minimum,maximum);

map(waarde, invoer-min, invoer-max, uitvoer-min, uitvoer-max);
//converteer een waarde van invoer naar uitvoer
</code></pre>
			</section>

			<section>
				<h1>2d-vormen</h1>
				<pre><code class="language-javaScript">line(x1, y1, x2, y2);

ellipse(x, y, breedte, hoogte);

rect(x, y, breedte, hoogte);

arc(x, y, breedte, hoogte, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //voeg meer vertex() toe
endShape(CLOSE);

text("mijn tekst", x, y, breedte, hoogte);
</code></pre>

				<ul>
					<li class="canvas-container">
						<h2>grid-systeem</h2>
						<div id="grid-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>line()</h2>
						<div id="line-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>ellipse()</h2>
						<div id="ellipse-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>rect()</h2>
						<div id="rect-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>arc()</h2>
						<div id="arc-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>vertex()</h2>
						<div id="vertex-canvas"></div>
					</li>
				</ul>
			</section>

		</div>

		<div class="column">
			<section>
				<h1>attributen</h1>
				<pre><code class="language-javaScript">background(kleur);
//stel de achtergrondkleur in

fill(kleur);
//stel de vulkleur in

noFill();
//geen vulkleur

stroke(kleur);
//stel de lijnkleur in

strokeWeight(dikte);
//stel de lijndikte in

noStroke();
//geen lijn

ellipseMode(MODE);
rectMode(MODE);
//gebruik CENTER of CORNER

textSize(pixels);
</code></pre>
			</section>

			<section>
				<h1>als/dan logica</h1>
				<div class="logic">
				<pre><code class="language-javaScript">if(conditie){
  //programmacode
}

=== gelijk aan
!== niet gelijk
>  groter dan
<  kleiner dan
>= groter dan of gelijk
<= kleiner dan of gelijk

</code></pre>
				<div id="ifelse-canvas"></div>
			</section>
			<footer>
				Compiled by Ben Moren <a href="http://benmoren.com">http://benmoren.com</a> CC BY SA NC 4.0,<br/>
				Translation by <a href="https://github.com/vincentsijben">Vincent Sijben</a>.
			</footer>
		</div>
		</div>
	</article>



	<script type="text/javascript">

	// Terms to translate for diagrams
	var terms = {
		"width": "breedte",
		"height": "hoogte",
		"stop": "stop",
		"start": "start",
		"true": "waar",
		"false": "onwaar",
		"continue_program": "programma\ngaat verder",
		"test": "conditie",
		"statements": "programmacode"
	};

	</script>
	<script src="prism.js"></script>
	<script src="p5.min.js"></script>
	<script src="diagram.js"></script>
</body>
</html>


================================================
FILE: docs/prism.css
================================================
/* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+css-extras+clike+javascript+java&plugins=line-numbers */

/*

  * p5.js highlighting based on the prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
  * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
  * @author Tim  Shedor

  @ Modified by Ben Moren for p5.js CheatSheet in Nov 2019

*/

code[class*="language-"],
pre[class*="language-"],
textarea {
  color: #222;
  /* font-family:
      "inconsolata",
      Consolas,
      Monaco,
      'Andale Mono',
      monospace; */
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  font-size: 1em !important;
}

/* Code blocks */
pre[class*="language-"] {
  position:relative;
  padding: 0.5em 1.0em;
  margin: 0.5em 0 0 -0.5em;
  /* border-left: 0.5em solid rgba(255, 255, 255, 0.5); */
   /* coy og blue 10px solid  358ccb  */
  background-color: #fff; /* coy og white #fdfdfd  */
  /* lines */
  background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
  background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
  background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
  background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
  background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);
  background-size: 2.9em 2.9em; /* adjusts height of alternating lines */
  background-origin:content-box;
  /* set overflow to just let the code roll  */
  overflow:auto;
  /* or uncomment this to let an inner vertical scroll be triggered,
    but be generous as to when
  max-height:36em; */
}

code[class*="language"] {
}


:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  margin-bottom: 1em;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  position:relative;
  padding: .2em;
  -webkit-border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  -ms-border-radius: 0.3em;
  -o-border-radius: 0.3em;
  border-radius: 0.3em;
  color: #333;
  border: 1px solid rgba(0, 0, 0, 0.1);
}


:not(pre) > code[class*="language-"]:after,
pre[class*="language-"]:after {
  right: 0.75em;
  left: auto;
}

/*  code colors */
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #A0A0A0; /* light gray */ /* 727272 898189 919191 A0A0A0 AFAFAF BEBEBE coy og: #7D8B99; */
}

.token.punctuation {
  color: #666; /* darker gray */ /* og coy 5F6364 */
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.function-name,
.token.constant,
.token.symbol {
  color: #ed225d; /* not p5 pink, but related */ /* og coy c92c2c a reddish color */
}

.token.selector,
.token.attr-name,
.token.string,
.token.function,
.token.builtin {
  color: #00A1D3; /* blue */ /* 877923  */  /* og coy 2f9c0a - green */
}

.token.operator,
.token.entity,
.token.url,
.token.variable {
  color: #a67f59; /* og coy a67f59 a light brown */
  background: rgba(255, 255, 255, 0.5);
}

.token.atrule,
.token.attr-value,
.token.keyword,
.token.class-name {
  color: #704F21; /* 9F944F brown */ /* og coy #1990b8 blue */
}

.token.regex,
.token.important {
  color: #e90; /* og coy e90 orange */
}
.language-css .token.string,
.style .token.string {
  color: #a67f59; /* og coy a67f59 a light brown */
  background: rgba(255, 255, 255, 0.5);
}

.token.important {
  font-weight: normal;
}

.token.entity {
  cursor: help;
}

.namespace {
  opacity: .7;
}

@media screen and (max-width:767px){
  pre[class*="language-"]:before,
  pre[class*="language-"]:after {
    bottom:14px;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
  }

}

/* Plugin styles */
.token.tab:not(:empty):before,
.token.cr:before,
.token.lf:before {
  color: #e0d7d1; /* og coy very light brown  */
}

pre.line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}

pre.line-numbers > code {
  position: relative;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em; /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  border-right: 1px solid #999;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

.line-numbers-rows > span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber;
}

.line-numbers-rows > span:before {
  content: counter(linenumber);
  color: #999;
  display: block;
  padding-right: 0.8em;
  text-align: right;
}


================================================
FILE: docs/prism.js
================================================
/* PrismJS 1.17.1
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+json */
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(u){var c=/\blang(?:uage)?-([\w-]+)\b/i,r=0;var _={manual:u.Prism&&u.Prism.manual,disableWorkerMessageHandler:u.Prism&&u.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof L?new L(e.type,_.util.encode(e.content),e.alias):Array.isArray(e)?e.map(_.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++r}),e.__id},clone:function n(e,t){var a,r,i=_.util.type(e);switch(t=t||{},i){case"Object":if(r=_.util.objId(e),t[r])return t[r];for(var o in a={},t[r]=a,e)e.hasOwnProperty(o)&&(a[o]=n(e[o],t));return a;case"Array":return r=_.util.objId(e),t[r]?t[r]:(a=[],t[r]=a,e.forEach(function(e,r){a[r]=n(e,t)}),a);default:return e}},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(e){var r=(/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(e.stack)||[])[1];if(r){var n=document.getElementsByTagName("script");for(var t in n)if(n[t].src==r)return n[t]}return null}}},languages:{extend:function(e,r){var n=_.util.clone(_.languages[e]);for(var t in r)n[t]=r[t];return n},insertBefore:function(n,e,r,t){var a=(t=t||_.languages)[n],i={};for(var o in a)if(a.hasOwnProperty(o)){if(o==e)for(var l in r)r.hasOwnProperty(l)&&(i[l]=r[l]);r.hasOwnProperty(o)||(i[o]=a[o])}var s=t[n];return t[n]=i,_.languages.DFS(_.languages,function(e,r){r===s&&e!=n&&(this[e]=i)}),i},DFS:function e(r,n,t,a){a=a||{};var i=_.util.objId;for(var o in r)if(r.hasOwnProperty(o)){n.call(r,o,r[o],t||o);var l=r[o],s=_.util.type(l);"Object"!==s||a[i(l)]?"Array"!==s||a[i(l)]||(a[i(l)]=!0,e(l,n,o,a)):(a[i(l)]=!0,e(l,n,null,a))}}},plugins:{},highlightAll:function(e,r){_.highlightAllUnder(document,e,r)},highlightAllUnder:function(e,r,n){var t={callback:n,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};_.hooks.run("before-highlightall",t);for(var a,i=e.querySelectorAll(t.selector),o=0;a=i[o++];)_.highlightElement(a,!0===r,t.callback)},highlightElement:function(e,r,n){var t=function(e){for(;e&&!c.test(e.className);)e=e.parentNode;return e?(e.className.match(c)||[,"none"])[1].toLowerCase():"none"}(e),a=_.languages[t];e.className=e.className.replace(c,"").replace(/\s+/g," ")+" language-"+t;var i=e.parentNode;i&&"pre"===i.nodeName.toLowerCase()&&(i.className=i.className.replace(c,"").replace(/\s+/g," ")+" language-"+t);var o={element:e,language:t,grammar:a,code:e.textContent};function l(e){o.highlightedCode=e,_.hooks.run("before-insert",o),o.element.innerHTML=o.highlightedCode,_.hooks.run("after-highlight",o),_.hooks.run("complete",o),n&&n.call(o.element)}if(_.hooks.run("before-sanity-check",o),!o.code)return _.hooks.run("complete",o),void(n&&n.call(o.element));if(_.hooks.run("before-highlight",o),o.grammar)if(r&&u.Worker){var s=new Worker(_.filename);s.onmessage=function(e){l(e.data)},s.postMessage(JSON.stringify({language:o.language,code:o.code,immediateClose:!0}))}else l(_.highlight(o.code,o.grammar,o.language));else l(_.util.encode(o.code))},highlight:function(e,r,n){var t={code:e,grammar:r,language:n};return _.hooks.run("before-tokenize",t),t.tokens=_.tokenize(t.code,t.grammar),_.hooks.run("after-tokenize",t),L.stringify(_.util.encode(t.tokens),t.language)},matchGrammar:function(e,r,n,t,a,i,o){for(var l in n)if(n.hasOwnProperty(l)&&n[l]){var s=n[l];s=Array.isArray(s)?s:[s];for(var u=0;u<s.length;++u){if(o&&o==l+","+u)return;var c=s[u],g=c.inside,f=!!c.lookbehind,d=!!c.greedy,h=0,m=c.alias;if(d&&!c.pattern.global){var p=c.pattern.toString().match(/[imsuy]*$/)[0];c.pattern=RegExp(c.pattern.source,p+"g")}c=c.pattern||c;for(var y=t,v=a;y<r.length;v+=r[y].length,++y){var k=r[y];if(r.length>e.length)return;if(!(k instanceof L)){if(d&&y!=r.length-1){if(c.lastIndex=v,!(O=c.exec(e)))break;for(var b=O.index+(f&&O[1]?O[1].length:0),w=O.index+O[0].length,A=y,P=v,x=r.length;A<x&&(P<w||!r[A].type&&!r[A-1].greedy);++A)(P+=r[A].length)<=b&&(++y,v=P);if(r[y]instanceof L)continue;S=A-y,k=e.slice(v,P),O.index-=v}else{c.lastIndex=0;var O=c.exec(k),S=1}if(O){f&&(h=O[1]?O[1].length:0);w=(b=O.index+h)+(O=O[0].slice(h)).length;var j=k.slice(0,b),N=k.slice(w),E=[y,S];j&&(++y,v+=j.length,E.push(j));var C=new L(l,g?_.tokenize(O,g):O,m,O,d);if(E.push(C),N&&E.push(N),Array.prototype.splice.apply(r,E),1!=S&&_.matchGrammar(e,r,n,y,v,!0,l+","+u),i)break}else if(i)break}}}}},tokenize:function(e,r){var n=[e],t=r.rest;if(t){for(var a in t)r[a]=t[a];delete r.rest}return _.matchGrammar(e,n,r,0,0,!1),n},hooks:{all:{},add:function(e,r){var n=_.hooks.all;n[e]=n[e]||[],n[e].push(r)},run:function(e,r){var n=_.hooks.all[e];if(n&&n.length)for(var t,a=0;t=n[a++];)t(r)}},Token:L};function L(e,r,n,t,a){this.type=e,this.content=r,this.alias=n,this.length=0|(t||"").length,this.greedy=!!a}if(u.Prism=_,L.stringify=function(e,r){if("string"==typeof e)return e;if(Array.isArray(e))return e.map(function(e){return L.stringify(e,r)}).join("");var n={type:e.type,content:L.stringify(e.content,r),tag:"span",classes:["token",e.type],attributes:{},language:r};if(e.alias){var t=Array.isArray(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(n.classes,t)}_.hooks.run("wrap",n);var a=Object.keys(n.attributes).map(function(e){return e+'="'+(n.attributes[e]||"").replace(/"/g,"&quot;")+'"'}).join(" ");return"<"+n.tag+' class="'+n.classes.join(" ")+'"'+(a?" "+a:"")+">"+n.content+"</"+n.tag+">"},!u.document)return u.addEventListener&&(_.disableWorkerMessageHandler||u.addEventListener("message",function(e){var r=JSON.parse(e.data),n=r.language,t=r.code,a=r.immediateClose;u.postMessage(_.highlight(t,_.languages[n],n)),a&&u.close()},!1)),_;var e=_.util.currentScript();if(e&&(_.filename=e.src,e.hasAttribute("data-manual")&&(_.manual=!0)),!_.manual){function n(){_.manual||_.highlightAll()}var t=document.readyState;"loading"===t||"interactive"===t&&e&&e.defer?document.addEventListener("DOMContentLoaded",n):window.requestAnimationFrame?window.requestAnimationFrame(n):window.setTimeout(n,16)}return _}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:(?!<!--)[^"'\]]|"[^"]*"|'[^']*'|<!--[\s\S]*?-->)*\]\s*)?>/i,greedy:!0},cdata:/<!\[CDATA\[[\s\S]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))}),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var n={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};n["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var t={};t[a]={pattern:RegExp("(<__[\\s\\S]*?>)(?:<!\\[CDATA\\[[\\s\\S]*?\\]\\]>\\s*|[\\s\\S])*?(?=<\\/__>)".replace(/__/g,a),"i"),lookbehind:!0,greedy:!0,inside:n},Prism.languages.insertBefore("markup","cdata",t)}}),Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
!function(s){var t=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,inside:{rule:/@[\w-]+/}},url:{pattern:RegExp("url\\((?:"+t.source+"|[^\n\r()]*)\\)","i"),inside:{function:/^url/i,punctuation:/^\(|\)$/}},selector:RegExp("[^{}\\s](?:[^{};\"']|"+t.source+")*?(?=\\s*\\{)"),string:{pattern:t,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var e=s.languages.markup;e&&(e.tag.addInlined("style","css"),s.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:e.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:s.languages.css}},alias:"language-css"}},e.tag))}(Prism);
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},{pattern:/(^|[^.])\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,function:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,operator:/--|\+\+|\*\*=?|=>|&&|\|\||[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?[.?]?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=\s*(?:$|[\r\n,.;})\]]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.js=Prism.languages.javascript;
Prism.languages.json={property:{pattern:/"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,greedy:!0},string:{pattern:/"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,greedy:!0},comment:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,number:/-?\d+\.?\d*(?:e[+-]?\d+)?/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:true|false)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}};


================================================
FILE: docs/pt.html
================================================
<!DOCTYPE html>
<html>

<head>
	<title>p5.js Cheat Sheet</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css" media="all">
	<link rel="stylesheet" href="prism.css">

</head>

<body>

	<!-- Include the menu, there's likely a more elegent way to do this -->
	<script src="menu.js"></script>

		<article id="cheat-sheet">
			<div class="column">

			<header>
				<h1 id="title">p5.js</h1>
				<p id="subtitle">uma folha de dicas <br> para iniciantes!</p>
			</header>

			<section>
				<h1>estrutura do programa</h1>
				<pre><code class="language-javaScript">//setup() executa quando o programa começa
function setup(){
  createCanvas(800, 600); //largura, altura em pixels
}

//draw() executa continuamente depois do setup
function draw(){
  //instruções de desenho
}
</code></pre>
			</section>

			<section>
				<h1>variáveis do sistema</h1>
				<pre><code class="language-javaScript">windowWidth / windowHeight
//largura / altura da janela

width / height
//largura / altura da área de desenho

mouseX / mouseY
//posição horizontal / vertical do mouse
</code></pre>
			</section>

			<section>
				<h1>feedback não-visual</h1>
				<pre><code class="language-javaScript">print();
//registra dados no console

//barras duplas para comentar o código
//(o programa pula essas linhas)
</code></pre>
			</section>

			<section>
				<h1>cor</h1>
				<pre><code class="language-javaScript">fill(120); //cinza: 0-255
fill(100, 125, 255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha: 0-255
fill('red'); //nome CSS da cor
fill('#ccc'); //código hex de 3 dígitos
fill('#222222'); //código hex de 6 dígitos
color(0, 0, 255); //objeto p5.Color
</code></pre>
			</section>


	</div>
	<!-- End First Col -->

	<div class="column">

		<section>
			<h1>matemática</h1>
			<pre><code class="language-javaScript">+ - / *  //operadores matemáticos básicos

random(min, max); 
//número aleatório entre os limites mínimo e máximo

map(valor, ent1, ent2, sai1, sai2);
//mapeia o valor da faixa de entrada para a faixa de saída
</code></pre>
		</section>

<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->
		<!-- <section>
			<h1>variable definition</h1>
			<pre><code class="language-javaScript">//let & keyword defines a variable
// use single = to store data in the variable
let variableName = 100;
let myWords = "a string of text!";
let randStorage = random(0,255); // store returned data
</code></pre>
		</section> -->

		<section>
			<h1>primitivas 2d</h1>
			<pre><code class="language-javaScript">line(x1, y1, x2, y2);

ellipse(x, y, largura, altura);

rect(x, y, largura, altura);

arc(x, y, largura, altura, inicio, fim);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //adicione mais vértices
endShape(CLOSE);

text("texto", x, y, larguraCaixa, alturaCaixa);
</code></pre>

			<ul>
				<li class="canvas-container">
					<h2>coordenadas</h2>
					<div id="grid-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>line()</h2>
					<div id="line-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>ellipse()</h2>
					<div id="ellipse-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>rect()</h2>
					<div id="rect-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>arc()</h2>
					<div id="arc-canvas"></div>
				</li>
				<li class="canvas-container">
					<h2>vertex()</h2>
					<div id="vertex-canvas"></div>
				</li>
			</ul>
		</section>



	</div>
	<!-- End Second Col -->
	<div class="column">

		<section>
			<h1>atributos</h1>
			<pre><code class="language-javaScript">background(cor);
//define a cor de fundo

fill(cor);
//define a cor de preenchimento

noFill();
//desabilita o preenchimento

stroke(cor);
//define a cor de contorno

strokeWeight(pixels);
//define a largura da linha de contorno em pixels

noStroke();
//desabilita o contorno

ellipseMode(MODE);
rectMode(MODE);
//MODE: CENTER, CORNER (centro, canto)

textSize(pixels);
//define o tamanho do texto em pixels
</code></pre>
		</section>

		<section>
			<h1>lógica if/then</h1>
			<div class="logic">
				<pre><code class="language-javaScript">if (condicao){
  //instruções
}

===  //igual a
!==  //diferente de
&gt;   //maior que
&lt;   //menor que
&gt;=  //maior que ou igual a
&lt;=  //menor que ou igual a

</code></pre>
<div id="ifelse-canvas"></div>

		</div>

		</section>

		<footer>
			Compilado por Ben Moren <a href="http://benmoren.com">http://benmoren.com</a> CC-BY-SA-NC-4.0
			<br>
      Tradução por <a href="https://felipeturcheti.com">Felipe Turcheti</a>
		</footer>

	</div>

	</article>


	<script type="text/javascript">
		// Terms to translate for diagrams
		var terms = {
			"width": "largura",
			"height": "altura",
			"stop": "fim",
			"start": "início",
			"true": "verdadeiro",
			"false": "falso",
			"continue_program": "continua o programa",
			"test": "teste",
			"statements": "instruções"
		};
	</script>

	<script src="prism.js"></script>
	<script src="p5.min.js"></script>
	<script src="diagram.js"></script>
</body>

</html>


================================================
FILE: docs/style.css
================================================
/* // CHANGE ALL THE FONTS TO USE EMS */


@font-face{
	font-family: "Fira Code";
	font-weight: normal;
	src: url("fonts/FiraCode-Regular.otf") format("truetype");
}

@font-face{
	font-family: "Fira Code";
	font-weight: light;
	src: url("fonts/FiraCode-Light.otf") format("truetype");
}

@font-face{
	font-family: "Fira Code";
	font-weight: medium;
	src: url("fonts/FiraCode-Medium.otf") format("truetype");
}

@font-face{
	font-family: "Fira Code";
	font-weight: bold;
	src: url("fonts/FiraCode-Bold.otf") format("truetype");
}

*{
	color-adjust: exact;
	-webkit-print-color-adjust: exact;
	box-sizing: inherit;
}

body,html{
	padding: 2vw 1vw 0vw 1vw;
	margin: 0;
	font-family: "Fira Code", monospace;
	font-size: 0.85vw;
	box-sizing: border-box;
}

a{
	color:#ed225d;
}
a:hover{
	color: #545454;
}

h1, h2{
	color: #ed225d;
	font-size: 1.2em;
	margin:0.5vh;
	white-space: nowrap;
}

footer{
	font-size: 0.75em;
	text-align: right;
	margin-top:0.5vh;

}

#subtitle{
	text-align: center;
}


nav#page-header{
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index:9999;
}

nav#page-header #language-selection{
	position:absolute;
	right:0;
	display: flex;
	list-style: none;
	padding: 1vh;
	background-color:#fafafa;
	justify-content: space-around;
	width:33vw;

}

#cheat-sheet{
	display: grid;
	align-items: start;
	grid-template-columns: repeat(3,1fr);
	grid-gap: 2vw;
}


#cheat-sheet  pre{
	background: #fafafa;
	white-space: pre-wrap;
	overflow: inherit;
}


#cheat-sheet #title{
	font-size: 2.25em;
	width:50%;
}

#cheat-sheet header{
	display:flex;
	justify-content: center;
	align-items: center;
}

#cheat-sheet #subtitle{
	padding: 0.5vw;
	background: #ed225d;
	color: #FFF;
	width:50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#cheat-sheet ul{
	padding: 0;
	list-style: none;
	/* background-color:#fafafa; */

}

#cheat-sheet .canvas-container{
	display: inline-block;

}

div.column section ul{
	display:grid;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: repeat(2,1fr);
	align-content:center;
	justify-content: center;

}

.canvas-container div{
	display: flex;
	justify-content: center;
}

.canvas-container div canvas {
	width:87.5% !important;
	height:87.5% !important;
}

.logic{
	display:grid;
	grid-template-columns: 3fr 2fr;
	/* display: flex; */
	background-color:#fafafa;
}


#ifelse-canvas .p5Canvas{
	width:100% !important;
	height:100% !important;
 }

/* There might need to be another break size to 2 col or something? */

/*  MOBILE – SMALL-TABLET & PHONE */
 @media screen and (max-width: 768px){

	 body,html{
		font-size: 3vw;
		margin-top: 1.5vh;
	 }

	 #cheat-sheet{
	 	grid-template-columns: 1fr;
	 }

	 nav#page-header #language-selection{
	 	position:relative;
	 	left:0;
	 	width:100%;
		font-size: 0.75em;
	 }

 }

/* PRINT – LANDSCAPE ORIENTATION IS FAVORED! */
 @media print{
 	@page{
 		size: landscape;
 	}

	body,html{
		padding: 0px;
		font-size: 1.25vw;
	}

/* special for printing the JA, ZH since the characters take more vertical space */
	#ja , #zh {
		font-size: 1.0vw;
	}

	#tr {
		font-size: 0.97vw;
	}

 	nav#page-header{
		display:none;
	}

	.logic{
		display:grid;
		grid-template-columns: 1fr;
		/* display: flex; */
	}

	#ifelse-canvas{
		display: flex;
		justify-content: center;
	}

	#ifelse-canvas .p5Canvas{
		width:50% !important;
	 }

	footer{
	 font-size: 0.5em;
	}

}


 /* @media print and (orientation: portrait){

 } */


================================================
FILE: docs/tr.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <title>p5.js Özet Bilgiler</title>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
    <link rel="stylesheet" href="prism.css" />
  </head>

  <body id="tr">
    <!-- Include the menu, there's likely a more elegent way to do this -->
    <script src="menu.js"></script>

    <article id="cheat-sheet">
      <div class="column">
        <header>
          <h1 id="title">p5.js</h1>
          <p id="subtitle">Başlangıç için <br />Özet Bilgiler!</p>
        </header>

        <section>
          <h1>Program Yapısı</h1>
          <pre><code class="language-javaScript">//program başladığında bir kez çalışır
function setup(){
  createCanvas(800,600); 
  //piksel olarak genişlik, yükseklik
}

//setup() tamamlandıktan sonra sürekli çalışır
function draw(){
  //bir döngü içinde yürütülen kod
}
</code></pre>
        </section>

        <section>
          <h1>Sistem Değişkenleri</h1>
          <pre><code class="language-javaScript">windowWidth / windowHeight
//pencere genişliği / yüksekliği

width / height
//kanvasın genişliği / yüksekliği

mouseX / mouseY
//anlık yatay / dikey fare konumu
</code></pre>
        </section>

        <section>
          <h1>Konsol</h1>
          <pre><code class="language-javaScript">print();
//değerleri konsola yazdırır

//çift eğik çizgi (//) yorum satırıdır
//program yorum satırlarını çalıştırmaz
</code></pre>
        </section>

        <section>
          <h1>Renk</h1>
          <pre><code class="language-javaScript">fill(120); //gri: 0-255
fill(100,125,255); //kırmızı, yeşil, mavi: 0-255
fill(255, 0, 0, 50); //kırmızı, yeşil, mavi, alfa
fill('red'); //CSS-SVG renk adı
fill('#ccc'); //3 haneli hex renk kodu
fill('#222222'); //6 haneli hex renk kodu
color(0, 0, 255); //p5.Color nesnesi
</code></pre>
        </section>
      </div>
      <!-- End First Col -->

      <div class="column">
        <section>
          <h1>Matematiksel İşlevler</h1>
          <pre><code class="language-javaScript">+ - / *  //temel matematik operatörleri

random(minimum, maksimum);
//belirtilen aralıkta rastgele sayı üretir

map(değer, girişMin, girişMaks, çıkışMin, çıkışMaks);
//bir değeri aralıklar arasında doğrusal eşler
</code></pre>
        </section>

        <!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->
        <!-- <section>
			<h1>variable definition</h1>
			<pre><code class="language-javaScript">//let & keyword defines a variable
// use single = to store data in the variable
let variableName = 100;
let myWords = "a string of text!";
let randStorage = random(0,255); // store returned data
</code></pre>
		</section> -->

        <section>
          <h1>2 Boyutlu Şekiller</h1>
          <pre><code class="language-javaScript">line(x1, y1, x2, y2); //çizgi

ellipse(x, y, genişlik, yükseklik); //elips

rect(x, y, genişlik, yükseklik); //dikdörtgen

arc(x, y, genişlik, yükseklik, başlamaAçısı, bitirmeAçısı); //yay

beginShape(); //köşe noktalarıyla özel şekil oluşturmaya başlar
  vertex(x1, y1); //köşe noktası
  vertex(x2, y2);
  vertex(x3, y3);
  //bu yapı içine daha fazla köşe noktası eklenebilir
endShape(CLOSE);

text("yazı", x, y, kutuGenişliği, kutuYüksekliği);
//yazıyı verilen konuma ve kutu boyutuna göre çizer
</code></pre>

          <ul>
            <li class="canvas-container">
              <h2>koordinatlar</h2>
              <div id="grid-canvas"></div>
            </li>
            <li class="canvas-container">
              <h2>line()</h2>
              <div id="line-canvas"></div>
            </li>
            <li class="canvas-container">
              <h2>ellipse()</h2>
              <div id="ellipse-canvas"></div>
            </li>
            <li class="canvas-container">
              <h2>rect()</h2>
              <div id="rect-canvas"></div>
            </li>
            <li class="canvas-container">
              <h2>arc()</h2>
              <div id="arc-canvas"></div>
            </li>
            <li class="canvas-container">
              <h2>vertex()</h2>
              <div id="vertex-canvas"></div>
            </li>
          </ul>
        </section>
      </div>
      <!-- End Second Col -->
      <div class="column">
        <section>
          <h1>Özellikler</h1>
          <pre><code class="language-javaScript">background(renk);
//arka plan rengi

fill(renk);
//dolgu rengi

noFill();
//dolgu rengini kaldırır

stroke(renk);
//kontur rengi

strokeWeight(kalınlık);
//piksel olarak kontur kalınlığı

noStroke();
//kontur rengini kaldırır

ellipseMode(MODE);
rectMode(MODE);
//CENTER veya CORNER

textSize(boyut);
//piksel olarak yazı boyutu
</code></pre>
        </section>

        <section>
          <h1>Koşullu Mantık</h1>
          <div class="logic">
            <pre><code class="language-javaScript">if(koşul){
  //yürütülecek kod
}

=== //değer ve tür eşittir
!== //değer veya tür eşit değildir
>   //büyüktür
<   //küçüktür
>=  //büyük veya eşittir
<=  //küçük veya eşittir

</code></pre>
            <div id="ifelse-canvas"></div>
          </div>
        </section>

        <footer>
          Derleyen Ben Moren
          <a href="http://benmoren.com">http://benmoren.com</a> CC-BY-SA-NC-4.0
          <br />Çeviren
          <a target="_blank" href="https://github.com/bedirxanugur"
            >Bedirhan Ugur</a
          >
        </footer>
      </div>
    </article>

    <script type="text/javascript">
      // Terms to translate for diagrams
      var terms = {
        width: "genişlik",
        height: "yükseklik",
        stop: "bitir",
        start: "başla",
        true: "doğru",
        false: "yanlış",
        continue_program: "programa devam et",
        test: "koşul",
        statements: "kod bloğu",
      };
    </script>

    <script src="prism.js"></script>
    <script src="p5.min.js"></script>
    <script src="diagram.js"></script>
  </body>
</html>


================================================
FILE: docs/zh-tw.html
================================================
<!DOCTYPE html>
<html>

<head>
	<title>p5.js新手小抄</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css" media="all">
	<link rel="stylesheet" href="prism.css">

</head>

<body id="zh">

	<!-- Include the menu, there's likely a more elegent way to do this -->
	<script src="menu.js"></script>

	<article id="cheat-sheet">
		<div class="column">

			<header>
				<h1 id="title">p5.js</h1>
				<p id="subtitle">給新手的小抄!</p>
			</header>

			<section>
				<h1>程式基本架構</h1>
				<pre><code class="language-javaScript">//初始化，只在程式開始運行的時候執行一次
function setup(){
  createCanvas(800,600); //建立寬高為 800 x 600 的畫布，單位是像素
}

//在初始化之後一直循環執行
function draw(){
  //渲染循環
}
</code></pre>
			</section>

			<section>
				<h1>系統變數</h1>
				<pre><code class="language-javaScript">windowWidth / windowHeight
//視窗的寬度和高度

width / height
//畫布的寬度和高度

mouseX / mouseY
//滑鼠的位置
</code></pre>
			</section>

			<section>
				<h1>測試輸出</h1>
				<pre><code class="language-javaScript">console.log(data);
//在控制台裡輸出資料

//用雙斜槓開頭來寫註解（不會被當程式執行）
</code></pre>
			</section>

			<section>
				<h1>顏色</h1>
				<pre><code class="language-javaScript">fill(120); //gray(灰度): 0-255
fill(100,125,255); //r（紅）, g（綠）, b（藍）: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha（透明度）
fill('red'); //顏色名稱
fill('#ccc'); //3位Hex色碼
fill('#222222'); //6位Hex色碼
color(0, 0, 255); //p5.Color物件
</code></pre>
			</section>


		</div>
		<!-- End First Col -->

		<div class="column">

			<section>
				<h1>數學</h1>
				<pre><code class="language-javaScript">+ - / *  //基本運算符號

random(low,high); //產生一個介於特定範圍的隨機數

map(value, in1, in2, out1, out2);
//把一個數值從一個範圍內映射到另一個範圍
</code></pre>
			</section>

			<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->
			<!-- <section>
			<h1>variable definition</h1>
			<pre><code class="language-javaScript">//let & keyword defines a variable
//use single = to store data in the variable
let variableName = 100;
let myWords = "a string of text!";
let randStorage = random(0,255); //store returned data
</code></pre>
		</section> -->

			<section>
				<h1>2d 基本圖形</h1>
				<pre><code class="language-javaScript">line(x1, y1, x2, y2);

ellipse(x, y, width, height);

rect(x, y, width, height);

arc(x, y, width, height, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //添加更多的頂點
endShape(CLOSE);

text("string", x, y, boxwidth, boxheight);
</code></pre>

				<ul>
					<li class="canvas-container">
						<h2>網格系統</h2>
						<div id="grid-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>line() 線條</h2>
						<div id="line-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>ellipse() 圓</h2>
						<div id="ellipse-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>rect() 矩形</h2>
						<div id="rect-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>arc() 扇形</h2>
						<div id="arc-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>vertex() 頂點</h2>
						<div id="vertex-canvas"></div>
					</li>
				</ul>
			</section>



		</div>
		<!-- End Second Col -->
		<div class="column">

			<section>
				<h1>屬性</h1>
				<pre><code class="language-javaScript">background(color);
//指定背景色

fill(color);
//指定填色

noFill();
//不填色

stroke(color);
//指定描邊顏色

strokeWeight(weight);
//指定描邊寬度

noStroke();
//不描邊

ellipseMode(MODE);
rectMode(MODE);
//設定參數被解讀的方式：CENTER（中心模式），CORNER（邊角模式）

textSize(pixels);
//設定文字大小
</code></pre>
			</section>

			<section>
				<h1>if/then 邏輯</h1>
				<div class="logic">
					<pre><code class="language-javaScript">if(condition){
  //語句
}

===  //等於
!==  //不等於
>   //大於
<   //小於
>=  //大於等於
<=  //小於等於
|| //或
&& //且

</code></pre>
					<div id="ifelse-canvas"></div>

				</div>

			</section>

			<footer>
				Compiled by Ben Moren <a href="http://benmoren.com">http://benmoren.com</a> CC-BY-SA-NC-4.0
				<br>
				Translation by eziraros
			</footer>

		</div>

	</article>


	<script type="text/javascript">
		// Terms to translate for diagrams
		var terms = {
			"width": "width",
			"height": "height",
			"stop": "stop",
			"start": "start",
			"true": "true",
			"false": "false",
			"continue_program": "continue program",
			"test": "test",
			"statements": "statements"
		};
	</script>

	<script src="prism.js"></script>
	<script src="p5.min.js"></script>
	<script src="diagram.js"></script>
</body>

</html>


================================================
FILE: docs/zh.html
================================================
<!DOCTYPE html>
<html>

<head>
	<title>p5.js新手入门神器</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="style.css" media="all">
	<link rel="stylesheet" href="prism.css">

</head>

<body id="zh">

	<!-- Include the menu, there's likely a more elegent way to do this -->
	<script src="menu.js"></script>

	<article id="cheat-sheet">
		<div class="column">

			<header>
				<h1 id="title">p5.js</h1>
				<p id="subtitle">新手入门神器!</p>
			</header>

			<section>
				<h1>程序基本结构</h1>
				<pre><code class="language-javaScript">//初始化，只在程序开始运行的时候执行一次
function setup(){
  createCanvas(800,600); //画布长度和宽度，单位是像素
}

//在初始化之后一直循环执行
function draw(){
  //渲染循环
}
</code></pre>
			</section>

			<section>
				<h1>系统变量</h1>
				<pre><code class="language-javaScript">windowWidth / windowHeight
//窗口的高度和宽度

width / height
//当前画布的高度和宽度

mouseX / mouseY
//当前鼠标的X坐标和Y坐标
</code></pre>
			</section>

			<section>
				<h1>调试输出</h1>
				<pre><code class="language-javaScript">print();
//在调试控制台上输出

//可以用双斜杠表示注释内容
</code></pre>
			</section>

			<section>
				<h1>颜色</h1>
				<pre><code class="language-javaScript">fill(120); //gray(灰度): 0-255
fill(100,125,255); //r（红）, g（绿）, b（蓝）: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha（）透明度
fill('red'); //颜色名称
fill('#ccc'); //3位十六进制值
fill('#222222'); //6位十六进制值
color(0, 0, 255); //p5.Color对象
</code></pre>
			</section>


		</div>
		<!-- End First Col -->

		<div class="column">

			<section>
				<h1>数学</h1>
				<pre><code class="language-javaScript">+ - / *  //基础数学运算符号

random(low,high); //产生随机数

map(value, in1, in2, out1, out2);
//把一个值从一个范围内映射到另一个范围。
</code></pre>
			</section>

			<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->
			<!-- <section>
			<h1>variable definition</h1>
			<pre><code class="language-javaScript">//let & keyword defines a variable
// use single = to store data in the variable
let variableName = 100;
let myWords = "a string of text!";
let randStorage = random(0,255); // store returned data
</code></pre>
		</section> -->

			<section>
				<h1>2d 基本图形</h1>
				<pre><code class="language-javaScript">line(x1, y1, x2, y2);

ellipse(x, y, width, height);

rect(x, y, width, height);

arc(x, y, width, height, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  //添加更多的顶点
endShape(CLOSE);

text("string", x, y, boxwidth, boxheight);
</code></pre>

				<ul>
					<li class="canvas-container">
						<h2>网格系统</h2>
						<div id="grid-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>line() 线条</h2>
						<div id="line-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>ellipse() 圆</h2>
						<div id="ellipse-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>rect() 矩形</h2>
						<div id="rect-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>arc() 扇形</h2>
						<div id="arc-canvas"></div>
					</li>
					<li class="canvas-container">
						<h2>vertex() 顶点</h2>
						<div id="vertex-canvas"></div>
					</li>
				</ul>
			</section>



		</div>
		<!-- End Second Col -->
		<div class="column">

			<section>
				<h1>属性</h1>
				<pre><code class="language-javaScript">background(color);
//设置背景颜色

fill(color);
//设置填充颜色

noFill();
//取消填充

stroke(color);
//设置描边颜色

strokeWeight(weight);
//设置描边宽度

noStroke();
//取消描边

ellipseMode(MODE);
rectMode(MODE);
//参数被解读的方式 中心模式，边角模式

textSize(pixels);
//文字大小
</code></pre>
			</section>

			<section>
				<h1>if/then 逻辑</h1>
				<div class="logic">
					<pre><code class="language-javaScript">if(条件){
  //语句
}

===  //等于
!==  //不等于
>   //大于
<   //小于
>=  //大于等于
<=  //小于等于

</code></pre>
					<div id="ifelse-canvas"></div>

				</div>

			</section>

			<footer>
				Compiled by Ben Moren <a href="http://benmoren.com">http://benmoren.com</a> CC-BY-SA-NC-4.0
				<br>
				Translation by Drafff
			</footer>

		</div>

	</article>


	<script type="text/javascript">
		// Terms to translate for diagrams
		var terms = {
			"width": "width",
			"height": "height",
			"stop": "stop",
			"start": "start",
			"true": "true",
			"false": "false",
			"continue_program": "continue program",
			"test": "test",
			"statements": "statements"
		};
	</script>

	<script src="prism.js"></script>
	<script src="p5.min.js"></script>
	<script src="diagram.js"></script>
</body>

</html>