Processing.js image pixelated

emimel

Hi everyone,

I'm trying to make a generative logo on this website I'm currently developing (www.lapweb.it). Everything works nice, except for the image that appears to be "pixelated". I really can't wrap my head around it. Any advice? Thank you so much!

ps: this is the code

         /* @pjs preLoad="logoprocessing.png"; */

        PShape img;
        int cx, cy, d;
        void setup(){

          size(75,75);
          cx=width/2;
          cy=height/2;
          d=min(cx,cy);
          frameRate(2);
          img = loadImage("logoprocessing.png");
          smooth();

        }

        void draw() {
          background(256,256,256);

         drawShape(cx,cy,d,int(random(15,30)));

        imageMode(CENTER);
          image(img,width/2,height/2, width/2,height/4);


        }

        void drawShape(float px, float py, float md, int nbrVerts) {
        float[] v = new float [nbrVerts];
        for (int i=0; i< v.length; i++) {
        v[i] = random (0, TWO_PI);
        }
        v = sort (v);
        beginShape();
         color X = color (#0C090A);
        noStroke();
        fill(X);
        for (int i= 0; i<v.length;i++){
        float len = random (20,md);
        vertex(px+len*cos(v[i]), py + len*sin(v[i]));
        }
        endShape();
         rectMode(CENTER);
          fill(X);
          noStroke();
          rect(width/2,height/2,width/2,height/4);
        }


        </script>

kfrajer

except for the image that appears to be "pixelated"

Can you post a shot of your image showing your problem? Also consider hosting it in https://OpenProcessing.org/sketch/create so to see the effect directly.

One thing you should consider is keeping the image ratio when resizing. This doesn't apply if your image is square. I am referring to line 23

You can resize in setup: https://processing.org/reference/PImage_resize_.html

Kf

emimel

You can see what happens at lapweb.it. I'm gonna try the resize and tell you what happens!

kfrajer

The image is in the top right corner, right? I was looking for the Processing logo. The pixelation is on letters or is it all over the image?

Kf

emimel

Sorry, I meant that th pixelation is on the LAP lettermark on the top left corner of the header. It's only the png of the image because the shape is normally defined