PGraphics using .svg instead of the type

edited January 2015 in How To...

Hello everyone,

I have been dabbling with processing for quite some time and I've found this series of tutorials.

The code I am playing this is one for Aggregate drawing and I'm wondering what would be the way to make it use an .svg instead of type? Thank you!!

    /*
     * This sketch uses the text drawn to an offscreen PGraphics to determine
     * if a randomly chosen xy-coordinate is inside the drawn text. If so it will
     * draw a shape to the main screen. In addition, the sketch has no background
     * call in draw(), so the drawings will accumulate on top of each other
     * much like a painting's canvas.
     * 
     * USAGE:
     * - click the mouse to move through the three different drawing modes
     */

    int drawSpeed = 200; // number of drawn shapes per draw() call
    int drawMode = 0; // move through the drawing modes by clicking the mouse
    color BACKGROUND_COLOR = color(255);
    color PGRAPHICS_COLOR = color(0);

    PGraphics pg;

    void setup() {
      size(1280, 720);
      background(BACKGROUND_COLOR); // start of with a white background
      colorMode(HSB, 360, 100, 100); // change to Hue-Saturation-Brightness color mode
      rectMode(CENTER);

      // create and draw to PPraphics (see Getting Started > UsingPGraphics example)
      pg = createGraphics(width, height, JAVA2D);
      pg.beginDraw();
      pg.textSize(500);
      pg.textAlign(CENTER, CENTER);
      pg.fill(PGRAPHICS_COLOR);
      pg.text("TYPE", pg.width/2, pg.height/2); 
      pg.endDraw();
    }

    void draw() {
      // This for loop ensures the code is repeated 'drawSpeed' times
      for (int i=0; i<drawSpeed; i++) {
        // pick a random coordinate
        int x = (int) random(width);
        int y = (int) random(height);
        // check if the coordinate is inside the text (in the offscreen PGraphics)
        boolean insideText = (pg.get(x, y) == PGRAPHICS_COLOR);
        // if it is indeed, then draw a shape in the main screen
        if (insideText) {
          // switch based on the current draw mode (move through them by clicking the mouse)
          // each drawing mode has custom settings (stroke, fill, shape, rotation) 
          pushMatrix();
          translate(x, y);
          switch (drawMode) {
          case 0:
            float er = random(5, 45);
            color ec = color(random(360), 100, 100);
            stroke(0);
            fill(ec);
            ellipse(0, 0, er, er);
            break;
          case 1: 
            float td = random(3, 10);
            float tr = random(TWO_PI);
            color tc = color(random(180, 300), 100, random(50, 100));
            noStroke();
            fill(tc);
            rotate(tr);
            triangle(0, -td, -td, td, td, td);
            break;
          case 2: 
            float rw = random(5, 20);
            float rh = random(5, 50);
            float rr = random(TWO_PI);
            color rc = color(random(20), random(70, 100), random(20, 100));
            stroke(0);
            fill(rc);
            rotate(rr);
            rect(0, 0, rw, rh);
            break;
          }
          popMatrix();
        }
      }
    }

    void mousePressed() {
      background(BACKGROUND_COLOR); // clear the screen when changing drawing mode
      drawMode = ++drawMode%3; // move through 3 drawing modes (0, 1, 2)
    }
Tagged:

Answers

  • Using shape(): https://processing.org/reference/shape_.html

    You're drawing on a separate PGraphics so make sure you use shape() between the bp.begin/endDraw() methods.

  • edited January 2015
      pg = createGraphics(width, height, JAVA2D);
      pg.beginDraw();
      pg.loadShape("dark_gray.svg");
      pg.endDraw();      
    

    if i use something like this, the screen is empty?

  • Fixed!

    ` PImage img;

    PShape area;
    
    int drawSpeed = 20; // number of drawn shapes per draw() call
    int drawMode = 0; // move through the drawing modes by clicking the mouse
    color BACKGROUND_COLOR = color(255);
    color PGRAPHICS_COLOR = color(0);
    
    float c;
    PGraphics pg;
    PGraphics sh;
    PShape s;
    
    
    void setup() {
    area = loadShape ("daark_gray.svg");
    
      size(1280, 720);
    
    
      background(BACKGROUND_COLOR); // start of with a white background
      colorMode(HSB, 360, 100, 100); // change to Hue-Saturation-Brightness color mode
      rectMode(CENTER);
    
    
    
      // create and draw to PPraphics (see Getting Started > UsingPGraphics example)
    

    pg = createGraphics(width, height, JAVA2D); pg.beginDraw(); // pg.image(sh,0,0,CENTER,CENTER); area.disableStyle(); pg.fill(PGRAPHICS_COLOR); pg.shape(area, 0,0, pg.width, pg.height);
    pg.endDraw();
    }

    void draw() {
      // This for loop ensures the code is repeated 'drawSpeed' times
        for (int i=0; i<drawSpeed; i++) {
          // pick a random coordinate
          int x = (int) random(width);
          int y = (int) random(height);
          // check if the coordinate is inside the text (in the offscreen PGraphics)
          boolean insideText = (pg.get(x, y) == PGRAPHICS_COLOR);
          // if it is indeed, then draw a shape in the main screen
          if (insideText) {
            // switch based on the current draw mode (move through them by clicking the mouse)
            // each drawing mode has custom settings (stroke, fill, shape, rotation) 
            pushMatrix();
            translate(x, y);
            switch (drawMode) {
            case 0:
              float er = random(5, 12);
              color ec = color(random(360), 100, 100);
              stroke(0);
              fill(ec);
              ellipse(0, 0, er, er);
              break;
            case 1: 
              float td = random(3, 10);
              float tr = random(TWO_PI);
              color tc = color(random(180, 300), 100, random(50, 100));
              noStroke();
              fill(tc);
              rotate(tr);
              triangle(0, -td, -td, td, td, td);
              break;
            case 2: 
              float rw = random(5, 20);
              float rh = random(5, 50);
              float rr = random(TWO_PI);
              color rc = color(random(20), random(70, 100), random(20, 100));
              stroke(0);
              fill(rc);
              rotate(rr);
              rect(0, 0, rw, rh);
              break;
            }
            popMatrix();
          }
        }
      }
    
    void mousePressed() {
      background(BACKGROUND_COLOR); // clear the screen when changing drawing mode
      drawMode = ++drawMode%3; // move through 3 drawing modes (0, 1, 2)
    }
    

    `

Sign In or Register to comment.