Batch Processing Files in Directory with ffmpeg

Easy peasy…

Let’s say I have a bunch of .tiff files and I want to covert them to pngs:

The first thing to note is that we can make use of a loop structure in bash “for in”. It will designate a variable called “$file” for every “.tiff” file extension it finds. So if you run it in a directory with a bunch of .tiff files, it should loop every single one and run the ffmpeg command per file:

[pastacode lang=”bash” manual=”for%20file%20in%20*.tiff%3B%20do%20ffmpeg%20-i%20%22%24file%22%20%22%24%7Bfile%25.tiff%7D%22.png%3B%20done” message=”” highlight=”” provider=”manual”/]

NOTE: This site is all about helpful hints tricks and tips. The posts lately have been short on purpose. For one, I’m busy AF and don’t have the time to post anything of great detail. Additionally, I believe in simplicity. You can visit, find something helpful and move on with your life.

As always I appreciate your feedback, please leave a comment if you feel I’m leading people down a less than idea path or just comment because you like talking IDC.

ThreeJS Setting the Right Aspect Ratio for the Camera

One quick note for myself and anyone who will ever use this…

If you are working with an abnormal size canvas, you need to do some math to set the size of the renderer to be correct with the aspect ratio:

[pastacode lang=”javascript” manual=”let%20rect%20%3D%20this.renderer.domElement.getBoundingClientRect()%3B%0A%09%09camera.aspect%20%3D%20rect.width%20%2F%20rect.height%3B%0A%09%09camera.updateProjectionMatrix()%3B%0A%09%09renderer.setSize(%20rect.width%2C%20rect.height%20)%3B” message=”” highlight=”” provider=”manual”/]

Basically, you are working out the bounding box in which the scene will exist. To do that, we need to give the camera an aspect ratio and a size for the renderer. Setting the size on the renderer is easy; just send the width and height. The aspect ratio is also pretty easy; just divide the width by the height and you are good to go.

Both the width and height can be found by using “getBoundingClientRect()”.

As always I appreciate your feedback, please leave a comment if you feel I’m leading people down a less than idea path or just comment because you like talking IDC.

Finder Won’t Show Image Dimensions

Let’s say normally you get your image dimensions by looking at the image in Finder. It should contain information about the file size as well as dimensions. However, lately Finder has been annoyingly omitting the file dimensions. This is a bug and not intentional. Here’s what my screen looks like:

You have to tell finder to re-index a bunch of shit. Just run the following (keep in mind this will take quite a while but it runs in the background so whatevs.

[pastacode lang=”bash” manual=”sudo%20mdutil%20-E%20-i%20on%20%2F” message=”” highlight=”” provider=”manual”/]

Once it re-indexes everything it should find all your images and begin adding dimensions to the info section. Be aware this could take quite a while (a couple hours) depending on your system.

As always I appreciate your feedback, please leave a comment if you feel I’m leading people down a less than idea path or just comment because you like talking IDC.

iDevice Continuously Reconnects USB

Sound familiar? You plug in your iphone/ipad and it just continuously reconnects…

some people say its the cord others say its privacy settings

I say its the disk utility…

To fix this just disconnect and open Disk Utility > First Aid and run it, then reconnect the device.

voila

As always I appreciate your feedback, please leave a comment if you feel I’m leading people down a less than idea path or just comment because you like talking IDC.

Photoshop paste into a layer mask

You want to create a layer mask and paste an image into it

copy the image you want in the mask
create a new layer and put black over the whole thing
add a layer mask and option click it to get into the mask edit mode
cmd + optn + shft + v to paste the image into the mask
cmd + i to invert it
profit

Look here

Find the (x,y) coordinates of an index value in an array

Web graphics often require us to work with images (bitmaps) in the form of a giant array of rgb values. However translating between the index of the array and the x,y coordinates of the bitmap can be confusing. I’ve written a couple formulas below to help you translate from index to x,y and vice versa.

Let’s say you have an array of blocks that you want to draw to a canvas. Let’s also say you want to compute the (x,y) coordinates of a specific item in the array. There’s a formula for that:

[pastacode lang=”javascript” manual=”var%20blockSize%20%3D%202%3B%0Avar%20totalBlocks%20%3D%20(canvas.width%20%2F%20blockSize)%20*%20(canvas.height%20%2F%20blockSize)%3B%0Avar%20cursor%20%3D%20index%20%25%20totalBlocks%3B%0Avar%20columns%20%3D%20canvas.width%20%2F%20blockSize%3B%0Avar%20x%20%3D%20(cursor%20%25%20columns)%20*%20blockSize%3B%0Avar%20y%20%3D%20(cursor%20%2F%20columns)%20*%20blockSize%3B” message=”” highlight=”” provider=”manual”/]

All this does is count up to the index taking into account the fact you need to wrap blocks of a certain size.

If you don’t need a specific block size and are just using single pixels as a block size, then the formula is simple:

[pastacode lang=”javascript” manual=”var%20x%20%3D%20index%20%25%20columns%3B%0Avar%20y%20%3D%20index%20%2F%20columns%3B” message=”” highlight=”” provider=”manual”/]

That’s it~

How to show transparency on Blender texture

Sometimes I will use transparency on a blender texture only to find the preview in blender doesn’t show it. Below I’ve written a bit about how to get your transparency to show up. You will need to map UV’s to do this.

If you want show transparency on a blender texture and it’s not showing up when you set the view mode to “texture” then you need to do this:

Once your UVs are mapped, do the following to preview transparency in blender.

Then set the texture alpha channel to 1.0:

Then set your z-transparency to 0.0:

Fin.

Learn how to map a sphere with a texture in Blender

In the following video I show how to map a texture to a sphere in blender. The concept would be the same with more advanced and complex objects, however, in those cases your textures would need to be modified to match the geometry. This is a simple example to show the basic mechanical process for blender texture mapping.

One thing to note is that often people will refer to this process as UV mapping. Texture mapping and UV mapping are the same thing. The correct way to talk about this is UV texture mapping.

Follow along and feel free to leave comments.

Most of this stuff is following the directions here:

https://blender.stackexchange.com/questions/13898/morph-targets-a-sphere-shape-turning-into-a-cylindrical-unwrapped-sphere-shape

How to assign two materials to an object in Blender

In the video below I show how to assign more than one texture to an object in blender. This process is useful if you going to use transparency on your objects and need to have multiple layers to create an effect. It can also be useful later if you’re doing work with blending texture programatically or if your using a single texture for visual elements and encoding information into a texture for use in something like webGL and GLSL.

This brings us to another toping which could be a good excuse for a video in the future. If you’re looking to user a bunch of contextual data in GLSL, there currently isn’t a good way to include dynamic data. It’s not like you could just make a huge array of data and pass it in a variable. So often times, people will encode their data into the rgba values of a bitmap image. This process involves bitshifting and some more low level details that are beyond the scope of this post.

Check out the video below if you’re looking to add multiple textures to an object in blender.

Export GLTF Format From Blender to ThreeJS

In the following video I show how to export textures/meshes from blender into the new(ish) gltf format. This is a binary format that contains the mesh and images in a very small file size which works well for exporting to webGL contexts. It’s sort of the new collada exporter and very easy to use with libraries such as threejs. As of now the exporter doesn’t support the more advanced features but will export meshes, textures, cameras and animations.

Follow along below to export your scene in gltf.

Lessons from a...

Creative Developer

Batch Processing Files in Directory with ffmpeg

ThreeJS Setting the Right Aspect Ratio for the Camera

Finder Won’t Show Image Dimensions

iDevice Continuously Reconnects USB

Photoshop paste into a layer mask

Find the (x,y) coordinates of an index value in an array

How to show transparency on Blender texture

Learn how to map a sphere with a texture in Blender

How to assign two materials to an object in Blender

Export GLTF Format From Blender to ThreeJS