I am using github gists, and then make a link to openjscad taht opens that gist

example:
https://jscad.xyz/#https://gist.githubusercontent.com/hrgdavor/7419194097fc2ffd42d840f82fc83ca1/raw/31e0194693629e780e3b82848f9082d1796814ec/rounded_top.js

and gist is :
https://gist.github.com/hrgdavor/7419194097fc2ffd42d840f82fc83ca1/

nice prototype

is it opensource ?

Well, I doubt you can avoid exponential slowdown as size increase increases number of objects exponentially.

you could possibly gain some performance if you store the object in a variable outside of the loops,

var logo = getLogo();

then inside the loop

arr.push(logo.translate([i * space, j * space, k * space]));

I am not 100% sure if it will work or help with perf, but try it anyway

That is a too broad aproach. I myself started first by creating some 2d points into a polygon and them extruding with jscad. 2D space is tricky enough, and directly making some 3D shapes with math is so much more complicated at least to me.

I have created a small utility for myself to create 2D shapes by creating the basic shape with points and with some builtin utility to have sections curved, so at first I reason about the shape I want to create in simple but more rough shape and then tweak it.

Maybe if you start with something specific you want to create I could maybe have some ideas to where you could find helpful info ... and suggest how to attack the problem.

I prefer to learn that way, find something concrete to make and see how to do it and learn missing pieces.

No matter what you try, a website cannot 'dynamically' load resources (scripts) from other external websites. There are many things that will bite you if you try. Browsers execute in a very tightly controlled work space, and only user interactions (drag and drop, etc) allow access to external resources. Everything else has a fence around it.

Actually, git gists have Allow-Origin headers so external include from github gist would work.

I actualy created a small jscad file that loads @gilboonet script and dump s it in the console,
the issue then how to execute it and trigger re-render

const jscad = require('@jscad/modeling')

function main(){
 return sphere();
}

fetch('https://raw.githubusercontent.com/gilboonet/designs/master/MEUBLES/sq_ed0001.js')
  .then(r=>r.text()).then(text=>console.log('js file',text))

module.exports = {main}

I am looking for big project examples that become slow to reload.

If anyone here is willing to share such project, I am interested to make a more advanced livereload integration that could benefit larger projects.

I have already made an improvement to jscad reloading code to enable using livereload that makes jscad notice your changes faster. The speed of generating the model is not improved here, just the delay between saving your file, and the start of the refresh.

lievereload https://www.npmjs.com/package/livereload is very simple tool to install (globally or locally for your project).

To get the benefit:

• first run livereload in the folder with your project files,
• then drop your files to jscad web (local instance or https://jscad.xyz/)

The way your changes are applied will be different.

Without livereload, project files are read from your drive periodically (1 to 5 seconds delay that depends how fast last reading was) and your changes are then shown on the screen.

With livereload, files are not being read periodically, but livereload server notifies jscad of changes and changes are applied quickly (~100ms).
For relatively small single file pojects it can be under one second from saving file and seing your changes rendered)

@gilboonet that looks cool. Is it cut in wood, what is it for ?

@Alasdair-McAndrew
I tried to find code that does this exactly, but failed. So I took some time try different combinations of atan acos asin until I got somewhat working solution. Then I added fixes for special cases that break the inital code.

based on your suggestion I tried some values (dx=0, dy=0, dz=0) and found a case that did not work: (dx==0 && dy == 0).
I have added an exception that now fixes taht edge case.

(I am proud I made this work somehow, so if you find another edge case that does not work, let me know
)
link1: gist: https://gist.github.com/hrgdavor/c1bc1b4f3e3f92161eb4dd9074363793

link2: jscad.xyz with that gist: https://jscad.xyz/#https://gist.githubusercontent.com/hrgdavor/c1bc1b4f3e3f92161eb4dd9074363793/raw/1c41bbf3dc5d5af33614205ce8bd17e1e93b66f1/testCylinderFromTo.js

new version with fix:

function cylinderFromTo(p1,p2, radius){
  const sqr = x=>x*x

  let dx = p2[0] - p1[0]
  let dy = p2[1] - p1[1]
  let dz = p2[2] - p1[2]

  let height = Math.sqrt( sqr(dx) + sqr(dy) + sqr(dz))
  let obj = cylinder({radius, height})

  if(dx || dy){
    let dxy = Math.sqrt( sqr(dx) + sqr(dy))
    
    let ay = Math.atan(dxy/dz) *(dx < 0 ? -1:1) 
    let az = Math.atan(dy/dx)
    let ax = dz < 0 ? -Math.PI:0
    obj = transforms.rotate([ax,ay,az], obj)
  }

  let mid = [p1[0]+dx/2,p1[1]+dy/2,p1[2]+dz/2]

  return translate(mid, obj)
}

the code now works for all of these:

  testCylinderFromTo([-20,30,50],[-40,-10,70]);
  testCylinderFromTo([0,0,0],[10,10,10])
  testCylinderFromTo([0,0,0],[20,-20,20])
  testCylinderFromTo([0,0,0],[-30,30,30])
  testCylinderFromTo([0,0,0],[-40,-40,40])

  testCylinderFromTo([0,0,0],[15,15,-15])
  testCylinderFromTo([0,0,0],[25,-25,-25])
  testCylinderFromTo([0,0,0],[-35,35,-35])
  
  testCylinderFromTo([100,0,0],[100,0,30])
  testCylinderFromTo([100,0,0],[100,0,-30])
  testCylinderFromTo([100,0,0],[100,30,0])
  testCylinderFromTo([100,0,0],[100,-30,0])
  testCylinderFromTo([100,0,0],[130,0,0])
  testCylinderFromTo([100,0,0],[70,0,0])

screen:

I thought it would be fun to make such function.

It is a product of using atan acos asin until I got something and then guessing some more until it worked . It seems to be working, though I actually dont understand it completely

function cylinderFromTo(p1,p2, radius){
  const sqr = x=>x*x
  let dx = p2[0] - p1[0]
  let dy = p2[1] - p1[1]
  let dz = p2[2] - p1[2]
  let dxy = Math.sqrt( sqr(dx) + sqr(dy))
  let height = Math.sqrt( sqr(dx) + sqr(dy) + sqr(dz))

  let ay = Math.atan(dxy/dz) *(dx < 0 ? -1:1) 
  let az = Math.atan(dy/dx)
  let ax = dz < 0 ? -Math.PI:0
  let obj = cylinder({radius, height})
  let mid = [p1[0]+dx/2,p1[1]+dy/2,p1[2]+dz/2]
  return translate(mid, rotate([ax,ay,az], obj))
}

I used these to test visually

function main(){
  ret = [];
  
  function testCylinderFromTo(p1,p2){
    ret = [ ...ret,
      translate(p1,sphere({size:1})),
      translate(p2,sphere({size:1})),
      jscad.colors.colorize([1,0,0,0.7],cylinderFromTo(p1,p2,2)),
    ];
  }

  testCylinderFromTo([-20,30,50],[-40,-10,70]);
  testCylinderFromTo([0,0,0],[10,10,10])
  testCylinderFromTo([0,0,0],[20,-20,20])
  testCylinderFromTo([0,0,0],[-30,30,30])
  testCylinderFromTo([0,0,0],[-40,-40,40])

  testCylinderFromTo([0,0,0],[15,15,-15])
  testCylinderFromTo([0,0,0],[25,-25,-25])
  testCylinderFromTo([0,0,0],[-35,35,-35])
  testCylinderFromTo([0,0,0],[-45,-45,-45])

  return ret;
}

I just use console.log in Chrome(mostly prefer ti vs debug ), and I think debug breakpoints are not possible due to way user scripts are loaded (I may be wrong on this one).

There is a nice V2 example from one of the openjscad users here:
https://github.com/sdaau/openjscad_example_selfhost_spa_webpage

maybe this is something you can use ?

@hrgdavor here is video showing how I expect rotate to work
versus how it works on xyz

http://hrg.hr/tmp/bandicam 2020-10-16 16-52-05-763.mp4

I have also created a pull request. But this is not real pull request, just wanted to somehow share the code I hacked quickly to get rotation to work.

If the pull request has any potential, I welcome your input so I can make this my first code contribution