{"id":20660987,"url":"https://github.com/liatemplates/processingjs","last_synced_at":"2025-03-10T04:25:10.431Z","repository":{"id":107256858,"uuid":"152733690","full_name":"LiaTemplates/ProcessingJS","owner":"LiaTemplates","description":"A simple template for executing Processing.js in LiaScript-Markdown","archived":false,"fork":false,"pushed_at":"2020-12-02T19:34:28.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-17T12:16:31.869Z","etag":null,"topics":["liascript","liascript-template","processing","processing-tutorial","programming","template"],"latest_commit_sha":null,"homepage":"https://liascript.github.io/course/?https://raw.githubusercontent.com/liaTemplates/ProcessingJS/master/README.md","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","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":"2018-10-12T10:21:52.000Z","updated_at":"2022-02-22T11:40:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"2753db48-89e8-4589-95b2-b11b4b60c3f7","html_url":"https://github.com/LiaTemplates/ProcessingJS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FProcessingJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FProcessingJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FProcessingJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FProcessingJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaTemplates","download_url":"https://codeload.github.com/LiaTemplates/ProcessingJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242788015,"owners_count":20185203,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","processing","processing-tutorial","programming","template"],"created_at":"2024-11-16T19:06:43.661Z","updated_at":"2025-03-10T04:25:10.423Z","avatar_url":"https://github.com/LiaTemplates.png","language":null,"readme":"\u003c!--\nauthor:   André Dietrich\n\nemail:    andre.dietrich@ovgu.de\n\nversion:  0.0.2\n\nlanguage: en\n\nnarrator: US English Female\n\ncomment:  Just a simple Processing.js template for LiaScript.\n\nscript:   https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js\n\n\n@Processing.eval: @Processing._eval_(@uid)\n\n@Processing._eval_\n\u003cscript\u003e\nlet container = document.getElementById('sketch-container-@0');\n\ncontainer.innerHTML = \"\";\n\nlet canvas = document.createElement('canvas');\ncanvas.id = 'sketch-@0';\n\ncontainer.appendChild(canvas);\n\nif(!window[\"processing\"]){\n    window[\"processing\"] = {};\n    window[\"running\"] = null;\n}\n\nif(window[\"running\"]) {\n  window[\"processing\"][window[\"running\"]].exit();\n}\n\nlet sketch = Processing.compile(`@input`);\n\nwindow[\"processing\"][\"@0\"] = new Processing(canvas, sketch);\nwindow[\"running\"] = \"@0\";\n\n\"LIA: stop\"\n\u003c/script\u003e\n\n\u003cdiv id=\"sketch-container-@0\" class=\"container\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\nlet rem = document.getElementsByClassName(\"container\")\n\nfor( let i=0; i\u003c rem.length; i++ )\n  rem[i].innerHTML = \"\"\n\nif(window[\"running\"]) {\n  window[\"processing\"][window[\"running\"]].exit();\n  window[\"running\"] = null;\n}\n\nconsole.log(\"delete content\")\n\u003c/script\u003e\n@end\n\n\n--\u003e\n\n# ProcessingJS - Template\n\n                         --{{0}}--\nA simple template for executing Processing.js 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/processingjs/master/README.md\n\n__See the project on Github:__\n\nhttps://github.com/liaTemplates/processingjs\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](#3). And of course, you could also clone this project and change\nit, as you wish.\n\n                           {{1}}\n1. Load the macros via\n\n   `import: https://raw.githubusercontent.com/liaTemplates/processingjs/master/README.md`\n\n2. Copy the definitions into your Project\n\n3. Clone this repository on GitHub\n\n\n## `@Processing.eval`\n\n                         --{{0}}--\nCurrently there is only one macro, simply add `@Processing.eval` to the end of\nyour Processing code-block to make it executable. Since there is only one\n\"Processing-thread\", your program will run until you restart it, go to another\nsection, or start another program.\n\n\n```cpp\nvoid setup() {\n  size(480, 120);\n}\n\nvoid draw() {\n  if (mousePressed) {\n    fill(0);\n  } else {\n    fill(255);\n  }\n  ellipse(mouseX, mouseY, 80, 80);\n}\n```\n@Processing.eval\n\n\n## Implementation\n\n                         --{{0}}--\nThere are two macros, `@Processing.eval` and a hidden one, which actually defines all code required. The function defined in `@onload` is used to stop the currently running thread, if the user goes to another slide.\n\n```html\nscript: https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js\n\n@Processing.eval: @Processing._eval_(@uid)\n\n@Processing._eval_\n\u003cscript\u003e\nlet container = document.getElementById('sketch-container-@0');\n\ncontainer.innerHTML = \"\";\n\nlet canvas = document.createElement('canvas');\ncanvas.id = 'sketch-@0';\n\ncontainer.appendChild(canvas);\n\nif(!window[\"processing\"]){\n    window[\"processing\"] = {};\n    window[\"running\"] = null;\n}\n\nif(window[\"running\"]) {\n  window[\"processing\"][window[\"running\"]].exit();\n}\n\nlet sketch = Processing.compile(`@input`);\n\nwindow[\"processing\"][\"@0\"] = new Processing(canvas, sketch);\nwindow[\"running\"] = \"@0\";\n\n\"LIA: stop\"\n\u003c/script\u003e\n\n\u003cdiv id=\"sketch-container-@0\" class=\"persistent\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e window.stop_processing() \u003c/script\u003e\n@end\n\n@onload\nwindow.stop_processing = function() {\n  if(window[\"running\"]) {\n    window[\"processing\"][window[\"running\"]].exit();\n    document.getElementById(\"sketch-container-\"+window[\"running\"]).innerHTML = \"\";\n\n    window[\"running\"] = null;\n  }\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/processingjs/master/README.md\n\n\n## Demos\n\n\u003e Because it is so beautiful, I added some more examples, to demonstrate how\n\u003e beautiful Processing.js is ...\n\n\n### Getting started\n\n``` cpp\n// Global variables\nfloat radius = 50.0;\nint X, Y;\nint nX, nY;\nint delay = 16;\n\n// Setup the Processing Canvas\nvoid setup(){\n  size( 400, 200 );\n  strokeWeight( 10 );\n  frameRate( 15 );\n  X = width / 2;\n  Y = height / 2;\n  nX = X;\n  nY = Y;\n}\n\n// Main draw loop\nvoid draw(){\n  radius = radius + sin( frameCount / 4 );\n  // Track circle to new destination\n  X+=(nX-X)/delay;\n  Y+=(nY-Y)/delay;\n  // Fill canvas grey\n  background( 100 );\n  // Set fill-color to blue\n  fill( 0, 121, 184 );\n  // Set stroke-color white\n  stroke(255);\n  // Draw circle\n  ellipse( X, Y, radius, radius );\n}\n\n// Set circle's next destination\nvoid mouseMoved(){\n  nX = mouseX;\n  nY = mouseY;\n}\n```\n@Processing.eval\n\n\n### PVector\n\n``` cpp\nfloat x = 100;\nfloat y = 100;\nfloat xspeed = 1;\nfloat yspeed = 3.3;\n\nvoid setup() {\n  size(200,200);\n  smooth();\n  background(255);\n}\n\nvoid draw() {\n  noStroke();\n  fill(255,10);\n  rect(0,0,width,height);\n\n  // Add the current speed to the location.\n  x = x + xspeed;\n  y = y + yspeed;\n\n  // Check for bouncing\n  if ((x \u003e width) || (x \u003c 0)) {\n    xspeed = xspeed * -1;\n  }\n  if ((y \u003e height) || (y \u003c 0)) {\n    yspeed = yspeed * -1;\n  }\n\n  // Display at x,y location\n  stroke(0);\n  fill(175);\n  ellipse(x,y,16,16);\n}\n```\n@Processing.eval\n\n### Abstract\n\n``` cpp\nint DONT_INTERSECT = 0;\nint COLLINEAR = 1;\nint DO_INTERSECT = 2;\n\nfloat x =0, y=0;\n\nvoid setup(){\n  size(200,200);\n  fill(255,0,0);\n}\n\nvoid draw(){\n\n  int intersected;\n\n  background(255);\n\n  // lignes\n  stroke(0);\n\n  // ligne fixe\n  line(20,height/2, width-20, (height/2)-20);\n\n  // ligne en mouvement\n  line(10,10,mouseX, mouseY);\n\n  intersected = intersect(20, height/2, width-20, (height/2)-20, 10, 10, mouseX, mouseY);\n\n  // dessiner le point d'intersection\n  noStroke();\n  if (intersected == DO_INTERSECT) ellipse(x, y, 5, 5);\n\n}\n\n\nint intersect(float x1, float y1, float x2, float y2, float x3, float y3, float x4, float y4){\n\n  float a1, a2, b1, b2, c1, c2;\n  float r1, r2 , r3, r4;\n  float denom, offset, num;\n\n  // Compute a1, b1, c1, where line joining points 1 and 2\n  // is \"a1 x + b1 y + c1 = 0\".\n  a1 = y2 - y1;\n  b1 = x1 - x2;\n  c1 = (x2 * y1) - (x1 * y2);\n\n  // Compute r3 and r4.\n  r3 = ((a1 * x3) + (b1 * y3) + c1);\n  r4 = ((a1 * x4) + (b1 * y4) + c1);\n\n  // Check signs of r3 and r4. If both point 3 and point 4 lie on\n  // same side of line 1, the line segments do not intersect.\n  if ((r3 != 0) \u0026\u0026 (r4 != 0) \u0026\u0026 same_sign(r3, r4)){\n    return DONT_INTERSECT;\n  }\n\n  // Compute a2, b2, c2\n  a2 = y4 - y3;\n  b2 = x3 - x4;\n  c2 = (x4 * y3) - (x3 * y4);\n\n  // Compute r1 and r2\n  r1 = (a2 * x1) + (b2 * y1) + c2;\n  r2 = (a2 * x2) + (b2 * y2) + c2;\n\n  // Check signs of r1 and r2. If both point 1 and point 2 lie\n  // on same side of second line segment, the line segments do\n  // not intersect.\n  if ((r1 != 0) \u0026\u0026 (r2 != 0) \u0026\u0026 (same_sign(r1, r2))){\n    return DONT_INTERSECT;\n  }\n\n  //Line segments intersect: compute intersection point.\n  denom = (a1 * b2) - (a2 * b1);\n\n  if (denom == 0) {\n    return COLLINEAR;\n  }\n\n  if (denom \u003c 0){\n    offset = -denom / 2;\n  }\n  else {\n    offset = denom / 2 ;\n  }\n\n  // The denom/2 is to get rounding instead of truncating. It\n  // is added or subtracted to the numerator, depending upon the\n  // sign of the numerator.\n  num = (b1 * c2) - (b2 * c1);\n  if (num \u003c 0){\n    x = (num - offset) / denom;\n  }\n  else {\n    x = (num + offset) / denom;\n  }\n\n  num = (a2 * c1) - (a1 * c2);\n  if (num \u003c 0){\n    y = ( num - offset) / denom;\n  }\n  else {\n    y = (num + offset) / denom;\n  }\n\n  // lines_intersect\n  return DO_INTERSECT;\n}\n\n\nboolean same_sign(float a, float b){\n\n  return (( a * b) \u003e= 0);\n}\n```\n@Processing.eval\n\n\n### ABSTRACT01js\n\n``` cpp ABSTRACT01js\nint num,cnt,px,py,fadeInterval;\nParticle[] particles;\nboolean initialised=false,doClear=false;\nfloat lastRelease=-1,scMod,fadeAmount;\n\nvoid setup() {\n  size(400,300);\n  background(255);\n  smooth();\n  rectMode(CENTER_DIAMETER);\n  ellipseMode(CENTER_DIAMETER);\n\n  cnt=0;\n  num=150;\n  particles=new Particle[num];\n  for(int i=0; i\u003cnum; i++) particles[i]=new Particle();\n\n  reinit();\n  px=-1;\n  py=-1;\n}\n\nvoid draw() {\n  if(doClear) {\n    background(255);\n    doClear=false;\n  }\n\n  noStroke();\n\n  if(frameCount%fadeInterval==0) {\n    fill(255,255,255, fadeAmount);\n    rect(width/2,height/2, width,height);\n  }\n\n  updateAuto();\n\n  for(int i=0; i\u003cnum; i++)\n    if(particles[i].age\u003e0) particles[i].update();\n}\n\nvoid reinit() {\n  doClear=true;\n  scMod=random(1,1.4);\n  fadeInterval=(int)random(220,300);\n  fadeAmount=random(30,60);\n//  println(\"fadeInterval \"+fadeInterval+\" scMod \"+nf(scMod,0,3)+\n//    \" fadeAmount \"+nf(fadeAmount,0,3));\n  for(int i=0; i\u003cnum; i++) particles[i].age=-1;\n  initAuto();\n}\n\nvoid mousePressed() {\n  reinit();\n}\n\nAutoMover auto[];\nint autoN;\n\nvoid initAuto() {\n  autoN=(int)random(3,6);\n//  println(\"initAuto \"+autoN);\n  auto=new AutoMover[autoN];\n  for(int i=0; i\u003cautoN; i++) auto[i]=new AutoMover();\n\n}\n\nvoid updateAuto() {\n  for(int i=0; i\u003cautoN; i++) auto[i].update();\n}\n\nclass AutoMover {\n  Vec2D pos,posOld;\n  float dir,dirD,speed,sc,dirCnt;\n  int type,age,ageGoal,interval;\n\n\n  AutoMover() {\n    reinit();\n  }\n\n  void reinit() {\n    ageGoal=(int)random(150,350);\n    if(random(100)\u003e95) ageGoal*=1.25;\n    age=-(int)random(50,150);\n    pos=new Vec2D(random(width-100)+50,random(height-100)+50);\n\n\n    dir=(int)random(36)*10;\n    type=0;\n    if(random(100)\u003e60) type=1;\n\n    interval=(int)random(2,5);\n    if(type==1) {\n      interval=1;\n      dir=degrees(atan2(-(pos.y-height/2),pos.x-width/2));\n    }\n\n    dirD=random(1,2);\n    if(random(100)\u003c50) dirD=-dirD;\n    speed=random(3,6);\n\n    sc=random(0.5,1);\n    if(random(100)\u003e90) sc=random(1.2,1.6);\n    dirCnt=random(20,35);\n\n\n    if(type==0) {\n      if(random(100)\u003e95) sc=random(1.5,2.25);\n      else sc=random(0.8,1.2);\n    }\n    sc*=scMod;\n    speed*=sc;\n  }\n\n  void update() {\n    age++;\n    if(age\u003c0) return;\n    else if(age\u003eageGoal) reinit();\n    else {\n      if(type==1) {\n        pos.add(\n          cos(radians(dir))*speed,sin(radians(dir))*speed);\n\n        dir+=dirD;\n        dirD+=random(-0.2,0.2);\n        dirCnt--;\n        if(dirCnt\u003c0) {\n          dirD=random(1,5);\n          if(random(100)\u003c50) dirD=-dirD;\n          dirCnt=random(20,35);\n        }\n      }\n      if(age%interval==0) newParticle();\n      if(pos.x\u003c-50 || pos.x\u003ewidth+50 ||\n        pos.y\u003c-50 || pos.y\u003eheight+50) reinit();\n    }\n  }\n\n  void newParticle() {\n    int partNum,i;\n\n    if(type==0) dir=int(random(36))*10;\n\n    i=0;\n    while(i\u003cnum) {\n      if(particles[i].age\u003c1) {\n        float offs=random(30,90);\n        if(random(100)\u003e50) offs=-offs;\n        particles[i].init(dir+offs,pos.x,pos.y,sc);\n\n        break;\n      }\n      i++;\n    }\n\n    px=mouseX;\n    py=mouseY;\n  }\n}\n\nclass Particle {\n  Vec2D v,vD;\n  float dir,dirMod,speed,sc;\n  int col,age,stateCnt;\n  int type;\n\n  Particle() {\n    v=new Vec2D(0,0);\n    vD=new Vec2D(0,0);\n    age=0;\n  }\n\n  void init(float _dir,float mx,float my,float _sc) {\n    dir=_dir;\n    sc=_sc;\n\n    float prob=random(100);\n    if(prob\u003c80) age=15+int(random(30));\n    else if(prob\u003c99) age=45+int(random(50));\n    else age=100+int(random(100));\n\n    if(random(100)\u003c80) speed=random(2)+0.5;\n    else speed=random(2)+2;\n\n    if(random(100)\u003c80) dirMod=20;\n    else dirMod=60;\n\n    v.set(mx,my);\n    initMove();\n    dir=_dir;\n    stateCnt=10;\n    if(random(100)\u003e50) col=0;\n    else col=1;\n\n    type=(int)random(30000)%2;\n  }\n\n  void initMove() {\n    if(random(100)\u003e50) dirMod=-dirMod;\n    dir+=dirMod;\n\n    vD.set(speed,0);\n    vD.rotate(radians(dir+90));\n\n    stateCnt=10+int(random(5));\n    if(random(100)\u003e90) stateCnt+=30;\n  }\n\n  void update() {\n    age--;\n\n    if(age\u003e=30) {\n      vD.rotate(radians(1));\n      vD.mult(1.01f);\n    }\n\n    v.add(vD);\n    if(col==0) fill(255-age,0,100,150);\n    else fill(100,200-(age/2),255-age,150);\n\n    if(type==1) {\n      if(col==0) fill(255-age,100,0,150);\n      else fill(255,200-(age/2),0,150);\n    }\n\n    pushMatrix();\n    scale(sc);\n    translate(v.x,v.y);\n    rotate(radians(dir));\n    rect(0,0,1,16);\n    popMatrix();\n\n    if(age==0) {\n      if(random(100)\u003e50) fill(200,0,0,200);\n      else fill(00,200,255,200);\n      float size=2+random(4);\n      if(random(100)\u003e95) size+=5;\n      size*=sc;\n      ellipse(v.x*sc,v.y*sc,size,size);\n    }\n    if(v.x\u003c0 || v.x\u003ewidth || v.y\u003c0 || v.y\u003eheight) age=0;\n\n    if(age\u003c30) {\n      stateCnt--;\n      if(stateCnt==0) {\n        initMove();\n      }\n    }\n   }\n\n}\n\n// General vector class for 2D vectors\nclass Vec2D {\n  float x,y;\n\n  Vec2D(float _x,float _y) {\n    x=_x;\n    y=_y;\n  }\n\n  Vec2D(Vec2D v) {\n    x=v.x;\n    y=v.y;\n  }\n\n  void set(float _x,float _y) {\n    x=_x;\n    y=_y;\n  }\n\n  void set(Vec2D v) {\n    x=v.x;\n    y=v.y;\n  }\n\n  void add(float _x,float _y) {\n    x+=_x;\n    y+=_y;\n  }\n\n  void add(Vec2D v) {\n    x+=v.x;\n    y+=v.y;\n  }\n\n  void sub(float _x,float _y) {\n    x-=_x;\n    y-=_y;\n  }\n\n  void sub(Vec2D v) {\n    x-=v.x;\n    y-=v.y;\n  }\n\n  void mult(float m) {\n    x*=m;\n    y*=m;\n  }\n\n  void div(float m) {\n    x/=m;\n    y/=m;\n  }\n\n  float length() {\n    return sqrt(x*x+y*y);\n  }\n\n  float angle() {\n    return atan2(y,x);\n  }\n\n  void normalise() {\n    float l=length();\n    if(l!=0) {\n      x/=l;\n      y/=l;\n    }\n  }\n\n  Vec2D tangent() {\n    return new Vec2D(-y,x);\n  }\n\n  void rotate(float val) {\n    // Due to float not being precise enough, double is used for the calculations\n    double cosval=Math.cos(val);\n    double sinval=Math.sin(val);\n    double tmpx=x*cosval - y*sinval;\n    double tmpy=x*sinval + y*cosval;\n\n    x=(float)tmpx;\n    y=(float)tmpy;\n  }\n}\n```\n@Processing.eval\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fprocessingjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliatemplates%2Fprocessingjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fprocessingjs/lists"}