Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Confluence
For you

Programming
Results will update as you type.
  • Tiling and Repetition
  • Reactors
  • Programming Basics: Parametric and Generative Graphic Design 2016
  • Archive
  • High Scores
  • Artificial Neural Network
  • Alternatives to the Processing IDE
  • p5.js Programming
  • Programming in Processing (java)
    • Starting with Processing (en)
    • Variables (en)
    • Classes and Objects (en)
    • Events und Functions (en)
    • Writing our own Functions (en)
    • Random Numbers (en)
    • Conditionals (en)
    • Loops (en)
    • Nested Loops (en)
    • Coordinates (en)
    • Arrays and Lists (en)
    • SVG + Images (en)
    • Motion and Temporality
    • Gesture Interactions
    • Using bitmaps as modifiers
    • Vectors
    • Animation
    • Animation 2
    • Simple Collision Detection
    • Sound
    • Typography

/
Using bitmaps as modifiers

Using bitmaps as modifiers

Nov 07, 2017

int gridWidth = 100; 
int gridHeight = 100; 
float pointDistX = 5; 
float pointDistY = 5; 
ArrayList<Integer> imageGreyScaleList = new ArrayList<Integer>();
PImage baseImage;  

void setup() {
  size(700, 700);
  smooth();
  baseImage = loadImage("data/image.jpg");
  baseImage.loadPixels();
  int loc;
  for (int i = 0; i < baseImage.width; i++) {
    for (int j = 0; j < baseImage.height; j++) {  
      loc = i + j*baseImage.width;
      println(baseImage.pixels[loc]);
      color pixel = baseImage.pixels[loc];
      int greyScale = floor(red(pixel)+green(pixel)+blue(pixel)/3);
      imageGreyScaleList.add(greyScale);
    }
  }
};

void draw() {
  background(255);
  pushMatrix(); 
  // translate graphic to the center of the screen  
  translate((width-(pointDistX*gridWidth))/2, (height-(pointDistY*gridHeight))/2);
  int loc;
  for (int i = 0; i<gridHeight; i++ ) {
    beginShape();
    for (int j = 0; j<gridWidth; j++) {
      loc = i + j*baseImage.width;
      float posX =  j*pointDistX;
      float posY =  i*pointDistY+map(imageGreyScaleList.get(loc), 0, 255, 0, 10); // offset y coordinate based on the pixels colour
      curveVertex(posX, posY);
    };
    endShape();
  };
  popMatrix();
};



Error rendering macro 'view-file' : Cannot render content of attachment: bitmapInput.zip

, multiple selections available,
{"serverDuration": 61, "requestCorrelationId": "91203bcaf8ed4bda933b732f59769e61"}