Revealing a created image

kfernie

Hi! I have created a word from shapes using processing and i now want to reveal it with a "torch" when you move your cursor over the word and then reveal the whole image when the mouse is clicked. i have seen a couple of threads already but can't get them to fit as I'm wanting to put it on top of something i have already created rather than just inserting an image.

Thanks!

cameyo

Hope this helps :)

// torch.pde
// by cameyo 2015
// processing 3.x
PImage img, torch;
int xstart, ystart, xend, yend;
int ray;
int state;

void setup()
{
  size(640, 360);
  background(60);
  img = loadImage("data.png");
  torch = createImage(640,360,RGB);
  xstart = 0;
  ystart = 0;
  xend = img.width;
  yend = img.height;
  ray = 50;
  state = 2;
}

void draw() 
{
  // show gray screen  
  if (state == 1)
  {
    background(60);
  }
  // show torch effect
  else if (state == 2)
  {
    img.loadPixels();
    torch.loadPixels();
    // loop over image pixels 
    for (int x = xstart; x < xend; x++)
    {
      for (int y = ystart; y < yend; y++ )
      {
        int loc = x + y*img.width;
        float dd = dist(mouseX, mouseY, x, y);        
        // pixels distance less than ray ?  
        if (dd < 50)
        {
          // set equal pixel
          torch.pixels[loc] = img.pixels[loc];
        }
        else
        {
          // if mouse pressed...discover image
          if (!mousePressed)
          {
            // set pixel to black
            torch.pixels[loc] = #000000;
          }
        }
      }
    }
    img.updatePixels();
    torch.updatePixels();
    // show torch image
    image(torch, 0, 0);
  }    
  // show all image
  else if (state == 3)
  {
    image(img, 0, 0);
  }  
}

void keyPressed()
{
  if (key=='1') { state = 1; }
  if (key=='2') { state = 2; }
  if (key=='3') { state = 3; }    
}

kfernie

thanks that makes a lot more sense! so if i have (pasted below) already how would that fit in? this is the image i have created that i want the torch to reveal :)

void setup(){ size(900,600); background(182,177,191); noStroke(); } void draw(){ fill(229,242,93); rect(100,150,50,150); fill(229,242,93); rect(100,150,150,50); fill(229,242,93); rect(150,250,100,50); fill(232,199,33); ellipse(330,230,150,150); fill(227,153,16); ellipse(490,230,150,150); fill(227,81,14); rect(590,150,50,150); fill(227,81,14); rect(590,250,150,50); }

cameyo

Please, format your code ;)

kfernie

/Users/katherinefernie/Desktop/Screen Shot 2016-01-15 at 14.58.41.png

is this any better? it won't format in the comments box so i just have to take a screen shot

kfernie


kfernie

void setup(){ size(900,600); background(182,177,191); noStroke(); }

void draw(){ fill(229,242,93); rect(100,150,50,150); fill(229,242,93); rect(100,150,150,50); fill(229,242,93); rect(150,250,100,50); fill(232,199,33); ellipse(330,230,150,150); fill(227,153,16); ellipse(490,230,150,150); fill(227,81,14); rect(590,150,50,150); fill(227,81,14); rect(590,250,150,50); }

_vk

:)

https://forum.processing.org/two/discussion/8045/how-to-format-code-and-text#latest

kfernie

void setup(){ 
size(900,600); 
background(182,177,191); 
noStroke(); 
}

void draw(){ 
fill(229,242,93); 
rect(100,150,50,150); 
fill(229,242,93); 
rect(100,150,150,50); 
fill(229,242,93); 
rect(150,250,100,50); 
fill(232,199,33); 
ellipse(330,230,150,150); 
fill(227,153,16); 
ellipse(490,230,150,150); 
fill(227,81,14); 
rect(590,150,50,150); 
fill(227,81,14); 
rect(590,250,150,50); 
}

cameyo

Ok. You must grab your draw as image and use it instead of data.png.
This can be done changing the setup() function.

void setup()
{
  size(900, 400);

  // here: your code on draw()
  background(182,177,191); 
  noStroke();   
  fill(229,242,93); 
  rect(100,150,50,150); 
  fill(229,242,93); 
  rect(100,150,150,50); 
  fill(229,242,93); 
  rect(150,250,100,50); 
  fill(232,199,33); 
  ellipse(330,230,150,150); 
  fill(227,153,16); 
  ellipse(490,230,150,150); 
  fill(227,81,14); 
  rect(590,150,50,150); 
  fill(227,81,14); 
  rect(590,250,150,50); 

  // now copy the canvas (your draw) as image
  img = get(0, 0, 900, 400);
  // img = loadImage("data.png");

  torch = createImage(900, 400, RGB);
  xstart = 0;
  ystart = 0;
  xend = img.width;
  yend = img.height;
  ray = 50;
  state = 2;
}

kfernie

sorry i have only had one lesson on this and can draw shapes and make them move with my mouse so i really don't know very much. i understand what you're saying to do but i don't know how to do it.

i really appreciate your help :)

kfernie

but we have been asked by our tutor to reveal a word we have made!

cameyo

Copy all the code from my first post.
Substitute the setup() function with setup() function of my last post.
That's all.
p.s. but i think your tutor will be in doubt :-O

kfernie

i will see it work and then probably take out the torch so its just click to reveal. i do really appreciate your help its more for me to see how it works and understand so if i need to do it in the future i can :-*