VM20:145 Uncaught TypeError: circle.bind is not a function at eval (eval at attach (processing.js:872), :145:17) at Processing.Sketch.attach (processing.js:873) at executeSketch (processing.js:21501) at new Processing.Processing (processing.js:21535) at callback (processing.js:950) at XMLHttpRequest.xhr.onreadystatechange (processing.js:929)

VM20:29 Uncaught ReferenceError: createShape is not defined at Processing.Processing.setup (eval at attach (processing.js:872), :29:9) at executeSketch (processing.js:21508) at new Processing.Processing (processing.js:21535) at callback (processing.js:950) at XMLHttpRequest.xhr.onreadystatechange (processing.js:929)

I had to download the JavaScriptMode from an online source so I am not sure if it will work, but it seems to handle simple sketches just fine. Is it having problems with 2D arrays? or something else I am unaware of.

The code for one of the sketches not working is below:

` PImage logo;

// Three possible shapes
PShape[] shapes = new PShape[4]; //Pshape array
int shapesize = 100; //shape sizes
int cols = 5;
int rows = 5;
int[][] shapeNumbers;

color[][] colors; //2D color array
color[] colorsb = 
{ 
#F71F02, //red
#13C081, //green
#5BC0EB, //blue
#FDE74C, //yellow
#133C55,
//#FF00FF, //pink
//#FF8000, //orange
};




void setup() {
  size(1920, 1080, P2D);
  ellipseMode(CENTER);
 rectMode(CENTER);
 logo = loadImage("thesis_logo.png");
  shapes[0] = createShape(ELLIPSE,shapesize,shapesize,shapesize,shapesize);
  //shapes[0].setFill(color(255,0,0));
  //shapes[0].setStroke(255);
  shapes[1] = createShape(RECT,shapesize,shapesize,shapesize,shapesize);
  //shapes[1].setFill(color(0));
  //shapes[1].setStroke(255);
  shapeMode(CENTER);
  shapes[2] = createShape();  
  shapes[2].beginShape();
 //shapes[2].fill(0); //fill squares
 // shapes[2].setStroke(255);
   shapes[2].vertex(-14+shapesize, -20+shapesize);
   shapes[2].vertex(-47+shapesize, -15+shapesize);
   shapes[2].vertex(-23+shapesize, 7+shapesize);
   shapes[2].vertex(-29+shapesize, 40+shapesize);
   shapes[2].vertex(0+shapesize, 25+shapesize);
    shapes[2].vertex(29+shapesize, 40+shapesize);
    shapes[2].vertex(23+shapesize, 7+shapesize);
    shapes[2].vertex(47+shapesize, -15+shapesize);
     shapes[2].vertex(14+shapesize, -20+shapesize);
  shapes[2].vertex(0+shapesize, -50+shapesize);
  shapes[2].endShape(CLOSE);

   shapes[3] = createShape(TRIANGLE,30, 75, 58, 20, 86, 75);  


shapeNumbers = new int[rows][cols];
 colors();
mix();
}




void draw() {
  background(255);
 shapes(150,150);
  image(logo, 50, 50, width/8, height/8);



 if (keyPressed) {
      if(key==ENTER){
       mix();
       colors();
      }
    }
}

void shapes(int posx, int posy){
 pushMatrix();
  translate(width/3,200);
 for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {

      int shapeIndex = shapeNumbers[i][j];
PShape currentShape = shapes[shapeIndex];
     currentShape.setFill(colors[i][j]);
     currentShape.setStroke(false);
    shape(currentShape,i*posx,j*posy,shapesize,shapesize);

    if (mousePressed ==true){
      int x = i*posx+width/3;
      int y = j*posy+200;
     if (mouseX > x && mouseX < (x + shapesize) && mouseY > y && mouseY < (y + shapesize)){
      colors[i][j]=color(255);
    }
    }
    }
  }
    popMatrix();
}

void mix(){
 for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {

    shapeNumbers[i][j] = int(random(shapes.length));

    }}
}

void colors(){
  colors = new color[cols][rows];
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {
      int rand = (int)random(colorsb.length); //choose a random value in array
      colors[i][j] = color(colorsb[rand]); //random color from array
    }
  }
}`

I am trying to draw an SVG at 0,0. The dimension of the SVG is 568x568px. But somehow Processing does not draw the SVG at (0,0). Does PShape have a different coordinate system?

PShape floorPlan;
int ellipseSize = 10;

void setup() {
  size(1024, 768);
  svg = loadShape("svg.svgz");
  background(255);
  smooth();
}

void draw() {
  ellipse(ellipseSize/2, ellipseSize/2, ellipseSize, ellipseSize);
  shape(svg, 0, 0);
}

I would like to have the SVG at the center. How do i achieve this please?

Thanks S

PFont font; 
import processing.video.*;
Movie myVid;
String letter = "X";
float x;
float y;
float interval  = 1200;
float currentTime;
int offset = 100;

void setup() {
  size(540, 540);
  background(254);
  myVid = new Movie(this, "seaClip_001.mp4");
  myVid.loop();
  //frameRate(0.5);
}

void draw() {
  image(myVid, 0, 0-offset, 540, 540);
  drawFrame();
  drawX();
}

void drawFrame() {
  shapeMode(CENTER);
  fill(1);
  rect(width/2, 0, 10, height);
  shapeMode(LEFT);
  rect(0, 390, width, 10);
  //fill(color'ffa7e8');
  fill(255, 167, 232);
  rect(0, 400, width, 140);
}

void drawX() {
  fill(0);
  font = createFont("Arial", 1);
  textFont(font);
   x = random(width);
   y = random(height);
  if (currentTime > 1000)
    textSize(random(120, 500));
  text(letter, x, y);
  currentTime = millis() % interval; //
}

void movieEvent(Movie m) {
  m.read();
}

PShape square;

void setup()
{
  size(640,480, P3D);
  smooth();
  shapeMode(CENTER);

  square = createShape();

  square.beginShape(QUADS);

  square.stroke(0);

  square.vertex(0, 0, 0);
  square.vertex(0, 40, 0);
  square.vertex(40, 40, 0);
  square.vertex(40, 0, 0);

  square.endShape(CLOSE);
}

void draw()
{
  background(255);

  translate(width / 2, height / 2);

  square.rotate(radians(3));

  fill(0, 255, 255);
  rect(0, 0, 640, 480);
  shape(square, 0, 0);
}

When I run this code, the square's initial position is correct, but the rotation is not; it appears as though the upper left vertex oscillates while the shape rotates. Ultimately, I want to be able to spin the object around its center regardless of where it is positioned in the sketch. Any help towards accomplishing this would be appreciated.

The top loops are drawing the whole shape and the enhanced loops are drawing the shape sections. The reason for separating them into individual loops was that having them in one loop meant that things were not drawing when the tweet came in and instead everything was drawn simultaneously.

If there is a way to improve this, i'm all ears.

I haven't included the entire program due to size and that this is the only part i'm looking to optimize.

Thankyou.

    if (state == S_PLAY) { 
    shapeMode(CORNER);
    noStroke();
    fill(shapeColor);
    for (int i = 0; i < numLollipops; i++) {
      lollipopFull.disableStyle();
      shape(lollipopFull, i*SIZE, SIZE, SIZE, SIZE);
      numLollipops = check(i*SIZE, numLollipops);
    }
    for (int i = 0; i < numCircles; i++) {
      circleFull.disableStyle();
      shape(circleFull, (width-SIZE)-i*SIZE, SIZE*3, SIZE, SIZE);
      numCircles = check(i*SIZE, numCircles);
    }
    for (int i = 0; i < numLines; i++) {
      lineFull.disableStyle();
      shape(lineFull, i*SIZE, SIZE*5, SIZE, SIZE);
      numLines = check(i*SIZE, numLines);
    }
    for (int i = 0; i < numSeptagons; i++) {
      septagonFull.disableStyle();
      shape(septagonFull, (width-SIZE)-i*SIZE, SIZE*7, SIZE, SIZE);
      numSeptagons = check(i*SIZE, numSeptagons);
    }
    for (int i = 0; i < numSq; i++) {
      squareFull.disableStyle();
      shape(squareFull, i*SIZE, SIZE*9, SIZE, SIZE);
      numSq = check(i*SIZE, numSq);
    }
    for (int i = 0; i < numTriStars; i++) {
      starFull.disableStyle();
      shape(starFull, (width-SIZE)-i*SIZE, SIZE*11, SIZE, SIZE);
      numTriStars = check(i*SIZE, numTriStars);
    }
    for (int i = 0; i < numSeptagrams; i++) {
      septagramFull.disableStyle();
      shape(septagramFull, i*SIZE, SIZE*13, SIZE, SIZE);
      numSeptagrams = check(i*SIZE, numSeptagrams);
    }
    shapeMode(CENTER);
    for (Lollipop l : lollipops) l. draw();
    for (Septagon s : septagons) s. draw();
    for (Line li : lines) li.draw();
    for (Circle c : circles) c. draw();
    for (Square sq : squares) sq.draw();
    for (TriStar t : triStars) t. draw();
    for (Septagram sg : septagrams) sg.draw();
    words.clear();

I'm facing another problem, this time concerning a PShape that loads an svg. I want to display this svg "as is", but want to fade it in. I used disableStyle on simple svgs before, but now I'm importing some pretty complex svgs with multiple colors and I'd love to hear if any of you have a solution to keep the style enabled and only change the alpha/opacity/transparency.

The relevant parts of the code:

PShape[] svgs = new PShape[2];

...

svgs[i] = loadShape("test/svg" + (i + 1) + ".svg");

...

currentSvg = svgs[int(random(svgs.length))];

...

//I used the following line on the simple svg, because the lifespan variable increases and then decreases again, creating a nice fade.
//fill(0, lifespan*255);
shapeMode(CENTER);
shape(currentSvg, position.x, position.y, currentSvg.width/ratio, currentSvg.height/ratio);

I also tried using tint(255, lifespan*255); but this only seems to work on images?

Thanks for taking the time to read this, have an amazing day!

I'm working on a project which shows a map of Northern Ireland. Right now I'm trying to work on an opening sequence where only the lough shows, and when clicked the counties grow from nothing. The problem I'm having is that everything grows from the corner, and I'm not quite sure how to constrain the scales so that the PShapes don't become larger than I need them to be.

Anyone have any advice firstly on how to scale up and down from the centre point of each PShape, and secondly how to constrain the scales?

Thanks a million!

I made a code with a rotating rect rotating around its center. Good.

Now I want a PShape to do the same. But it is not placed correctly on the origin.

But the PShape data are only positive values (and not neg and pos values placing it on the origin)

(this is part of a much bigger project with much more PShapes)

Now instead of re-calculating ALL PShapes so that they are on the origin:

• HOW can I magically tell the PShape to be on the origin please? Either by using some brilliant way of placing it on the origin using translate OR by recalc or vertex with a cool formula?

Thanks!

Best, Chrisir ;-)

PShape s; 

void setup() {

  size(700, 600);

  background(0);

  s = createShape();
  s.beginShape();
  s.fill(0, 0, 255);
  s.noStroke();


  s.vertex(352, 85);
  s.vertex(582, 218);
  s.vertex(582, 477);
  s.vertex(355, 606);
  s.vertex(126, 471);
  s.vertex(126, 211);
  s.vertex(351, 84);

  s. endShape();
}

void draw() {
  background(100);

  translate(width/2, height/2);

  rotate(radians(frameCount));



  rect(-20, -20, 40, 40); // this works  



  shape(s); // this doesn't 
}

Back in Processing I would just have simple code like this:

PShape shape;
/***************************************************************************/
void setup() 
{
  size(400, 400);
  shapeMode(CENTER);
  shape = loadShape("bot1.svg");
} 
/***************************************************************************/
void draw() 
{
  background(100);
  pushMatrix();
  translate(width/2, height/2);
  shape(shape, 0, 0);
  popMatrix();
}

P5 doesn't work that way. What would be the P5.js equivalent to that?

    var shape;
    var canvas;
/***************************************************************************/
    function setup() 
    {
      canvas = createCanvas(400, 400);
      canvas.position(0, 0);
      //shapeMode(CENTER);
      //shape = loadShape("bot1.svg");
    } 
    /***************************************************************************/
    void draw() 
    {
      background(100);
      push();
      translate(width/2, height/2);
      //shape(shape, 0, 0);
      pop();
    }

I've checked my original SVGs (created in Adobe Animate CC and exported frame by frame), I played with shapeMode(), I tried to translate with path coordinates from the viewBox (it didn't change anything), and I've spent way too much time searching online. Here is the code:

ArrayList<Button> buttons;

//creating grid to clarify location
int nbOfHorizontalLines = 20;
int nbOfVerticalLines = 30;

void setup() {
  size(1500, 1000);
  buttons = new ArrayList<Button>();

  // button constructor: x, y, width, height, text
  buttons.add(new Button (100, 100, 100, 100, "100,100 (top left corner of button should be drawn here)"));

}

void draw() {
  background(200);
  frameRate(20);

  //grid to clarify location
  float distanceBetweenHorizontalLines = (float)height/nbOfHorizontalLines;
  float distanceBetweenVerticalLines = (float)width/nbOfVerticalLines;

  for(int i = 0; i < nbOfHorizontalLines; i++)
  {
    stroke(#56A9FA);
    line(0, i *distanceBetweenHorizontalLines, width, i*distanceBetweenHorizontalLines);  
  }

  for(int i = 0; i < nbOfVerticalLines; i++)
  {
    stroke(#56A9FA);
    line(i*distanceBetweenVerticalLines, 0, i*distanceBetweenVerticalLines, height);
  }

  // draw buttons
  for (Button b : buttons) {
    b.drawButton();

  }
  textSize(15);
  text("~210,140", 210, 128);
}

And the Class for the Button:

class Button {

  float x, y;
  //width and height
  float w, h;
  //cycles through the animation files 
  ArrayList<PShape> restFrames;
  ArrayList<PShape> currentFrames;
  //var to load current frame
  PShape frame;
  int frameIndex;
  //assign text string from parameter to t
  String t;


  public Button(float newX, float newY, float newWidth, float newHeight, String newText) {

    x = newX;
    y = newY; 
    w = newWidth ;
    h = newHeight;
    frameIndex = 0;
    t = newText;
    restFrames = new ArrayList<PShape>();

    //animate basic unclicked button state
    int i;
    for (i = 1; i < 52; i++) {
      restFrames.add(loadShape("cleanBreathingNoBG_" + i + ".svg"));
    }
    currentFrames = restFrames;
  }

  void drawButton() {
    shapeMode(CORNER);
    PShape frame = currentFrames.get(frameIndex);

    shape(frame, x, y, w, h);  
    frameIndex++;
    if (frameIndex == currentFrames.size()) {
      frameIndex = 0;
    }
    textSize(18);
    fill(0);
    textAlign(LEFT, TOP);
    text(t, x, y);
  }
}

And finally, the code for the SVG (suspect this is where the problem is, but I have little to no experience with SVG code and I don't know what I'm looking for):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="386px" height="363px" viewBox="0 0 386 363">
<defs>
<path id="Layer0_0_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 454.95 160.95
Q 478.0671875 309.616015625 464.95 476.9"/>

<path id="Layer0_1_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 464.95 476.9
Q 607.547265625 499.9689453125 769.9 479.9"/>

<path id="Layer0_2_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 770.9 481.9
Q 761.9529296875 312.828515625 769.9 158.95"/>

<path id="Layer0_3_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 454.95 157.95
Q 614.925 174.6916015625 769.9 156.95"/>

<path id="Layer0_4_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 463.95 475.9
L 442.95 502.9"/>

<path id="Layer0_5_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 769.9 478.9
L 783.9 503.9"/>

<path id="Layer0_6_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 771.9 158.95
L 782.9 183.95"/>

<path id="Layer0_7_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 785.9 505.9
Q 781.89296875 341.61796875 784.9 187.95"/>

<path id="Layer0_8_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 446.95 504.9
Q 616.425 506.6560546875 780.9 505.9"/>

<path id="Layer0_9_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 452.95 159.95
L 439.95 182.95"/>

<path id="Layer0_10_1_STROKES" stroke="#000000" stroke-width="5.2" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 442.95 501.9
Q 449.8580078125 337.425 439.95 186.95"/>
</defs>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_0_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_1_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_2_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_3_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_4_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_5_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_6_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421.7,-148.75) ">
<use xlink:href="#Layer0_7_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_8_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_9_1_STROKES"/>
</g>

<g transform="matrix( 1, 0, 0, 1, -421,-144.75) ">
<use xlink:href="#Layer0_10_1_STROKES"/>
</g>
</svg>

If additional information is needed, please let me know if I missed anything! I appreciate the help.

PShape s;

void setup() {
  size(500, 500, P3D);
  shapeMode(CENTER);
  s = loadShape("obj2.obj");
}

void draw() {
  background(32);
  lights();
  fill(255);
  float z = 0;
  rotateY(z);
  z += .1;
  shape(s, 100,100, 50,50);
}

I’m trying to draw a svg shape that changes size, but it seems like shapeMode(CENTER) doesen’t work anymore when I use the P3D renderer. I think I read something about this issue before, but I can’t find it anymore. Is there a solution to this?

PShape la;

float in; //comes from audio, increases size of object

la = loadShape(“test.svg"); la.disableStyle();

pushMatrix();

translate(width/2, height/2);

shapeMode(CENTER);

shape(la, 0, 0, 400(1+in), 400(1+in))

popMatrix();