Wallpaper Generator

I’ve been using two monitors for about two years now, and there are a lot of great wallpapers that are made for a dual monitor setup. Recently, I saw a low-poly wallpaper that I liked, and wanted something similar. The problem: How to find a colorful low-poly image with the correct resolution. So I’ve made a small tool that can generate low-poly wallpapers in custom resolutions, and it runs in the browser. It used the JS library, Trianglify, which can generate SVG backgrounds.

In the tool you can customize the result by setting a variance and size of the triangles in the generated SVG image. You can split the wallpaper into several chunks, change the color scheme, and download the wallpaper as a PNG image.

Generator

Another project I might do in the future, is to extend this generator by creating a custom version of Trianglify.

The tool can be found at here.

Git Rebase VS. Merge

I’ve used git for version control for a good while now, but I’ve never really tried to understand the difference between merging and rebasing. I guess I’m a bit lazy that way, having a “If it works, it works” mentality. I’ve now spent some time figuring out the difference, and try making a short and understandable post about it.


The Difference

Both commands, git rebase and git merge, solves the same problem. Taking changes from one branch and integrating them into another. The difference happens in how changes are spliced together.

A typical use case is having a master and a feature branch. You want the changes from the master into the feature branch. Doing the git merge master command from the feature branch will create a new merge commit in your feature branch. A merge is basically a new commit, with two parents.

Git merge

Whereas, rebasing will put the feature branches’ changes onto the master branch. The git rebase master will effectively move the commits to the tip of the master branch. Another way of looking at it is that you are relocating the place where you branched out from master to a more recent place in master’s history. In addition, a rebase will for every commit in feature create a new identical commit on top of master.

Git rebase


Advantages and Disadvantages of Rebasing

  • Cleaner history that is easier to read.
  • Slightly harder than merging.
  • Rewrites the commit history. which might be problematic.
  • You can’t see when changes from master were incorporated into feature.
  • Gives you the ability to use interactive rebasing. You can remove intermediate backup commits and replace it with a single commit. You can also reword your commit messages.
  • Maybe the best way to incorporate changes another developer made on master onto your feature branch.


Advantages and Disadvantages of Merging

  • Merging is a non-destructive operation
  • Each merge creates a commit, which might clutter the branches’ history.
  • Traceability. You have a merge commit, which indicates that a convergence between two branches has taken place.

Finally, I would like to point out that the explanation above might be incorrect. It’s based on my current understanding of git. And I’m by no means a git wizard. Please read the references below to get a more thorough explanation.

Further Reading

Atlassian git tutorial
Stackoverflow answer
Blog post explaining the difference well

UV Mapping in Blender for Unity

Just learned how to do UV mapping in Blender, and thought I should write it down before I forget. Currently, I’m doing the Learn 3D Modelling course at Udemy. I’m now past the basic modelling stuff, and wanted some practice. I decided to do a chessboard, and yup, you guessed it, not that challenging since it’s basically a square shape. It does not look anything like a chessboard, without the checker pattern.

No texture

So I decided to try out UV map painting, to see if I could turn this nondescriptive shape into a bona fide chessboard.


UV Mapping in Blender Recipe

1. Adding Seams

  • The 3D model is complete and texturing is the next step. Your first step is to create seams to help Blender unwrap your model’s surface onto a flat plane. The plane area is where you’ll do the painting later on.
  • Enter edit mode <TAB>
  • Open the tools section in the left sidebar <T> of the 3D View
  • Pick edge select mode to select seams on your model.

Edge select

  • Select edges that you want to convert to a seam. A loop selection of edges will create a disconnected island, which is good, when organizing the UV map later on. Create several of these. For instance, the chessboard was split by 4 seams. Top, bottom and two of the sides.

Selection edges for seam

  • To create the seam, scroll down in the Shading/UVs section of the tools side panel, and make a seam when you are satisfied with an edge selection. You will find a button called Mark Seam.

UVs panel

  • After you’ve created some seams, select the entire model in edit mode by pressing <A>. Then, click Unwrap.Again, click Unwrap in the drop down which will appear immediately after.

Seams


2. Clean the UV Map

  • Open a UV/Image Editor View. You will probably see something similar to this:

UV map

  • To see if all the face sections are disconnected, use the island UV selection tool. Right click on each face and see if only that face section is highlighted.

Island UV selection tool

  • As you can see, two of the faces are still connected. To separate them select all the polygons of one section using the UV face selection tool and press the <Y> key. Use the grab tool <G> to see if the area is separated. More details here.

  • Then, reorganize the UV map by rotating, scaling and moving UV islands. The shortcuts are <R>, <S>, and <G> key, respectably.

Island UV selection tool


3. Create the Texture and UV Layout Image

  • Go to the Texture tab. Create a new texture.
  • Change Type from none to Image or Video
  • In the Image section, click new. Create a new image with width and height of 2048 and select a white color. Give it a sensible name. For instance, chessboardtex.
  • Then, in the Mapping section, change Coordinat to UV , and find the UV map in the Map drop down.
  • Go to the UV/Image Editor, select chessboardtex in the menu that appears after clicking the image icon in the toolbar. The white texture image will appear in the background of the UV map.

Select texture

  • The Image menu item now has an asterisk. This is because you have not saved the image yet. Use the Save As Image option.
  • If you want to do the UV paining in an external program, such as Photoshop or Gimp, you’ll probably want the UV layout as a reference when painting. Press UVs and in the menu, select Export UV layout.


4. UV Paining

  • Open an image editor (Photshop, Gimp or similar). Add the saved texture image and the UV layout image on top, in a new layer.

Before paining

  • Go wild painting. Below is my finished chessboard texture.

Before paining

  • In Blender’s UV/Image Editor, go Image and press Reload image, to see the updated texture on your 3D model.

5. Add Model to Unity

  • When you’re satisfied with the result you can save the model as a .blend file somewhere in the assets directory of your Unity project.

  • But where did the texture of the model go in Unity? Remember to copy the texture image into the Assets folder. You need to tell Unity to use the image for the model. I’m not sure if there is a better way of combining the texture and model into a single file, but the following seems to work fine.
  • Adjust the material settings on your model. For instance, pick the Mobile/Bumped Diffuse shader, and select the imported texture image under Base (RGB).

Before paining


You now have a textured model in Unity.

Further Reading

Separate vertices

Exporting & Editing UV Maps

Software Development Timesaver #3

Expanded build folder

If you’re on Windows computer and using Atom, you might have encountered this error in your terminal, when running gulp watch:

Error: EPERM: operation not permitted, unlink 'C:\user\equalpasta\somepath\project\build'

A Google search reveals that variations of this error are a common problem.

Why does this happen? How to fix it? One reason can be the Atom editor. Turns out having the build folder expanded in Atom can cause this. It seems like Atom locks the folder if expanded in the project view, when running gulp watch.

Minimize the build folder in Atom, and re-run ‘gulp watch’.

This solved the issue for me.