Posts made by gilboonet

Hello, it took me a long time, but my Unfolding application is now up and I'm starting to create JSCAD script that could produce OBJ files that could easily be unfolded.

Here is what a working session look like :

You choose the script, here the simple box, and you can change parameters. Then you can add code if you want to color faces.
And then render and export to .OBJ.
Create a New unfolding project (File/New, choose the .OBJ)

I'm hoping to add others simple designs, then more and more complex ones, and also to improve the script (show design dimensions, show faces numbers to ease coloring).

Thanks to the browser cache I was able to run the script again and it already had all values loaded and I only needed to change the slider that was badly positioned.

Hello, I'm making a new furniture that I designed with Wings 3d. For this project I need a 2 axis skeleton that my sq_edit JSCAD script can do.

It's a script that works fine, but to make it work the only way is have it into a local folder, run JSCAD website into a browser, then click on project and select this folder, and finally type the model name into the model parameter and move the sliders. Won't it be possible to use an html <input type="file"> to select a local file that is not into the project folder ? (for me it is not a problem, but for the others users that are not confortable with computers it is too complicated)

As I was preparing the pattern (rearrange the pieces and add labels), I saw that one of the pieces would be cut in two, so I need to slide it a little to avoid that, sadly to do that I need to run the script again and edit all the sliders. I make screenshot of the script each time to remind of the sliders configuration, but won't it be easier to be able to save/load parameters values for such script ? or at last having a numeric field to show the values ? The sliders are very useful once you know how to put the model accordingly you can edit it very quickly, and even on 2d mode when you know your model, so both the slider and a numeric value would be great. I know that I'm repeating the same things, but it is my use case and I hope that it can be helpful.

@z3dev I finally resolved it by not using transforms and directly compute the center of the rectangles, that way the geometry sides were ok without any need to transform. I hope to be able to reuse that code for same kind of simple designs.

Hello, I need to get sides from a geometry made of rectangles to process it line by line and apparently the sides of the rectangles are not the values, there are transforms that need to be also computed. How can I do to get the values after the transforms ? (What I want to do is sort the sides then return an unique array with for each side with as additional data its occurrence, to know if a line is a cut (1 occurrence) or a fold (2).

Here is another version of the script that correctly produces the colored .obj file.

const jscad = require('@jscad/modeling')
const { polygon } = jscad.primitives
const { union } = jscad.booleans
const { extrudeLinear } = jscad.extrusions
const { colorNameToRgb } = jscad.colors

function getParameterDefinitions() {
  return [
    { name: 'larg', type: 'int', initial: 100, caption: 'largeur ?' }, 
    { name: 'haut', type: 'int', initial: 100, caption: 'Hauteur?' }, 
    { name: 'prof', type: 'int', initial: 10, caption: 'Profondeur ?' }, 
    { name: 'ep', type: 'int', initial: 10, caption: 'Epaisseur ?' }
  ]
}
 
const main = (params) => {
  let larg = params.larg
  let haut = params.haut
  let prof = params.prof
  let ep = params.ep
  
  let pExt = []
  let x = larg/2
  let y = haut/2
  pExt.push ([x, y])
  pExt.push ([x, -y])
  pExt.push ([-x, -y])
  pExt.push ([-x, y])

  let pInt = []
  x = larg/2 - ep
  y = haut/2 - ep
  pInt.push ([x, y])
  pInt.push ([x, -y])
  pInt.push ([-x, -y])
  pInt.push ([-x, y])
  
  let R = []
  
  for (let i = 0; i < 4; i++) {
    let i2 = i < 3 ? i+1 : 0
    R.push(polygon({points: [pExt[i], pInt[i], pInt[i2], pExt[i2]]}));
  }
  
  let C2d = union(R)
  
  let C3d = extrudeLinear({height: prof}, C2d)
  
  console.log(C3d)
  
  const cols = [ "blue", "yellow", "red", "green" ]
  
  let pc = new Array(32)
  pc.fill(0,0,16)
  pc.fill(1,0,2)
  pc.fill(1,4,6)
  pc.fill(1,8,10)
  pc.fill(1,12,14)

  pc.fill(2,16,24)
  pc.fill(3,24,32)
  
  C3d.polygons.forEach((P, index) => P.color = colorNameToRgb(cols[pc[index]]))
  
  return C3d

}
 
module.exports = { getParameterDefinitions, main }

The coloring code could be improved, instead of manual inputs I could test polygons values.

@hrgdavor Thank you, I can try to rewrite it without using boolean operation to see it the resulting polygons keep their colors.

For facets coloring like that, it would be very useful to be able to see the faces number on mouse hover.

Hello, I'm making a script that generates a custom rectangular frame, that part is basic and works as intended. But I added colors to each of its parts (polygons). 10 of them that are simple sets of 2 triangles are OK and are colored, but 6 of them that are more complex sets of 6 triangles are not and have default color (I mean when I import the .obj into Wings 3d). Am I missing something ?

here is my code

const jscad = require('@jscad/modeling')
const { cuboid } = jscad.primitives
const { subtract } = jscad.booleans
const { colorNameToRgb } = jscad.colors
 
function getParameterDefinitions() {
  return [
    { name: 'largeur', type: 'int', initial: 100, caption: 'largeur ?' }, 
    { name: 'hauteur', type: 'int', initial: 100, caption: 'Hauteur?' }, 
    { name: 'profondeur', type: 'int', initial: 10, caption: 'Profondeur ?' }, 
    { name: 'epaisseur', type: 'int', initial: 10, caption: 'Epaisseur ?' }
  ]
}

function main(params) {
  const largeur = params.largeur
  const hauteur = params.hauteur
  const profondeur = params.profondeur
  const epaisseur = params.epaisseur
  
  let base = cuboid({size: [largeur, hauteur, profondeur]})
  let trou = cuboid({size: [
    largeur - epaisseur *2, 
    hauteur - epaisseur *2 , 
    profondeur +1
  ]})

  let R = subtract(base, trou)
  
  let cols = [ "blue", "yellow", "red", "green" ]
  let colsIndex = [0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3];
  
  R.polygons.forEach((P, index) => 
    P.color = colorNameToRgb(cols[colsIndex[index]])
  );
  
  console.log(R)
  return R
}
 
module.exports = { getParameterDefinitions, main }

I'm coloring faces to have distincts pieces when building the 2d pattern, like this one

Just to reply to my own question ...

const jscad = require('@jscad/modeling')
const { sphere } = jscad.primitives
const { vec3 } = jscad.maths
const { translate } = jscad.transforms
 
const main = () => {
  let A = vec3.fromValues(15,0,5);
  console.log("A:", A);
  
  let B = vec3.create();
  
  vec3.add(B, A, [50,0,0]);
  
  console.log("B:", B);
  
  let C = vec3.create();
  vec3.add(C, A, B);
  vec3.divide(C, C, [2,2,2]);
  
  return [
    translate(A, sphere({radius:2}))
    ,
    translate(B, sphere({radius:2}))
    ,
    translate(C, sphere({radius:1}))
  ];
}
 
module.exports = { main } 

@hrgdavor That would be great. For the moment I'm certainly going to try to do the same thing using svg into vanilla js.

Hello, as I restarted using JSCAD, after a long time using only C language, then vanilla JS, I would like to know how to use the vec2/3 classes, what is the needed require, and how to use them. I remember I used such classes with V1 but with V2 I didn't and for exemple I have code where I need to compute a geometry dimensions and center, so I use
b = measureBoundingBox()
then the dimensions are b[1] minus b[0]
and the center is b[1] minus dimensions' half
For the moment I'm directly using the values from the returned array.

I didn't take care that text vectors are only line segments, so they won't produce nice designs when curves will be needed. So I will try at one moment of this project to use curves for my text output, but it's still early for that.

@z3dev Thank you for the link to the project, looks promising.

@hrgdavor I'm trying to create small scripts to easily create design from text, just like those you can do with Inkscape using path effects, or the very old WordArt from MS Word. The main weakness of using JSCAD for that is that for the moment it is not possible to choose a font that is installed into the pc as .ttf, I'm starting to look at this file format to see it I can use it directly to use its vectors.

@hrgdavor I think I understand your statement, first rotate then translate, but for this example I didn't start from a curve, so I didn't have translation coordinates.

Here is the result using VectorChar instead of VectorText

function main() {
  const jscad = require('@jscad/modeling')
  const { vectorText, vectorChar } = jscad.text
  const { geom2, path2 } = jscad.geometries
  const { align, translateX, rotateZ, center } = jscad.transforms
  const { arc } = jscad.primitives
  const { colorize } = jscad.colors
  const { measureAggregateBoundingBox } = jscad.measurements
  //const { union } = jscad.booleans
 
  function lettre (ch) {
    const outlines = vectorChar(ch);
    const segmentToPath = (segment) => {
      return path2.fromPoints({close: false}, segment)
    }
    const paths = outlines.segments.map((segment) => segmentToPath(segment))
    return paths
  }
  
  let t = "MAKE IT REAL";
  let t1 = t.split("");
  let t2 = [];

  let x = 0;
  let nbL = 0;
  t1.forEach((l, index) => {
    if (l == ' ') {
      x += 10;
    }
    else {
      nbL++;
      let L = lettre(l);
      let b = measureAggregateBoundingBox(L);

      if (index == 0) {
        t2.push(L);
        x = b[0][1];
      }
      else {
        let b = measureAggregateBoundingBox(t2);
        x+= b[1][1]
        t2.push(translateX(x, L));
      }
    }
  });
  
  let t3 = [];
  t2.forEach((p, index) => {
    t3.push(rotateZ(Math.PI*index/(nbL-1), p));
  });
  
  return [
    t2
    , colorize([0,1,0], t3)
  ];
}

module.exports = { main }
  

Now I can start using control curves.

@hrgdavor Thank you, the only problem seems to be the fact that a character can have more than one segment and there is no way to know it with VectorText, so I'm doing it with VectorChar, almost done. About bezier, I hope that bezierAt() and tangentAt() could give the data I need, I prefer to avoid using librairies whenever possible.

Hello, I'm currently starting to work with text to create 2d effects. I thought I could isolate each letter then translate/rotate/scale it as needed, but apparently the function that makes the paths from the vectorText data doesn't return one path by letter but sometimes more. Apparently I need to change my code and get the path for each letter separately.

Here's what I did :

function main() {
  const jscad = require('@jscad/modeling')
  const { vectorText } = jscad.text
  const { geom2, path2 } = jscad.geometries
  const { align, rotateX, rotateZ } = jscad.transforms
  const { arc } = jscad.primitives
  const { colorize } = jscad.colors
 
  function texte (ch) {
    const outlines = vectorText(ch);
    const segmentToPath = (segment) => {
      return path2.fromPoints({close: false}, segment)
    }
    const paths = outlines.map((segment) => segmentToPath(segment))
    return paths
  }
  
  const t1 = texte("012345");
  const t2 = align({grouped:true}, t1);
  const nbL = t2.length;
  
  let t3 = [];
  t2.forEach((p, index) => {
    t3.push(rotateZ(index/nbL, p));
  });
  
  console.log(t3)
  
  return t3
}

module.exports = { main }

On the snapshot the 4 is apparently made of 2 paths, and the console output shows that there are 7 paths for 6 characters.

What I would like to do is to have curve that could be handled by parameters, and then the letters will follow that curves, first curve for the placement, second for the scale, I hope that it will be possible using Bezier.

That's great.