isom 2.js

let count=[...Array(10)].map(
    (x,idx) => {return idx}
)

Point.prototype.toIso=function(){
    var x=this.x
    var y=this.y
    this.x=x-y;
    this.y=(x+y)/2;
}

Point.prototype.fromIso=function(){
    var x=this.x
    var y=this.y
	this.x=(x+y*2)/2;
	this.y=(y*2-x)/2;
}

var scale=40;
document.addEventListener('paste', function(evt) {
    //Import SVG copied to clipboard from Illustrator
    //remove last hidden character that will otherwise break the import
    if(document.activeElement.nodeName!="TEXTAREA"){
        var str=evt.clipboardData.getData('text/plain').slice(0, -1);
        var svg=project.importSVG(str)
        
        svg.parent.insertChildren(svg.index,svg.removeChildren());
        svg.remove();
        items=[]
        //remove the bounding box and hidden paths
        for(var i=2;i<project.activeLayer.children.length;i++){
            items.push(project.activeLayer.children[i])
            
            
        }
        items2=[]
   
        for(var i=0;i<items.length;i++){

            if(items[i].className=="Path"){
                items[i].data.pathData=items[i].pathData;
                for(var j=0;j<items[i].segments.length;j++){
                    items[i].segments[j].handleIn.toIso();
                    items[i].segments[j].handleOut.toIso();
                    items[i].segments[j].point.toIso()
                }
                items[i].applyMatrix=true
                items2.push(items[i])
            }
             if(items[i].className=="CompoundPath"){
                 
                 var item=items[i];
                 for(var k=0;k<item.children.length;k++){
                      item.children[k].data.pathData=item.children[k].pathData;
                    for(var j=0;j<item.children[k].segments.length;j++){
                        item.children[k].segments[j].handleIn.toIso();
                        item.children[k].segments[j].handleOut.toIso();
                        item.children[k].segments[j].point.toIso()
                    }
                    item.children[k].applyMatrix=true
                    items2.push(item.children[k])
                 }    
            }           
            
            /*
            if(items[i].children.length>0){
                for(var k=0;k<items[i].children.length;k++){
                    for(var j=0;j<items[i].children[k].segments.length;j++){
                        items[i].children[k].segments[j].point.toIso()
                    }
                }    
            }
            */
        }
    }
})
var c=8

var group=new Group();

for(var z=0;z<c;z++){
    for(var y=0;y<c;y++){
        for(var x=0;x<c;x++){
            var pt=new Path.Circle({
                //segments:[[x*5,y*5],[y*5,z*5]],
                //segments:[[-1,-1],[1,1]],
                radius:15,
                //size:[10,10],
                //strokeWidth:20,
                //strokeJoin:"round",
                //strokeCap:"round",
                fillColor:[x/c,y/c,z/c],
                //strokeColor:[x/c,y/c,z/c],
                opacity:1,
            })
            pt.data.x=x-c/2
            pt.data.y=y-c/2
            pt.data.z=z-c/2
            pt.position.x=(x-z)/Math.sqrt(2)*scale+400
            pt.position.y=(x+2*y+z)/Math.sqrt(8)*scale+117
            group.appendTop(pt)
        }
    }    
}

/*
X = x;
Y = y*Math.cos(angle)-z*Math.sin(angle);
Z = y*Math.sin(angle)+z*Math.cos(angle);

X = x*Math.cos(angle)+z*Math.sin(angle);
Y = y;
Z = z*Math.cos(angle)-x*Math.sin(angle);

X = x*Math.cos(angle)-y*Math.sin(angle);
Y = x*Math.sin(angle)+y*Math.cos(angle);
Z = z;
*/


function rotX(pt,angle){
    var x = pt.x;
    var y = pt.y*Math.cos(angle)-pt.z*Math.sin(angle);
    var z = pt.y*Math.sin(angle)+pt.z*Math.cos(angle);    
    return {x,y,z}
}

function rotY(pt,angle){
    var x = pt.x*Math.cos(angle)+pt.z*Math.sin(angle);
    var y = pt.y;
    var z = pt.z*Math.cos(angle)-pt.x*Math.sin(angle);    
    return {x,y,z}
}

function rotZ(pt,angle){
    var x = pt.x*Math.cos(angle)-pt.y*Math.sin(angle);
    var y = pt.x*Math.sin(angle)+pt.y*Math.cos(angle);
    var z = pt.z;    
    return {x,y,z}
}

function toIsom(pt){
    
}

 
 
var t=new Tool()

t.on({
    mousedown(e){
        project.activeLayer.appendTop(group)
    },
    mousedrag(e){
        for(var i=0;i<group.children.length;i++){
            var item=group.children[i];
            var mX=e.delta.x*(Math.PI/180)/5
            var mY=-e.delta.y*(Math.PI/180)/5
            //var lvl=(e.point.y-e.downPoint.y)/150
            //var lvl=Math.max(-1,Math.min(1,lvl))

           // var newX = item.data.x;
           // var newY = item.data.y*Math.cos(ang)-item.data.z*Math.sin(ang);
           // var newZ = item.data.y*Math.sin(ang)+item.data.z*Math.cos(ang);
            
            var newPt=rotY(item.data,mX)
            //var newPt=rotX(newPt,mY)
            
            item.data.x=newPt.x
            item.data.y=newPt.y
            item.data.z=newPt.z
            
            item.data.depth=newPt.x+newPt.y+newPt.z

            //console.log(newX,newY,newZ)
            item.position.x=(newPt.x-newPt.z)/Math.sqrt(2)*scale+400
            item.position.y=(newPt.x+2*newPt.y+newPt.z)/Math.sqrt(8)*scale+400
            
        }
        
        for(var i=0;i<items2.length;i++){
            items2[i].pathData=items2[i].data.pathData
            items2[i].rotate(-e.delta.x/5,[700,400])
            items2[i].data.pathData=items2[i].pathData
            for(var j=0;j<items2[i].segments.length;j++){
                
                items2[i].segments[j].handleIn.toIso();
                items2[i].segments[j].handleOut.toIso();
                items2[i].segments[j].point.toIso()
            }
        }
      

        group.children.sort(function(a, b) {
            return(a.data.depth - b.data.depth);
        });

    }
})
/*
function onFrame(e){
        for(var i=0;i<project.activeLayer.children.length;i++){ 
            var item=project.activeLayer.children[i];            
                item.segments[1].point.x+=Math.sin(e.count/10+item.index/10)*2
        }  
}
*/

isom playground.js

var scale=20;

Object.defineProperty(Point.prototype, "z", {
    set: function(val){this._z=val},
    get: function(){return this._z},
});

Point.prototype.addAll=function(){
    return this.x+this.y+this.z
}

for(var z=0;z<10;z++){
    for(var y=0;y<10;y++){
        for(var x=0;x<10;x++){
            var pt=new Shape.Circle({
                radius:10,
                fillColor:[x/10,y/10,z/10],
                opacity:0.8,
            })
            //pt.data.pos=[x,y,z]
            pt.position.x=(x-z)/Math.sqrt(2)*scale+200
            pt.position.y=(x+2*y+z)/Math.sqrt(8)*scale+133.3       
        }
    }    
}

var path=new Path({
    strokeColor:'red',
    strokeWidth:2,
    segments:[[0,300],[200,400]]
})

//x=(x-z)/sqrt(2)
//y=(x+2y+z)/sqrt(6)

function ease(t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }

//pt.z=300
var pt=new Point(100,200)
pt.z=300
console.log(pt.x,pt.y,pt.z)

console.log(pt.addAll())

console.log(Object.keys(pt))

var group=new Group({applyMatrix:false})

group.position=[300,300]
scatter=2400

for(var i=0;i<400;i++){
    var ball=new Path({
        segments:[[0,-20],[0,20]],
        position:[Math.random()*scatter-(scatter/2),Math.random()*scatter-(scatter/2)],
        strokeColor:Math.random(),
        strokeWidth:20,
        strokeJoin:'round',
        strokeCap:'round'
       
    })

    ball.data.position=ball.position;
group.appendTop(ball)

}



var t=new Tool()

t.on({
    mousedrag(e){
        for(var i=0;i<group.children.length;i++){
            var item=group.children[i];
            var ang=-e.point.x*(Math.PI/180)/10
            var lvl=(e.point.y-e.downPoint.y)/150
            var lvl=Math.max(-1,Math.min(1,lvl))
            lvl=ease(lvl)
            var pt=item.data.position;
            var newX=pt.x*Math.cos(ang)-pt.y*Math.sin(ang)
            var newY=pt.y*Math.cos(ang)+pt.x*Math.sin(ang)
            item.data.z=newY
            item.position=new Point(newX,newY*lvl)
        }
        //z sorting
        group.children.sort(function(a, b) {
            return(a.data.z - b.data.z);
        });
    }
})

isom simple group transform.js

document.addEventListener('paste', function(evt) {
    //Import SVG copied to clipboard from Illustrator
    //remove last hidden character that will otherwise break the import
    if(document.activeElement.nodeName!="TEXTAREA"){
        var str=evt.clipboardData.getData('text/plain').slice(0, -1);
        var svg=project.importSVG(str)
        svg.parent.insertChildren(svg.index,svg.removeChildren());
        svg.remove();
        item=project.activeLayer.children[1]

        item.applyMatrix=false

        item.rotate(45)
        group=new Group(item)
        group.applyMatrix=false
        group.scale([1,0.5])
        //item.scale([1,0.5])
        group.position=[200,200]
        //item.matrix.set([[1,0,0],[0,1,0]])
        console.log(item.children.length)
    }
})


function onMouseDrag(e){
    item.rotate(e.delta.x)


}