› › ›

Repititive pattern out of anchor points

kr1schiiikr1schiii
edited January 2017 in Questions about Code

Hey guys,

I try to realize some pattern out of the logo of my University. This is a small project for a programming class we have in our design degree. But since I'm a designer I encounter some problems to realize the idea. So I got the anchor points from our logo and made it to draw it out of an array with all the coordinates. That works quite well.

My next step now should be to draw the shape again but in smaller size inside the first one. That step I want to repeat several times. My professor suggested me something with the scale command and a variable to do this, but I can't figure out how to do it properly. Always I put the code in the resizing works, but I can't get it do display in the shape in smaller.

I would appreciate any help with code or idea what to do! :)

float[] rightshape = {111.8, 5.9, 111.8, 5.9, 62.8, 70.80000000000001, 62.8, 70.80000000000001, 62.8, 70.80000000000001, 62.8, 70.80000000000001, 62.599999999999994, 171.20000000000002, 62.599999999999994, 171.20000000000002, 62.599999999999994, 171.20000000000002, 62.599999999999994, 177.50000000000003, 67.6, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 80.1, 182.50000000000003, 85.19999999999999, 177.50000000000003, 85.19999999999999, 171.20000000000002, 85.19999999999999, 171.20000000000002, 85.19999999999999, 171.20000000000002, 85.39999999999999, 78.40000000000002, 85.39999999999999, 78.40000000000002, 85.39999999999999, 78.40000000000002, 85.39999999999999, 78.40000000000002, 111.79999999999998, 43.40000000000002, 111.79999999999998, 43.40000000000002, 111.79999999999998, 43.40000000000002, 111.79999999999998, 43.40000000000002, 111.79999999999998, 5.9, 111.79999999999998, 5.9, 111.79999999999998, 5.9, 111.79999999999998, 5.9, 111.8, 5.9, 111.8, 5.9};
float[] leftshape = {34.685, 136.132, 34.685, 136.132, 34.685, 59.888, 34.685, 59.888, 34.685, 59.888, 34.685, 59.888, 8.371, 27.128, 8.371, 27.128, 8.371, 27.128, 4.465, 22.253, 5.239000000000001, 15.152, 10.114, 11.239, 10.114, 11.239, 14.978, 7.329, 22.087, 8.111, 26, 12.97, 26, 12.97, 26, 12.97, 57.292, 51.942, 57.292, 51.942, 57.292, 51.942, 57.292, 51.942, 57.292, 136.132, 57.292, 136.132, 57.292, 136.132, 57.292, 142.36700000000002, 52.222, 147.434, 45.986000000000004, 147.434, 45.986000000000004, 147.434, 39.743, 147.433, 34.685, 142.367, 34.685, 136.132};

void setup() {
  size(800, 600);
  background(255);

  println(rightshape);
  //println(leftshape);
}

int size = 10;
float s = 1;

void draw() {

  scale(s);
  //s = s-0.3;
  strokeWeight(2);

  //translate(-50, -60);
  translate(width/2, height/2);
  //Draw the left part of the logo
  //
  for (int countleft = 0; countleft < 63; countleft = countleft+8) {

    stroke(53, 37, 92);
    bezier(leftshape[countleft], leftshape[countleft+1], leftshape[countleft+2], leftshape[countleft+3], leftshape[countleft+4], leftshape[countleft+5], leftshape[countleft+6], leftshape[countleft+7]);

  }

  //Draw the right part of the logo
  for (int countright = 0; countright < 71; countright = countright+8) {

    stroke(29, 112, 183);
    bezier(rightshape[countright], rightshape[countright+1], rightshape[countright+2], rightshape[countright+3], rightshape[countright+4], rightshape[countright+5], rightshape[countright+6], rightshape[countright+7]);
  }
}

Here is a small scribble how it should go together, in case you don't get from my description what I mean. http://www.dropbox.com/s/k78wv5s3lkqddkg/Foto 22.01.17, 14 04 17.jpg

Tagged:

Best Answers

Answers

  • koogskoogs

    remove the comment from line 18 and you'll see that there is repetition happening...

    however, you'll notice that it's getting closer to the top left of the screen every time. this is because the position is also being scaled. (think about it, half of 111.8 is 55.9...). the way around this is to define the shape centred on the origin and translate the origin to the position you want. or you can leave it as is, and translate to the origin before scaling, translate back when done.

    without line 18 it's just redrawing the same shape over and over again. and repeats forever, 60 times a second, because you haven't told it to ever stop.

  • koogskoogs 
    bezier(leftshape[countleft], leftshape[countleft+1], leftshape[countleft+2], leftshape[countleft+3], leftshape[countleft+4], leftshape[countleft+5], leftshape[countleft+6], leftshape[countleft+7]);

    this is terrible btw

  • jeremydouglassjeremydouglass
    Answer ✓

    @kr1schii -- you should read this related recent discussion thread:

    It has many similar issues, including the need to find the center point of the shape before scaling.

  • kr1schiiikr1schiii

    thank you guys, helped me a lot to get something to work :)

    float[] rightshape = {111.8, 5.9, 111.8, 5.9, 62.8, 70.80000000000001, 62.8, 70.80000000000001, 62.8, 70.80000000000001, 62.8, 70.80000000000001, 62.599999999999994, 171.20000000000002, 62.599999999999994, 171.20000000000002, 62.599999999999994, 171.20000000000002, 62.599999999999994, 177.50000000000003, 67.6, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 73.89999999999999, 182.50000000000003, 80.1, 182.50000000000003, 85.19999999999999, 177.50000000000003, 85.19999999999999, 171.20000000000002, 85.19999999999999, 171.20000000000002, 85.19999999999999, 171.20000000000002, 85.39999999999999, 78.40000000000002, 85.39999999999999, 78.40000000000002, 85.39999999999999, 78.40000000000002, 85.39999999999999, 78.40000000000002, 111.79999999999998, 43.40000000000002, 111.79999999999998, 43.40000000000002, 111.79999999999998, 43.40000000000002, 111.79999999999998, 43.40000000000002, 111.79999999999998, 5.9, 111.79999999999998, 5.9, 111.79999999999998, 5.9, 111.79999999999998, 5.9, 111.8, 5.9, 111.8, 5.9};
float[] leftshape = {34.685, 136.132, 34.685, 136.132, 34.685, 59.888, 34.685, 59.888, 34.685, 59.888, 34.685, 59.888, 8.371, 27.128, 8.371, 27.128, 8.371, 27.128, 4.465, 22.253, 5.239000000000001, 15.152, 10.114, 11.239, 10.114, 11.239, 14.978, 7.329, 22.087, 8.111, 26, 12.97, 26, 12.97, 26, 12.97, 57.292, 51.942, 57.292, 51.942, 57.292, 51.942, 57.292, 51.942, 57.292, 136.132, 57.292, 136.132, 57.292, 136.132, 57.292, 142.36700000000002, 52.222, 147.434, 45.986000000000004, 147.434, 45.986000000000004, 147.434, 39.743, 147.433, 34.685, 142.367, 34.685, 136.132};


void setup() {
  size (1200, 800);
}
void draw () {
  background(255);
  translate(width/2,height/2); // draw with 0,0 at the center of the screen
  for (float scale = 1.4; scale > 0.4; scale -= 0.075) {
    scale(scale);
    drawCurve();
  }
}
void drawCurve() {
  stroke(255, 131, 59);
  strokeWeight (1.2);
  noFill();
  for (int countright = 0; countright < 71; countright = countright+8) {
    for (int countleft = 0; countleft < 63; countleft = countleft+8) {
      stroke(53, 37, 92);
      pushMatrix();
      translate(-58.1325, -94.2);
      bezier(leftshape[countleft], leftshape[countleft+1], leftshape[countleft+2], leftshape[countleft+3], leftshape[countleft+4], leftshape[countleft+5], leftshape[countleft+6], leftshape[countleft+7]);
      stroke(29, 112, 183); 
      bezier(rightshape[countright], rightshape[countright+1], rightshape[countright+2], rightshape[countright+3], rightshape[countright+4], rightshape[countright+5], rightshape[countright+6], rightshape[countright+7]);
      popMatrix();

  }

}
}
  • kr1schiiikr1schiii

    @koogs I'm not a programmer, so I have no idea what exactly to change, I guess the way I get to the coordinates is not the best or most efficient structure? :P

    bezier(leftshape[countleft], leftshape[countleft+1], leftshape[countleft+2], leftshape[countleft+3], leftshape[countleft+4], leftshape[countleft+5], leftshape[countleft+6], leftshape[countleft+7]);

  • GoToLoopGoToLoop
    edited January 2017

    I guess the way I get to the coordinates is not the best or most efficient structure?

    Indeed it's ugly! :-& But it's the best efficient cache-friendly way to access an array! \m/

  • kr1schiiikr1schiii

    Haha okay, guess I can live with the ugly code haha :D But how would you make it in a nicer way?

  • koogskoogs
    Answer ✓

    it's more that you just got a lump of 72 numbers and are referring to them by their positions in clumps of 8. there's real no clue as to what you're doing that way.

    even just defining the numbers in a more structured way as

    float[] rightshape = {
  111.8, 5.9, 111.8, 5.9, 62.8, 70.8, 62.8, 70.8,
  62.8, 70.8, 62.8, 70.8, 62.6, 171.2, 62.6, 171.2,
  62.6, 171.2, 62.6, 177.5, 67.6, 182.5, 73.9, 182.5,
  73.9, 182.5, 73.9, 182.5, 73.9, 182.5, 73.9, 182.5,
  73.9, 182.5, 80.1, 182.5, 85.2, 177.5, 85.2, 171.2,
  85.2, 171.2, 85.2, 171.2, 85.4, 78.4, 85.4, 78.4,
  85.4, 78.4, 85.4, 78.4, 111.8, 43.4, 111.8, 43.4,
  111.8, 43.4, 111.8, 43.4, 111.8, 5.9, 111.8, 5.9,
  111.8, 5.9, 111.8, 5.9, 111.8, 5.9, 111.8, 5.9
};

    would help (and there's no need to define those values to 8 decimal places!)

    but they are actually pairs of coords, with duplicates, so you could use a PVector[] which would be clearer.

    and don't forget to call noLoop() when you've done. no need to keep redrawing the same shape 60 times a second.

  • GoToLoopGoToLoop
    edited January 2017 Answer ✓ 
    /**
 * Repetitive Bezier Curve Patterns (v1.01)
 * by  Kr1schiii (2017-Jan-22)
 * mod GoToLoop  (2017-Jan-23)
 *
 * forum.Processing.org/two/discussion/20413/
 * repititive-pattern-out-of-anchor-points#Item_9
 *
 * OpenProcessing.org/sketch/400921
 */

void setup() {
  size(500, 600, 1/2 == 1/2.? JAVA2D : FX2D);
  smooth(8);
  noLoop();

  strokeWeight(1.2);
  noFill();
}

void draw() {
  background(0350);
  translate(width>>1, height>>1);

  for (float sc = 1.4; sc > .4; sc -= .075) {
    scale(sc);
    drawCurves();
  }
}

void drawCurves() {
  pushMatrix();
  translate(-58.1325, -94.2);

  stroke(53, 37, 92);
  for (int l = 0, len = LS.length; l < len; l += 8)
    bezier(LS[l], LS[l+1], LS[l+2], LS[l+3], LS[l+4], LS[l+5], LS[l+6], LS[l+7]);

  stroke(29, 112, 183); 
  for (int r = 0, len = RS.length; r < len; r += 8)
    bezier(RS[r], RS[r+1], RS[r+2], RS[r+3], RS[r+4], RS[r+5], RS[r+6], RS[r+7]);

  popMatrix();
}

static final float[] LS = {
  34.685, 136.132, 34.685, 136.132, 34.685, 59.888, 34.685, 59.888, 
  34.685, 59.888, 34.685, 59.888, 8.371, 27.128, 8.371, 27.128, 
  8.371, 27.128, 4.465, 22.253, 5.239, 15.152, 10.114, 11.239, 
  10.114, 11.239, 14.978, 7.329, 22.087, 8.111, 26, 12.97, 
  26, 12.97, 26, 12.97, 57.292, 51.942, 57.292, 51.942, 
  57.292, 51.942, 57.292, 51.942, 57.292, 136.132, 57.292, 136.132, 
  57.292, 136.132, 57.292, 142.367, 52.222, 147.434, 45.986, 147.434, 
  45.986, 147.434, 39.743, 147.433, 34.685, 142.367, 34.685, 136.132
};

static final float[] RS = {
  111.8, 5.9, 111.8, 5.9, 62.8, 70.8, 62.8, 70.8, 
  62.8, 70.8, 62.8, 70.8, 62.6, 171.2, 62.6, 171.2, 
  62.6, 171.2, 62.6, 177.5, 67.6, 182.5, 73.9, 182.5, 
  73.9, 182.5, 73.9, 182.5, 73.9, 182.5, 73.9, 182.5, 
  73.9, 182.5, 80.1, 182.5, 85.2, 177.5, 85.2, 171.2, 
  85.2, 171.2, 85.2, 171.2, 85.4, 78.4, 85.4, 78.4, 
  85.4, 78.4, 85.4, 78.4, 111.8, 43.4, 111.8, 43.4, 
  111.8, 43.4, 111.8, 43.4, 111.8, 5.9, 111.8, 5.9, 
  111.8, 5.9, 111.8, 5.9, 111.8, 5.9, 111.8, 5.9
};
  • Lord_of_the_GalaxyLord_of_the_Galaxy

    I see that the numbers are strangely repetitive. Maybe there is a pattern.

  • Lord_of_the_GalaxyLord_of_the_Galaxy

    Right Shape clearly does show very high repetitiveness.

  • koogskoogs

    it's a bezier loop. for it to be continuous the starts of the one must be the ends of the previous. it also contains straight lines, which he's chosen to do by making the control points equal to the starts and / or ends.

  • GoToLoopGoToLoop
    edited January 2017

    Just posted it online using Pjs Mode @ https://OpenProcessing.org/sketch/400921. :bz

  • GoToLoopGoToLoop
    edited January 2017 Answer ✓

    And here's the corresponding p5.js version using JS' Float32Array in place of Java's float[]: O:-)

    https://OpenProcessing.org/sketch/400949

    https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array

    /**
 * Repetitive Bezier Curve Patterns (v1.01)
 * by  Kr1schiii (2017-Jan-22)
 * mod GoToLoop  (2017-Jan-23)
 *
 * forum.Processing.org/two/discussion/20413/
 * repititive-pattern-out-of-anchor-points#Item_14
 *
 * OpenProcessing.org/sketch/400949
 */

"use strict";

function setup() {
  createCanvas(500, 600);
  smooth().noLoop();
  strokeWeight(1.2).noFill();
}

function draw() {
  background(0o350).translate(width>>1, height>>1);
  for (let sc = 1.4; sc > .4; sc -= .075)  scale(sc), drawCurves();
}

function drawCurves() {
  push(), translate(-58.1325, -94.2);

  stroke(53, 37, 92);
  for (let l = 0, len = LS.length; l < len; l += 8)
    bezier(LS[l], LS[l+1], LS[l+2], LS[l+3], LS[l+4], LS[l+5], LS[l+6], LS[l+7]);

  stroke(29, 112, 183); 
  for (let r = 0, len = RS.length; r < len; r += 8)
    bezier(RS[r], RS[r+1], RS[r+2], RS[r+3], RS[r+4], RS[r+5], RS[r+6], RS[r+7]);

  pop();
}

const LS = Float32Array.of(
  34.685, 136.132, 34.685, 136.132, 34.685, 59.888, 34.685, 59.888, 
  34.685, 59.888, 34.685, 59.888, 8.371, 27.128, 8.371, 27.128, 
  8.371, 27.128, 4.465, 22.253, 5.239, 15.152, 10.114, 11.239, 
  10.114, 11.239, 14.978, 7.329, 22.087, 8.111, 26, 12.97, 
  26, 12.97, 26, 12.97, 57.292, 51.942, 57.292, 51.942, 
  57.292, 51.942, 57.292, 51.942, 57.292, 136.132, 57.292, 136.132, 
  57.292, 136.132, 57.292, 142.367, 52.222, 147.434, 45.986, 147.434, 
  45.986, 147.434, 39.743, 147.433, 34.685, 142.367, 34.685, 136.132
);

const RS = Float32Array.of(
  111.8, 5.9, 111.8, 5.9, 62.8, 70.8, 62.8, 70.8, 
  62.8, 70.8, 62.8, 70.8, 62.6, 171.2, 62.6, 171.2, 
  62.6, 171.2, 62.6, 177.5, 67.6, 182.5, 73.9, 182.5, 
  73.9, 182.5, 73.9, 182.5, 73.9, 182.5, 73.9, 182.5, 
  73.9, 182.5, 80.1, 182.5, 85.2, 177.5, 85.2, 171.2, 
  85.2, 171.2, 85.2, 171.2, 85.4, 78.4, 85.4, 78.4, 
  85.4, 78.4, 85.4, 78.4, 111.8, 43.4, 111.8, 43.4, 
  111.8, 43.4, 111.8, 43.4, 111.8, 5.9, 111.8, 5.9, 
  111.8, 5.9, 111.8, 5.9, 111.8, 5.9, 111.8, 5.9
);
  • Lord_of_the_GalaxyLord_of_the_Galaxy

    The method is very cache and cpu efficient, but not the easiest to understand. However, it still works, and that's enough I guess.

  • kr1schiiikr1schiii

    That looks indeed cleaner now and I think I could follow the advancements you made :)

    Thank you all very much for the help! Much appreciated.

Sign In or Register to comment.