SVG & processing.js

edited June 2015 in JavaScript Mode

Hi!

I have a sketch that I'm attempting to make web-friendly with processing.js. I spent some time reading tutorials and managed to upload simple tutorial sketches, however, I'm really struggling with my one project.

It involves simple keypressed functions that calls SVG files and I'm wondering if it's the SVGs that are not loading correctly?

Any help would be appreciated!!

color [] colours = {
  #7A32B2, 
  #FF5F4F, 
  #0051E3, 
  #3FE5A7, 
  #FFE300
};

int myColor = 0;
int numColor = 5;

PShape[] shapes = new PShape[27];
PShape myShape;

boolean startDraw = false;
boolean play = false;

int shapeType = 0;
float scaleFactor = 0.05;      
float scaleMin = scaleFactor;
float scaleMax = 5;          
float scale = 1.2;

void setup() {
  size(1000,800);
  background(255);
  smooth();


  // load all the 26 shapes
  for (int i = 0; i < shapes.length; i ++)
  {
    shapes[i] = loadShape("shapes-"+nf(i, 2)+".svg");
  }

}

void draw() {



  if (startDraw == true) {

    myShape = shapes[shapeType];
    myShape.disableStyle();  
    fill(colours[myColor % numColor]);
  noStroke();
    translate(width/2, height/2); 
    scale(scale*4);  

    shapeMode(CENTER);
    shape(myShape, 0, 0);    //scale from center


  }

    startDraw = false;


}


void keyPressed() {

  int keyIndex = -1;



  if (key >= 'A' && key <= 'Z') {
    keyIndex = key - 'A';


  } else if (key >= 'a' && key <= 'z') {
    keyIndex = key - 'a';
  }


  else {   
    if (scale <= scaleMin) { //reset if reached the scalefactor
    scale = 1.2;

    }

    else scale = scale - scaleFactor;



    myColor++;
    // Start to set the shapeType below

    switch(key)
    {
    case 'A' :
    case 'a' :
      shapeType = 0;    //file 00
      break;      
    case 'B' :
    case 'b' :
      shapeType = 1;   //file 01
      break;
    case 'C' :
    case 'c' :
      shapeType = 2;  //file 02
      break;
    case 'D' :
    case 'd' :
      shapeType = 3;  //file 03
      break;
    case 'E' :
    case 'e' :
      shapeType = 4;  //file 04
      break;
    case 'F' :
    case 'f' :
      shapeType = 5;  //file 05
      break;
    case 'G' :
    case 'g' :
      shapeType = 6;  //file 06
      break;
    case 'H' :
    case 'h' :
      shapeType = 7;  //file 07
      break;
    case 'I' :
    case 'i' :
      shapeType = 8;  //file 08
      break;
    case 'J' :
    case 'j' :
      shapeType = 9;  //file 09
      break;
    case 'K' :
    case 'k' :
      shapeType = 10;  //file 10
      break;
    case 'L' :
    case 'l' :
      shapeType = 11;  //file 11
      break;
    case 'M' :
    case 'm' :
      shapeType = 12;  //file 12
      break;
    case 'N' :
    case 'n' :
      shapeType = 13;  //file 13
      break;
    case 'O' :
    case 'o' :
      shapeType = 14;  //file 14
      break;
    case 'P' :
    case 'p' :
      shapeType = 15;  //file 15
      break;
    case 'Q' :
    case 'q' :
      shapeType = 16;  //file 16
      break;
    case 'R' :
    case 'r' :
      shapeType = 17;  //file 17
      break;
    case 'S' :
    case 's' :
      shapeType = 18;  //file 19
      break; 
    case 'T' :   
    case 't' :
      shapeType = 19;  //file 20
      break;
    case 'U' :
    case 'u' :
      shapeType = 20;  //file 21
      break;
    case 'V' :
    case 'v' :
      shapeType = 21;  //file 22
      break;
    case 'W' :
    case 'w' :
      shapeType = 22;  //file 23
      break;
    case 'X' :
    case 'x' :
      shapeType = 23;  //file 24
      break;
    case 'Y' :
    case 'y' :
      shapeType = 24;  //file 25
      break;
    case 'Z' :
    case 'z' :
      shapeType = 25;  //file 26
      break;
    default :
      shapeType = 26;  //file 27 - a blank image
      break;
    }


    startDraw = true;


  }



}         

Answers

  • If you think the problem is loadShape(), why don't you make a simple sketch which loads & display 1 ".svg" only?

  • Also check the browser console for any error messages: F12 then look for 'console'...

  • In Processing.js, bitmap images must be pre-loaded, perhaps it is the same for SVG files.

Sign In or Register to comment.