Skip to content

3. Final Code for Project

This is the code that was used in the presentation video.

//Code_yuichi4
// warning: without a powered usb-hub, currentScale > 0.5 are likely to fail 
//
//Open browser’s DevTools console with
// cmd + shift + j (Linux)
// ctrl + shift + j (win)
// command + option + j (mac)
//
//https://fabacademy.org/2024/labs/kannai/Instruction/tips/machine_building/
//Modified by Zack Budzichowski Fab Academy 2024 Final Project

// UI in View tab
const el = document.createElement("div");

el.style = `
  padding: 10px; 
`

el.innerHTML = `
<h4><font color="#5B9BAF">FabAcademy2024-</font></h4>
<table>
    <tbody>
        <tr>
            <td></td>
            <td><button id="yPlus"> Y+ </button></td>
            <td></td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;</td><!-- space in 3rd column-->
            <td><button id="Test"> Test </button></td><td></td>
        </tr>
        <tr>
            <td><button id="xMinus"> X- </button></td>
            <td></td>
            <td><button id="xPlus"> X+ </button></td>
            <td></td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;</td><!-- space in 3rd column-->
            <td><button id="Home"> Home </button></td><td></td>
        </tr>
        <tr>
            <td></td>
            <td><button id="yMinus"> Y- </button></td>
            <td></td>
            <td></td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;</td><!-- space in 3rd column-->
            <td><button id="DrawSquare"> DrawSquare </button></td><td></td>    </tbody>
</table>
<hr>
<p>
<img src="https://fabacademy.org/2023/labs/charlotte/students/zack-budzichowski/images/home/fablablogocls.jpg" alt="FabLab Kannai" width="75">
<font color="#5B9BAF">Modular Things Core XY</font>
<img src="https://fabacademy.org/2024/labs/kannai/images/logo2022-yoko-w_transp.png" alt="FabLab Kannai" width="200">
<p>

<hr>
<p>
Open browser's DevTools console with<br>
cmd + shift + j (Linux)<br>
ctrl + shift + j (win)<br>
command + option + j (mac)
</p>
`;

//pen up initially
//zUp();

//test button
//================================
el
  .querySelector("#Test")
  .addEventListener("click", () => {
    delay(100);
    test();
    //drawPolugon();
  })

 function test() {
  machine.setPosition([0, 0]);
  goTo(10,10 );
}
//================================


//Synchronizer of two motors
const machine = createSynchronizer([motorA, motorB]);

//Definition of CoreXY Motion 
async function goTo(x,y){
  console.log(`Moving to (${x}, ${y})`);
  await machine.absolute([-1*(x+y),-1*(x-y)]); // The reason why "-1" is multiplied may be due to the wiring and origin position.
}

// Set button ID and click_event
el
  .querySelector("#xPlus")
  .addEventListener("click", () => {
     xPlus();
  })

el
  .querySelector("#xMinus")
  .addEventListener("click", () => {
     xMinus();
  })

el
  .querySelector("#yPlus")
  .addEventListener("click", () => {
     yPlus();
  })

el
  .querySelector("#yMinus")
  .addEventListener("click", () => {
     yMinus();
  })


el
  .querySelector("#Home")
  .addEventListener("click", () => {
    goToHome();
  })

el
  .querySelector("#DrawSquare")
  .addEventListener("click", () => {
    delay(100);
    drawSquare();
  })


render(el);


// When you start running this javascript code, the machine runs from here

//motor setting
motorA.setCurrent(1);
motorA.setStepsPerUnit(5);
motorB.setCurrent(1);
motorB.setStepsPerUnit(5);
machine.setPosition([0, 0]);// set present position as (X0,Y0)
//machine.setPosition(0, 0);// CHECK this syntax works or not

//const isAtEndStopX = false;
//console.log(isAtEndStopX);

// Function definition
async function goToHome(){
  while(await motorB.getLimitState()){ // Limit switch at X- as Normally-Open
    motorA.velocity(10);//move motorA CW
    motorB.velocity(10); //move motorB CW
  }
  while(await motorA.getLimitState()){ //  Limit switch at Y- as Normally-Open
    motorA.velocity(10); //positive value means CW
    motorB.velocity(-10);//negative value means CCW
  }
  motorA.velocity(0);
  motorB.velocity(0);
  machine.setPosition([0, 0]);
  await delay(1000);
  goTo(10,10 );
  machine.setPosition([0, 0]);
  await delay(1000);
}//end of goToHome



function xPlus() {
    //zUp();
    machine.setPosition([0, 0]);
    for ( i = 0; i<10; i++){
     goTo(i,0 );     
    }  
}

 function xMinus() {
    //zUp();
    machine.setPosition([0, 0]);
    for ( i = 0; i<10; i++){
     goTo(-i,0 );
  }
}

function yPlus() {
    //zUp();
    machine.setPosition([0, 0]);
    for ( i = 0; i<10; i++){
     goTo(0,i );
  }
}

 function yMinus() {
     //zUp();
    machine.setPosition([0, 0]);
    for ( i = 0; i<10; i++){
     goTo(0,-i );
  }
}

async function drawSquare(){
  //down();
  for (let i = 0; i < ptsSquare.length; i++){
    await goTo(ptsSquare[i][0], ptsSquare[i][1]);
    await delay(200);  
  }
  //zUp();
}

async function drawStar(){
  //down();
  for (let i = 0; i < ptsStar.length; i++){
    await goTo(ptsStar[i][0], ptsStar[i][1]);
    await delay(200);  
  }
  //zUp();
}



// Array of [x,y] positions of drawing design
//Square
var ptsSquare = [[20,0],[20,20],[0,20],[0,0]];

//Star
var ptsStar = [[20,10],[30,50],[40,10],[10,40],[50,40],[20,10]];

//TestDraw
var pts = [[62.2, 26.2], [29.7, 26.2], [29.7, 49], [61, 49], [61, 62.5], [29.7, 62.5], [29.7, 92.7], [29.7, 107.9], [29.7, 130.7], [60.5, 98.5],
 [69.9, 107.9], [42.6, 135.8], [85, 187.9], [66.1, 187.9], [32.6, 145.6], [29.7, 148.5], [29.7, 174.4], [15.6, 174.4], [15.6, 107.9],
 [15.6, 92.7], [15.6, 12.7], [62.2, 12.7], [62.2, 26.2]];



//SVG -> ChatGPT -> vertex coordinates of the shape//This is NOT tested yet
var polygon1 = [[10,10],[10,20],[20,20],[20,10],[10,10]];

var polygon2 = [[30,30],[30,40],[40,40],[40,30],[30,30]];

async function drawPolugon() {
  machine.setPosition([0, 0]);// set present position as (X0,Y0)
  //zUp();  
  //about polygon1
  await goTo(polygon1[0][0], polygon1[0][1]);//move to first position of polygon1
  //zDown();
  for (let i = 1; i < polygon1.length; i++){
    await goTo(polygon1[i][0], polygon1[i][1]);//finish drawing polygon1
    await delay(200);  
  }
  //zUp();  
  //about polygon2
  await goTo(polygon2[0][0], polygon2[0][1]);//move to first position of polygon2
  //zDown();
  for (let i = 1; i < polygon2.length; i++){
    await goTo(polygon1[i][0], polygon1[i][1]);//finish drawing polygon2
    await delay(200);  
  }
  //zUp(); 
  //finished drawing all polygons
  goTo(0,0);//move back to (X0,Y0)
}