We are about to switch to a new forum software. Until then we have removed the registration on this forum.
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.