Trying to add an image to the fractal code i am studying

Processing Libraries
1

Hi guys…
I got this code from the processing page as exemple and I am trying to add an image/piture to the effect.
I did try many ways .
This is the near i have got. The image only flash when start.

/**
 * Mixture Grid
 * modified from an example by Simon Greenwold.
 *
 * Display a 2D grid of boxes with three different kinds of lights.
 */
PImage img;
void setup() {
  size(600, 600, P3D);
  noStroke();

  img = loadImage("face.jpg");  // Carrega a imagem
  println(img);  // Imprime o resultado da função loadImage()
        image(img, 0, 0);  // Desenha a imagem
}

void draw() {
  defineLights();
  background(0);
  


  for (int x = 0; x <= width; x += 60) {
    for (int y = 0; y <= height; y += 60) {
      pushMatrix();

      
      translate(x, y);
      rotateY(map(mouseX, 0, width, 0, PI));
      rotateX(map(mouseY, 0, height, 0, PI));
      box(90);


      popMatrix();
    }
  }
}

void defineLights() {
  // Orange point light on the right
  pointLight(150, 100, 0, // Color
    200, -150, 0); // Position

  // Blue directional light from the left
  directionalLight(0, 102, 255, // Color
    1, 0, 0);    // The x-, y-, z-axis direction

  // Yellow spotlight from the front
  spotLight(255, 255, 109, // Color
    0, 40, 200, // Position
    0, -0.5, -0.5, // Direction
    PI / 2, 2);     // Angle, concentration
}
2

Hi the reason it only flashes at the beginning is because you are calling image in setup then overriding it with background(0) in draw, try removing the call to image(img, 0, 0); from setup and using

background(img);

instead, or simply putting the image(img, 0, 0) in draw
Hope that helps explain

3

@Mikey83 Thanks Mr.
I did what you said. And i tryed to add the img in every line in the code. The image does not show up in any where…

Any other tip?

What i did was to make the cubes change with music.

I really want to add an image to be the fractal…

4

Im sorry, had just woken up and at a quick glance thought you wanted it as a background image lol, ill have a play and see what I can come up with

1 Like
5

So, I got you a little closer but I dont really understand texturing all to well, I used a PShape to create the box instead and a second image called “i”, then assigned a portion of the main image to “i” and setTexture of the PShape, it kind of works but is all disordered and not running to well, was trying to use an array of PImages to save the get function which I think is whats slowing it down sometimes, anyway, I hope someone can help better than me, heres where I got to

/**
 * Mixture Grid
 * modified from an example by Simon Greenwold.
 *
 * Display a 2D grid of boxes with three different kinds of lights.
 */
PImage img;
PImage i; //ADDED A SECOND IMAGE TO GET A PORTION OF THE MAIN IMAGE
PShape box; //ADDED THIS TO ALLOW SET TEXTURE TO WORK

void setup() {
  size(600, 600, P3D);
  noStroke();
  
  box = createShape(BOX, 60); //CREATED THE PSHAPE HERE

  img = loadImage("face.jpg");  // Carrega a imagem
  println(img);  // Imprime o resultado da função loadImage()
  image(img, 0, 0);  // Desenha a imagem
}

void draw() {
  defineLights();
  background(0);

  for (int x = 0; x <= width; x += 60) {
    for (int y = 0; y <= height; y += 60) {
      pushMatrix();

      translate(x, y);
      rotateY(map(mouseX, 0, width, 0, PI));
      rotateX(map(mouseY, 0, height, 0, PI));
      
      i = img.get(x,y,60,60); //USE THIS TO GET A PORTION OF THE MAIN IMAGE
      box.setTexture(i); //USE THAT PORTION TO TEXTURE THE PSHAPE
      shape(box); //DRAW PSHAPE


      popMatrix();
    }
  }
}

void defineLights() {
  // Orange point light on the right
  pointLight(150, 100, 0, // Color
    200, -150, 0); // Position

  // Blue directional light from the left
  directionalLight(0, 102, 255, // Color
    1, 0, 0);    // The x-, y-, z-axis direction

  // Yellow spotlight from the front
  spotLight(255, 255, 109, // Color
    0, 40, 200, // Position
    0, -0.5, -0.5, // Direction
    PI / 2, 2);     // Angle, concentration
}
6

@Mikey83 Tks mate…
I added what you did and also i add this sound wich moves the cube x/y/z.
Its geting kinda nice… Generative.
I changed the background(0) to setup; Box (60, 25,20) [i do not know what these 3 numbers means yet]; put the image(img…) into Draw.
This is the image i am using. Its my clay artwork ET head. Also i would llike to post here my sound, it is also a mashup i made. So you could have a trip the way this work could take.
Also i tryed to use Transparency in the colors in the end of the code to try to make the picture more visible. So i add a 2º img1, but i do not see any difference, the ideia is to leave the original image in the end when the music stops.
The sound has 1:38 minuts
So, here is the my pic:

face
face768×1024 103 KB

And this is the code:


import ddf.minim.*;

Minim minim;
AudioPlayer player;
PImage img;
PImage img1;
PImage i; //ADDED A SECOND IMAGE TO GET A PORTION OF THE MAIN IMAGE
PShape box; //ADDED THIS TO ALLOW SET TEXTURE TO WORK


void setup() {
  background(0);
  size(700, 700, P3D);
  noStroke();

  minim = new Minim(this);  // Cria um objeto Minim
  player = minim.loadFile("fabFX.mp3");  // Carrega o áudio
  player.play();  // Toca o áudio

  box = createShape(BOX, 60); //CREATED THE PSHAPE HERE

  img = loadImage("face.jpg");  // Carrega a imagem
  println(img);  // Imprime o resultado da função loadImage()
  img1 = loadImage("face.jpg");
  println(img1);  // Imprime o resultado da função loadImage()
 image(img1, 0, 0);  // Desenha a imagem
}
void draw() {
  image(img, 0, 0);  // Desenha a imagem

  defineLights();

  float volume = player.left.get(1);  // Obtém o volume esquerdo do áudio
  volume = map(volume, 0, 1, 0, PI);  // Mapeia o volume para o intervalo [0, PI]

  for (int x = 0; x <= width; x += 40) {
    for (int y = 0; y <= height; y += 40) {
      pushMatrix();
      translate(x, y);

      rotateY(volume);  // Usa o volume como entrada para a função rotateY()
      rotateX(volume);  // Usa o volume como entrada para a função rotateX()
      //rotateY(map(mouseX, 0, width, 0, PI));
      //rotateX(map(mouseY, 0, height, 0, PI));

      i = img.get(x, y, 20, 20); //USE THIS TO GET A PORTION OF THE MAIN IMAGE
      box.setTexture(i); //USE THAT PORTION TO TEXTURE THE PSHAPE
      shape(box); //DRAW PSHAPE
      box(60, 25, 20);
      popMatrix();
    }
  }
   
}

void defineLights() {
  // Orange point light on the right
  pointLight(150, 100, 0, // Color
    200, -150, 0); // Position

  // Blue directional light from the left
  directionalLight(0, 102, 255, // Color
    1, 0, 0);    // The x-, y-, z-axis direction

  // Yellow spotlight from the front
  spotLight(255, 255, 109, // Color
    0, 40, 200, // Position
    0, -0.5, -0.5, // Direction
    PI / 2, 2);     // Angle, concentration
}