Update

.gitignore

@@ -1,2 +1,3 @@
 public/projects
 public/*.html
+.#*

projects/projectile/name.txt

@@ -0,0 +1 @@
+Projectile

projects/shooting_the_apple/index.html

@@ -0,0 +1,43 @@
+<div class="row g-3">
+  <div class="col-sm">
+    <div class="input-group">
+      <div class="input-group-text">\(x_0\)</div>
+      <input type="number" class="form-control" v-model="x0" value="0">
+      <div class="input-group-text">\(m\)</div>
+    </div>
+  </div>
+  <div class="col-sm">
+    <div class="input-group">
+      <div class="input-group-text">\(y_0\)</div>
+      <input type="number" class="form-control" v-model="y0" value="50">
+      <div class="input-group-text">\(m\)</div>
+    </div>
+  </div>
+  <div class="col-sm">
+    <div class="input-group">
+      <div class="input-group-text">\(v_{0,x}\)</div>
+      <input type="number" class="form-control" v-model="vx0" value="50">
+      <div class="input-group-text">\(m.s\)</div>
+    </div>
+  </div>
+  <div class="col-sm">
+    <div class="input-group">
+      <div class="input-group-text">\(v_{0,y}\)</div>
+      <input type="number" class="form-control" v-model="vy0" value="50">
+      <div class="input-group-text">\(m.s\)</div>
+    </div>
+  </div>
+  <div class="col-sm">
+    <div class="input-group">
+      <div class="input-group-text">\(g\)</div>
+      <input type="number" class="form-control" v-model="g">
+      <div class="input-group-text">\(m.s^{-2}\)</div>
+    </div>
+  </div>
+  <div class="col-auto">
+    <button class="btn btn-primary" onClick="refresh()">Restart</button>
+  </div>
+</div>
+<br /><br /><br />
+
+<h5>TODO</h5>

projects/shooting_the_apple/index.js

@@ -0,0 +1,58 @@
+
+let t=0;
+let vy0=50
+let vx0=vy0
+let x0=140
+let y0=80
+let g=9.81
+
+let shooting_the_apple= function (p){
+    let width=800
+    let height=300
+    
+    p.setup = function() {
+        c=p.createCanvas(Math.min(window.innerWidth,width), height);
+       
+        
+    };
+    
+    
+    p.draw = function() {
+        p.clear()
+        p.textSize(width/8)
+        p.text("TODO",width/5,height/1.5)
+
+    };
+    
+    p.windowResized = function(){
+        p.resizeCanvas(Math.min(window.innerWidth,width), height);
+    }
+};
+
+refresh=function(){
+    t=0
+    x0=parseFloat(app.x0)
+    y0=parseFloat(app.y0)
+    vx0=parseFloat(app.vx0)
+    vy0=parseFloat(app.vy0)
+    g=parseFloat(app.g)
+    p5Load()
+}
+
+
+
+project_init=function(){
+    app = new Vue({
+        el: '#app',
+        data :{
+            x0:x0,
+            y0:y0,
+            vy0:vy0,
+            vx0:vx0,
+            g:g
+        }
+    })
+    p5Load()
+    
+}
+

projects/shooting_the_apple/name.txt

@@ -0,0 +1 @@
+Shooting the apple

refresh.sh

@@ -20,10 +20,11 @@ build_links() {
     for p in $(find ${projects}/ -maxdepth 1 -mindepth 1 -type d)
     do
         name=$(basename $p)
+        beautiful_name=$(cat $p/name.txt)
         [ "$name" == "$main" ]  && link="./index.html"  || link=${name}.html
         [ $name == $1 ] && active="active" || active=""
         
-        links="${links}\n"'<a href="'$link'" class="btn btn-primary '$active'">'${name}'</a>'
+        links="${links}\n"'<a href="'$link'" class="btn btn-primary '$active'">'${beautiful_name}'</a>'
     done
     tmp=$(mktemp)
     echo -e "$links" > $tmp
@@ -36,12 +37,14 @@ do
     [ "$name" == "$main" ]  && html=${public}/index.html  || html=${public}/${name}.html
     js=./projects/$name/index.js
     content=$p/index.html
+    beautiful_name=$(cat $p/name.txt)
 
     # Create HTML page
     cp -r $p $public/projects/
     cat $template |sed "/\${CONTENT}/r $content"|sed '/\${CONTENT}/d' > $html
     sed -i "s#\${JS}#${js}#g" $html
     sed -i "s#\${project_name}#${name}#g" $html
+    sed -i "s#\${beautiful_name}#${beautiful_name}#g" $html
     echo $html
 
     # Create links