[
  {
    "path": ".gitignore",
    "content": "# Ignore Mac DS_Store files\n.DS_Store\ndebug.log\n.vscode/settings.json\n\nnode_modules\n"
  },
  {
    "path": "README.md",
    "content": "# [a p5js cheat sheet for beginners!](https://bmoren.github.io/p5js-cheat-sheet/)\n\nThis 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:\n\n+ [English](https://bmoren.github.io/p5js-cheat-sheet/)\n  + Translation by: [Ben Moren](https://github.com/bmoren)\n+ [French](https://bmoren.github.io/p5js-cheat-sheet/fr.html)\n  + Translation by: [@rich-gg](https://github.com/rich-gg)\n+ [Japanese](https://bmoren.github.io/p5js-cheat-sheet/ja.html)\n  + Translation by: [Takawo Shunsuke](https://twitter.com/takawo)\n+ [German](https://bmoren.github.io/p5js-cheat-sheet/de.html)\n   + Translation by: [Philipp Lehmann](https://github.com/philipp-lehmann)\n+ [Nederlands](https://bmoren.github.io/p5js-cheat-sheet/nl.html)\n  + Translation by: [Vincent Sijben](https://github.com/vincentsijben)\n+ [Korean](https://bmoren.github.io/p5js-cheat-sheet/ko.html)\n  + Translation by: [Yi donghoon](https://github.com/icq4ever)\n+ [Italian](https://bmoren.github.io/p5js-cheat-sheet/it.html)\n  + Translation by: [Antonio Belluscio](https://codesthesia.net)\n+ [Spanish](https://bmoren.github.io/p5js-cheat-sheet/es.html)\n  + Translation by: [Andy Valdés Valdés](https://andyvaldesvaldes.com/)\n+ [Catalan](https://bmoren.github.io/p5js-cheat-sheet/ca.html)\n  + Translation by: [Daniel Fernández](https://github.com/trikaphundo)\n+ [Indonesia](https://bmoren.github.io/p5js-cheat-sheet/id.html)\n  + Translation by: [Zul Hilmi](https://github.com/hilmizul)\n+ [Portuguese](https://bmoren.github.io/p5js-cheat-sheet/pt.html)\n  + Translation by: [Felipe Turcheti](https://github.com/fturcheti)\n+ [Chinese](https://bmoren.github.io/p5js-cheat-sheet/zh.html)\n  + Translation by: [Drafffffff](https://github.com/draffffff)\n+ [Traditional Chinese](https://bmoren.github.io/p5js-cheat-sheet/zh-tw.html)\n  + Translation by: [eziraros](https://twitter.com/s_r_r_z_)\n+ [Turkish](https://bmoren.github.io/p5js-cheat-sheet/tr.html)\n  + Translation by: [Bedirhan Ugur](https://github.com/bedirxanugur)\n\nThere 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.\n\n# Making a new translation!\n\nI'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)!\n\n### If you're not comfortable with HTML & Git:\nNo 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!\n\n### If you are comfortable with HTML & making git pull requests:\n+ clone the repository\n+ navigate to the `docs` folder\n+ 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.\n+ make all translation changes inside of the  `<code class=\"language-javaScript\"></code>` tags\n+ make all translation changes to the `terms` JSON object at the bottom of the HTML page.\n+ add your name as the translator + a link to yourself in the `<footer>` section\n+ make a pull request against the repository!\n\n### bonus tasks (if you have time or are able)\n#### update the readme:\n+ add a link to the new translation in the readme.md\n+ add your name as the translator + link to the readme.md\n\n#### update the menu:\n+ in the `docs` folder, find the `menu.js` file and add a link to the translation page\n\n#### add a pdf:\n+ export a pdf and add to the root (print to PDF in *^chrome*), please name it `p5cheatsheet-▵LC.pdf`\n+ verify that it will all fit on one page, if there is overflow, some minor custom CSS may need to be implemented.\n\n*^it's critical that it's in chrome, for best rendering and color accuracy*.\n\n*▵ 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*\n\n---\n\n[Creative Commons BY NC SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)\n\nWith thanks to past cheat sheets like [Ryo Sakai's p5.js sheet](https://twitter.com/ryodejaneiro/status/827314983948210176) !\n\nSpecial thanks to [Kenneth Lim](https://github.com/limzykenneth) for initializing the HTML version which will make this cheat sheet much easier to translate.\n"
  },
  {
    "path": "build/index.js",
    "content": "const puppeteer = require(\"puppeteer\");\nconst path = require(\"path\");\nconst fs = require(\"fs\");\n\n/**\n * Creates a Buffer containing a PDF from a specified URL.\n */\nasync function createPDF(browser, url) {\n    const page = await browser.newPage();\n    await page.goto(url, {waitUntil: \"networkidle0\"});\n    const pdf = await page.pdf({\n        // These are the options that Chrome gave by default.\n        margin: {\n            top: \"1cm\",\n            right: \"1cm\",\n            bottom: \"1cm\",\n            left: \"1cm\",\n        },\n    });\n\n    return pdf;\n}\n\n/**\n * Formats a language code (HTML file name without the extension) into\n * one which can be used by a PDF file. It will either output a `-` followed\n * by the formatted language code, or nothing (for `index.html`).\n */\nfunction formatLangCode(name) {\n    // We need to make text before the - uppercase, and\n    // leave text before it lowercase. Also, if we get\n    // index, we'll leave it blank.\n    if(name === \"index\") return \"\";\n\n    const split = name.split(\"-\");\n    if(split.length !== 1 && split.length !== 2)\n        throw new Error(name + \"is not a valid file name!\");\n\n    if(split.length === 1) return \"-\" + split[0].toUpperCase();\n    if(split.length === 2) return \"-\" + split[0].toUpperCase() + \"-\" + split[1].toLowerCase();\n}\n\n(async () => {\n    // Each HTML file in ../docs must be converted to a PDF file, saved in .. .\n    // These HTML files follow the format of LANG.html, where LANG is lowercased.\n    // The PDF files follow the format of p5cheatsheet-LANG.pdf, where LANG is correctly\n    // formatted. For example, it.html becomes p5cheatsheet-IT.pdf, while zh-tw.html\n    // becomes p5cheatsheet-ZH-tw.pdf. Also, index.html becomes p5cheatsheet.pdf.\n    //\n    // We'll start off by getting every HTML file, getting its PDF name, and finally,\n    // converting it to a PDF.\n    const HTMLDir = path.resolve(path.join(__dirname, \"../\", \"docs\"));\n    const PDFDir = path.resolve(path.join(__dirname, \"../\"));\n\n    const browser = await puppeteer.launch({\n        // CORS blocks font loading.\n        args: [\n            \"--disable-web-security\",\n        ],\n        headless: true,\n\n    });\n\n    for(const fileName of fs.readdirSync(HTMLDir)) {\n        if(!fileName.endsWith(\".html\")) continue;\n\n        const filePath = path.join(HTMLDir, fileName);\n\n        const name = path.basename(fileName, \".html\");\n        const newName = \"p5cheatsheet\" + formatLangCode(name) + \".pdf\";\n\n        fs.writeFileSync(path.join(PDFDir, newName), await createPDF(browser, \"file://\" + filePath));\n        console.log(\"Saved \" + newName + \".\");\n    }\n\n    await browser.close();\n})();\n"
  },
  {
    "path": "build/package.json",
    "content": "{\n    \"private\": true,\n    \"dependencies\": {\n        \"puppeteer\": \"^19.2.0\"\n    }\n}\n"
  },
  {
    "path": "docs/ca.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n\t<title>p5.js Cheat Sheet</title>\n\t<meta http-equiv=\"pragma\" content=\"no-cache\" />\n\t<meta http-equiv=\"cache-control\" content=\"no-cache\" />\n\t<meta charset=\"utf-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"all\">\n\t<link rel=\"stylesheet\" href=\"prism.css\">\n\n</head>\n\n<body>\n\n\t<!-- Include the menu, there's likely a more elegent way to do this -->\n\t<script src=\"menu.js\"></script>\n\n\t\t<article id=\"cheat-sheet\">\n\t\t\t<div class=\"column\">\n\n\t\t\t<header>\n\t\t\t\t<h1 id=\"title\">p5.js</h1>\n\t\t\t\t<p id=\"subtitle\">un breu resum <br>per a principiants!</p>\n\t\t\t</header>\n\n\t\t\t<section>\n\t\t\t\t<h1>estructura del programa</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">//s'executa només un cop quan s'inicia el programa\nfunction setup(){\n  createCanvas(800,600); //amplada, alçada en píxels\n}\n\n//s'executa contínuament després de la funció setup\nfunction draw(){\n  //codi que s'executarà en bucle\n}\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>variables del sistema</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">windowWidth / windowHeight\n//amplada / alçada de la finestra\n\nwidth / height\n//amplada / alçada del llenç\n\nmouseX / mouseY\n//posició actual horitzontal / vertical del ratolí\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>Informació via la consola</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">print();\n//escriu dades a la consola\n\n//dues barres inclinades per a comentar el codi\n//(el programa ignora els comentaris)\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>color</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">fill(120); //escala de grisos: 0-255\nfill(100,125,255); //r, g, b: 0-255\nfill(255, 0, 0, 50); //r, g, b, alpha\nfill('red'); //nom del color\nfill('#ccc'); //hexadecimal de 3 dígits\nfill('#222222'); //hexadecimal de 6 dígits\ncolor(0, 0, 255); //objecte p5.Color\n</code></pre>\n\t\t\t</section>\n\n\n\t</div>\n\t<!-- End First Col -->\n\n\t<div class=\"column\">\n\n\t\t<section>\n\t\t\t<h1>matemàtiques</h1>\n\t\t\t<pre><code class=\"language-javaScript\">+ - / *  //operadors matemàtics bàsics\n\nrandom(min, max); //nombre aleatori entre min i max\n\nmap(valor, entr1, entr2, sort1, sort2);\n//converteix un valor entre entr1 i entr2\n//a un valor entre sort1 i sort2\n</code></pre>\n\t\t</section>\n\n<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->\n\t\t<!-- <section>\n\t\t\t<h1>variable definition</h1>\n\t\t\t<pre><code class=\"language-javaScript\">//let & keyword defines a variable\n// use single = to store data in the variable\nlet variableName = 100;\nlet myWords = \"a string of text!\";\nlet randStorage = random(0,255); // store returned data\n</code></pre>\n\t\t</section> -->\n\n\t\t<section>\n\t\t\t<h1>primitives 2d</h1>\n\t\t\t<pre><code class=\"language-javaScript\">line(x1, y1, x2, y2);\n\nellipse(x, y, amplada, altura);\n\nrect(x, y, amplada, altura);\n\narc(x, y, amplada, altura, inici, final);\n\nbeginShape();\n  vertex(x1, y1);\n  vertex(x2, y2);\n  vertex(x3, y3);\n  //afegiu més vèrtex\nendShape(CLOSE);\n\ntext(\"string\", x, y, ampleCaixa, alturaCaixa);\n</code></pre>\n\n\t\t\t<ul>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>graella</h2>\n\t\t\t\t\t<div id=\"grid-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>line()</h2>\n\t\t\t\t\t<div id=\"line-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>ellipse()</h2>\n\t\t\t\t\t<div id=\"ellipse-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>rect()</h2>\n\t\t\t\t\t<div id=\"rect-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>arc()</h2>\n\t\t\t\t\t<div id=\"arc-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>vertex()</h2>\n\t\t\t\t\t<div id=\"vertex-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</section>\n\n\n\n\t</div>\n\t<!-- End Second Col -->\n\t<div class=\"column\">\n\n\t\t<section>\n\t\t\t<h1>atributs</h1>\n\t\t\t<pre><code class=\"language-javaScript\">background(color);\n//estableix el color de llenç\n\nfill(color);\n//estableix el color d'emplenat\n\nnoFill();\n//desactiva l'emplenat\n\nstroke(color);\n//estableix el color del traç\n\nstrokeWeight(gruix);\n//estableix el gruix del traç, en píxels\n\nnoStroke();\n//desactiva el traç\n\nellipseMode(MODE);\nrectMode(MODE);\n//CENTER,CORNER (centre o cantonada)\n\ntextSize(pixels);\n</code></pre>\n\t\t</section>\n\n\t\t<section>\n\t\t\t<h1>lògica si/aleshores</h1>\n\t\t\t<div class=\"logic\">\n\t\t\t\t<pre><code class=\"language-javaScript\">if(condició){\n  //instruccions\n}\n\n===  //igual a\n!==  //no igual a\n>   //major que\n<   //menor que\n>=  //major o igual que\n<=  //menor o igual que\n\n</code></pre>\n<div id=\"ifelse-canvas\"></div>\n\n\t\t</div>\n\n\t\t</section>\n\n\t\t<footer>\n\t\t\tCompiled by Ben Moren <a href=\"http://benmoren.com\">http://benmoren.com</a> CC-BY-SA-NC-4.0\n\t\t\t<br>\n\t\t\tTranslation by <a href=\"https://github.com/trikaphundo\">Daniel Fernández</a>\n\t\t</footer>\n\n\t</div>\n\n\t</article>\n\n\n  <!-- In the flow diagram, the words \"test\", \"true\"\n  and \"false\" must be translated so that their genders\n  match. Since \"condició\" is feminine, so must be\n  the translations of \"true\" (certa) and \"false\" (falsa)-->\n\t<script type=\"text/javascript\">\n\t\t// Terms to translate for diagrams\n\t\tvar terms = {\n\t\t\t\"width\": \"amplada\",\n\t\t\t\"height\": \"alçada\",\n\t\t\t\"stop\": \"final\",\n\t\t\t\"start\": \"inici\",\n\t\t\t\"true\": \"certa\",\n\t\t\t\"false\": \"falsa\",\n\t\t\t\"continue_program\": \"continua el programa\",\n\t\t\t\"test\": \"condició\",\n\t\t\t\"statements\": \"instruccions\"\n\t\t};\n\t</script>\n\n\t<script src=\"prism.js\"></script>\n\t<script src=\"p5.min.js\"></script>\n\t<script src=\"diagram.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "docs/de.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <title>p5.js Cheat Sheet</title>\n    <meta content=\"no-cache\" http-equiv=\"pragma\"/>\n    <meta content=\"no-cache\" http-equiv=\"cache-control\"/>\n\n    <link href=\"style.css\" media=\"all\" rel=\"stylesheet\" type=\"text/css\">\n    <link href=\"prism.css\" media=\"all\" rel=\"stylesheet\" type=\"text/css\">\n\n\n  </head>\n  <body>\n    <!-- Include the menu, there's likely a more elegent way to do this -->\n    <script src=\"menu.js\"></script>\n\n    <article id=\"cheat-sheet\">\n      <div class=\"column\">\n        <header>\n          <h1 id=\"title\">p5.js</h1>\n          <p id=\"subtitle\">\n            Spickzettel\n            <br>\n            für Anfänger!</p>\n        </header>\n\n        <section>\n          <h1>Programmstruktur</h1>\n          <pre><code class=\"language-javaScript\">//wird einmal bei Programmstart ausgeführt\nfunction setup(){\n  createCanvas(800,600);\n}\n\n//läuft fortwährend\nfunction draw(){\n  //Ausgabeschleife\n}\n</code></pre>\n        </section>\n\n        <section>\n          <h1>Systemvariablen</h1>\n          <pre><code class=\"language-javaScript\">windowWidth / windowHeight\n//Breite / Höhe des fensters\n\nwidth / height\n//Breite / Höhe des canvas\n\nmouseX / mouseY\n//aktuelle horizontale / vertikale Mausposition\n</code></pre>\n        </section>\n\n        <section>\n          <h1>Konsolenausgabe</h1>\n          <pre><code class=\"language-javaScript\">\nprint();\n//Daten in der Konsole ausgeben\n</code></pre>\n        </section>\n\n        <section>\n          <h1>Farbe</h1>\n          <pre><code class=\"language-javaScript\">fill(120); //grau: 0-255\nfill(100,125,255); //r, g, b: 0-255\nfill(255, 0, 0, 50); //r, g, b, alpha\nfill('red'); //Farbbezeichnung\nfill('#ccc'); //3-stelliger Farbcode in Hexadecimal\nfill('#222222'); //6-stelliger Farbcode in Hexadecimal\ncolor(0, 0, 255); //p5 Farbobjekt\n</code></pre>\n        </section>\n      </div>\n\n      <div class=\"column\">\n\n        <section>\n          <h1>Mathe</h1>\n          <pre><code class=\"language-javaScript\">+ - / *\n\nrandom(minimum,maximum);\n\nmap(wert, in1, in2, out1, out2);\n//transformiert einen Wert von der Eingabeskala in die Ausgabeskala\n</code></pre>\n        </section>\n\n        <section>\n          <h1>2D-Formen</h1>\n          <pre><code class=\"language-javaScript\">line(x1, y1, x2, y2);\n\nellipse(x, y, breite, höhe);\n\nrect(x, y, breite, höhe); //Rechteck\n\n//Bogen\narc(x, y, breite, höhe, start, stop);\n\nbeginShape();\n  vertex(x1, y1);\n  vertex(x2, y2);\n  vertex(x3, y3);\nendShape(CLOSE);\n\ntext(\"Begriff\", x, y, breite, höhe);\n</code></pre>\n\n          <ul>\n            <li class=\"canvas-container\">\n              <h2>Rastersystem</h2>\n              <div id=\"grid-canvas\"></div>\n            </li>\n            <li class=\"canvas-container\">\n              <h2>line()</h2>\n              <div id=\"line-canvas\"></div>\n            </li>\n            <li class=\"canvas-container\">\n              <h2>ellipse()</h2>\n              <div id=\"ellipse-canvas\"></div>\n            </li>\n            <li class=\"canvas-container\">\n              <h2>rect()</h2>\n              <div id=\"rect-canvas\"></div>\n            </li>\n            <li class=\"canvas-container\">\n              <h2>arc()</h2>\n              <div id=\"arc-canvas\"></div>\n            </li>\n            <li class=\"canvas-container\">\n              <h2>vertex()</h2>\n              <div id=\"vertex-canvas\"></div>\n            </li>\n          </ul>\n        </section>\n\n      </div>\n\n      <div class=\"column\">\n        <section>\n          <h1>Attribute</h1>\n          <pre><code class=\"language-javaScript\">background(Farbe);\n//Hintergrundfarbe setzen\n\nfill(Farbe);\n//Füllfarbe setzen\n\nnoFill();\n//keine Füllfarbe\n\nstroke(farbe);\n//Strichfarbe setzen\n\nstrokeWeight(stärke);\n//Strichstärke einstellen\n\nnoStroke();\n//kein Strich zeichnen\n\nellipseMode(Modus);\nrectMode(Modus);\n//CENTER oder CORNER\n\ntextSize(pixels);\n</code></pre>\n        </section>\n\n        <section>\n          <h1>wenn/dann Logik</h1>\n          <div class=\"logic\">\n            <pre><code class=\"language-javaScript\">if(Bedingung){\n  //Programmcode\n}\n\n=== //gleich wie\n!== //ungleich\n>  //grösser als\n<  //kleiner als\n>= //grösser oder gleich wie\n<= //kleiner oder gleich wie\n</code></pre>\n            <div id=\"ifelse-canvas\"></div>\n          </section>\n\n          <footer>\n            Erstellt von Ben Moren\n            <a href=\"http://benmoren.com\">http://benmoren.com</a>\n            CC BY SA NC 4.0<br/>\n            Übersetzt von\n            <a href=\"https://github.com/philipp-lehmann\">Philipp Lehmann</a>,\n            <a href=\"https://github.com/gruselhaus\">Nico Finkernagel</a>\n          </footer>\n        </div>\n\n\n      </div>\n    </article>\n\n\n    <script type=\"text/javascript\">\n\n      // Terms to translate for diagrams\n      var terms = {\n        \"width\": \"Breite\",\n        \"height\": \"Höhe\",\n        \"stop\": \"Stop\",\n        \"start\": \"Start\",\n        \"true\": \"wahr\",\n        \"false\": \"falsch\",\n        \"continue_program\": \"Programm wird\\nweitergeführt\",\n        \"test\": \"Bedingung\",\n        \"statements\": \"Programmcode\"\n      };\n    </script>\n    <script src=\"prism.js\"></script>\n    <script src=\"p5.min.js\"></script>\n    <script src=\"diagram.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/diagram.js",
    "content": "var canvasSize = 220;\nvar p5Pink = \"#ed225d\";\nlet txtSz = 18\nlet fontFile = 'fonts/FiraCode-Bold.otf'\n\nvar gridSketch = function(p){\n\tvar canvas;\n\n\tvar fira;\n\tp.preload = function(){\n\t\tfira = p.loadFont(fontFile);\n\t}\n\n\tp.setup = function(){\n\t\tcanvas = p.createCanvas(canvasSize, canvasSize);\n\t\tcanvas.parent(\"grid-canvas\");\n\t\tp.strokeWeight(0.25);\n\t\tp.translate(canvasSize/15, canvasSize/15);\n\n\n\t\tvar gridSize = canvasSize - 2 * canvasSize / 15;\n\t\tfor(var x=0; x<=10; x++){\n\t\t\tp.line(gridSize / 10 * x, 0, gridSize / 10 * x, gridSize);\n\t\t}\n\t\tfor(var y=0; y<=10; y++){\n\t\t\tp.line(0, gridSize / 10 * y, gridSize, gridSize / 10 * y);\n\t\t}\n\n\t\tp.noStroke();\n\t\tp.fill(\"#000000\");\n\t\tp.ellipse(0, 0, gridSize/20, gridSize/20);\n\n\t\tp.textSize(txtSz);\n\t\tp.textAlign(p.LEFT, p.TOP);\n\t\tp.textFont(fira);\n\t\tp.text(\"(0,0)\", 5, 5);\n\t};\n};\n\nvar lineSketch = function(p){\n\tvar canvas;\n\n\tvar fira;\n\tp.preload = function(){\n\t\tfira = p.loadFont(fontFile);\n\t}\n\n\tp.setup = function(){\n\t\tcanvas = p.createCanvas(canvasSize, canvasSize);\n\t\tcanvas.parent(\"line-canvas\");\n\t\tp.strokeWeight(0.25);\n\t\tp.translate(canvasSize/15, canvasSize/15);\n\n\t\tvar gridSize = canvasSize - 2 * canvasSize / 15;\n\t\tfor(var x=0; x<=10; x++){\n\t\t\tp.line(gridSize / 10 * x, 0, gridSize / 10 * x, gridSize);\n\t\t}\n\t\tfor(var y=0; y<=10; y++){\n\t\t\tp.line(0, gridSize / 10 * y, gridSize, gridSize / 10 * y);\n\t\t}\n\n\t\tp.noStroke();\n\t\tp.fill(\"#000000\");\n\t\tvar x1 = gridSize / 10 * 4;\n\t\tvar y1 = gridSize / 10 * 3;\n\t\tvar x2 = gridSize / 10 * 7;\n\t\tvar y2 = gridSize / 10 * 7;\n\t\tp.ellipse(x1, y1, gridSize/20, gridSize/20);\n\t\tp.ellipse(x2, y2, gridSize/20, gridSize/20);\n\t\tp.stroke(\"#000000\");\n\t\tp.strokeWeight(2);\n\t\tp.line(x1, y1, x2, y2);\n\n\t\tp.textSize(txtSz);\n\t\tp.textFont(fira);\n\t\tp.noStroke();\n\t\tp.textAlign(p.RIGHT, p.BOTTOM);\n\t\tp.text(\"(x1,y1)\", x1+10, y1-10);\n\n\t\tp.textAlign(p.CENTER, p.TOP);\n\t\tp.text(\"(x2,y2)\", x2+5, y2+10);\n\t};\n};\n\nvar ellipseSketch = function(p){\n\tvar canvas;\n\n\tvar fira;\n\tp.preload = function(){\n\t\tfira = p.loadFont(fontFile);\n\t}\n\n\tp.setup = function(){\n\t\tcanvas = p.createCanvas(canvasSize, canvasSize);\n\t\tcanvas.parent(\"ellipse-canvas\");\n\t\tp.strokeWeight(0.25);\n\t\tp.push();\n\t\tp.translate(canvasSize/15, canvasSize/15);\n\n\t\tvar gridSize = canvasSize - 2 * canvasSize / 15;\n\t\tfor(var x=0; x<=10; x++){\n\t\t\tp.line(gridSize / 10 * x, 0, gridSize / 10 * x, gridSize);\n\t\t}\n\t\tfor(var y=0; y<=10; y++){\n\t\t\tp.line(0, gridSize / 10 * y, gridSize, gridSize / 10 * y);\n\t\t}\n\t\tp.pop();\n\n\t\tvar x = p.width/2;\n\t\tvar y = p.width/2;\n\t\tp.stroke(\"#000000\");\n\t\tp.strokeWeight(2);\n\t\tp.fill(p5Pink);\n\t\tp.ellipse(x, y, gridSize / 10 * 6.5, gridSize / 10 * 6.5);\n\n\t\tp.noStroke();\n\t\tp.fill(\"#000000\");\n\t\tp.ellipse(x, y, gridSize/20, gridSize/20);\n\n\t\tp.textSize(txtSz);\n\t\tp.textFont(fira);\n\t\tp.noStroke();\n\t\tp.textAlign(p.CENTER, p.BOTTOM);\n\t\tp.text(\"(x,y)\", x, y-10);\n\n\t\tp.push();\n\t\tp.translate(p.width/2, p.height/2 + (gridSize / 10 * 6.5)/2 + 7);\n\t\tp.textAlign(p.CENTER, p.TOP);\n\t\tp.text(terms.width, 0, 0);\n\t\tp.pop();\n\n\t\tp.push();\n\t\tp.translate(p.width/2, p.height/2);\n\t\tp.rotate(-p.PI/2);\n\t\tp.textAlign(p.CENTER, p.TOP);\n\t\tp.text(terms.height, 0, (gridSize / 10 * 6.5)/2 + 7);\n\t\tp.pop();\n\t};\n};\n\nvar rectSketch = function(p){\n\tvar canvas;\n\n\tvar fira;\n\tp.preload = function(){\n\t\tfira = p.loadFont(fontFile);\n\t}\n\n\tp.setup = function(){\n\t\tcanvas = p.createCanvas(canvasSize, canvasSize);\n\t\tcanvas.parent(\"rect-canvas\");\n\t\tp.strokeWeight(0.25);\n\t\tp.textSize(txtSz);\n\t\tp.textFont(fira);\n\t\tp.push();\n\t\tp.translate(canvasSize/20, canvasSize/15);\n\n\t\tvar gridSize = canvasSize - 2 * canvasSize / 15;\n\t\tfor(var x=0; x<=10; x++){\n\t\t\tp.line(gridSize / 10 * x, 0, gridSize / 10 * x, gridSize);\n\t\t}\n\t\tfor(var y=0; y<=10; y++){\n\t\t\tp.line(0, gridSize / 10 * y, gridSize, gridSize / 10 * y);\n\t\t}\n\n\t\tvar x = gridSize / 10 * 2;\n\t\tvar y = gridSize / 10 * 2;\n\t\tp.stroke(\"#000000\");\n\t\tp.strokeWeight(2);\n\n\t\tp.fill(p5Pink);\n\t\tp.rect(x, y, gridSize / 10 * 5, gridSize / 10 * 5);\n\n\t\tp.noStroke();\n\t\tp.fill(\"#000000\");\n\t\tp.ellipse(x, y, gridSize/20, gridSize/20);\n\n\t\tp.noStroke();\n\t\tp.textAlign(p.CENTER, p.BOTTOM);\n\t\tp.text(\"(x,y)\", x, y-10);\n\t\tp.pop();\n\n\t\tp.push();\n\t\tp.translate(p.width/2, p.height/2);\n\t\tp.textAlign(p.CENTER, p.TOP);\n\t\tp.text(terms.width, -10, (gridSize/10*5) / 2);\n\t\tp.pop();\n\n\t\tp.push();\n\t\tp.translate(p.width/2, p.height/2);\n\t\tp.rotate(-p.PI/2);\n\t\tp.text(terms.height, -25, (gridSize/10*5) / 2 + 7);\n\t\tp.pop();\n\t};\n};\n\nvar arcSketch = function(p){\n\tvar canvas;\n\n\tvar fira;\n\tp.preload = function(){\n\t\tfira = p.loadFont(fontFile);\n\t}\n\n\tp.setup = function(){\n\t\tcanvas = p.createCanvas(canvasSize, canvasSize);\n\t\tcanvas.parent(\"arc-canvas\");\n\t\tp.strokeWeight(0.25);\n\t\tp.push();\n\t\tp.translate(canvasSize/15, canvasSize/15);\n\n\t\tvar gridSize = canvasSize - 2 * canvasSize / 15;\n\t\tfor(var x=0; x<=10; x++){\n\t\t\tp.line(gridSize / 10 * x, 0, gridSize / 10 * x, gridSize);\n\t\t}\n\t\tfor(var y=0; y<=10; y++){\n\t\t\tp.line(0, gridSize / 10 * y, gridSize, gridSize / 10 * y);\n\t\t}\n\t\tp.pop();\n\n\t\tp.push();\n\t\tvar x = 0;\n\t\tvar y = 0;\n\t\tp.fill(p5Pink);\n\t\tp.stroke(\"#000000\");\n\t\tp.strokeWeight(2);\n\t\tp.translate(p.width/2, p.height/2);\n\t\tp.arc(x, y, gridSize / 10 * 7, gridSize / 10 * 7, p.PI / 2, 2 * p.PI);\n\n\t\tp.noStroke();\n\t\tp.fill(\"#000000\");\n\t\tp.ellipse(0, 0, gridSize/20, gridSize/20);\n\t\tp.pop();\n\n\t\tp.push();\n\t\t\tp.translate(p.width/2, p.height/2);\n\t\t\tp.textSize(txtSz);\n\t\t\tp.textFont(fira);\n\t\t\tp.textAlign(p.CENTER, p.BOTTOM);\n\t\t\tp.text(\"(x,y)\", 0, -15);\n\n\t\t\tp.textAlign(p.CENTER, p.TOP);\n\t\t\tp.text(terms.width, 0, gridSize / 10 * 7.5 / 2 );\n\n\t\t\tp.text(terms.stop, gridSize / 10 * 6.5 / 4, 3)\n\n\t\t\tp.push();\n\t\t\t\tp.rotate(p.PI/2);\n\t\t\t\tp.text(terms.start, gridSize / 10 * 7.0 / 4, 0);\n\t\t\tp.pop();\n\n\t\t\tp.push();\n\t\t\t\tp.rotate(-p.PI/2);\n\t\t\t\tp.textAlign(p.CENTER, p.BOTTOM);\n\t\t\t\tp.text(terms.height, 0, -gridSize / 10 * 7.5 / 2 );\n\t\t\tp.pop();\n\t\tp.pop();\n\t};\n};\n\nvar vertexSketch = function(p){\n\tvar canvas;\n\n\tvar fira;\n\tp.preload = function(){\n\t\tfira = p.loadFont(fontFile);\n\t}\n\n\tp.setup = function(){\n\t\tcanvas = p.createCanvas(canvasSize, canvasSize);\n\t\tcanvas.parent(\"vertex-canvas\");\n\t\tp.strokeWeight(0.25);\n\t\tp.translate(canvasSize/15, canvasSize/15);\n\n\t\tvar gridSize = canvasSize - 2 * canvasSize / 15;\n\t\tfor(var x=0; x<=10; x++){\n\t\t\tp.line(gridSize / 10 * x, 0, gridSize / 10 * x, gridSize);\n\t\t}\n\t\tfor(var y=0; y<=10; y++){\n\t\t\tp.line(0, gridSize / 10 * y, gridSize, gridSize / 10 * y);\n\t\t}\n\n\t\tvar x1 = gridSize / 10 * 2;\n\t\tvar y1 = gridSize / 10 * 2;\n\t\tvar x2 = gridSize / 10 * 7;\n\t\tvar y2 = gridSize / 10 * 6;\n\t\tvar x3 = gridSize / 10 * 2;\n\t\tvar y3 = gridSize / 10 * 7;\n\n\t\tp.fill(p5Pink);\n\t\tp.stroke(\"#000000\");\n\t\tp.strokeWeight(2);\n\t\tp.beginShape();\n\t\t\tp.vertex(x1, y1);\n\t\t\tp.vertex(x2, y2);\n\t\t\tp.vertex(x3, y3);\n\t\tp.endShape(p.CLOSE);\n\n\t\tp.noStroke();\n\t\tp.fill(\"#000000\");\n\t\tp.ellipse(x1, y1, gridSize/20, gridSize/20);\n\t\tp.ellipse(x2, y2, gridSize/20, gridSize/20);\n\t\tp.ellipse(x3, y3, gridSize/20, gridSize/20);\n\n\t\tp.textAlign(p.CENTER, p.BOTTOM);\n\t\tp.textSize(txtSz);\n\t\tp.textFont(fira);\n\t\tp.text(\"(x1,y1)\", x1 +7, y1 - 7);\n\n\t\tp.textAlign(p.CENTER, p.TOP);\n\t\tp.text(\"(x2,y2)\", x2+7, y2 + 10);\n\t\tp.text(\"(x3,y3)\", x3+7, y3 + 7);\n\t};\n};\n\nvar ifelseSketch = function(p){\n\tvar canvas;\n\n\tvar fira;\n\tp.preload = function(){\n\t\tfira = p.loadFont(fontFile);\n\t}\n\n\tp.setup = function(){\n\t\tcanvas = p.createCanvas(225, 235);\n\t\tcanvas.parent(\"ifelse-canvas\");\n\t\tp.translate(5, 5);\n\n\t\tp.noFill();\n\t\t// test\n\t\tp.beginShape();\n\t\t\tp.vertex(90, 0);\n\t\t\tp.vertex(170, 20);\n\t\t\tp.vertex(90, 40);\n\t\t\tp.vertex(10, 20);\n\t\tp.endShape(p.CLOSE);\n\n\t\t// statements\n\t\tp.rect(10, 90, 160, 50);\n\n\t\t// true\n\t\tp.line(90, 40, 90, 90);\n\n\t\t// continue program\n\t\tp.line(90, 140, 90, 190);\n\n\t\t// false\n\t\tp.line(90, 160, 190, 160);\n\t\tp.line(190, 160, 190, 20);\n\t\tp.line(190, 20, 170, 20);\n\n\t\t// arrows\n\t\tp.fill(\"#000000\");\n\t\tp.triangle(90, 90, 80, 80, 100, 80);\n\t\tp.triangle(90, 190, 80, 180, 100, 180);\n\n\t\t// text\n\t\tp.textFont(fira);\n\t\tp.text(terms.true, 100, 65);\n\t\tp.textAlign(p.CENTER, p.BOTTOM);\n\t\tp.text(terms.false, 190, 20);\n\t\tp.textAlign(p.CENTER, p.TOP);\n\t\tp.text(terms.continue_program, 90, 200);\n\n\t\tp.textStyle(p.BOLD);\n\t\tp.textAlign(p.CENTER, p.CENTER);\n\t\tp.text(terms.test, 90, 20);\n\t\tp.text(terms.statements, 90, 115);\n\t};\n};\n\nnew p5(gridSketch);\nnew p5(lineSketch);\nnew p5(ellipseSketch);\nnew p5(rectSketch);\nnew p5(arcSketch);\nnew p5(vertexSketch);\nnew p5(ifelseSketch);\n"
  },
  {
    "path": "docs/es.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n\t<title>p5.js Cheat Sheet</title>\n\t<meta http-equiv=\"pragma\" content=\"no-cache\" />\n\t<meta http-equiv=\"cache-control\" content=\"no-cache\" />\n\t<meta charset=\"utf-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"all\">\n\t<link rel=\"stylesheet\" href=\"prism.css\">\n\n</head>\n\n<body>\n\n\t<!-- Include the menu, there's likely a more elegent way to do this -->\n\t<script src=\"menu.js\"></script>\n\n\t\t<article id=\"cheat-sheet\">\n\t\t\t<div class=\"column\">\n\n\t\t\t<header>\n\t\t\t\t<h1 id=\"title\">p5.js</h1>\n\t\t\t\t<p id=\"subtitle\">¡Un resumen <br> para principiantes!</p>\n\t\t\t</header>\n\n\t\t\t<section>\n\t\t\t\t<h1>estructura del programa</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">//corre solo una vez cuando inicia el programa\nfunction setup(){\n  createCanvas(800,600); //ancho, alto en píxeles\n}\n\n//corre continuamente después de la función setup\nfunction draw(){\n  //instrucciones a ejecutar en bucle\n}\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>variables del sistema</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">windowWidth / windowHeight\n//ancho / alto de la ventana\n\nwidth / height\n//ancho / alto del lienzo\n\nmouseX / mouseY\n//posición actual horizontal / vertical del apuntador\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>Información a través de la consola</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">print();\n//reporta datos a la consola\n\n//doble barra oblicua para comentar el código\n//(el programa lo salta)\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>color</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">fill(120); //gris: 0-255\nfill(100,125,255); //r, g, b: 0-255\nfill(255, 0, 0, 50); //r, g, b, alpha\nfill('red'); //nombre del color\nfill('#ccc'); //hexadecimal de 3 dígitos\nfill('#222222'); //hexadecimal de 6 dígitos\ncolor(0, 0, 255); //objecto p5.Color\n</code></pre>\n\t\t\t</section>\n\n\n\t</div>\n\t<!-- End First Col -->\n\n\t<div class=\"column\">\n\n\t\t<section>\n\t\t\t<h1>matemáticas</h1>\n\t\t\t<pre><code class=\"language-javaScript\">+ - / *  //operadores básicos matemáticos\n\nrandom(min, max); //número aleatorio entre min y max\n\nmap(valor, entr1, entr2, sal1, sal2);\n//mapea un valor del rango de entrada al rango de salida\n</code></pre>\n\t\t</section>\n\n<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->\n\t\t<!-- <section>\n\t\t\t<h1>variable definition</h1>\n\t\t\t<pre><code class=\"language-javaScript\">//let & keyword defines a variable\n// use single = to store data in the variable\nlet variableName = 100;\nlet myWords = \"a string of text!\";\nlet randStorage = random(0,255); // store returned data\n</code></pre>\n\t\t</section> -->\n\n\t\t<section>\n\t\t\t<h1>primitivas 2d</h1>\n\t\t\t<pre><code class=\"language-javaScript\">line(x1, y1, x2, y2);\n\nellipse(x, y, ancho, alto);\n\nrect(x, y, ancho, alto);\n\narc(x, y, ancho, alto, inicio, final);\n\nbeginShape();\n  vertex(x1, y1);\n  vertex(x2, y2);\n  vertex(x3, y3);\n  //agrega más vértices\nendShape(CLOSE);\n\ntext(\"string\", x, y, anchoCaja, altoCaja);\n</code></pre>\n\n\t\t\t<ul>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>cuadrícula</h2>\n\t\t\t\t\t<div id=\"grid-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>line()</h2>\n\t\t\t\t\t<div id=\"line-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>ellipse()</h2>\n\t\t\t\t\t<div id=\"ellipse-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>rect()</h2>\n\t\t\t\t\t<div id=\"rect-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>arc()</h2>\n\t\t\t\t\t<div id=\"arc-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>vertex()</h2>\n\t\t\t\t\t<div id=\"vertex-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</section>\n\n\n\n\t</div>\n\t<!-- End Second Col -->\n\t<div class=\"column\">\n\n\t\t<section>\n\t\t\t<h1>atributos</h1>\n\t\t\t<pre><code class=\"language-javaScript\">background(color);\n//define el color del fondo\n\nfill(color);\n//define el color para rellenar\n\nnoFill();\n//deshabilita el relleno\n\nstroke(color);\n//define el color del trazo\n\nstrokeWeight(grosor);\n//define el ancho del trazo en píxeles\n\nnoStroke();\n//deshabilita el trazo\n\nellipseMode(MODE);\nrectMode(MODE);\n//CENTER,CORNER (centro, esquina)\n\ntextSize(pixels);\n//tamaño del texto en píxeles\n</code></pre>\n\t\t</section>\n\n\t\t<section>\n\t\t\t<h1>lógica si/entonces</h1>\n\t\t\t<div class=\"logic\">\n\t\t\t\t<pre><code class=\"language-javaScript\">if(condición){\n  //instrucciones\n}\n\n===  //igual a\n!==  //no es igual a\n>   //mayor que\n<   //menor que\n>=  //mayor o igual que\n<=  //menor o igual que\n\n</code></pre>\n<div id=\"ifelse-canvas\"></div>\n\n\t\t</div>\n\n\t\t</section>\n\n\t\t<footer>\n\t\t\tCompiled by Ben Moren <a href=\"http://benmoren.com\">http://benmoren.com</a> CC-BY-SA-NC-4.0\n\t\t\t<br>\n\t\t\tTraducción por <a\thref=\"http://andyvaldesvaldes.com\">Andy Valdés Valdés</a>\n\t\t\t<br>\n      Correcciones por <a href=\"https://github.com/trikaphundo\">Daniel Fernández</a>\n\t\t</footer>\n\n\t</div>\n\n\t</article>\n\n\n  <!-- The word \"condición\" is femenine, thus to prevent\n  a misgender match with \"true/false\" in the diagram,\n  the words \"true\" and \"false\" must translate to\n  their femenine gender: \"verdadera\" and \"falsa\"-->\n\t<script type=\"text/javascript\">\n\t\t// Terms to translate for diagrams\n\t\tvar terms = {\n\t\t\t\"width\": \"ancho\",\n\t\t\t\"height\": \"alto\",\n\t\t\t\"stop\": \"fin\",\n\t\t\t\"start\": \"inicio\",\n\t\t\t\"true\": \"verdadera\",\n\t\t\t\"false\": \"falsa\",\n\t\t\t\"continue_program\": \"continua el programa\",\n\t\t\t\"test\": \"condición\",\n\t\t\t\"statements\": \"instrucciones\"\n\t\t};\n\t</script>\n\n\t<script src=\"prism.js\"></script>\n\t<script src=\"p5.min.js\"></script>\n\t<script src=\"diagram.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "docs/fr.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n\t<title>p5.js Cheat Sheet</title>\n\t<meta http-equiv=\"pragma\" content=\"no-cache\" />\n\t<meta http-equiv=\"cache-control\" content=\"no-cache\" />\n\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"all\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"prism.css\" media=\"all\">\n\n</head>\n<body>\n\t<!-- Include the menu, there's likely a more elegent way to do this -->\n\t<script src=\"menu.js\"></script>\n\n\t<article id=\"cheat-sheet\">\n\t\t<div class=\"column\">\n\t\t\t<header>\n\t\t\t\t<h1 id=\"title\">p5.js</h1>\n\t\t\t\t<p id=\"subtitle\">l’antiseche <br> des débutants</p>\n\t\t\t</header>\n\n\t\t\t<section>\n\t\t\t\t<h1>structure du programme</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">//tourne une fois, au démarrage\nfunction setup(){\n  createCanvas(800,600);\n}\n\n//tourne en boucle, aprés setup()\nfunction draw(){\n  //instructions de dessin\n}\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>variables système</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">windowWidth / windowHeight\n//largeur / hauteur de fenêtre\n\nwidth / height\n//largueur / hauteur de la toile\n\nmouseX / mouseY\n//position horizontale / verticale actuelle de la souris\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>feedback non-visuel</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">print();\n//écrit dans la console\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>couleurs</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">fill(120); //gris: 0-255\nfill(100,125,255); //r, g, b: 0-255\nfill(255, 0, 0, 50); //r, g, b, alpha\nfill('red'); //couleur par noms\nfill('#ccc'); //3-digit hex\nfill('#222222'); //6-digit hex fill\ncolor(0, 0, 255); //object p5.Color\n</code></pre>\n\t\t\t</section>\n\t\t</div>\n\n\t\t<div class=\"column\">\n\n\t\t\t<section>\n\t\t\t\t<h1>math</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">+ - / *\n\nrandom(limite basse,limite haute);\n\nmap(valeur, in1, in2, out1, out2);\n//map une valeur entre 2 intervales in/out\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>primitives 2d</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">line(x1, y1, x2, y2);\n\nellipse(x, y, largeur, hauteur);\n\nrect(x, y, largeur, hauteur);\n\narc(x, y, largeur, hauteur, start, stop);\n\nbeginShape();\n  vertex(x1, y1);\n  vertex(x2, y2);\n  vertex(x3, y3);\n  //ajoute plus de vertices\nendShape(CLOSE);\n\ntext(\"string\", x, y, boxwidth, boxheight);\n</code></pre>\n\n\t\t\t\t<ul>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>grille</h2>\n\t\t\t\t\t\t<div id=\"grid-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>line()</h2>\n\t\t\t\t\t\t<div id=\"line-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>ellipse()</h2>\n\t\t\t\t\t\t<div id=\"ellipse-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>rect()</h2>\n\t\t\t\t\t\t<div id=\"rect-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>arc()</h2>\n\t\t\t\t\t\t<div id=\"arc-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>vertex()</h2>\n\t\t\t\t\t\t<div id=\"vertex-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</section>\n\n\t\t</div>\n\n\t\t<div class=\"column\">\n\t\t\t<section>\n\t\t\t\t<h1>attributs</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">background(couleur);\n//définit la couleur de fond\n\nfill(couleur);\n//définit la couleur de remplissage\n\nnoFill();\n//désactive le remplissage\n\nstroke(couleur);\n//définit la couleur de contour\n\nstrokeWeight(épaisseur);\n//définit l’épaisseur de contour\n\nnoStroke();\n//désactive le contour\n\nellipseMode(MODE);\nrectMode(MODE);\n//CENTER,CORNER\n\ntextSize(pixels);\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>logique if/then</h1>\n\t\t\t\t<div class=\"logic\">\n\n\t\t\t\t<pre><code class=\"language-javaScript\">if(condition){\n  //instructions\n}\n\n=== égal à\n!== différent de\n>  supérieur à\n<  inférieur à\n>= supérieur ou égal à\n<= inférieur ou égal à</code></pre>\n\t\t\t\t<div id=\"ifelse-canvas\"></div>\n\t\t\t</div>\n\n\t\t\t<footer>\n\t\t\t\tCompiled by Ben Moren <a href=\"http://benmoren.com\">http://benmoren.com</a> CC BY SA NC 4.0<br/>\n\t\t\t\tTranslation By <a href=\"https://github.com/rich-gg\">@rich-gg</a>\n\t\t\t</footer>\n\n\t\t\t</section>\n\t\t</div>\n\t</article>\n\n\n\n\t<script type=\"text/javascript\">\n\n\t// Terms to translate\n\tvar terms = {\n\t\t\"width\": \"largeur\",\n\t\t\"height\": \"hauteur\",\n\t\t\"stop\": \"stop\",\n\t\t\"start\": \"start\",\n\t\t\"true\": \"vraie\",\n\t\t\"false\": \"fausse\",\n\t\t\"continue_program\": \"continuer\\nle\\nprogramme\",\n\t\t\"test\": \"condition\",\n\t\t\"statements\": \"instructions\"\n\t};\n\n\t</script>\n\t<script src=\"prism.js\"></script>\n\t<script src=\"p5.min.js\"></script>\n\t<script src=\"diagram.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "docs/id.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n\t<title>p5.js Cheat Sheet</title>\n\t<meta http-equiv=\"pragma\" content=\"no-cache\" />\n\t<meta http-equiv=\"cache-control\" content=\"no-cache\" />\n\t<meta charset=\"utf-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"all\">\n\t<link rel=\"stylesheet\" href=\"prism.css\">\n\n</head>\n\n<body>\n\n\t<!-- Include the menu, there's likely a more elegent way to do this -->\n\t<script src=\"menu.js\"></script>\n\n\t\t<article id=\"cheat-sheet\">\n\t\t\t<div class=\"column\">\n\n\t\t\t<header>\n\t\t\t\t<h1 id=\"title\">p5.js</h1>\n\t\t\t\t<p id=\"subtitle\">lembar contekan <br> untuk pemula!</p>\n\t\t\t</header>\n\n\t\t\t<section>\n\t\t\t\t<h1>struktur program</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">//berjalan sekali ketika program dimulai\nfunction setup(){\n  createCanvas(800,600); //lebar,tinggi dalam satuan piksel\n}\n\n//berjalan terus menerus setelah fungsi setup\nfunction draw(){\n  //me-render kode program terus menerus\n}\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>variabel sistem</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">windowWidth / windowHeight\n//lebar / tinggi jendela browser\n\nwidth / height\n//lebar / tinggi kanvas\n\nmouseX / mouseY\n//posisi mouse horisontal/vertikal saat ini\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>umpan balik non-visual</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">print();\n//menampilkan data ke konsol\n\n//double slash untuk memberikan komentar\n//(program akan melewatinya)\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>warna</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">fill(120); //abu: 0-255\nfill(100,125,255); //r, g, b: 0-255\nfill(255, 0, 0, 50); //r, g, b, alfa/transparansi\nfill('red'); //warna dengan bentuk string\nfill('#ccc'); //warna dengan 3-digit heksadesimal\nfill('#222222'); //warna dengan 6-digit heksadesimal\ncolor(0, 0, 255); //objek p5.Color\n</code></pre>\n\t\t\t</section>\n\n\n\t</div>\n\t<!-- End First Col -->\n\n\t<div class=\"column\">\n\n\t\t<section>\n\t\t\t<h1>perhitungan numerik</h1>\n\t\t\t<pre><code class=\"language-javaScript\">+ - / *  //dasar operasi matematika\n\nrandom(low,high); //mengacak angka yang berkisar\n\nmap(value, in1, in2, out1, out2);\n//memetakan nilai dari rentang input ke rentang output\n</code></pre>\n\t\t</section>\n\n<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->\n\t\t<!-- <section>\n\t\t\t<h1>variable definition</h1>\n\t\t\t<pre><code class=\"language-javaScript\">//let & keyword defines a variable\n// use single = to store data in the variable\nlet variableName = 100;\nlet myWords = \"a string of text!\";\nlet randStorage = random(0,255); // store returned data\n</code></pre>\n\t\t</section> -->\n\n\t\t<section>\n\t\t\t<h1>bentuk 2d</h1>\n\t\t\t<pre><code class=\"language-javaScript\">line(x1, y1, x2, y2);\n\nellipse(x, y, width, height);\n\nrect(x, y, width, height);\n\narc(x, y, width, height, start, stop);\n\nbeginShape();\n  vertex(x1, y1);\n  vertex(x2, y2);\n  vertex(x3, y3);\n  //silakan tambahkan lebih banyak simpul/titik\nendShape(CLOSE);\n\ntext(\"string\", x, y, boxwidth, boxheight);\n</code></pre>\n\n\t\t\t<ul>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>sistem grid</h2>\n\t\t\t\t\t<div id=\"grid-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>line()</h2>\n\t\t\t\t\t<div id=\"line-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>ellipse()</h2>\n\t\t\t\t\t<div id=\"ellipse-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>rect()</h2>\n\t\t\t\t\t<div id=\"rect-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>arc()</h2>\n\t\t\t\t\t<div id=\"arc-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>vertex()</h2>\n\t\t\t\t\t<div id=\"vertex-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</section>\n\n\n\n\t</div>\n\t<!-- End Second Col -->\n\t<div class=\"column\">\n\n\t\t<section>\n\t\t\t<h1>atribut</h1>\n\t\t\t<pre><code class=\"language-javaScript\">background(color);\n//atur warna latar\n\nfill(color);\n//atur warna isian (bentuk 2d)\n\nnoFill();\n//menonaktifkan isian\n\nstroke(color);\n//atur warna stroke (garis luar bentuk 2d)\n\nstrokeWeight(weight);\n//atur lebar garis dalam piksel\n\nnoStroke();\n//menonaktifkan stroke\n\nellipseMode(MODE);\nrectMode(MODE);\n//CENTER,CORNER\n\ntextSize(pixels);\n</code></pre>\n\t\t</section>\n\n\t\t<section>\n\t\t\t<h1>logika bersyarat if/then</h1>\n\t\t\t<div class=\"logic\">\n\t\t\t\t<pre><code class=\"language-javaScript\">if(test){\n  //pernyataan / statements\n}\n\n===  //sama dengan\n!==  //tidak sama dengan\n>   //lebih dari\n<   //kurang dari\n>=  //lebih dari atau sama dengan\n<=  //kurang dari atau sama dengan\n\n</code></pre>\n<div id=\"ifelse-canvas\"></div>\n\n\t\t</div>\n\n\t\t</section>\n\n\t\t<footer>\n\t\t\tCompiled by Ben Moren <a href=\"http://benmoren.com\">http://benmoren.com</a> CC-BY-SA-NC-4.0\n\t\t\t<br>\n\t\t\tTranslation by <a href=\"https://github.com/hilmizul\">Zul Hilmi</a>\n\t\t</footer>\n\n\t</div>\n\n\t</article>\n\n\n\t<script type=\"text/javascript\">\n\t\t// Terms to translate for diagrams\n\t\tvar terms = {\n\t\t\t\"width\": \"width\",\n\t\t\t\"height\": \"height\",\n\t\t\t\"stop\": \"stop\",\n\t\t\t\"start\": \"start\",\n\t\t\t\"true\": \"true\",\n\t\t\t\"false\": \"false\",\n\t\t\t\"continue_program\": \"continue program\",\n\t\t\t\"test\": \"test\",\n\t\t\t\"statements\": \"pernyataan\"\n\t\t};\n\t</script>\n\n\t<script src=\"prism.js\"></script>\n\t<script src=\"p5.min.js\"></script>\n\t<script src=\"diagram.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "docs/index.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n\t<title>p5.js Cheat Sheet</title>\n\t<meta http-equiv=\"pragma\" content=\"no-cache\" />\n\t<meta http-equiv=\"cache-control\" content=\"no-cache\" />\n\t<meta charset=\"utf-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"all\">\n\t<link rel=\"stylesheet\" href=\"prism.css\">\n\n</head>\n\n<body>\n\n\t<!-- Include the menu, there's likely a more elegent way to do this -->\n\t<script src=\"menu.js\"></script>\n\n\t\t<article id=\"cheat-sheet\">\n\t\t\t<div class=\"column\">\n\n\t\t\t<header>\n\t\t\t\t<h1 id=\"title\">p5.js</h1>\n\t\t\t\t<p id=\"subtitle\">a cheat sheet <br> for beginners!</p>\n\t\t\t</header>\n\n\t\t\t<section>\n\t\t\t\t<h1>program structure</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">//runs once when program starts\nfunction setup(){\n  createCanvas(800,600); //width,height in pixels\n}\n\n//run continuously after setup\nfunction draw(){\n  //rendering loop\n}\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>system variables</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">windowWidth / windowHeight\n//width / height of window\n\nwidth / height\n//width / height of canvas\n\nmouseX / mouseY\n//current horizontal / vertical mouse position\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>non-visual feedback</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">print();\n//report data to the output console\n\n//double slash to comment code (program skips it)\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>color</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">fill(120); //gray: 0-255\nfill(100,125,255); //r, g, b: 0-255\nfill(255, 0, 0, 50); //r, g, b, alpha\nfill('red'); //color string\nfill('#ccc'); //3-digit hex\nfill('#222222'); //6-digit hex fill\ncolor(0, 0, 255); //p5.Color object\n</code></pre>\n\t\t\t</section>\n\n\n\t</div>\n\t<!-- End First Col -->\n\n\t<div class=\"column\">\n\n\t\t<section>\n\t\t\t<h1>math</h1>\n\t\t\t<pre><code class=\"language-javaScript\">+ - / *  //basic math operators\n\nrandom(low,high); //ranged random number\n\nmap(value, in1, in2, out1, out2);\n//map a value from input range to output range\n</code></pre>\n\t\t</section>\n\n<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->\n\t\t<!-- <section>\n\t\t\t<h1>variable definition</h1>\n\t\t\t<pre><code class=\"language-javaScript\">//let & keyword defines a variable\n// use single = to store data in the variable\nlet variableName = 100;\nlet myWords = \"a string of text!\";\nlet randStorage = random(0,255); // store returned data\n</code></pre>\n\t\t</section> -->\n\n\t\t<section>\n\t\t\t<h1>2d primitives</h1>\n\t\t\t<pre><code class=\"language-javaScript\">line(x1, y1, x2, y2);\n\nellipse(x, y, width, height);\n\nrect(x, y, width, height);\n\narc(x, y, width, height, start, stop);\n\nbeginShape();\n  vertex(x1, y1);\n  vertex(x2, y2);\n  vertex(x3, y3);\n  //add more vertex\nendShape(CLOSE);\n\ntext(\"string\", x, y, boxwidth, boxheight);\n</code></pre>\n\n\t\t\t<ul>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>grid system</h2>\n\t\t\t\t\t<div id=\"grid-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>line()</h2>\n\t\t\t\t\t<div id=\"line-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>ellipse()</h2>\n\t\t\t\t\t<div id=\"ellipse-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>rect()</h2>\n\t\t\t\t\t<div id=\"rect-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>arc()</h2>\n\t\t\t\t\t<div id=\"arc-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>vertex()</h2>\n\t\t\t\t\t<div id=\"vertex-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</section>\n\n\n\n\t</div>\n\t<!-- End Second Col -->\n\t<div class=\"column\">\n\n\t\t<section>\n\t\t\t<h1>attributes</h1>\n\t\t\t<pre><code class=\"language-javaScript\">background(color);\n//set the background color\n\nfill(color);\n//set the fill color\n\nnoFill();\n//disables fill\n\nstroke(color);\n//set the stroke color\n\nstrokeWeight(weight);\n//set the stroke’s width in pixels\n\nnoStroke();\n//disables stroke\n\nellipseMode(MODE);\nrectMode(MODE);\n//CENTER,CORNER\n\ntextSize(pixels);\n</code></pre>\n\t\t</section>\n\n\t\t<section>\n\t\t\t<h1>if/then logic</h1>\n\t\t\t<div class=\"logic\">\n\t\t\t\t<pre><code class=\"language-javaScript\">if(test){\n  //statements\n}\n\n===  //equal to \n!==  //not equal\n>   //greater than\n<   //less than\n>=  //greater than or equal\n<=  //less than or equal\n\n</code></pre>\n<div id=\"ifelse-canvas\"></div>\n\n\t\t</div>\n\n\t\t</section>\n\n\t\t<footer>\n\t\t\tCompiled by Ben Moren <a href=\"http://benmoren.com\">http://benmoren.com</a> CC-BY-SA-NC-4.0\n\t\t\t<br>\n\t\t\tTranslation by Ben Moren\n\t\t</footer>\n\n\t</div>\n\n\t</article>\n\n\n\t<script type=\"text/javascript\">\n\t\t// Terms to translate for diagrams\n\t\tvar terms = {\n\t\t\t\"width\": \"width\",\n\t\t\t\"height\": \"height\",\n\t\t\t\"stop\": \"stop\",\n\t\t\t\"start\": \"start\",\n\t\t\t\"true\": \"true\",\n\t\t\t\"false\": \"false\",\n\t\t\t\"continue_program\": \"continue program\",\n\t\t\t\"test\": \"test\",\n\t\t\t\"statements\": \"statements\"\n\t\t};\n\t</script>\n\n\t<script src=\"prism.js\"></script>\n\t<script src=\"p5.min.js\"></script>\n\t<script src=\"diagram.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "docs/it.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n\t<title>p5.js Cheat Sheet</title>\n\t<meta http-equiv=\"pragma\" content=\"no-cache\" />\n\t<meta http-equiv=\"cache-control\" content=\"no-cache\" />\n\t<meta charset=\"utf-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"all\">\n\t<link rel=\"stylesheet\" href=\"prism.css\">\n\n</head>\n\n<body>\n\n\t<!-- Include the menu, there's likely a more elegent way to do this -->\n\t<script src=\"menu.js\"></script>\n\n\t\t<article id=\"cheat-sheet\">\n\t\t\t<div class=\"column\">\n\n\t\t\t<header>\n\t\t\t\t<h1 id=\"title\">p5.js</h1>\n\t\t\t\t<p id=\"subtitle\">promemoria <br> per principianti</p>\n\t\t\t</header>\n\n\t\t\t<section>\n\t\t\t\t<h1>struttura del programma</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">//eseguito una volta all'avvio del programma\nfunction setup(){\n  createCanvas(800,600); //larghezza,altezza\n}\n\n//eseguito continuamente dopo il setup\nfunction draw(){\n  //istruzioni di disegno\n}\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>variabili di sistema</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">windowWidth / windowHeight\n//larghezza / altezza della finestra\n\nwidth / height\n//larghezza / altezza dell'area di disegno\n\nmouseX / mouseY\n//posizione orizzontale / verticale del mouse\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>feedback non grafico</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">print();\n//visualizza informazioni nella console\n\n//doppia barra per commentare il codice\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>colore</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">fill(120); //grigio: 0-255\nfill(100,125,255); //rosso, verde, blu: 0-255\nfill(255, 0, 0, 50); //rosso, verde, blu, alfa\nfill('red'); //nome colore (in inglese)\nfill('#ccc'); //codice esadecimale a 3 cifre\nfill('#222222'); //codice esadecimale a 6 cifre\ncolor(0, 0, 255); //oggetto p5.Color\n</code></pre>\n\t\t\t</section>\n\n\n\t</div>\n\t<!-- End First Col -->\n\n\t<div class=\"column\">\n\n\t\t<section>\n\t\t\t<h1>matematica</h1>\n\t\t\t<pre><code class=\"language-javaScript\">+ - / *  //operatori matematici di base\n\nrandom(minimo, massimo); //numero casuale\n\nmap(valore, attuale1, attuale2, nuovo1, nuovo2);\n//mappa un valore dall'intervallo attuale a uno nuovo\n</code></pre>\n\t\t</section>\n\n<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->\n\t\t<!-- <section>\n\t\t\t<h1>variable definition</h1>\n\t\t\t<pre><code class=\"language-javaScript\">//let & keyword defines a variable\n// use single = to store data in the variable\nlet variableName = 100;\nlet myWords = \"a string of text!\";\nlet randStorage = random(0,255); // store returned data\n</code></pre>\n\t\t</section> -->\n\n\t\t<section>\n\t\t\t<h1>primitive 2d</h1>\n\t\t\t<pre><code class=\"language-javaScript\">line(x1, y1, x2, y2); //linea\n\nellipse(x, y, larghezza, altezza); //ellisse\n\nrect(x, y, larghezza, altezza); //rettangolo\n\narc(x, y, larghezza, altezza, inizio, fine); //arco\n\nbeginShape(); //poligono\n  vertex(x1, y1);\n  vertex(x2, y2);\n  vertex(x3, y3);\n  //aggiungi eventuali altri vertici\nendShape(CLOSE);\n\ntext(\"testo\", x, y, larghezzaParagrafo, altezzaParagrafo);\n</code></pre>\n\n\t\t\t<ul>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>coordinate</h2>\n\t\t\t\t\t<div id=\"grid-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>line()</h2>\n\t\t\t\t\t<div id=\"line-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>ellipse()</h2>\n\t\t\t\t\t<div id=\"ellipse-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>rect()</h2>\n\t\t\t\t\t<div id=\"rect-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>arc()</h2>\n\t\t\t\t\t<div id=\"arc-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>vertex()</h2>\n\t\t\t\t\t<div id=\"vertex-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</section>\n\n\n\n\t</div>\n\t<!-- End Second Col -->\n\t<div class=\"column\">\n\n\t\t<section>\n\t\t\t<h1>attributi grafici</h1>\n\t\t\t<pre><code class=\"language-javaScript\">background(colore);\n//colora l'intera area di disegno\n\nfill(colore);\n//imposta il colore di riempimento\n\nnoFill();\n//disattiva il riempimento\n\nstroke(colore);\n//imposta il colore dei contorni\n\nstrokeWeight(spessore);\n//imposta lo spessore dei contorni in pixel\n\nnoStroke();\n//disattiva il disegno dei contorni\n\nellipseMode(ancoraggio);\nrectMode(ancoraggio);\n//ancoraggi: CENTER, CORNER\n\ntextSize(altezzaCarattere);\n</code></pre>\n\t\t</section>\n\n\t\t<section>\n\t\t\t<h1>logica se/allora</h1>\n\t\t\t<div class=\"logic\">\n\t\t\t\t<pre><code class=\"language-javaScript\">if(condizione){\n  //istruzioni\n}\n\n===  //uguale a\n!==  //diverso da\n>   //maggiore di\n<   //minore di\n>=  //maggiore o uguale\n<=  //minore o uguale\n\n</code></pre>\n<div id=\"ifelse-canvas\"></div>\n\n\t\t</div>\n\n\t\t</section>\n\n\t\t<footer>\n\t\t\tRedatto da Ben Moren <a href=\"http://benmoren.com\">http://benmoren.com</a> CC-BY-SA-NC-4.0\n\t\t\t<br>\n\t\t\tTradotto da <a href=\"https:/codesthesia.net\">Antonio Belluscio</a>\n\t\t</footer>\n\n\t</div>\n\n\t</article>\n\n\n\t<script type=\"text/javascript\">\n\t\t// Terms to translate for diagrams\n\t\tvar terms = {\n\t\t\t\"width\": \"larghezza\",\n\t\t\t\"height\": \"altezza\",\n\t\t\t\"stop\": \"fine\",\n\t\t\t\"start\": \"inizio \",  // the final space avoids overlapping with the arc\n\t\t\t\"true\": \"vero\",\n\t\t\t\"false\": \"falso\",\n\t\t\t\"continue_program\": \"continua il programma\",\n\t\t\t\"test\": \"condizione\",\n\t\t\t\"statements\": \"istruzioni\"\n\t\t};\n\t</script>\n\n\t<script src=\"prism.js\"></script>\n\t<script src=\"p5.min.js\"></script>\n\t<script src=\"diagram.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "docs/ja.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n\t<title>p5.js Cheat Sheet</title>\n\t<meta http-equiv=\"pragma\" content=\"no-cache\" />\n\t<meta http-equiv=\"cache-control\" content=\"no-cache\" />\n\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"all\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"prism.css\" media=\"all\">\n\n</head>\n<body id=\"ja\">\n\t<!-- Include the menu, there's likely a more elegent way to do this -->\n\t<script src=\"menu.js\"></script>\n\n\t<article id=\"cheat-sheet\">\n\t\t<div class=\"column\">\n\t\t\t<header>\n\t\t\t\t<h1 id=\"title\">p5.js</h1>\n\t\t\t\t<p id=\"subtitle\">ビギナー向けチートシート</p>\n\t\t\t</header>\n\n\t\t\t<section>\n\t\t\t\t<h1>プログラムの構造</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">// プログラムが開始するとき一度だけ実行\nfunction setup(){\n  createCanvas(800,600);\n}\n\n// setupが実行された後，継続して実行\nfunction draw(){\n  // レンダリングのループ\n}\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>システム変数</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">windowWidth / windowHeight\n//ウィンドウの 幅 / 高さ\n\nwidth / height\n//キャンバスの 幅 / 高さ\n\nmouseX / mouseY\n//現在の 水平(X方向) / 垂直(Y方向)のマウス位置\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>テキストでのフィードバック</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">\nprint(something);\n//コンソールにデータを出力して表示\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>色</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">fill(120); //グレースケール:0-255\nfill(100,125,255); //r, g, b: 0-255\nfill(255, 0, 0, 50); //r, g, b, alpha\nfill('red'); //文字列で色を指定\nfill('#ccc'); //3桁のHex\nfill('#222222'); //6桁のHex\ncolor(0, 0, 255); //p5.Colorオブジェクト\n</code></pre>\n\t\t\t</section>\n\t\t</div>\n\n\t\t<div class=\"column\">\n\n\t\t\t<section>\n\t\t\t\t<h1>数値計算</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">+ - / *\n\nrandom(low,high);\n\nmap(value, in1, in2, out1, out2);\n//入力値の範囲にある値を出力値の範囲にマッピングする\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>2Dのプリミティブ図形</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">line(x1, y1, x2, y2);\n\nellipse(x, y, width, height);\n\nrect(x, y, width, height);\n\narc(x, y, width, height, start, stop);\n\nbeginShape();\n  vertex(x1, y1);\n  vertex(x2, y2);\n  vertex(x3, y3);\n  // 頂点の追加\nendShape(CLOSE);\n\ntext(\"string\", x, y, boxwidth, boxheight);\n</code></pre>\n\n\t\t\t\t<ul>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>グリッドシステム</h2>\n\t\t\t\t\t\t<div id=\"grid-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>line()</h2>\n\t\t\t\t\t\t<div id=\"line-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>ellipse()</h2>\n\t\t\t\t\t\t<div id=\"ellipse-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>rect()</h2>\n\t\t\t\t\t\t<div id=\"rect-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>arc()</h2>\n\t\t\t\t\t\t<div id=\"arc-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>vertex()</h2>\n\t\t\t\t\t\t<div id=\"vertex-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</section>\n\n\t\t</div>\n\n\t\t<div class=\"column\">\n\t\t\t<section>\n\t\t\t\t<h1>属性</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">background(color);\n//背景色を設定\n\nfill(color);\n//塗りつぶしの色を設定\n\nnoFill();\n//塗りつぶしを無効\n\nstroke(color);\n//線の色を設定\n\nstrokeWeight(weight);\n//線の太さを設定\n\nnoStroke();\n//線を無効\n\nellipseMode(MODE);\nrectMode(MODE);\n//CENTER,CORNER\n\ntextSize(pixels);\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>条件分岐</h1>\n\n\t\t\t\t<div class=\"logic\">\n\t\t\t\t<pre><code class=\"language-javaScript\">if(test){\n  //statements\n}\n\n=== 等しい\n!== 等しくない\n>  より大きい\n<  より小さい\n>= 以上\n<= 以下</code></pre>\n\t\t\t\t<div id=\"ifelse-canvas\"></div>\n\t\t\t</section>\n\n\t\t\t<footer>\n\t\t\t\tCompiled by Ben Moren <a href=\"http://benmoren.com\">http://benmoren.com</a> CC BY SA NC 4.0 <br>\n\t\t\t\tTranslation by: <a href=\"https://twitter.com/takawo\">Takawo Shunsuke</a>\n\t\t\t</footer>\n\t\t</div>\n\t\t</div>\n\t</article>\n\n\n\n\t<script type=\"text/javascript\">\n\n\n\t// Terms to translate for diagrams\n\tvar terms = {\n\t\t\"width\": \"width\",\n\t\t\"height\": \"height\",\n\t\t\"stop\": \"stop\",\n\t\t\"start\": \"start\",\n\t\t\"true\": \"true\",\n\t\t\"false\": \"false\",\n\t\t\"continue_program\": \"continue program\",\n\t\t\"test\": \"test\",\n\t\t\"statements\": \"statements\"\n\t};\n\n\n\n\n\t</script>\n\t<script src=\"prism.js\"></script>\n\t<script src=\"p5.min.js\"></script>\n\t<script src=\"diagram.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "docs/ko.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n\t<title>p5.js 한글 치트 시트</title>\n\t<meta http-equiv=\"pragma\" content=\"no-cache\" />\n\t<meta http-equiv=\"cache-control\" content=\"no-cache\" />\n\t<meta charset=\"utf-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"all\">\n\t<link rel=\"stylesheet\" href=\"prism.css\">\n\n</head>\n\n<body>\n\n\t<!-- Include the menu, there's likely a more elegent way to do this -->\n\t<script src=\"menu.js\"></script>\n\n\t\t<article id=\"cheat-sheet\">\n\t\t\t<div class=\"column\">\n\n\t\t\t<header>\n\t\t\t\t<h1 id=\"title\">p5.js</h1>\n\t\t\t\t<p id=\"subtitle\">초보자를 위한 치트 시트!</p>\n\t\t\t</header>\n\n\t\t\t<section>\n\t\t\t\t<h1>프로그램 구조</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">// 프로그램이 시작될때 한번 실행됨\nfunction setup(){\n  createCanvas(800,600); // 픽셀단위의 가로, 세로 크기\n}\n\n// setup이 실행된 이후 반복되서 실행됨\nfunction draw(){\n  // 렌더링 반복\n}\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>시스템 변수들</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">windowWidth / windowHeight\n// 윈도우의 가로/세로\n\nwidth / height\n// 캔버스의 가로 / 세로\n\nmouseX / mouseY\n// 현재의 마우스의 x/y 좌표\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1> 그래픽으로 출력되지 않는 피드백</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">print();\n// 브라우저의 콘솔에 출력\n\n// 주석처리를 위해 더블 슬래시를 사용 (프로그램이 무시함)\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>컬러</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">fill(120); // 흑백 : 0-255의 범주를 가짐\nfill(100,125,255); //r, g, b: 0-255의 범주를 가짐\nfill(255, 0, 0, 50); //r, g, b, 알파(투명도)\nfill('red'); // 컬러 문자열\nfill('#ccc'); // 3-digit의 HEX 코드\nfill('#222222'); // 6-digit의 HEX로 채움\ncolor(0, 0, 255); // p5.Color 오브젝트\n</code></pre>\n\t\t\t</section>\n\n\n\t</div>\n\t<!-- End First Col -->\n\n\t<div class=\"column\">\n\n\t\t<section>\n\t\t\t<h1>수학</h1>\n\t\t\t<pre><code class=\"language-javaScript\">+ - / *  // 기본적인 수학 연산자\n\nrandom(low,high); // 범위가 있는 난수 생성하기\n\nmap(value, in1, in2, out1, out2);\n// 어떤 값(value)이 가질수 있는 최소(in1), 최대(in2) 의 범위를 갖는데\n// 이를 최소(out1), 최대(out2) 범주로 변환했을때의 값을 계산\n</code></pre>\n\t\t</section>\n\n<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->\n\t\t<!-- <section>\n\t\t\t<h1>variable definition</h1>\n\t\t\t<pre><code class=\"language-javaScript\">//let & keyword defines a variable\n// use single = to store data in the variable\nlet variableName = 100;\nlet myWords = \"a string of text!\";\nlet randStorage = random(0,255); // store returned data\n</code></pre>\n\t\t</section> -->\n\n\t\t<section>\n\t\t\t<h1>2차원 기초도형</h1>\n\t\t\t<pre><code class=\"language-javaScript\">line(x1, y1, x2, y2);\n\nellipse(x, y, width, height);\n\nrect(x, y, width, height);\n\narc(x, y, width, height, start, stop);\n\nbeginShape();\n  vertex(x1, y1);\n  vertex(x2, y2);\n  vertex(x3, y3);\n  // 버택스를 추가한다.\nendShape(CLOSE);\n\ntext(\"string\", x, y, boxwidth, boxheight);\n</code></pre>\n\n\t\t\t<ul>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>그리드 시스템</h2>\n\t\t\t\t\t<div id=\"grid-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>line()</h2>\n\t\t\t\t\t<div id=\"line-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>ellipse()</h2>\n\t\t\t\t\t<div id=\"ellipse-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>rect()</h2>\n\t\t\t\t\t<div id=\"rect-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>arc()</h2>\n\t\t\t\t\t<div id=\"arc-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>vertex()</h2>\n\t\t\t\t\t<div id=\"vertex-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</section>\n\n\n\n\t</div>\n\t<!-- End Second Col -->\n\t<div class=\"column\">\n\n\t\t<section>\n\t\t\t<h1>속성들</h1>\n\t\t\t<pre><code class=\"language-javaScript\">background(color);\n// 배경색을 지정\n\nfill(color);\n// 채울 색을 지정\n\nnoFill();\n// 채우기를 비활성화 함\n\nstroke(color);\n// 선의 색을 지정\n\nstrokeWeight(weight);\n// 선의 두꼐를 픽셀단위로 지정\n\nnoStroke();\n// 선을 비활성화\n\nellipseMode(MODE);\nrectMode(MODE);\n// CENTER,CORNER\n\ntextSize(pixels);\n</code></pre>\n\t\t</section>\n\n\t\t<section>\n\t\t\t<h1>if/then logic</h1>\n\t\t\t<div class=\"logic\">\n\t\t\t\t<pre><code class=\"language-javaScript\">if(test){\n  // 조건문의 구조\n}\n\n===  // 같은가? \n!==  // 다른가?\n>   // 큰가?\n<   // 작은가?\n>=  // 크거나 같은가?\n<=  // 작거나 같은가?\n\n</code></pre>\n<div id=\"ifelse-canvas\"></div>\n\n\t\t</div>\n\n\t\t</section>\n\n\t\t<footer>\n\t\t\tCompiled by Ben Moren <a href=\"http://benmoren.com\">http://benmoren.com</a> CC-BY-SA-NC-4.0\n\t\t\t<br>\n\t\t\tTranslation by <a href=\"http://github.com/icq4ever\">Yi donghoon</a>\n\t\t</footer>\n\n\t</div>\n\n\t</article>\n\n\n\t<script type=\"text/javascript\">\n\t\t// Terms to translate for diagrams\n\t\tvar terms = {\n\t\t\t\"width\": \"width\",\n\t\t\t\"height\": \"height\",\n\t\t\t\"stop\": \"stop\",\n\t\t\t\"start\": \"start\",\n\t\t\t\"true\": \"true\",\n\t\t\t\"false\": \"false\",\n\t\t\t\"continue_program\": \"continue program\",\n\t\t\t\"test\": \"test\",\n\t\t\t\"statements\": \"statements\"\n\t\t};\n\t</script>\n\n\t<script src=\"prism.js\"></script>\n\t<script src=\"p5.min.js\"></script>\n\t<script src=\"diagram.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "docs/menu.js",
    "content": "// The menu's option arrtibute should be the ISO code associated with the language & HTML page\ndocument.write(`\n<nav id=\"page-header\">\n  <ul id=\"language-selection\">\n    <li id=\"print\"> 🖨 </li>\n    <li> | </li>\n    <select id=\"dropdownmenu\" onchange=\"window.location = this.value + '.html' \">\n    <option value=\"index\"> English </option>\n    <option value=\"ca\"> Català </option>\n    <option value=\"es\"> Español </option>\n    <option value=\"fr\"> Français </option>\n    <option value=\"it\"> Italiano </option>\n    <option value=\"de\"> Deutsch </option>\n    <option value=\"nl\"> Nederlands </option>\n    <option value=\"zh\"> 中文（简体） </option>\n    <option value=\"zh-tw\"> 中文（繁體） </option>\n    <option value=\"ja\"> 日本語 </option>\n    <option value=\"ko\"> 한국어 </option>\n    <option value=\"id\"> Indonesia </option>\n    <option value=\"pt\"> Português </option>\n    <option value=\"tr\"> Türkçe </option>\n    </select>\n    <li> | </li>\n    <li><a href=\"https://p5js.org/reference/\">p5js Reference</a></li>\n  </ul>\n</nav>\n\n<style>\n  #print:hover{cursor:pointer;}\n</style>\n\n`)\n\n//select/toggle the correct language from the dropdown after making a selection (there might be a better way to do this?)\n//If path points to a directory, user agent will open the \"index.html\"\n//file in it, but will not append it to the window's path name. So treat\n//\"\" as \"index.html\"\nvar path = window.location.pathname.split(\"/\").pop()\nif(path === \"\"){\n  path = \"index.html\";\n}\nvar lang = path.split(\".\")[0]\n// console.log( lang );\ndocument.querySelector(`option[value=${lang}]`).selected = true\n\n\n//warning for printing to use chrome\ndocument.getElementById('print').addEventListener('click', function(){\n\n  let browser = navigator.userAgent.split(')').reverse()[0].match(/(?!Gecko|Version|[A-Za-z]+?Web[Kk]it)[A-Z][a-z]+/g)[0]\n\n  console.log(browser)\n  if(browser != \"Chrome\"){\n    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')\n  }\n  print();\n})\n"
  },
  {
    "path": "docs/nl.html",
    "content": "<!DOCTYPE html>\n<html>\n<head>\n\t<title>p5.js Cheat Sheet</title>\n\t<meta http-equiv=\"pragma\" content=\"no-cache\" />\n\t<meta http-equiv=\"cache-control\" content=\"no-cache\" />\n\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"all\">\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"prism.css\" media=\"all\">\n\n</head>\n<body>\n\t<!-- Include the menu, there's likely a more elegent way to do this -->\n\t<script src=\"menu.js\"></script>\n\n\t<article id=\"cheat-sheet\">\n\t\t<div class=\"column\">\n\t\t\t<header>\n\t\t\t\t<h1 id=\"title\">p5.js</h1>\n\t\t\t\t<p id=\"subtitle\">Een spiekbrief <br>voor beginners!</p>\n\t\t\t</header>\n\n\t\t\t<section>\n\t\t\t\t<h1>programma structuur</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">//wordt eenmaal uitgevoerd bij start programma\nfunction setup(){\n  createCanvas(800,600);\n}\n\n//draait continu na setup()\nfunction draw(){\n  //programmacode\n}\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>systeemvariabelen</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">windowWidth / windowHeight\n//breedte / hoogte van het venster\n\nwidth / height\n//breedte / hoogte van het canvas\n\nmouseX / mouseY\n//huidige horizontale / verticale muispositie\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>console uitvoer</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">print(\"tekst\" + variabele);\n//geef informatie weer in de console\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>kleur</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">fill(120); //grijs: 0-255\nfill(100,125,255); //r, g, b: 0-255\nfill(255, 0, 0, 50); //r, g, b, alpha\nfill('red'); //kleur aanduiding\nfill('#ccc'); //3-cijferige hex-code\nfill('#222222'); //6-cijferige hex-code\ncolor(0, 0, 255); //p5 kleurobject\n</code></pre>\n\t\t\t</section>\n\t\t</div>\n\n\t\t<div class=\"column\">\n\t\t\t<section>\n\t\t\t\t<h1>wiskunde</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">+ - / *\n\nrandom(minimum,maximum);\n\nmap(waarde, invoer-min, invoer-max, uitvoer-min, uitvoer-max);\n//converteer een waarde van invoer naar uitvoer\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>2d-vormen</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">line(x1, y1, x2, y2);\n\nellipse(x, y, breedte, hoogte);\n\nrect(x, y, breedte, hoogte);\n\narc(x, y, breedte, hoogte, start, stop);\n\nbeginShape();\n  vertex(x1, y1);\n  vertex(x2, y2);\n  vertex(x3, y3);\n  //voeg meer vertex() toe\nendShape(CLOSE);\n\ntext(\"mijn tekst\", x, y, breedte, hoogte);\n</code></pre>\n\n\t\t\t\t<ul>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>grid-systeem</h2>\n\t\t\t\t\t\t<div id=\"grid-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>line()</h2>\n\t\t\t\t\t\t<div id=\"line-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>ellipse()</h2>\n\t\t\t\t\t\t<div id=\"ellipse-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>rect()</h2>\n\t\t\t\t\t\t<div id=\"rect-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>arc()</h2>\n\t\t\t\t\t\t<div id=\"arc-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>vertex()</h2>\n\t\t\t\t\t\t<div id=\"vertex-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</section>\n\n\t\t</div>\n\n\t\t<div class=\"column\">\n\t\t\t<section>\n\t\t\t\t<h1>attributen</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">background(kleur);\n//stel de achtergrondkleur in\n\nfill(kleur);\n//stel de vulkleur in\n\nnoFill();\n//geen vulkleur\n\nstroke(kleur);\n//stel de lijnkleur in\n\nstrokeWeight(dikte);\n//stel de lijndikte in\n\nnoStroke();\n//geen lijn\n\nellipseMode(MODE);\nrectMode(MODE);\n//gebruik CENTER of CORNER\n\ntextSize(pixels);\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>als/dan logica</h1>\n\t\t\t\t<div class=\"logic\">\n\t\t\t\t<pre><code class=\"language-javaScript\">if(conditie){\n  //programmacode\n}\n\n=== gelijk aan\n!== niet gelijk\n>  groter dan\n<  kleiner dan\n>= groter dan of gelijk\n<= kleiner dan of gelijk\n\n</code></pre>\n\t\t\t\t<div id=\"ifelse-canvas\"></div>\n\t\t\t</section>\n\t\t\t<footer>\n\t\t\t\tCompiled by Ben Moren <a href=\"http://benmoren.com\">http://benmoren.com</a> CC BY SA NC 4.0,<br/>\n\t\t\t\tTranslation by <a href=\"https://github.com/vincentsijben\">Vincent Sijben</a>.\n\t\t\t</footer>\n\t\t</div>\n\t\t</div>\n\t</article>\n\n\n\n\t<script type=\"text/javascript\">\n\n\t// Terms to translate for diagrams\n\tvar terms = {\n\t\t\"width\": \"breedte\",\n\t\t\"height\": \"hoogte\",\n\t\t\"stop\": \"stop\",\n\t\t\"start\": \"start\",\n\t\t\"true\": \"waar\",\n\t\t\"false\": \"onwaar\",\n\t\t\"continue_program\": \"programma\\ngaat verder\",\n\t\t\"test\": \"conditie\",\n\t\t\"statements\": \"programmacode\"\n\t};\n\n\t</script>\n\t<script src=\"prism.js\"></script>\n\t<script src=\"p5.min.js\"></script>\n\t<script src=\"diagram.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "docs/prism.css",
    "content": "/* http://prismjs.com/download.html?themes=prism-coy&languages=markup+css+css-extras+clike+javascript+java&plugins=line-numbers */\n\n/*\n\n  * p5.js highlighting based on the prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML\n  * 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);\n  * @author Tim  Shedor\n\n  @ Modified by Ben Moren for p5.js CheatSheet in Nov 2019\n\n*/\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"],\ntextarea {\n  color: #222;\n  /* font-family:\n      \"inconsolata\",\n      Consolas,\n      Monaco,\n      'Andale Mono',\n      monospace; */\n  direction: ltr;\n  text-align: left;\n  white-space: pre;\n  word-spacing: normal;\n  word-break: normal;\n  -moz-tab-size: 4;\n  -o-tab-size: 4;\n  tab-size: 4;\n  -webkit-hyphens: none;\n  -moz-hyphens: none;\n  -ms-hyphens: none;\n  hyphens: none;\n  font-size: 1em !important;\n}\n\n/* Code blocks */\npre[class*=\"language-\"] {\n  position:relative;\n  padding: 0.5em 1.0em;\n  margin: 0.5em 0 0 -0.5em;\n  /* border-left: 0.5em solid rgba(255, 255, 255, 0.5); */\n   /* coy og blue 10px solid  358ccb  */\n  background-color: #fff; /* coy og white #fdfdfd  */\n  /* lines */\n  background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);\n  background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);\n  background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);\n  background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);\n  background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.06) 50%);\n  background-size: 2.9em 2.9em; /* adjusts height of alternating lines */\n  background-origin:content-box;\n  /* set overflow to just let the code roll  */\n  overflow:auto;\n  /* or uncomment this to let an inner vertical scroll be triggered,\n    but be generous as to when\n  max-height:36em; */\n}\n\ncode[class*=\"language\"] {\n}\n\n\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n  margin-bottom: 1em;\n}\n\n/* Inline code */\n:not(pre) > code[class*=\"language-\"] {\n  position:relative;\n  padding: .2em;\n  -webkit-border-radius: 0.3em;\n  -moz-border-radius: 0.3em;\n  -ms-border-radius: 0.3em;\n  -o-border-radius: 0.3em;\n  border-radius: 0.3em;\n  color: #333;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n\n:not(pre) > code[class*=\"language-\"]:after,\npre[class*=\"language-\"]:after {\n  right: 0.75em;\n  left: auto;\n}\n\n/*  code colors */\n.token.comment,\n.token.block-comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n  color: #A0A0A0; /* light gray */ /* 727272 898189 919191 A0A0A0 AFAFAF BEBEBE coy og: #7D8B99; */\n}\n\n.token.punctuation {\n  color: #666; /* darker gray */ /* og coy 5F6364 */\n}\n\n.token.property,\n.token.tag,\n.token.boolean,\n.token.number,\n.token.function-name,\n.token.constant,\n.token.symbol {\n  color: #ed225d; /* not p5 pink, but related */ /* og coy c92c2c a reddish color */\n}\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.function,\n.token.builtin {\n  color: #00A1D3; /* blue */ /* 877923  */  /* og coy 2f9c0a - green */\n}\n\n.token.operator,\n.token.entity,\n.token.url,\n.token.variable {\n  color: #a67f59; /* og coy a67f59 a light brown */\n  background: rgba(255, 255, 255, 0.5);\n}\n\n.token.atrule,\n.token.attr-value,\n.token.keyword,\n.token.class-name {\n  color: #704F21; /* 9F944F brown */ /* og coy #1990b8 blue */\n}\n\n.token.regex,\n.token.important {\n  color: #e90; /* og coy e90 orange */\n}\n.language-css .token.string,\n.style .token.string {\n  color: #a67f59; /* og coy a67f59 a light brown */\n  background: rgba(255, 255, 255, 0.5);\n}\n\n.token.important {\n  font-weight: normal;\n}\n\n.token.entity {\n  cursor: help;\n}\n\n.namespace {\n  opacity: .7;\n}\n\n@media screen and (max-width:767px){\n  pre[class*=\"language-\"]:before,\n  pre[class*=\"language-\"]:after {\n    bottom:14px;\n    -webkit-box-shadow:none;\n    -moz-box-shadow:none;\n    box-shadow:none;\n  }\n\n}\n\n/* Plugin styles */\n.token.tab:not(:empty):before,\n.token.cr:before,\n.token.lf:before {\n  color: #e0d7d1; /* og coy very light brown  */\n}\n\npre.line-numbers {\n  position: relative;\n  padding-left: 3.8em;\n  counter-reset: linenumber;\n}\n\npre.line-numbers > code {\n  position: relative;\n}\n\n.line-numbers .line-numbers-rows {\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  font-size: 100%;\n  left: -3.8em;\n  width: 3em; /* works for line-numbers below 1000 lines */\n  letter-spacing: -1px;\n  border-right: 1px solid #999;\n\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n\n}\n\n.line-numbers-rows > span {\n  pointer-events: none;\n  display: block;\n  counter-increment: linenumber;\n}\n\n.line-numbers-rows > span:before {\n  content: counter(linenumber);\n  color: #999;\n  display: block;\n  padding-right: 0.8em;\n  text-align: right;\n}\n"
  },
  {
    "path": "docs/prism.js",
    "content": "/* PrismJS 1.17.1\nhttps://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+json */\nvar _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);\nPrism.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;\n!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);\nPrism.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:/[{}[\\];(),.:]/};\nPrism.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;\nPrism.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\"}};\n"
  },
  {
    "path": "docs/pt.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n\t<title>p5.js Cheat Sheet</title>\n\t<meta http-equiv=\"pragma\" content=\"no-cache\" />\n\t<meta http-equiv=\"cache-control\" content=\"no-cache\" />\n\t<meta charset=\"utf-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"all\">\n\t<link rel=\"stylesheet\" href=\"prism.css\">\n\n</head>\n\n<body>\n\n\t<!-- Include the menu, there's likely a more elegent way to do this -->\n\t<script src=\"menu.js\"></script>\n\n\t\t<article id=\"cheat-sheet\">\n\t\t\t<div class=\"column\">\n\n\t\t\t<header>\n\t\t\t\t<h1 id=\"title\">p5.js</h1>\n\t\t\t\t<p id=\"subtitle\">uma folha de dicas <br> para iniciantes!</p>\n\t\t\t</header>\n\n\t\t\t<section>\n\t\t\t\t<h1>estrutura do programa</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">//setup() executa quando o programa começa\nfunction setup(){\n  createCanvas(800, 600); //largura, altura em pixels\n}\n\n//draw() executa continuamente depois do setup\nfunction draw(){\n  //instruções de desenho\n}\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>variáveis do sistema</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">windowWidth / windowHeight\n//largura / altura da janela\n\nwidth / height\n//largura / altura da área de desenho\n\nmouseX / mouseY\n//posição horizontal / vertical do mouse\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>feedback não-visual</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">print();\n//registra dados no console\n\n//barras duplas para comentar o código\n//(o programa pula essas linhas)\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>cor</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">fill(120); //cinza: 0-255\nfill(100, 125, 255); //r, g, b: 0-255\nfill(255, 0, 0, 50); //r, g, b, alpha: 0-255\nfill('red'); //nome CSS da cor\nfill('#ccc'); //código hex de 3 dígitos\nfill('#222222'); //código hex de 6 dígitos\ncolor(0, 0, 255); //objeto p5.Color\n</code></pre>\n\t\t\t</section>\n\n\n\t</div>\n\t<!-- End First Col -->\n\n\t<div class=\"column\">\n\n\t\t<section>\n\t\t\t<h1>matemática</h1>\n\t\t\t<pre><code class=\"language-javaScript\">+ - / *  //operadores matemáticos básicos\n\nrandom(min, max); \n//número aleatório entre os limites mínimo e máximo\n\nmap(valor, ent1, ent2, sai1, sai2);\n//mapeia o valor da faixa de entrada para a faixa de saída\n</code></pre>\n\t\t</section>\n\n<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->\n\t\t<!-- <section>\n\t\t\t<h1>variable definition</h1>\n\t\t\t<pre><code class=\"language-javaScript\">//let & keyword defines a variable\n// use single = to store data in the variable\nlet variableName = 100;\nlet myWords = \"a string of text!\";\nlet randStorage = random(0,255); // store returned data\n</code></pre>\n\t\t</section> -->\n\n\t\t<section>\n\t\t\t<h1>primitivas 2d</h1>\n\t\t\t<pre><code class=\"language-javaScript\">line(x1, y1, x2, y2);\n\nellipse(x, y, largura, altura);\n\nrect(x, y, largura, altura);\n\narc(x, y, largura, altura, inicio, fim);\n\nbeginShape();\n  vertex(x1, y1);\n  vertex(x2, y2);\n  vertex(x3, y3);\n  //adicione mais vértices\nendShape(CLOSE);\n\ntext(\"texto\", x, y, larguraCaixa, alturaCaixa);\n</code></pre>\n\n\t\t\t<ul>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>coordenadas</h2>\n\t\t\t\t\t<div id=\"grid-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>line()</h2>\n\t\t\t\t\t<div id=\"line-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>ellipse()</h2>\n\t\t\t\t\t<div id=\"ellipse-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>rect()</h2>\n\t\t\t\t\t<div id=\"rect-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>arc()</h2>\n\t\t\t\t\t<div id=\"arc-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t<h2>vertex()</h2>\n\t\t\t\t\t<div id=\"vertex-canvas\"></div>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</section>\n\n\n\n\t</div>\n\t<!-- End Second Col -->\n\t<div class=\"column\">\n\n\t\t<section>\n\t\t\t<h1>atributos</h1>\n\t\t\t<pre><code class=\"language-javaScript\">background(cor);\n//define a cor de fundo\n\nfill(cor);\n//define a cor de preenchimento\n\nnoFill();\n//desabilita o preenchimento\n\nstroke(cor);\n//define a cor de contorno\n\nstrokeWeight(pixels);\n//define a largura da linha de contorno em pixels\n\nnoStroke();\n//desabilita o contorno\n\nellipseMode(MODE);\nrectMode(MODE);\n//MODE: CENTER, CORNER (centro, canto)\n\ntextSize(pixels);\n//define o tamanho do texto em pixels\n</code></pre>\n\t\t</section>\n\n\t\t<section>\n\t\t\t<h1>lógica if/then</h1>\n\t\t\t<div class=\"logic\">\n\t\t\t\t<pre><code class=\"language-javaScript\">if (condicao){\n  //instruções\n}\n\n===  //igual a\n!==  //diferente de\n&gt;   //maior que\n&lt;   //menor que\n&gt;=  //maior que ou igual a\n&lt;=  //menor que ou igual a\n\n</code></pre>\n<div id=\"ifelse-canvas\"></div>\n\n\t\t</div>\n\n\t\t</section>\n\n\t\t<footer>\n\t\t\tCompilado por Ben Moren <a href=\"http://benmoren.com\">http://benmoren.com</a> CC-BY-SA-NC-4.0\n\t\t\t<br>\n      Tradução por <a href=\"https://felipeturcheti.com\">Felipe Turcheti</a>\n\t\t</footer>\n\n\t</div>\n\n\t</article>\n\n\n\t<script type=\"text/javascript\">\n\t\t// Terms to translate for diagrams\n\t\tvar terms = {\n\t\t\t\"width\": \"largura\",\n\t\t\t\"height\": \"altura\",\n\t\t\t\"stop\": \"fim\",\n\t\t\t\"start\": \"início\",\n\t\t\t\"true\": \"verdadeiro\",\n\t\t\t\"false\": \"falso\",\n\t\t\t\"continue_program\": \"continua o programa\",\n\t\t\t\"test\": \"teste\",\n\t\t\t\"statements\": \"instruções\"\n\t\t};\n\t</script>\n\n\t<script src=\"prism.js\"></script>\n\t<script src=\"p5.min.js\"></script>\n\t<script src=\"diagram.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "docs/style.css",
    "content": "/* // CHANGE ALL THE FONTS TO USE EMS */\n\n\n@font-face{\n\tfont-family: \"Fira Code\";\n\tfont-weight: normal;\n\tsrc: url(\"fonts/FiraCode-Regular.otf\") format(\"truetype\");\n}\n\n@font-face{\n\tfont-family: \"Fira Code\";\n\tfont-weight: light;\n\tsrc: url(\"fonts/FiraCode-Light.otf\") format(\"truetype\");\n}\n\n@font-face{\n\tfont-family: \"Fira Code\";\n\tfont-weight: medium;\n\tsrc: url(\"fonts/FiraCode-Medium.otf\") format(\"truetype\");\n}\n\n@font-face{\n\tfont-family: \"Fira Code\";\n\tfont-weight: bold;\n\tsrc: url(\"fonts/FiraCode-Bold.otf\") format(\"truetype\");\n}\n\n*{\n\tcolor-adjust: exact;\n\t-webkit-print-color-adjust: exact;\n\tbox-sizing: inherit;\n}\n\nbody,html{\n\tpadding: 2vw 1vw 0vw 1vw;\n\tmargin: 0;\n\tfont-family: \"Fira Code\", monospace;\n\tfont-size: 0.85vw;\n\tbox-sizing: border-box;\n}\n\na{\n\tcolor:#ed225d;\n}\na:hover{\n\tcolor: #545454;\n}\n\nh1, h2{\n\tcolor: #ed225d;\n\tfont-size: 1.2em;\n\tmargin:0.5vh;\n\twhite-space: nowrap;\n}\n\nfooter{\n\tfont-size: 0.75em;\n\ttext-align: right;\n\tmargin-top:0.5vh;\n\n}\n\n#subtitle{\n\ttext-align: center;\n}\n\n\nnav#page-header{\n\tposition: fixed;\n\twidth: 100%;\n\tleft: 0;\n\ttop: 0;\n\tz-index:9999;\n}\n\nnav#page-header #language-selection{\n\tposition:absolute;\n\tright:0;\n\tdisplay: flex;\n\tlist-style: none;\n\tpadding: 1vh;\n\tbackground-color:#fafafa;\n\tjustify-content: space-around;\n\twidth:33vw;\n\n}\n\n#cheat-sheet{\n\tdisplay: grid;\n\talign-items: start;\n\tgrid-template-columns: repeat(3,1fr);\n\tgrid-gap: 2vw;\n}\n\n\n#cheat-sheet  pre{\n\tbackground: #fafafa;\n\twhite-space: pre-wrap;\n\toverflow: inherit;\n}\n\n\n#cheat-sheet #title{\n\tfont-size: 2.25em;\n\twidth:50%;\n}\n\n#cheat-sheet header{\n\tdisplay:flex;\n\tjustify-content: center;\n\talign-items: center;\n}\n\n#cheat-sheet #subtitle{\n\tpadding: 0.5vw;\n\tbackground: #ed225d;\n\tcolor: #FFF;\n\twidth:50%;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n}\n\n#cheat-sheet ul{\n\tpadding: 0;\n\tlist-style: none;\n\t/* background-color:#fafafa; */\n\n}\n\n#cheat-sheet .canvas-container{\n\tdisplay: inline-block;\n\n}\n\ndiv.column section ul{\n\tdisplay:grid;\n\tgrid-template-columns: repeat(3,1fr);\n\tgrid-template-rows: repeat(2,1fr);\n\talign-content:center;\n\tjustify-content: center;\n\n}\n\n.canvas-container div{\n\tdisplay: flex;\n\tjustify-content: center;\n}\n\n.canvas-container div canvas {\n\twidth:87.5% !important;\n\theight:87.5% !important;\n}\n\n.logic{\n\tdisplay:grid;\n\tgrid-template-columns: 3fr 2fr;\n\t/* display: flex; */\n\tbackground-color:#fafafa;\n}\n\n\n#ifelse-canvas .p5Canvas{\n\twidth:100% !important;\n\theight:100% !important;\n }\n\n/* There might need to be another break size to 2 col or something? */\n\n/*  MOBILE – SMALL-TABLET & PHONE */\n @media screen and (max-width: 768px){\n\n\t body,html{\n\t\tfont-size: 3vw;\n\t\tmargin-top: 1.5vh;\n\t }\n\n\t #cheat-sheet{\n\t \tgrid-template-columns: 1fr;\n\t }\n\n\t nav#page-header #language-selection{\n\t \tposition:relative;\n\t \tleft:0;\n\t \twidth:100%;\n\t\tfont-size: 0.75em;\n\t }\n\n }\n\n/* PRINT – LANDSCAPE ORIENTATION IS FAVORED! */\n @media print{\n \t@page{\n \t\tsize: landscape;\n \t}\n\n\tbody,html{\n\t\tpadding: 0px;\n\t\tfont-size: 1.25vw;\n\t}\n\n/* special for printing the JA, ZH since the characters take more vertical space */\n\t#ja , #zh {\n\t\tfont-size: 1.0vw;\n\t}\n\n\t#tr {\n\t\tfont-size: 0.97vw;\n\t}\n\n \tnav#page-header{\n\t\tdisplay:none;\n\t}\n\n\t.logic{\n\t\tdisplay:grid;\n\t\tgrid-template-columns: 1fr;\n\t\t/* display: flex; */\n\t}\n\n\t#ifelse-canvas{\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t}\n\n\t#ifelse-canvas .p5Canvas{\n\t\twidth:50% !important;\n\t }\n\n\tfooter{\n\t font-size: 0.5em;\n\t}\n\n}\n\n\n /* @media print and (orientation: portrait){\n\n } */\n"
  },
  {
    "path": "docs/tr.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <title>p5.js Özet Bilgiler</title>\n    <meta http-equiv=\"pragma\" content=\"no-cache\" />\n    <meta http-equiv=\"cache-control\" content=\"no-cache\" />\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"all\" />\n    <link rel=\"stylesheet\" href=\"prism.css\" />\n  </head>\n\n  <body id=\"tr\">\n    <!-- Include the menu, there's likely a more elegent way to do this -->\n    <script src=\"menu.js\"></script>\n\n    <article id=\"cheat-sheet\">\n      <div class=\"column\">\n        <header>\n          <h1 id=\"title\">p5.js</h1>\n          <p id=\"subtitle\">Başlangıç için <br />Özet Bilgiler!</p>\n        </header>\n\n        <section>\n          <h1>Program Yapısı</h1>\n          <pre><code class=\"language-javaScript\">//program başladığında bir kez çalışır\nfunction setup(){\n  createCanvas(800,600); \n  //piksel olarak genişlik, yükseklik\n}\n\n//setup() tamamlandıktan sonra sürekli çalışır\nfunction draw(){\n  //bir döngü içinde yürütülen kod\n}\n</code></pre>\n        </section>\n\n        <section>\n          <h1>Sistem Değişkenleri</h1>\n          <pre><code class=\"language-javaScript\">windowWidth / windowHeight\n//pencere genişliği / yüksekliği\n\nwidth / height\n//kanvasın genişliği / yüksekliği\n\nmouseX / mouseY\n//anlık yatay / dikey fare konumu\n</code></pre>\n        </section>\n\n        <section>\n          <h1>Konsol</h1>\n          <pre><code class=\"language-javaScript\">print();\n//değerleri konsola yazdırır\n\n//çift eğik çizgi (//) yorum satırıdır\n//program yorum satırlarını çalıştırmaz\n</code></pre>\n        </section>\n\n        <section>\n          <h1>Renk</h1>\n          <pre><code class=\"language-javaScript\">fill(120); //gri: 0-255\nfill(100,125,255); //kırmızı, yeşil, mavi: 0-255\nfill(255, 0, 0, 50); //kırmızı, yeşil, mavi, alfa\nfill('red'); //CSS-SVG renk adı\nfill('#ccc'); //3 haneli hex renk kodu\nfill('#222222'); //6 haneli hex renk kodu\ncolor(0, 0, 255); //p5.Color nesnesi\n</code></pre>\n        </section>\n      </div>\n      <!-- End First Col -->\n\n      <div class=\"column\">\n        <section>\n          <h1>Matematiksel İşlevler</h1>\n          <pre><code class=\"language-javaScript\">+ - / *  //temel matematik operatörleri\n\nrandom(minimum, maksimum);\n//belirtilen aralıkta rastgele sayı üretir\n\nmap(değer, girişMin, girişMaks, çıkışMin, çıkışMaks);\n//bir değeri aralıklar arasında doğrusal eşler\n</code></pre>\n        </section>\n\n        <!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->\n        <!-- <section>\n\t\t\t<h1>variable definition</h1>\n\t\t\t<pre><code class=\"language-javaScript\">//let & keyword defines a variable\n// use single = to store data in the variable\nlet variableName = 100;\nlet myWords = \"a string of text!\";\nlet randStorage = random(0,255); // store returned data\n</code></pre>\n\t\t</section> -->\n\n        <section>\n          <h1>2 Boyutlu Şekiller</h1>\n          <pre><code class=\"language-javaScript\">line(x1, y1, x2, y2); //çizgi\n\nellipse(x, y, genişlik, yükseklik); //elips\n\nrect(x, y, genişlik, yükseklik); //dikdörtgen\n\narc(x, y, genişlik, yükseklik, başlamaAçısı, bitirmeAçısı); //yay\n\nbeginShape(); //köşe noktalarıyla özel şekil oluşturmaya başlar\n  vertex(x1, y1); //köşe noktası\n  vertex(x2, y2);\n  vertex(x3, y3);\n  //bu yapı içine daha fazla köşe noktası eklenebilir\nendShape(CLOSE);\n\ntext(\"yazı\", x, y, kutuGenişliği, kutuYüksekliği);\n//yazıyı verilen konuma ve kutu boyutuna göre çizer\n</code></pre>\n\n          <ul>\n            <li class=\"canvas-container\">\n              <h2>koordinatlar</h2>\n              <div id=\"grid-canvas\"></div>\n            </li>\n            <li class=\"canvas-container\">\n              <h2>line()</h2>\n              <div id=\"line-canvas\"></div>\n            </li>\n            <li class=\"canvas-container\">\n              <h2>ellipse()</h2>\n              <div id=\"ellipse-canvas\"></div>\n            </li>\n            <li class=\"canvas-container\">\n              <h2>rect()</h2>\n              <div id=\"rect-canvas\"></div>\n            </li>\n            <li class=\"canvas-container\">\n              <h2>arc()</h2>\n              <div id=\"arc-canvas\"></div>\n            </li>\n            <li class=\"canvas-container\">\n              <h2>vertex()</h2>\n              <div id=\"vertex-canvas\"></div>\n            </li>\n          </ul>\n        </section>\n      </div>\n      <!-- End Second Col -->\n      <div class=\"column\">\n        <section>\n          <h1>Özellikler</h1>\n          <pre><code class=\"language-javaScript\">background(renk);\n//arka plan rengi\n\nfill(renk);\n//dolgu rengi\n\nnoFill();\n//dolgu rengini kaldırır\n\nstroke(renk);\n//kontur rengi\n\nstrokeWeight(kalınlık);\n//piksel olarak kontur kalınlığı\n\nnoStroke();\n//kontur rengini kaldırır\n\nellipseMode(MODE);\nrectMode(MODE);\n//CENTER veya CORNER\n\ntextSize(boyut);\n//piksel olarak yazı boyutu\n</code></pre>\n        </section>\n\n        <section>\n          <h1>Koşullu Mantık</h1>\n          <div class=\"logic\">\n            <pre><code class=\"language-javaScript\">if(koşul){\n  //yürütülecek kod\n}\n\n=== //değer ve tür eşittir\n!== //değer veya tür eşit değildir\n>   //büyüktür\n<   //küçüktür\n>=  //büyük veya eşittir\n<=  //küçük veya eşittir\n\n</code></pre>\n            <div id=\"ifelse-canvas\"></div>\n          </div>\n        </section>\n\n        <footer>\n          Derleyen Ben Moren\n          <a href=\"http://benmoren.com\">http://benmoren.com</a> CC-BY-SA-NC-4.0\n          <br />Çeviren\n          <a target=\"_blank\" href=\"https://github.com/bedirxanugur\"\n            >Bedirhan Ugur</a\n          >\n        </footer>\n      </div>\n    </article>\n\n    <script type=\"text/javascript\">\n      // Terms to translate for diagrams\n      var terms = {\n        width: \"genişlik\",\n        height: \"yükseklik\",\n        stop: \"bitir\",\n        start: \"başla\",\n        true: \"doğru\",\n        false: \"yanlış\",\n        continue_program: \"programa devam et\",\n        test: \"koşul\",\n        statements: \"kod bloğu\",\n      };\n    </script>\n\n    <script src=\"prism.js\"></script>\n    <script src=\"p5.min.js\"></script>\n    <script src=\"diagram.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "docs/zh-tw.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n\t<title>p5.js新手小抄</title>\n\t<meta http-equiv=\"pragma\" content=\"no-cache\" />\n\t<meta http-equiv=\"cache-control\" content=\"no-cache\" />\n\t<meta charset=\"utf-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"all\">\n\t<link rel=\"stylesheet\" href=\"prism.css\">\n\n</head>\n\n<body id=\"zh\">\n\n\t<!-- Include the menu, there's likely a more elegent way to do this -->\n\t<script src=\"menu.js\"></script>\n\n\t<article id=\"cheat-sheet\">\n\t\t<div class=\"column\">\n\n\t\t\t<header>\n\t\t\t\t<h1 id=\"title\">p5.js</h1>\n\t\t\t\t<p id=\"subtitle\">給新手的小抄!</p>\n\t\t\t</header>\n\n\t\t\t<section>\n\t\t\t\t<h1>程式基本架構</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">//初始化，只在程式開始運行的時候執行一次\nfunction setup(){\n  createCanvas(800,600); //建立寬高為 800 x 600 的畫布，單位是像素\n}\n\n//在初始化之後一直循環執行\nfunction draw(){\n  //渲染循環\n}\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>系統變數</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">windowWidth / windowHeight\n//視窗的寬度和高度\n\nwidth / height\n//畫布的寬度和高度\n\nmouseX / mouseY\n//滑鼠的位置\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>測試輸出</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">console.log(data);\n//在控制台裡輸出資料\n\n//用雙斜槓開頭來寫註解（不會被當程式執行）\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>顏色</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">fill(120); //gray(灰度): 0-255\nfill(100,125,255); //r（紅）, g（綠）, b（藍）: 0-255\nfill(255, 0, 0, 50); //r, g, b, alpha（透明度）\nfill('red'); //顏色名稱\nfill('#ccc'); //3位Hex色碼\nfill('#222222'); //6位Hex色碼\ncolor(0, 0, 255); //p5.Color物件\n</code></pre>\n\t\t\t</section>\n\n\n\t\t</div>\n\t\t<!-- End First Col -->\n\n\t\t<div class=\"column\">\n\n\t\t\t<section>\n\t\t\t\t<h1>數學</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">+ - / *  //基本運算符號\n\nrandom(low,high); //產生一個介於特定範圍的隨機數\n\nmap(value, in1, in2, out1, out2);\n//把一個數值從一個範圍內映射到另一個範圍\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->\n\t\t\t<!-- <section>\n\t\t\t<h1>variable definition</h1>\n\t\t\t<pre><code class=\"language-javaScript\">//let & keyword defines a variable\n//use single = to store data in the variable\nlet variableName = 100;\nlet myWords = \"a string of text!\";\nlet randStorage = random(0,255); //store returned data\n</code></pre>\n\t\t</section> -->\n\n\t\t\t<section>\n\t\t\t\t<h1>2d 基本圖形</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">line(x1, y1, x2, y2);\n\nellipse(x, y, width, height);\n\nrect(x, y, width, height);\n\narc(x, y, width, height, start, stop);\n\nbeginShape();\n  vertex(x1, y1);\n  vertex(x2, y2);\n  vertex(x3, y3);\n  //添加更多的頂點\nendShape(CLOSE);\n\ntext(\"string\", x, y, boxwidth, boxheight);\n</code></pre>\n\n\t\t\t\t<ul>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>網格系統</h2>\n\t\t\t\t\t\t<div id=\"grid-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>line() 線條</h2>\n\t\t\t\t\t\t<div id=\"line-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>ellipse() 圓</h2>\n\t\t\t\t\t\t<div id=\"ellipse-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>rect() 矩形</h2>\n\t\t\t\t\t\t<div id=\"rect-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>arc() 扇形</h2>\n\t\t\t\t\t\t<div id=\"arc-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>vertex() 頂點</h2>\n\t\t\t\t\t\t<div id=\"vertex-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</section>\n\n\n\n\t\t</div>\n\t\t<!-- End Second Col -->\n\t\t<div class=\"column\">\n\n\t\t\t<section>\n\t\t\t\t<h1>屬性</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">background(color);\n//指定背景色\n\nfill(color);\n//指定填色\n\nnoFill();\n//不填色\n\nstroke(color);\n//指定描邊顏色\n\nstrokeWeight(weight);\n//指定描邊寬度\n\nnoStroke();\n//不描邊\n\nellipseMode(MODE);\nrectMode(MODE);\n//設定參數被解讀的方式：CENTER（中心模式），CORNER（邊角模式）\n\ntextSize(pixels);\n//設定文字大小\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>if/then 邏輯</h1>\n\t\t\t\t<div class=\"logic\">\n\t\t\t\t\t<pre><code class=\"language-javaScript\">if(condition){\n  //語句\n}\n\n===  //等於\n!==  //不等於\n>   //大於\n<   //小於\n>=  //大於等於\n<=  //小於等於\n|| //或\n&& //且\n\n</code></pre>\n\t\t\t\t\t<div id=\"ifelse-canvas\"></div>\n\n\t\t\t\t</div>\n\n\t\t\t</section>\n\n\t\t\t<footer>\n\t\t\t\tCompiled by Ben Moren <a href=\"http://benmoren.com\">http://benmoren.com</a> CC-BY-SA-NC-4.0\n\t\t\t\t<br>\n\t\t\t\tTranslation by eziraros\n\t\t\t</footer>\n\n\t\t</div>\n\n\t</article>\n\n\n\t<script type=\"text/javascript\">\n\t\t// Terms to translate for diagrams\n\t\tvar terms = {\n\t\t\t\"width\": \"width\",\n\t\t\t\"height\": \"height\",\n\t\t\t\"stop\": \"stop\",\n\t\t\t\"start\": \"start\",\n\t\t\t\"true\": \"true\",\n\t\t\t\"false\": \"false\",\n\t\t\t\"continue_program\": \"continue program\",\n\t\t\t\"test\": \"test\",\n\t\t\t\"statements\": \"statements\"\n\t\t};\n\t</script>\n\n\t<script src=\"prism.js\"></script>\n\t<script src=\"p5.min.js\"></script>\n\t<script src=\"diagram.js\"></script>\n</body>\n\n</html>\n"
  },
  {
    "path": "docs/zh.html",
    "content": "<!DOCTYPE html>\n<html>\n\n<head>\n\t<title>p5.js新手入门神器</title>\n\t<meta http-equiv=\"pragma\" content=\"no-cache\" />\n\t<meta http-equiv=\"cache-control\" content=\"no-cache\" />\n\t<meta charset=\"utf-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\t<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"all\">\n\t<link rel=\"stylesheet\" href=\"prism.css\">\n\n</head>\n\n<body id=\"zh\">\n\n\t<!-- Include the menu, there's likely a more elegent way to do this -->\n\t<script src=\"menu.js\"></script>\n\n\t<article id=\"cheat-sheet\">\n\t\t<div class=\"column\">\n\n\t\t\t<header>\n\t\t\t\t<h1 id=\"title\">p5.js</h1>\n\t\t\t\t<p id=\"subtitle\">新手入门神器!</p>\n\t\t\t</header>\n\n\t\t\t<section>\n\t\t\t\t<h1>程序基本结构</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">//初始化，只在程序开始运行的时候执行一次\nfunction setup(){\n  createCanvas(800,600); //画布长度和宽度，单位是像素\n}\n\n//在初始化之后一直循环执行\nfunction draw(){\n  //渲染循环\n}\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>系统变量</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">windowWidth / windowHeight\n//窗口的高度和宽度\n\nwidth / height\n//当前画布的高度和宽度\n\nmouseX / mouseY\n//当前鼠标的X坐标和Y坐标\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>调试输出</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">print();\n//在调试控制台上输出\n\n//可以用双斜杠表示注释内容\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>颜色</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">fill(120); //gray(灰度): 0-255\nfill(100,125,255); //r（红）, g（绿）, b（蓝）: 0-255\nfill(255, 0, 0, 50); //r, g, b, alpha（）透明度\nfill('red'); //颜色名称\nfill('#ccc'); //3位十六进制值\nfill('#222222'); //6位十六进制值\ncolor(0, 0, 255); //p5.Color对象\n</code></pre>\n\t\t\t</section>\n\n\n\t\t</div>\n\t\t<!-- End First Col -->\n\n\t\t<div class=\"column\">\n\n\t\t\t<section>\n\t\t\t\t<h1>数学</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">+ - / *  //基础数学运算符号\n\nrandom(low,high); //产生随机数\n\nmap(value, in1, in2, out1, out2);\n//把一个值从一个范围内映射到另一个范围。\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<!-- CONSIDERING ADDING THIS HERE AND MOVING MATH TO THE BOTTOM OF COL 1, THOGUHTS? -->\n\t\t\t<!-- <section>\n\t\t\t<h1>variable definition</h1>\n\t\t\t<pre><code class=\"language-javaScript\">//let & keyword defines a variable\n// use single = to store data in the variable\nlet variableName = 100;\nlet myWords = \"a string of text!\";\nlet randStorage = random(0,255); // store returned data\n</code></pre>\n\t\t</section> -->\n\n\t\t\t<section>\n\t\t\t\t<h1>2d 基本图形</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">line(x1, y1, x2, y2);\n\nellipse(x, y, width, height);\n\nrect(x, y, width, height);\n\narc(x, y, width, height, start, stop);\n\nbeginShape();\n  vertex(x1, y1);\n  vertex(x2, y2);\n  vertex(x3, y3);\n  //添加更多的顶点\nendShape(CLOSE);\n\ntext(\"string\", x, y, boxwidth, boxheight);\n</code></pre>\n\n\t\t\t\t<ul>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>网格系统</h2>\n\t\t\t\t\t\t<div id=\"grid-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>line() 线条</h2>\n\t\t\t\t\t\t<div id=\"line-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>ellipse() 圆</h2>\n\t\t\t\t\t\t<div id=\"ellipse-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>rect() 矩形</h2>\n\t\t\t\t\t\t<div id=\"rect-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>arc() 扇形</h2>\n\t\t\t\t\t\t<div id=\"arc-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"canvas-container\">\n\t\t\t\t\t\t<h2>vertex() 顶点</h2>\n\t\t\t\t\t\t<div id=\"vertex-canvas\"></div>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</section>\n\n\n\n\t\t</div>\n\t\t<!-- End Second Col -->\n\t\t<div class=\"column\">\n\n\t\t\t<section>\n\t\t\t\t<h1>属性</h1>\n\t\t\t\t<pre><code class=\"language-javaScript\">background(color);\n//设置背景颜色\n\nfill(color);\n//设置填充颜色\n\nnoFill();\n//取消填充\n\nstroke(color);\n//设置描边颜色\n\nstrokeWeight(weight);\n//设置描边宽度\n\nnoStroke();\n//取消描边\n\nellipseMode(MODE);\nrectMode(MODE);\n//参数被解读的方式 中心模式，边角模式\n\ntextSize(pixels);\n//文字大小\n</code></pre>\n\t\t\t</section>\n\n\t\t\t<section>\n\t\t\t\t<h1>if/then 逻辑</h1>\n\t\t\t\t<div class=\"logic\">\n\t\t\t\t\t<pre><code class=\"language-javaScript\">if(条件){\n  //语句\n}\n\n===  //等于\n!==  //不等于\n>   //大于\n<   //小于\n>=  //大于等于\n<=  //小于等于\n\n</code></pre>\n\t\t\t\t\t<div id=\"ifelse-canvas\"></div>\n\n\t\t\t\t</div>\n\n\t\t\t</section>\n\n\t\t\t<footer>\n\t\t\t\tCompiled by Ben Moren <a href=\"http://benmoren.com\">http://benmoren.com</a> CC-BY-SA-NC-4.0\n\t\t\t\t<br>\n\t\t\t\tTranslation by Drafff\n\t\t\t</footer>\n\n\t\t</div>\n\n\t</article>\n\n\n\t<script type=\"text/javascript\">\n\t\t// Terms to translate for diagrams\n\t\tvar terms = {\n\t\t\t\"width\": \"width\",\n\t\t\t\"height\": \"height\",\n\t\t\t\"stop\": \"stop\",\n\t\t\t\"start\": \"start\",\n\t\t\t\"true\": \"true\",\n\t\t\t\"false\": \"false\",\n\t\t\t\"continue_program\": \"continue program\",\n\t\t\t\"test\": \"test\",\n\t\t\t\"statements\": \"statements\"\n\t\t};\n\t</script>\n\n\t<script src=\"prism.js\"></script>\n\t<script src=\"p5.min.js\"></script>\n\t<script src=\"diagram.js\"></script>\n</body>\n\n</html>\n"
  }
]