› › ›

Processing.js image pixelated

emimelemimel
edited July 2017 in JavaScript Mode

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>
Tagged:

Answers

  • kfrajerkfrajer

    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

  • emimelemimel

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

  • kfrajerkfrajer

    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

  • emimelemimel
    edited July 2017

    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

Sign In or Register to comment.