Generating arrays for lithography with variable dimensions

Question

First I must apologize because I am a chemist and not a programmer, so I am venturing far into unknown territory.

I am working on developing some patterns for micro-contract printing to create templates for controlled cellular growth. The master cast for the template is printed on A4 transparency and regardless of how much space I use, the cost is more or less the same. One of my patterns is about 2 x 2 mm, so you can imagine how many I can fit on the master template.

With that in mind what I would like to do is generate a repeating array of circles and tracks. This is easily accomplished in adobe illustrator, but it has become tedious. I would like to automate the ability to vary the dimensions of the circles, the width of the tracks connecting them, and the spaces between the circles.

For example, I might want a 20 x 20 grid of 30 um circles connected with a 10 um wide track with circles that are 150 um between the edges.

I was hoping to do this in Matlab, because I'm currently learning Matlab for some image processing capabilities.

An example of what the final product looks like can be seen: http://www.nature.com/srep/2014/140424/srep04784/full/srep04784.html http://pubs.rsc.org/en/Content/ArticleLanding/2011/LC/c1lc20257j#!divAbstract

I would appreciate some direction in:

1. Is doing this in Matlab even a good idea to begin with?
2. Setting up a code to generate a "grid" of circles
3. Connecting those circles with vertical, horizontal or diagonal tracks
4. I feel like this something someone has done before, so even pointing me to similar code that I could study would be a lot of help

Thanks!

Answer 1

I'm not very used to Matlab so I can't tell you for 0).

Below is a possible answer for 1) and 3). If you think my answer can help you, I can write some code about 2).

The library d3.js might be of interest for what you're doing. It basically allows you to bind data to svg elements.

Here is an example of what you could do. Let's say your data is a list of circle properties (size, position)

JSFiddle here

data = [ {x: 20µm, y:250µm, radius: 250µm}, {....}, ... ]

//Dimensions of what will be dsplayed in your browser
width = 500px
height = 700px

//d3.js provides functions to automatically resize your data to the viewport (maps domain -> range)
xScale = d3.scale.linear()
   .domain([0, a4_format_size_x])
   .range([0, width])
yScale = d3.scale.linear()
   .domain([0, a4_format_size_y])
   .range([0, height])
rScale = d3.scale.linear()
   .domain([0, max_circle_size])
   .range([0, 20])

svg = d3.select(element[0])
            .append("svg")
            .attr("width", width)
            .attr("height", height)

svg.selectAll("circle") 
  .data(data)   // This line binds your date to SVG elements
  .enter()      
  .append("circle")
      .attr("cx", function(data) { return xScale(data.x)})
      .attr("cy", function(data) { return yScale(data.y)})
      .attr("r", function(data) { return rScale(data.radius)}

Note : the syntax selectAll > enter > append might seem weird at first, if you're puzzled feel free to have a look at this

Now for the generation of the data itself (a "grid of circles"), you could have something like

var numCirclesX = 500
var numCirclesY = 700

var data = []

for(var i=0; i<numCirclesX; i++){
    for(var j=0; j<numCirclesY, j++){
        data.push({ x: i*size_A4_x/numCirclesX,
                  y: j*size_A4_y/numCirclesY,
                  radius: 5 })
    }
}