› ›

P5.js svg image array loading problem | please help

anetecimaanetecima
edited April 2017 in p5.js Programming Questions

HI! I started exploring P5.js really recently and i haven't coded javascript for a while, so i really need help. i think it's probably nothing big, but i can't get around this problem.

i have an array of objects that contain svg images from preloaded image array. objects have two methods - update and fsize update displays the array, but size changes the sizse of each image each time displayed.

when i run the code, usually it doesn't fill the whole screen and gives me this:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' at p5.Renderer2D.image (p5.js:14621) at p5.image (p5.js:20773) at Letter.update (sketch.js:71) at draw (sketch.js:46) at p5.redraw (p5.js:16560) at p5.resizeCanvas (p5.js:15974) at windowResized (sketch.js:102) at p5._onresize (p5.js:12789)

but there are times when it does fill the whole screen and runs without any problem. Can someone please help me with this?

the code:

/*
Created by anetecima
27/03/2017
*/



        var characters = [];
        var Angle;
        var space;
        var letters = [];

        function preload() {
          characters = [66];
          for(var i = 1; i<67; i++){
            characters[i] = new Image();
            characters[i] = loadImage("burti/"+i+".svg");               
          }
        }

        function setup(){
        createCanvas(windowWidth,windowHeight);
        space = 120;
        Angle = 0;
        imageMode(CENTER);
        background(255);
        noStroke();

        var wide = width / space;
        var high = height / space;

        //AIZPILDA LAUKUMU AR BURTIEM
        var tf = [ 1,0 ];
        for (var i = 0; i < wide; i++) {
          for (var j = 0; j < high; j++) {
            letters.push(new Letter(i,j,random(characters),random(tf),random(15,60)));
          }
        }
        }

        function draw(){
        background(255);
        translate(50,50);
        Angle = frameCount*0.06;

        for (var i = 0; i<letters.length; i++) {
          push();
            letters[i].update();
            letters[i].fsize();
          pop();
          }
        }

        function Letter( ixC, iyC,  ia, idirection,  isize, degreesss) {
        this.xC = ixC;
        this.yC = iyC;
        this.a = ia;
        this.direction = idirection;
        this.size = isize;


        this.update = function(){
            translate(this.xC*space, this.yC*space);
            push(); 
                rotate((Angle+(this.xC+this.yC*100)));
                image(this.a, 0,0,this.a.width * (this.size*0.01),this.a.height * (this.size*0.01));
            pop();

          };


          this.fsize = function(){

          if(this.direction==0){
                this.size--;
            if(this.size<=15){
              this.direction=1;
            }
          }
          if(this.direction==1){
          this.size++;  
            if(this.size>=60){
              this.direction=0;
            }  
          }
          };

        }

        function mouseClicked() {
          for (var i = 0; i < letters.length; i++) {
              letters[i].a = random(characters);
              letters[i].size = random(15,60);
          }
        }
        function windowResized() {
          resizeCanvas(windowWidth, windowHeight);
        }

`

Tagged:

Best Answer

Answers

Sign In or Register to comment.