{"id":20660988,"url":"https://github.com/liatemplates/p5js","last_synced_at":"2026-02-12T07:31:40.506Z","repository":{"id":107256839,"uuid":"327571016","full_name":"LiaTemplates/p5js","owner":"LiaTemplates","description":"Just a simple p5js template for LiaScript.","archived":false,"fork":false,"pushed_at":"2021-01-08T16:55:54.000Z","size":8,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-09T23:38:38.995Z","etag":null,"topics":["liascript","liascript-template","oer","p5js","programming"],"latest_commit_sha":null,"homepage":"https://liascript.github.io/course/?https://raw.githubusercontent.com/liaTemplates/p5js/0.0.2/README.md","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiaTemplates.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-07T09:59:00.000Z","updated_at":"2024-10-29T15:41:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"74d88a30-d728-48e7-b5f6-150aa3024447","html_url":"https://github.com/LiaTemplates/p5js","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/LiaTemplates/p5js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Fp5js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Fp5js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Fp5js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Fp5js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaTemplates","download_url":"https://codeload.github.com/LiaTemplates/p5js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Fp5js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29361454,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-12T01:03:07.613Z","status":"online","status_checked_at":"2026-02-12T02:00:06.911Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["liascript","liascript-template","oer","p5js","programming"],"created_at":"2024-11-16T19:06:44.049Z","updated_at":"2026-02-12T07:31:40.489Z","avatar_url":"https://github.com/LiaTemplates.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\nauthor:   André Dietrich\n\nemail:    LiaScript@web.de\n\nversion:  0.0.2\n\nlanguage: en\n\nnarrator: US English Female\n\ncomment:  Just a simple p5js template for LiaScript.\n\nlogo:     https://p5js.org/assets/img/p5js.svg\n\nscript:   https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js\n\n@P5.eval: @P5.eval_(@uid)\n\n@P5.eval_\n\u003cscript\u003e\n\nlet div = window.document.getElementById('p5-@0')\n\ndiv.innerHTML = \"\"\n\nlet sketch = function(p5) {\n    // looks strange, but this is required to use backtics within your input-macro\n    try {\n      eval(`@'input`)\n    } catch (e) {\n      console.error(e, \"- line: \", getLineNumber(e) + 15)\n    }\n\n    // react to try to eval console inputs, like `p5.line(0,0,500,500)`\n    send.handle(\"input\", input =\u003e {\n      try{\n        let rslt = eval(input)\n\n        if (rslt != undefined)\n          console.log(rslt)\n      } catch (e) {\n        console.error(e);\n      }\n    })\n};\n\nlet env = new p5(sketch, div);\n\n// handle stop-button events\nsend.handle(\"stop\", e =\u003e { env.remove() })\n\n// Tell LiaScript if the shell should wait, stop, or open a terminal\n// * \"LIA: wait\"\n// * \"LIA: stop\"\n\"LIA: terminal\"\n\u003c/script\u003e\n\n\u003cdiv id=\"p5-@0\"\u003e\u003c/div\u003e\n\n@end\n\n\n@P5.project: @P5.project_(@uid)\n\n@P5.project_\n\u003cscript\u003e\n\nlet div = window.document.getElementById('p5-@0')\n\ndiv.innerHTML = \"\"\n\nlet sketch = function(p5) {\n\n    try {\n      let input = [\n        `@'input(0)`,\n        `@'input(1)`,\n        `@'input(2)`,\n        `@'input(3)`,\n        `@'input(4)`,\n        `@'input(5)`,\n        `@'input(6)`,\n        `@'input(7)`,\n        `@'input(8)`,\n        `@'input(9)`,\n      ]\n\n      for(let i=1; i\u003cinput.length; i++) {\n        if (input[i].startsWith(input[0])) {\n          input[i] = \"\"\n        }\n      }\n\n      eval(input.join(\"\\n\"))\n    } catch (e) {\n      console.error(e)\n    }\n\n    // react to try to eval console inputs, like `p5.line(0,0,500,500)`\n    send.handle(\"input\", input =\u003e {\n      try{\n        let rslt = eval(input)\n\n        if (rslt != undefined)\n          console.log(rslt)\n      } catch (e) {\n        console.error(e);\n      }\n    })\n};\n\nlet env = new p5(sketch, div);\n\n// handle stop-button events\nsend.handle(\"stop\", e =\u003e { env.remove() })\n\n\"LIA: terminal\"\n\u003c/script\u003e\n\n\u003cdiv id=\"p5-@0\"\u003e\u003c/div\u003e\n\n@end\n\n--\u003e\n\n# p5js - Template\n\n                         --{{0}}--\nA simple template for executing [p5.js](https://p5js.org) in\n[LiaScript](https://LiaScript.github.io). You can use it to build more\nsophisticated Tutorials ... Just check out, how this File gets rendered by\nLiaScript:\n\n__Try it on LiaScript:__\n\nhttps://liascript.github.io/course/?https://raw.githubusercontent.com/liaTemplates/p5js/0.0.2/README.md\n\n__See the project on Github:__\n\nhttps://github.com/liaTemplates/p5js\n\n                         --{{1}}--\nThere are three ways to use this template. The easiest way is to use the\n`import` statement and the url of the raw text-file of the master branch or any\nother branch or version. But you can also copy the required functionionality\ndirectly into the header of your Markdown document, see therefor the\n[Implementation](#Implementation). And of course, you could also clone this\nproject and change it, as you wish.\n\n                           {{1}}\n1. Load the macros via\n\n   `import: https://raw.githubusercontent.com/LiaTemplates/p5js/0.0.2/README.md`\n\n2. Copy the definitions into your Project\n\n3. Clone this repository on GitHub\n\n\n## `@P5.eval`\n\n                         --{{0}}--\nSimply add `@P5.eval` to the end of your Processing code-block to make it\nexecutable. This will even cover a basic error handling with a line number, if\nthe execution somehow fails.\n\n``` js\np5.setup = function () {\n  p5.createCanvas(720, 400);\n  p5.background(230);\n  p5.strokeWeight(2);\n\n  console.log(\"setup\")\n  console.warn(\"geht hoffentlich...\")\n}\n\np5.draw = function () {\n  if (p5.mouseIsPressed) {\n    p5.stroke(255);\n  } else {\n    p5.stroke(237, 34, 93);\n  }\n  p5.line(p5.mouseX - 66, p5.mouseY, p5.mouseX + 66, p5.mouseY);\n  p5.line(p5.mouseX, p5.mouseY - 66, p5.mouseX, p5.mouseY + 66);\n}\n```\n@P5.eval\n\n## `@P5.project`\n\n                         --{{0}}--\nIf you have a more sophisticated project and you want to split it into multiple\nfiles, you can use the LiaScript project notation. The `+` or the `-` in front\nof the filenames define if the code should be shown or hidden. The user can\nstill open it to inspect it. Add the `@P5.project` to the end of\nyour Processing project to make it executable. You can split your code into max\n10 files.\n\n``` js +setup.js\np5.setup = function () {\n  p5.createCanvas(720, 400);\n  p5.background(230);\n  p5.strokeWeight(2);\n\n  console.log(\"setup\")\n  console.warn(\"geht hoffentlich...\")\n}\n```\n``` js -draw.js\np5.draw = function () {\n  if (p5.mouseIsPressed) {\n    p5.stroke(255);\n  } else {\n    p5.stroke(237, 34, 93);\n  }\n  p5.line(p5.mouseX - 66, p5.mouseY, p5.mouseX + 66, p5.mouseY);\n  p5.line(p5.mouseX, p5.mouseY - 66, p5.mouseX, p5.mouseY + 66);\n}\n```\n@P5.project\n\n\n## Implementation\n\n                         --{{0}}--\nThere are two macros, `@P5.eval` and `@P5.project`, as well as the hidden\nones, which actually defines all code required.\n\n```html\nscript:   https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js\n\n\n@P5.eval: @P5.eval_(@uid)\n\n@P5.eval_\n\u003cscript\u003e\n\nlet div = window.document.getElementById('p5-@0')\n\ndiv.innerHTML = \"\"\n\nlet sketch = function(p5) {\n    // looks strange, but this is required to use backtics within your input-macro\n    try {\n      eval(`@'input`)\n    } catch (e) {\n      console.error(e, \"- line: \", getLineNumber(e) + 15)\n    }\n\n    // react to try to eval console inputs, like `p5.line(0,0,500,500)`\n    send.handle(\"input\", input =\u003e {\n      try{\n        let rslt = eval(input)\n\n        if (rslt != undefined)\n          console.log(rslt)\n      } catch (e) {\n        console.error(e);\n      }\n    })\n};\n\nlet env = new p5(sketch, div);\n\n// handle stop-button events\nsend.handle(\"stop\", e =\u003e { env.remove() })\n\n// Tell LiaScript if the shell should wait, stop, or open a terminal\n// * \"LIA: wait\"\n// * \"LIA: stop\"\n\"LIA: terminal\"\n\u003c/script\u003e\n\n\u003cdiv id=\"p5-@0\"\u003e\u003c/div\u003e\n\n@end\n\n\n@P5.project: @P5.project_(@uid)\n\n@P5.project_\n\u003cscript\u003e\n\nlet div = window.document.getElementById('p5-@0')\n\ndiv.innerHTML = \"\"\n\nlet sketch = function(p5) {\n\n    try {\n      let input = [\n        `@'input(0)`,\n        `@'input(1)`,\n        `@'input(2)`,\n        `@'input(3)`,\n        `@'input(4)`,\n        `@'input(5)`,\n        `@'input(6)`,\n        `@'input(7)`,\n        `@'input(8)`,\n        `@'input(9)`,\n      ]\n\n      for(let i=1; i\u003cinput.length; i++) {\n        if (input[i].startsWith(input[0])) {\n          input[i] = \"\"\n        }\n      }\n\n      eval(input.join(\"\\n\"))\n    } catch (e) {\n      console.error(e)\n    }\n\n    // react to try to eval console inputs, like `p5.line(0,0,500,500)`\n    send.handle(\"input\", input =\u003e {\n      try{\n        let rslt = eval(input)\n\n        if (rslt != undefined)\n          console.log(rslt)\n      } catch (e) {\n        console.error(e);\n      }\n    })\n};\n\nlet env = new p5(sketch, div);\n\n// handle stop-button events\nsend.handle(\"stop\", e =\u003e { env.remove() })\n\n\"LIA: terminal\"\n\u003c/script\u003e\n\n\u003cdiv id=\"p5-@0\"\u003e\u003c/div\u003e\n\n@end\n```\n\n                         --{{1}}--\nIf you want to minimize loading effort in your LiaScript project, you can also\ncopy this code and paste it into your main comment header, see the code in the\nraw file of this document.\n\n{{1}} https://raw.githubusercontent.com/liaTemplates/p5js/main/README.md\n\n\n## Demo\n\n\u003e Because it is so beautiful, I added some more examples, to demonstrate how\n\u003e beautiful p5js is ...\n\n### Mouse pressed\n\n``` js\np5.setup = function () {\n  p5.createCanvas(720, 400);\n  p5.background(230);\n  p5.strokeWeight(2);\n}\n\np5.draw = function () {\n  if (p5.mouseIsPressed) {\n    p5.stroke(255);\n  } else {\n    p5.stroke(237, 34, 93);\n  }\n  p5.line(p5.mouseX - 66, p5.mouseY, p5.mouseX + 66, p5.mouseY);\n  p5.line(p5.mouseX, p5.mouseY - 66, p5.mouseX, p5.mouseY + 66);\n}\n```\n@P5.eval\n\n### Robot\n\n```js    +settings.js\nlet w = 640;\nlet h = 360;\nlet linecolor = 33;\nlet L1 = 80; //Länge Glied A0-A\nlet L2 = 60; //Länge Glied A-TCP\nlet theta1 = 0; //Nullstellung\nlet theta2 = 0; //Nullstellung\nlet translation = p5.createVector(w/2,h/2); //A0 ist in der Mitte des Fensters\nlet A0 = p5.createVector(0,0);\nlet a0a = p5.createVector(L1, 0);\nlet A = p5.createVector(A0.x + a0a.x, A0.y + a0a.y); //A in Nullstellung\nlet atcp = p5.createVector(L2, 0);\nlet TCP = p5.createVector(A.x + atcp.x, A.y + atcp.y); //TCP in Nullstellung\nlet Pos = p5.createVector(TCP.x, TCP.y); //Soll = Ist\n```\n``` js   +init.js\n/// Initialisierung\np5.setup = function() {\n  p5.createCanvas(640, 360);\n  p5.strokeWeight(10.0);\n  p5.stroke(255, 100);\n}\n\n/// Zeichnen der Oberfläche\np5.draw = function() {\n  p5.translate(640/2, 360/2);\n  p5.scale(1,-1);\n\n  // Farben einstellen\n  p5.stroke(linecolor, 100);\n  p5.background(255);\n\n  // Arbeitsraumgrenzen\n  p5.arc(A0.x, A0.y, (L1+L2)*2, (L1+L2)*2, 0, Math.PI * 2);\n  p5.noFill();\n\n  // Roboter einzeichnen\n  p5.line(A0.x, A0.y, A.x, A.y);\n  p5.line(A.x, A.y, TCP.x, TCP.y);\n  p5.point(Pos.x, Pos.y);\n\n\n  // Roboter einzeichnen\n  //p5.line(A0.x + translation.x, A0.y + translation.y, A.x   + translation.x, A.y   + translation.y);\n  //p5.line(A.x  + translation.x, A.y  + translation.y, TCP.x + translation.x, TCP.y + translation.y);\n  //p5.point(Pos.x + translation.x, Pos.y + translation.y);\n}\n\n/// Wenn die Maus über die Oberfläche bewegt wird\np5.mouseMoved = function() {\n  Pos.x = p5.mouseX - translation.x;\n  Pos.y = -p5.mouseY + translation.y;\n\n  moveRobot();\n}\n\n/// Neue Stellung vorgeben\nfunction moveRobot() {\n  //1. Gelenkwerte ermitteln\n  inverseKinematics(Pos.x, Pos.y);\n\n  //2. TCP ermitteln und anfahren\n  forwardKinematics(theta1, theta2);\n}\n```\n``` js -kinematics.js\n/// Frage: Wenn ich theta1 und theta2 vorgebe, wie lauten dann x und y des TCP?\nfunction forwardKinematics (t1, t2) {\n  //A muss als Zwischenpunkt mit berechnet werden, sonst kann es nicht simuliert werden\n  //1. Glied 1 drehen\n  a0a = p5.createVector(L1, 0).rotate(t1);\n  A = p5.createVector(A0.x + a0a.x, A0.y + a0a.y);\n\n  //2. Glied 2 drehen\n  atcp = p5.createVector(L2, 0).rotate(t1 + t2);\n  TCP = p5.createVector(A.x + atcp.x, A.y + atcp.y);\n}\n\n\n/// Frage: Wenn ich x und y des TCP vorgebe, wie lauten dann theta1 und theta2?\n\nfunction inverseKinematics(x, y) {\n  //1. Berechnen der Strecke C\n  let C = Math.sqrt(x*x + y*y);\n\n  //2. Berechnen von Gamma\n  let gamma = Math.atan2(y, x);\n\n  // Grenzwertbetrachtung\n  if (C \u003e L1 + L2) {\n    linecolor = 100;\n    theta1 = gamma;\n    theta2 = 0;\n    //println(millis(),\"Punkt außerhalb des Arbeitsraums\");\n  }\n  else if (C \u003c Math.abs(L1 - L2)) {\n    linecolor = 100;\n    //println(millis(),\"Punkt innerhalb des nicht erreichbaren Arbeitsraums\");\n  }\n  else if ((C == 0) \u0026\u0026 (L1 == L2)) {\n    linecolor = 100;\n    //println(millis(),\"Unendlich viele Lösungen\");\n  }\n\n  else {\n    linecolor = 0;\n\n    // Variantenbetrachtung\n    if (C == L1 + L2) {\n       theta1 = gamma;\n       theta2 = 0;\n    }\n\n    //Berechnung von theta2\n    theta2 = Math.acos((x*x+y*y-(L1*L1+L2*L2))/(2*L1*L2));\n\n\n    //Berechnung von theta1\n    let delta = Math.acos((L1*L1-L2*L2+C)/(L1*L2*C));\n    theta1 = gamma - delta/2; ///???\n  }\n}\n```\n@P5.project\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fp5js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliatemplates%2Fp5js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fp5js/lists"}