How to make a seamless pattern image?

edited January 2016 in How To...

In brief:

What is the math to create seamless patterned images?

Example from Gimp "Make Seamless" Filter:

I would like to draw live patterns from my webcam. The code works up to this point, but how would I make the tiles seamless?


  • Copy each quarter of the image to the opposite quarter with added transparency.

  • And how do I get the gradient transparency?

  • You need to use PImage's mask.

  • edited January 2016 Answer ✓

    You can use image like this as mask, but mind it needs to be the same size as your image!

  • Thank you! Got quite okay results with a square gradient:

  • edited January 2016

    Here is my code. For future use. If anybody has any recommendations for better results I am happy to hear!

    Bildschirmfoto 2016-01-12 um 19.18.02


  • Looks really nice!

    BTW, I don't know if that is only for me, but code looks wrapped in html tags, can you please paste it once again directly from the PDE?

    Or is this a forum bug?

  • All the loading and creation of the images should be done in setup ().

    If you want draw to run only once then look at noLoop()

  • edited January 2016

    Thanks. I put the setup of images into the draw because the images will change. I have a second processing sketch that overwrites the input images. Now I will need to write a function that checks if the input images have changed.

    Code in Markdown instead of HTML:

    String inputPath = "streifen.jpg";
    boolean drawPattern = true;
    boolean runonce = true;
    void setup() {
    size(800, 500, OPENGL);
    void draw() {
    if (runonce) {
    runonce = false;
    void makePattern() {
    File f = sketchFile(inputPath);
    if (f.exists()&& drawPattern) {
    PImage inputImage = loadImage(inputPath);
    PImage maskImage = loadImage("gradienteE.jpg");
    int div=width/inputImage.width;
    int divy=height/inputImage.height;
     for (float j = 0; j < div+2; j++) {
     for (float k = 0; k < divy+2; k++) {
     image(inputImage, inputImage.width*j-inputImage.width/2,    inputImage.height*k-inputImage.height/2);
    for (int j = 0; j < div+1; j++) {
    for (int k = 0; k < divy+1; k++) {
    image(inputImage, inputImage.width*j, inputImage.height*k);
Sign In or Register to comment.