Redraw rectangle image as circle

Garethgr

Hi all, I am very new to p5.js and would like to know if this would be possible. If so, could you dumb it down for me please ;)

http://blog.thepixelstick.com/wp-content/uploads/2015/08/dumboflower.jpg I would like to create something similar to the link above, by uploading a rectangle image and produce a circle version.

Thank you in advance and I appreciate your time.

Chrisir

it's easy

look at the examples

then make a draft sketch

start with loadimage etc.

TfGuy44

I'm close. I don't care to fix it beyond this point. Have at.

void setup(){
  size(800,600,P2D);
  noStroke();
}

void draw(){
  background(0);
  for(int i = 0; i < 20; i++){
    for(int j = 0; j < 80; j++){
      fill(random(255-i-j),255-random(j*5),random(25*i));
      rect(10*i,10*j,10,10);
    }
  }
  PImage tex = get(0,0,200,800);
  translate(500,300);
  fill(255);
  for(int r = 0; r < 36; r++){
    beginShape();
      texture(tex);
      vertex(0,0,
             0,map(r,0,36,0,800));
      vertex(200*cos(radians(-10)),200*sin(radians(-10)),
             200,map(r,0,36,0,800) );
      vertex(200,0,
             200, map(r+1,0,36,0,800));
      vertex(0,0,
             0,map(r+1,0,36,0,800));
    endShape();
    rotate(radians(10));
  }  

  noLoop();
}

TfGuy44

I lied. BAM!

void setup(){
  size(800,600,P2D);
  noStroke();
  colorMode(HSB,255);
}

void draw(){
  background(0);
  for(int j = 0; j < 60; j++){
    int limit = int(random(10,20));
    int llimit = int(random(5,10));
    for(int i = llimit; i < limit; i++){
      fill(map(j,0,60,0,255),255-random(j*5),random(25*i));
      rect(10*i,10*j,10,10);
    }
  }
  PImage tex = get(0,0,200,600);
  translate(500,300);
  fill(255);
  int sectors = 36*8;
  for(int r = 0; r < sectors; r++){
    beginShape();
      texture(tex);
      vertex(0,0,
             0,map(r,0,sectors,0,600));
      vertex(200*cos(r*TWO_PI/float(sectors)), 200*sin(r*TWO_PI/float(sectors)),
             200,map(r,0,sectors,0,600) );
      vertex(200*cos((r+1)*TWO_PI/float(sectors)), 200*sin((r+1)*TWO_PI/float(sectors)),
             200, map(r+1,0,sectors,0,600));
      vertex(0,0,
             0,map(r+1,0,sectors,0,600));
    endShape();
  }  

  noLoop();
}

void mousePressed(){
  redraw();
}

koogs

Does p5.js have the vertex variant with texture coords? I couldn't see it when I looked.

GoToLoop

p5.js project barely started implementing WebGL canvas! :-\"

Garethgr

Wow, thanks so much all for the feedback.

TfGuy44 how do I upload the image, or does that just draw what was in the link I sent ? I have just tried to use your script with p5.js and its complaining about quite a few syntax errors. Please forgive my noobness, this is all very new to me.