JSXGraph
JSXGraph share

Share

3D subdivided icosahedron - canvas
Show plain example
QR code 
<iframe 
    src="https://www.jsxgraph.org/share/iframe/iterated-icosahedron" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: 3D subdivided icosahedron - canvas" 
    allowfullscreen
></iframe>
This code has to 
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID,
    {
        boundingbox: [-5, 5, 5, -5],
        axis: false,
        showNavigation: false,
        renderer: 'canvas',
        zoom: {
            enabled: false
        },
        pan: {
            enabled: false
        }
    });
    
    var view = board.create(
        'view3d',
        [[-4, -4], [8, 8],
            [[-2, 2], [-2, 2], [-2, 2]]],
        {
            projection: 'central',
            trackball: { enabled: true },
            depthOrder: {
                enabled: true
            },
            xAxis: { visible: false },
            yAxis: { visible: false },
            zAxis: { visible: false },
            xPlaneRear: { visible: false },
            yPlaneRear: { visible: false },
            zPlaneRear: { fillOpacity: 0.2, visible: false }
        }
    );
    
    let radius = 2; // Our icosahedron runs from +1 to -1
    let rho = 1.6180339887;
    let vertexList = [
        [0, -1, -rho], [0, +1, -rho], [0, -1, rho], [0, +1, rho],
        [1, rho, 0], [-1, rho, 0], [1, -rho, 0], [-1, -rho, 0],
        [-rho, 0, 1], [-rho, 0, -1], [rho, 0, 1], [rho, 0, -1]
    ];
    
    // Normalize vector to length r
    let scaleVertex = (v, r) => {
        let len = JXG.Math.hypot(...v);
        return [v[0] * r / len, v[1] * r / len, v[2] * r / len];
    };
    
    // Normalize initial vertices
    for (let i = 0; i < vertexList.length; i++) {
        vertexList[i] = scaleVertex(vertexList[i], radius);
    }
    
    let faceArray = [
        [4, 1, 11],
        [11, 1, 0],
        [6, 11, 0],
        [0, 1, 9],
        [11, 10, 4],
        [9, 1, 5],
        [8, 9, 5],
        [5, 3, 8],
        [6, 10, 11],
        [2, 3, 10],
        [2, 10, 6],
        [8, 3, 2],
        [3, 4, 10],
        [7, 8, 2],
        [9, 8, 7],
        [0, 9, 7],
        [4, 3, 5],
        [5, 1, 4],
        [0, 7, 6],
        [7, 2, 6]
    ];
    
    // 0 is a 20 sided icosahedron,  
    // 1 is 80 sided, 
    // 2 is 320 sided, 
    // 3 is 1280 sided, etc
    let iterations = 3;
    
    /* Midpoint between two vertices */
    let midPoint = (p1, p2) => [(p2[0] + p1[0]) / 2, (p2[1] + p1[1]) / 2, (p2[2] + p1[2]) / 2];
    
    let newFaceArray = [];
    
    for (let j = 0; j < iterations; j++) {
        newFaceArray = [];
        for (let i = 0; i < faceArray.length; i++) {
    
            let f = faceArray[i];
    
            // Three new points at the midpoint of each vertex
            let m0 = scaleVertex(midPoint(vertexList[f[1]], vertexList[f[2]]), radius);
            let m1 = scaleVertex(midPoint(vertexList[f[0]], vertexList[f[2]]), radius);
            let m2 = scaleVertex(midPoint(vertexList[f[0]], vertexList[f[1]]), radius);
    
            // Add the new points to the vertexList and store their positions
            let p0 = vertexList.push(m0) - 1;
            let p1 = vertexList.push(m1) - 1;
            let p2 = vertexList.push(m2) - 1;
    
            // Add four new faces - the three corner-to-midpoints and then all three midpoints
            newFaceArray.push([f[0], p2, p1]);
            newFaceArray.push([f[1], p0, p2]);
            newFaceArray.push([f[2], p1, p0]);
            newFaceArray.push([p0, p1, p2]);
        }
        faceArray = newFaceArray; // in case we go around again
    }
    
    var ico = view.create('polyhedron3d', [vertexList, faceArray], {
        fillColorArray: [],
        fillOpacity: 1,
        strokeWidth: 0.1,
        layer: 12,
        shader: {
            enabled: true,
            type: 'angle',
            hue: 0,
            saturation: 90,
            minlightness: 60,
            maxLightness: 80
        }
    });
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

const board = JXG.JSXGraph.initBoard(BOARDID,
{
    boundingbox: [-5, 5, 5, -5],
    axis: false,
    showNavigation: false,
    renderer: 'canvas',
    zoom: {
        enabled: false
    },
    pan: {
        enabled: false
    }
});

var view = board.create(
    'view3d',
    [[-4, -4], [8, 8],
        [[-2, 2], [-2, 2], [-2, 2]]],
    {
        projection: 'central',
        trackball: { enabled: true },
        depthOrder: {
            enabled: true
        },
        xAxis: { visible: false },
        yAxis: { visible: false },
        zAxis: { visible: false },
        xPlaneRear: { visible: false },
        yPlaneRear: { visible: false },
        zPlaneRear: { fillOpacity: 0.2, visible: false }
    }
);

let radius = 2; // Our icosahedron runs from +1 to -1
let rho = 1.6180339887;
let vertexList = [
    [0, -1, -rho], [0, +1, -rho], [0, -1, rho], [0, +1, rho],
    [1, rho, 0], [-1, rho, 0], [1, -rho, 0], [-1, -rho, 0],
    [-rho, 0, 1], [-rho, 0, -1], [rho, 0, 1], [rho, 0, -1]
];

// Normalize vector to length r
let scaleVertex = (v, r) => {
    let len = JXG.Math.hypot(...v);
    return [v[0] * r / len, v[1] * r / len, v[2] * r / len];
};

// Normalize initial vertices
for (let i = 0; i < vertexList.length; i++) {
    vertexList[i] = scaleVertex(vertexList[i], radius);
}

let faceArray = [
    [4, 1, 11],
    [11, 1, 0],
    [6, 11, 0],
    [0, 1, 9],
    [11, 10, 4],
    [9, 1, 5],
    [8, 9, 5],
    [5, 3, 8],
    [6, 10, 11],
    [2, 3, 10],
    [2, 10, 6],
    [8, 3, 2],
    [3, 4, 10],
    [7, 8, 2],
    [9, 8, 7],
    [0, 9, 7],
    [4, 3, 5],
    [5, 1, 4],
    [0, 7, 6],
    [7, 2, 6]
];

// 0 is a 20 sided icosahedron,  
// 1 is 80 sided, 
// 2 is 320 sided, 
// 3 is 1280 sided, etc
let iterations = 3;

/* Midpoint between two vertices */
let midPoint = (p1, p2) => [(p2[0] + p1[0]) / 2, (p2[1] + p1[1]) / 2, (p2[2] + p1[2]) / 2];

let newFaceArray = [];

for (let j = 0; j < iterations; j++) {
    newFaceArray = [];
    for (let i = 0; i < faceArray.length; i++) {

        let f = faceArray[i];

        // Three new points at the midpoint of each vertex
        let m0 = scaleVertex(midPoint(vertexList[f[1]], vertexList[f[2]]), radius);
        let m1 = scaleVertex(midPoint(vertexList[f[0]], vertexList[f[2]]), radius);
        let m2 = scaleVertex(midPoint(vertexList[f[0]], vertexList[f[1]]), radius);

        // Add the new points to the vertexList and store their positions
        let p0 = vertexList.push(m0) - 1;
        let p1 = vertexList.push(m1) - 1;
        let p2 = vertexList.push(m2) - 1;

        // Add four new faces - the three corner-to-midpoints and then all three midpoints
        newFaceArray.push([f[0], p2, p1]);
        newFaceArray.push([f[1], p0, p2]);
        newFaceArray.push([f[2], p1, p0]);
        newFaceArray.push([p0, p1, p2]);
    }
    faceArray = newFaceArray; // in case we go around again
}

var ico = view.create('polyhedron3d', [vertexList, faceArray], {
    fillColorArray: [],
    fillOpacity: 1,
    strokeWidth: 0.1,
    layer: 12,
    shader: {
        enabled: true,
        type: 'angle',
        hue: 0,
        saturation: 90,
        minlightness: 60,
        maxLightness: 80
    }
});
<jsxgraph width="100%" aspect-ratio="1 / 1" title="3D subdivided icosahedron - canvas" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   const board = JXG.JSXGraph.initBoard(BOARDID,
   {
       boundingbox: [-5, 5, 5, -5],
       axis: false,
       showNavigation: false,
       renderer: 'canvas',
       zoom: {
           enabled: false
       },
       pan: {
           enabled: false
       }
   });
   
   var view = board.create(
       'view3d',
       [[-4, -4], [8, 8],
           [[-2, 2], [-2, 2], [-2, 2]]],
       {
           projection: 'central',
           trackball: { enabled: true },
           depthOrder: {
               enabled: true
           },
           xAxis: { visible: false },
           yAxis: { visible: false },
           zAxis: { visible: false },
           xPlaneRear: { visible: false },
           yPlaneRear: { visible: false },
           zPlaneRear: { fillOpacity: 0.2, visible: false }
       }
   );
   
   let radius = 2; // Our icosahedron runs from +1 to -1
   let rho = 1.6180339887;
   let vertexList = [
       [0, -1, -rho], [0, +1, -rho], [0, -1, rho], [0, +1, rho],
       [1, rho, 0], [-1, rho, 0], [1, -rho, 0], [-1, -rho, 0],
       [-rho, 0, 1], [-rho, 0, -1], [rho, 0, 1], [rho, 0, -1]
   ];
   
   // Normalize vector to length r
   let scaleVertex = (v, r) => {
       let len = JXG.Math.hypot(...v);
       return [v[0] * r / len, v[1] * r / len, v[2] * r / len];
   };
   
   // Normalize initial vertices
   for (let i = 0; i < vertexList.length; i++) {
       vertexList[i] = scaleVertex(vertexList[i], radius);
   }
   
   let faceArray = [
       [4, 1, 11],
       [11, 1, 0],
       [6, 11, 0],
       [0, 1, 9],
       [11, 10, 4],
       [9, 1, 5],
       [8, 9, 5],
       [5, 3, 8],
       [6, 10, 11],
       [2, 3, 10],
       [2, 10, 6],
       [8, 3, 2],
       [3, 4, 10],
       [7, 8, 2],
       [9, 8, 7],
       [0, 9, 7],
       [4, 3, 5],
       [5, 1, 4],
       [0, 7, 6],
       [7, 2, 6]
   ];
   
   // 0 is a 20 sided icosahedron,  
   // 1 is 80 sided, 
   // 2 is 320 sided, 
   // 3 is 1280 sided, etc
   let iterations = 3;
   
   /* Midpoint between two vertices */
   let midPoint = (p1, p2) => [(p2[0] + p1[0]) / 2, (p2[1] + p1[1]) / 2, (p2[2] + p1[2]) / 2];
   
   let newFaceArray = [];
   
   for (let j = 0; j < iterations; j++) {
       newFaceArray = [];
       for (let i = 0; i < faceArray.length; i++) {
   
           let f = faceArray[i];
   
           // Three new points at the midpoint of each vertex
           let m0 = scaleVertex(midPoint(vertexList[f[1]], vertexList[f[2]]), radius);
           let m1 = scaleVertex(midPoint(vertexList[f[0]], vertexList[f[2]]), radius);
           let m2 = scaleVertex(midPoint(vertexList[f[0]], vertexList[f[1]]), radius);
   
           // Add the new points to the vertexList and store their positions
           let p0 = vertexList.push(m0) - 1;
           let p1 = vertexList.push(m1) - 1;
           let p2 = vertexList.push(m2) - 1;
   
           // Add four new faces - the three corner-to-midpoints and then all three midpoints
           newFaceArray.push([f[0], p2, p1]);
           newFaceArray.push([f[1], p0, p2]);
           newFaceArray.push([f[2], p1, p0]);
           newFaceArray.push([p0, p1, p2]);
       }
       faceArray = newFaceArray; // in case we go around again
   }
   
   var ico = view.create('polyhedron3d', [vertexList, faceArray], {
       fillColorArray: [],
       fillOpacity: 1,
       strokeWidth: 0.1,
       layer: 12,
       shader: {
           enabled: true,
           type: 'angle',
           hue: 0,
           saturation: 90,
           minlightness: 60,
           maxLightness: 80
       }
   });
</jsxgraph>

3D subdivided icosahedron - canvas

3D
Geometry
This visualization presents an iterated icosahedron — a geometric construction that begins with a regular icosahedron and recursively subdivides its triangular faces. Same example as the 3d-subdivided-icosahedron example, but rendered in canvas instead of SVG which gives a considerable speed-up.
Have also a look at the examples 
// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID,
{
    boundingbox: [-5, 5, 5, -5],
    axis: false,
    showNavigation: false,
    renderer: 'canvas',
    zoom: {
        enabled: false
    },
    pan: {
        enabled: false
    }
});

var view = board.create(
    'view3d',
    [[-4, -4], [8, 8],
        [[-2, 2], [-2, 2], [-2, 2]]],
    {
        projection: 'central',
        trackball: { enabled: true },
        depthOrder: {
            enabled: true
        },
        xAxis: { visible: false },
        yAxis: { visible: false },
        zAxis: { visible: false },
        xPlaneRear: { visible: false },
        yPlaneRear: { visible: false },
        zPlaneRear: { fillOpacity: 0.2, visible: false }
    }
);

let radius = 2; // Our icosahedron runs from +1 to -1
let rho = 1.6180339887;
let vertexList = [
    [0, -1, -rho], [0, +1, -rho], [0, -1, rho], [0, +1, rho],
    [1, rho, 0], [-1, rho, 0], [1, -rho, 0], [-1, -rho, 0],
    [-rho, 0, 1], [-rho, 0, -1], [rho, 0, 1], [rho, 0, -1]
];

// Normalize vector to length r
let scaleVertex = (v, r) => {
    let len = JXG.Math.hypot(...v);
    return [v[0] * r / len, v[1] * r / len, v[2] * r / len];
};

// Normalize initial vertices
for (let i = 0; i < vertexList.length; i++) {
    vertexList[i] = scaleVertex(vertexList[i], radius);
}

let faceArray = [
    [4, 1, 11],
    [11, 1, 0],
    [6, 11, 0],
    [0, 1, 9],
    [11, 10, 4],
    [9, 1, 5],
    [8, 9, 5],
    [5, 3, 8],
    [6, 10, 11],
    [2, 3, 10],
    [2, 10, 6],
    [8, 3, 2],
    [3, 4, 10],
    [7, 8, 2],
    [9, 8, 7],
    [0, 9, 7],
    [4, 3, 5],
    [5, 1, 4],
    [0, 7, 6],
    [7, 2, 6]
];

// 0 is a 20 sided icosahedron,  
// 1 is 80 sided, 
// 2 is 320 sided, 
// 3 is 1280 sided, etc
let iterations = 3;

/* Midpoint between two vertices */
let midPoint = (p1, p2) => [(p2[0] + p1[0]) / 2, (p2[1] + p1[1]) / 2, (p2[2] + p1[2]) / 2];

let newFaceArray = [];

for (let j = 0; j < iterations; j++) {
    newFaceArray = [];
    for (let i = 0; i < faceArray.length; i++) {

        let f = faceArray[i];

        // Three new points at the midpoint of each vertex
        let m0 = scaleVertex(midPoint(vertexList[f[1]], vertexList[f[2]]), radius);
        let m1 = scaleVertex(midPoint(vertexList[f[0]], vertexList[f[2]]), radius);
        let m2 = scaleVertex(midPoint(vertexList[f[0]], vertexList[f[1]]), radius);

        // Add the new points to the vertexList and store their positions
        let p0 = vertexList.push(m0) - 1;
        let p1 = vertexList.push(m1) - 1;
        let p2 = vertexList.push(m2) - 1;

        // Add four new faces - the three corner-to-midpoints and then all three midpoints
        newFaceArray.push([f[0], p2, p1]);
        newFaceArray.push([f[1], p0, p2]);
        newFaceArray.push([f[2], p1, p0]);
        newFaceArray.push([p0, p1, p2]);
    }
    faceArray = newFaceArray; // in case we go around again
}

var ico = view.create('polyhedron3d', [vertexList, faceArray], {
    fillColorArray: [],
    fillOpacity: 1,
    strokeWidth: 0.1,
    layer: 12,
    shader: {
        enabled: true,
        type: 'angle',
        hue: 0,
        saturation: 90,
        minlightness: 60,
        maxLightness: 80
    }
});

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.