Week 2 - Vinyl + Lasercutting + Website Design

Creating a website #

As I’m new to creating websites, I decided to use the open-source static site generator, Hugo, as I figured it might be easier to use a markdown format rather than writing in HTML. I soon discovered that this ’easy’ decision was much more complicated than I expected. Per the recommendation of a classmate who uses Hugo, I downloaded Windows Subsystem for Linux as well as Ubuntu, which is a Linux distribution (whatever that means). I went through many phases of regretting this decision, but as you can see, I finally got things to work. In brief, this required following all of the usual steps like cloning my gitlab repo. However, because I’m using Hugo and because of the way that our gitlab is set up, I ended up needing to create a separate repo from the one that I am uploading to. This allows me to build my Hugo site and rather than having all of the contents of that site pushed to my class repo, I copy and paste the public folder (where Hugo outputs the website) into the class repo. This was a grueling process to figure out and I spent countless hours troubleshooting in ways that ulimately got me nowhere. It felt like this was a good lessoning in understanding my limits and recognizing when I’m going in circles. In short, knowing when to ask for help. Thanks to the help of a TA I now have a functional site, and I’ve documented some of the steps below:

Gitlab + Hugo

Note to self about how to use Gitlab with Hugo: #

If you are starting with tyler@Tylers-PC: you will need to navigate to the tylerbarron_build folder by typing: cd HTMAA_Barron/tylerbarron_build/ if you need to go back type in cd ..

Build inside of the tylerbarron_build (this is the build repo) and is where my hugo site is staged. to be clear, it is separate from the CBA site repo.

code . is what allows you to build inside of a vs or visual studio. currently all of the documents are under content, then docs, and there is a folder for each week. each of these folders is a _index.md file as this allows images to be easily referenced.

When making changes in the VS, be sure to save by clicking Ctrl+S.

Once you have made the changes in the you wish inside of the VS, can can then check to see if the changes saved by viewing them locally:

If you want to be sure you’re changes saved then you can view them locally by typing in: hugo server -D

If you like what you see you can then proceed, then you follow the git steps: git status git add . –> the period means you are staging all of the changes git commit -m "your message here" git push

What has now happened is that you build a website in the public folder of the tylerbarron_build repo. Because this site needs to live on the CBA site, you then have to copy the contents of the public folder and save them to the TylerBarron repo that you cloned.

You are in the the personal repo - tylerbarron_build folder and you need get to the HTMAA_2025 folder.

Go back a directory by typing: $ cd ..

You should now be in: tyler@Tylers-PC:~/HTMAA_Barron

Then, copy the folder using the following code: cp -r tylerbarron_build/public/. ./TylerBarron/

Once you have copied the contents, reselect the class repo folder: cd TylerBarron/

Then follow the gits steps again: git status git add git commit -m"message here" git push

Click on this link to see the theme for this hugo page

Neither of these tutorials could fully explain the situation but they helped to answer some questions:

Gitlab/Hugo Tutorial 1

Gitlab/Hugo Tutorial 2

Git Recitation Resource

Vinyl Cutting: #

In order to make a vinyl cut design, I decided to use Adobe Illustrator. Being fairly new to this program, like all of the programs in this class, I decided to create a fairly simply image. I went with a paisley design, as I find this shape to be particularly captivating. I relied mostly on the Smooth Tool, found by right-clicking the shaper icon. I was able to click create a rough shape than I then smoothed out. In order to make some of the inner paisley shapes transparent, which I was told was neccesary for the lasercutting process, I used used the “Minus front” command, found in the Window > Pathfinder. After some fussing and puzzling, I finally settled on a design that would work with the vinyl cutter.

The Vinyl Cutting Process

To begin. I turned on the machine and lowered the loading lever to feed in the roll of vinyl. I made sure the pinch rollers were properly positioned for the width of the vinyl roll and raised the loading lever to secure the material. I then went through the test cutting process to ensure that material was properly being cut and then proceeded with my design. I initially had to resized my Illustrator design so that it was a bit larger, roughly 3x5". I downloaded my PNG from google drive and opened up the vinylcutter mod. I then selected my file, set the DPI to 300 and the force to 80, and made sure the ‘socket’ status was open. With everything ready to print, I sent the file to the printed. The process was successful, so I cut out my design with scissors, weeded out the waste vinyl with tweezers, applied masking film, and then applied the sticker to my computer.

The Final Product: #

Vinyl 2 Vinyl 3

Final Product Download Paisley Design

Lasercutting #

For this week’s assignment, I decided to model a 3D bicycle that I could lasercut out of carboard. It took me some time to settle on a design for this project as I wasn’t sure how I wanted to orient the spokes of the bicycle, and ulimatelty I decided on a design that mirrored the frame across one set of wheels. This was my first time using Fusion 360 and it was quite a challenge to figure out to build something even this simple. I watched a handful of youtube videos, and occasional asked ChatGPT for how to do something, but I ended up getting a sense of how to use this software just by messing process. This was at times a frustrating process but I ended up with a design that I successfully lasercut.

The Lasercutting Process: #

I received training on the lasercutter last Friday and ended up using it this Tuesday. In that time, I forgot some of the basics but was generally relieved at how effortless the process was.

In order to print out my 3d bicyle design, I exported each sketch as a DXF file, making sure to click off construction lines and points. I exported these files in inches and then brought them into Rhino one by one. I bumped into an issue with Rhino in the beginning and wasnt able to move my shapes, but this was resolved by turning off points and resetting the layout area to the cardboard size which is 24x36 inches. I then organized the biycle components that that they would take up as little space as possible on the cardboard. I also had to clean up some lines and additional points in Rhino to ensure that the lasercutting didn’t add extraneous lines.

After the shapes were organized, I turned on the lasercutter from the button on the side of the machine as the master switch was already on (I could hear the ventilation working too). Using the focus button, I then set the focal distance to be 2" away from the cardboard. In retrospect, I should have lowered the laser by about 1/8 of an inch in order to have the lens 2" away from the center of the material and not the surface. In order to begin the printing process, I started by ensuring the linetype was continuous and that the print width was set to hairline for vector line cutting, as opposed to the default raster setting for images and engraving. From here I opened the print properties and set the PPI to 500, the power to 30%, the speed to 25%. I made sure the job type said “vector,” the piece size said “horizontal: 36” and “vertical:24.” After, I checked to makre sure the output type was “vector” and that the view was “top.” I set the window display so that the top left section of the cardboard would be the starting point of the lasercutting. With everything looking good, I hit print and started the job by pressing go on the Epilog machine.

The first pass of the lasercutter didnt quite go through the cardboard, so I tried two more times and increased the power. On the final pass I could see the object dropping through the areas where they were cut, which told me that laser had gone through the cardboard. Upon assembly, I could tell that the objects were a bit too loose, which meant that I needed to adjust for the kert of the laser. I went back to my Fusion design and adjust the parameter “slot” which has originally been 0.25" and made it 0.23". My design was messy and hadn’t saved correctly from my previous changes so this was a bit of a pain. However, I was able to re-export my DXF files and printed the 3d bicycle once again. This time (still for some reason not considering focal distnace) I increased the power to 40 and ran the job twice.

Final Product: #

Final Product

3D Bicycle Design Lasercutter

Download Bicycle Design

Notes from Class: #

pulling and pushing : upstream and downsteam -pulling comes from global repo -pushing adds to global repo -branching - having a simultaneous site where you want to make changes then merge -staging comes before commit = save -always run git status