Week 0

~ designing and documenting ~

This week on HTMAA, Hannah learns to use AutoDesk Fusion in order to draft a design for her final project. Furthermore she sets up her website and gains exposure with git and image/video compression.

AutoDesk Fusion

For my final project, I want to make a wearable. So for this weeks assignment, I drafted a mockup of my wearable in AutoDesk Fusion.

Learning to use Fusion definitely takes practice. Often times I’m pretty sure there are more efficient or commonly accepted ways to do things than the ways I have come up with. And over time, I was figuring out new ways of constructing things myself.

Often times I also found it helpul to explore the menus. I would find tools that Fusion already has that make my job easier.

Website

Hugo

I decided that my main requirement for the website tool is that I could easily iterate and see changes. Hugo does precisely this. It is a static site generator and with a single command

hugo server

I am immediately able to view my website locally on my computer. Every time I type something in one of the files and save the file, the changes immediately appear on the local version of the website.

After choosing a theme, it took a bit of work to figure out the file structure–in particular, how to add photos. After trying several methods and examining the relative path names assigned to the photos, I discovered that the right way to do this was to have a folder with the same name as the .md file and put the images in there.

Git

The main difficulty with getting git setup was that I didn’t realize for a while that I needed to genereate an SSH key pair. After generating the key pair, you add it to the gitlab->settings->ssh key page.

The sequence of commands for pushing my website to the gitlab are:

git status
git add -A
git status
git commit -m "Your commit message"
git status
git pull
git status
git push
git status

And of utmost importance to do before commiting is to check the file sizes.

du -s // prints directory size
du -s * // prints size of each file in the directory

The following command will sort the entire people directory by file size (so I can make sure I am not using more than the rest of the class)

du -s */people
du -s * | sort -n

Neil expects us to use tens of megabytes per person per week. Since a single image let alone video can be itself be much larger than this, it is going to be important to be efficient at media compression! Furthermore, as a file type, jpg will compress better since png is lossless.

Video Compression

I installed ffmpeg so that I would be able to do compression from the terminal, which in the long run will be much more efficient.

The two relevant commands are

(1) compress, remove audio, and change format from mov to mp4 (mp4 is the required file type for hugo)

ffmpeg -i original.MOV -vcodec libx264 -b:v 1000k -vf scale=-1:1080 -an original_noaudio.mp4

(2) crop the video length

ffmpeg -i original_noaudio.mp4 -vcodec libx264 -b:v 1000k -an -ss 00:00:18 -t 00:00:25 final.mp4

Finally, I learned how to embed videos into hugo:

<body>
    <video width="640" height="480" autoplay loop>
    <source src="final.mp4" type="video/mp4">
    </video>
</body>

Image Compression

For image compression, again I used Neil’s recommended terminal program ImageMagick and in particular the mogrify command.

To make this process faster, I defined a few alias names in my ~/.bash_profile file.

alias size="du -s *"
alias make_jpg="mogrify -format jpg *"
alias remove_png ="rm *.png"
alias remove_jpg_dup="rm *.jpg~"
alias  compress_all="mogrify -quality 50% -resize 1000 *.jpg"

Media Workflow

My workflow for making my images and website-ready then looks like the following:

put all videos and images in seperate folders
copy and paste to the folder on my website (this way I will maintain the uncompressed files in case I ever want them)
in the terminal, navigate to the image folder
run makejpg
run remove_png (makejpg leaves the png files and ultimately I want only the jpg versions of all files)
run remove_jpg_dup (makejpg also sometimes duplicates the jpg files into jpg~ files)
run compress_all
navigate to the video folder in the terminal
run the two video commands described abovee
move all images and videos into the main directory folder for that week

Hannah Field