I though I could load it then duplicate it as img2 and only apply the mask to the first img object.

Is that possible or is there a different way to do it?

function preload() {
  img = loadImage("assets/moonwalk.jpg");
  imgMask = loadImage("assets/mask.png");
  img2 = ? ? ? ? ? ?; // how do i clone the first img?
}

function setup() {
  createCanvas(720, 400);
  img.mask(imgMask);
  imageMode(CENTER);
}

function draw() {
  background(250, 255, 3);
  image(img2, width/2, height/2);
  image(img, mouseX, mouseY);
}

function setup(){ createCanvas(windowWidth,windowHeight); logo = loadImage("logo.png"); }

function draw(){ background(0); imageMode(CENTER); image(logo, windowWidth / 2, windowHeight / 3, 100, 100); imageMode(CORNER); textSize(30); textAlign(CENTER, CENTER); rectMode(CENTER); text('This is a string of text! This is a string of text!',windowWidth / 2, windowHeight / 2 , windowWidth, windowHeight); }

This is what it looks on a laptop screen:

And this is what look on a responsive screen:

I want to make the text and the image as big and legible than it is on responsive mode. I know that I have to change the lines

textSize(30); and image(logo, windowWidth / 2, windowHeight / 3, 100, 100);

but i don't know how. Any tips?

int Screen = 0;
int timersecs;
int milliseconds;
int shipX = 40, shipY = 300;
boolean intersect = false; 
PImage Ship;
PImage Enemy1;
PImage Enemy2;
PImage Enemy3;
PImage Enemy4;
PImage Enemy5;
PImage SpaceWarLoad;
PImage SpaceWarBack;
Ships s[];

void setup ()
{ 
 size(600,600);
 Ship = loadImage("Smallship.png");
 SpaceWarLoad = loadImage("SpaceWarLoad.png");
 SpaceWarBack = loadImage("SpaceWarBack.jpg");
 s = new Ships[5];
for (int z = 0; z < 5; z++)
{ 
  s[z] = new Ships();
}
}

void draw ()
{                                             //Loading screen and Background
  if (Screen == 0)
  {
    imageMode(CENTER);
    image(SpaceWarLoad,width/2,height/2);
  }
else 
{
    imageMode(CENTER);
    image(SpaceWarBack,width/2,height/2);
    image(Ship, shipX, shipY);                        //Ship Sprite
    timer();
}
if (shipY <= 30)        //Border control
{
  shipY=30;
}
else if (shipY >= 560)
{
  shipY = 560;
}
 for (int z = 0; z < 5; z++) //array to create 5 enemy ships
 {
   if (Screen == 1)
   {
       s[z].display();
   }
  }
}

void keyPressed()       //Movement
{ if (key==CODED) 
{
  if(keyCode==UP)
  { 
    shipY=(shipY)-10;
  }
  else if(keyCode==DOWN)
  { 
    shipY=(shipY)+10;
  }
}
}

class Ships
{
  float xposition, yposition, speed;
  int spriteSelector;
  Ships ()
  {
    command();
  }

void command()
{
  yposition = (int) random(30,561);
  xposition = 600; 
  speed = 5;
}

void display()
{  
  spriteSelector = (int) random(1,6);
  if (spriteSelector>0)
  {
    if (spriteSelector<2)
    {
    Enemy1 = loadImage("Smallship2.png");
    image(Enemy1, xposition, yposition);
    xposition = xposition-speed;
    }
  }
  if (spriteSelector>1)
  {
    if (spriteSelector<3)
    {
    Enemy1 = loadImage("Smallship3.png");
    image(Enemy1, xposition, yposition);
    xposition = xposition-speed;
    }
  }
  if (spriteSelector>2)
  {
    if (spriteSelector<4)
    {
    Enemy1 = loadImage("Smallship4.png");
    image(Enemy1, xposition, yposition);
    xposition = xposition-speed;
    }
  }
  if (spriteSelector>3)
  {
    if (spriteSelector<5)
    {
    Enemy1 = loadImage("Smallship5.png");
    image(Enemy1, xposition, yposition);
    xposition = xposition-speed;
    }
  }
  if (spriteSelector>4)
  {
    if (spriteSelector<6)
    {
    Enemy1 = loadImage("Smallship6.png");
    image(Enemy1, xposition, yposition);
    xposition = xposition-speed;
    }
  }
    if (shipX-xposition > 0 & shipY >= yposition) 
    {
    intersect = true;
    }
    if (intersect == true)
     {
       image(Enemy1, shipX, shipY); 
     }
}
}


void mousePressed()        //Start state detection
{
  Screen=1;
}

void timer()               //Timer for score
{
  milliseconds = millis();
  timersecs = milliseconds/100;       //speed of timer
  textSize(20);
  text(timersecs,540, 600);
  text("Score:",480, 600);
  fill(#FFFFFF);
}

Now I've run into a couple of problems. The game loads in the enemy sprites through an array but I don't want it to be a one and done deal. Instead, I want the array to make 5 ships on the screen consistently, every 5 seconds (lets say). How would I do this?

Also, my hit detection is really bad. I tried treating the sprites like rectangles but it seems it didn't work. How would I go about making the collisions between the player controlled sprite and each of the sprites spawned by the array work?

I would like to build a wooden frame with a display that shows gifs and jpgs when it is activated by a touch sensor. I am using an Up core board with win10 for this which really is a nice piece of hardware. I am using the gif library from 01010101's github account, which seems to be the newest version (https://github.com/01010101/GifAnimation) and works with processing 3. Unfortunately this library seems to have a memory leak problem as already discussed in here: https://forum.processing.org/two/discussion/12452/animated-gif-slideshow To be honest this discussion did not help me to fix the memory leak problem with this library. I still get the error message after several gifs are shown. This is my test code I am using to explore possible solutions:

import gifAnimation.*;

Gif myGif;
String[] filenames;
String path;

void setup() {

  fullScreen(P2D);
  frameRate(25);
  imageMode(CENTER);
  path = sketchPath();   
  path = path+"\\files\\GifDiv";       
  filenames = listFileNames(path);
  myGif = new Gif(this, path+"\\"+filenames[int(random(0,filenames.length)-1)]);

}

void draw() {

    if (frameCount == 1 ){
      myGif = new Gif(this, path+"\\"+filenames[int(random(0,filenames.length)-1)]);
      myGif.play();
      println(frameCount);
      println("first Play");
      image(myGif, displayWidth/2, displayHeight/2, myGif.width , myGif.height);    
    } else if (frameCount % 40 == 0){
      myGif.stop();
      myGif.dispose();     
      myGif = null;
      background(0);
      println(frameCount);
      println("clear Cache");
  } else if (frameCount % 40 == 1){
      myGif = new Gif(this, path+"\\"+filenames[int(random(0,filenames.length)-1)]);
      myGif.play();
      println(frameCount);
      println("new Play");
      image(myGif, displayWidth/2, displayHeight/2, myGif.width , myGif.height);
  } else{
    println(frameCount+" just Counting Frames");
    image(myGif, displayWidth/2, displayHeight/2, myGif.width , myGif.height);
  }

}

String[] listFileNames(String dir) {
  File file = new File(dir);
  if (file.isDirectory()) {
    String names[] = file.list();
    return names;
  } else {
    // If it's not a directory
    return null;
  }
}

The code might seem odd, but I wanted to test what happens when at one frame in time no gif is shown, disposed and set to null. My hope was that in this moment the memory would be cleared. It wasn't!! The source of this problem might be the libraries dispose() command, which might not totally clear the memory!? But this is the point where it ends for me as I am too stupid to write pure Java-Code, possibly fix this and compile another version of the library. So my hope is to find somebody here who is library coder and might be willing to help!

Best, Tim

Here is code:

PImage light, screen, bg, lightImage, mask;
PGraphics pg, lightMask;
int up, down, right, left;
float x, y, speed = 1;
color randomColor;
float camX=0, camY=0;
float  Ox1, Ox2, Oy1, Oy2;
int globalMX, globalMY;
void setup() {
  size(480, 270, P3D);
  frameRate(60);
  background(0);
  bg = loadImage("https://" + "ichef.bbci.co.uk/images/ic/480xn/p01lckx1.jpg");
  lightImage = loadImage("https://" + "i.stack.imgur.com/NaD6F.png");
  bg.resize(width, height);
  light = bg.copy();
  lightMask = createGraphics(width, height);
  randomColor = color(random(256), random(256), random(256));
  bullets = new ArrayList<Bullet>();
  reloadLights();
  x = width/2;
  y = height/2;
}
void draw() {  
  background(0);
  x += (right - left) * speed;
  y += (down - up) * speed;
  Ox1=camX-width+x;
  Ox2=camX+x;
  Oy1=camY-y;
  Oy2=camY+height-y;
  ortho(Ox1, Ox2, Oy1, Oy2);
  println(x + "  " + y);
  imageMode(CORNER);
  image(bg, 0, 0);
  pushMatrix();
  translate(x,y);
  screen = get(0, 0, width, height);
  popMatrix(); 
  fill(0, 125);
  noStroke();
  rectMode(CENTER);
  rect(x, y, width, height);
  screen.mask(lightMask);
  image(screen, 0,0);
  fill(255, 255, 0);
  textAlign(LEFT, TOP);
  textSize(39);
  text(int(frameRate) + " FPS", 5, 5);
  ellipse(globalMX,globalMY,20,20);
  //popMatrix();
}
void reloadLights() {
  pg = lightMask;
  pg.beginDraw();
  pg.background(0);
  pg.blendMode(ADD);
  for (int i = bullets.size()-1; i >= 0; i--) {
    Bullet bullet = bullets.get(i);
    drawLight(bullet.x, bullet.y, bullet.r);
  }
  //mask = pg;
  pg.endDraw();
}
void drawLight(int xL, int yL, int rL) {
 // pushMatrix();
 // translate(x,y);
  pg.imageMode(CENTER);
  pg.image(lightImage, xL,yL, rL, rL);
  //popMatrix();
}
 
void mousePressed() {
  bullets.add( new Bullet(globalMX, globalMY, 50));
  reloadLights();
}
ArrayList<Bullet> bullets;
class Bullet {
  int x, y, r;
  public Bullet(int x_, int y_, int r_) {
    x = x_;
    y = y_;
    r = r_;
  }
}
void keyPressed() {
  if (key == 'a' || key == 'A') {
    left = 1;
  }
  if (key == 'd' || key == 'D') {
    right = 1;
  }
  if (key == 'w' || key == 'W') {
    up = 1;
  }
  if (key == 's' || key == 'S') {
    down = 1;
  }
}
void keyReleased() {
  if (key == 'a' || key == 'A') {
    left = 0;
  }
  if (key == 'd' || key == 'D') {
    right = 0;
  }
  if (key == 'w' || key=='W') {
    up = 0;
  }
  if (key == 's' || key == 'S') {
    down = 0;
  }
}
void mouseMoved() {
  globalMX=mouseX;
  globalMY=mouseY;
}

PImage[] runner = new PImage[6];
int frame;
int displaytimer;
void setup() {
  frameRate(80);
  size(500, 500);
  for (int i = 0; i < runner.length; i++) {
    runner[i] = loadImage("run"+(i+1)+".jpeg");
  }
}
void draw() {
  background(255);
  image(runner[frame], mouseX, mouseY, 100, 100);
  if (millis()>displaytimer+180) {
    displaytimer = millis();
    if (frame<5) {
      frame = frame+1;
    } else {
      frame = 0;
    }
  }
}

Note that the sequence is of 6 images named "run1" to "run6" in a consecutive order.

Any help would be greatly appreciated.

index.html

    <html>
    <head>

      <meta charset="UTF-8">
      <script language="javascript" type="text/javascript" src="libraries/p5.js"></script> 
      <script language="javascript" src="libraries/p5.dom.js"></script>
      <script language="javascript" src="libraries/p5.sound.js"></script>
      <script language="javascript" src="images.js"></script>
      <script language="javascript" src="images_2.js"></script>
    </head> 
      <!-- this line removes any default padding and style. you might only need one of these values set. -->
      <style> 
      </style>

    </head>

    <body>

    </body>
    </html>

============================================================================ images.js

    var bubbles = [];
    var flowers = [];

    function preload(){

        for(var i = 0; i< 6; i++){
            flowers[i] = loadImage("fet_pictures/" + i + ".jpg");
        }

    }

    function windowResized(){
        resizeCanvas(windowWidth, windowHeight);
    }

    function setup(){
        createCanvas(windowWidth, windowHeight);
    }

    function mousePressed(){
        var r = floor(random(0, flowers.length));
        var b = new Bubble(mouseX, mouseY, flowers[r]);
        bubbles.push(b);
    }

    function draw(){
        background(0);
        for(var i = bubbles.length -1; i >= 0; i--){
            bubbles[i].update();
            bubbles[i].display();
        }
    }

============================================================================ images_2.js

        function Bubble(x, y, img){
        this.x = x;
        this.y = y;
        this.img = img;
        this.lifespan = 255;

        this.display = function(){
            imageMode(CENTER);
            image(this.img, this.x, this.y);
            this.img.resize(100, 0);
            //ellipse(this.x, this.y, 48, 48);
        }

        this.update = function() {
            this.x = this.x + random(-1, 1);
            this.y = this.y + random(-1, 1);
           }
        }

This is how I calculated the translation: trans += getStriplength() * deltascale getStriplength returns the length of the whole strip of objects while deltascale is the amount that is reduced each time when the mouse scrolls. Its default value is 0.2, which means the objects will be either 1.02 times bigger or 0.98 times smaller than the original. Therefore I am getting the difference of the lengths of the strip before and after, and adding it to the offset. However as I mentioned before it doesn't work the more you zoom in/out. Any help will be appreciated!

Code:

PImage backgroundImage;
PFont font;
int x = 0;
int xoffset = 0;
int deltax = 5;
float scale = 512/30;
float deltascale = 0.02;
ArrayList<celestialObject> ObjectList;
String[] objectfile;
String[] configfile;
int savetimer = 0;
static int screenwidth = 1920;
static int screenheight = 1080;
float trans = 0;

class celestialObject {
  String name;
  float diameter;
  String unit;
  String sprite;
  PImage img;
  int wid;
  int hei;
  int xpos;

  celestialObject(String Oname, float Odiameter, String Ounit, String Oimg) {
    name = Oname;
    diameter = Odiameter;
    unit = Ounit;
    sprite = Oimg;
    img = loadImage(Oimg);
    wid = img.width;
    hei = img.height;
  }
}

void setup() {
  size(1920, 1080);
  frameRate(200);
  objectfile = loadStrings("objects.txt");
  configfile = loadStrings("config.ini");
  backgroundImage = loadImage("background.png");
  font = createFont("Franklin Gothic Book Regular.ttf", 32);
  textFont(font, 32);
  textAlign(CENTER, CENTER);
  imageMode(CENTER);
  ObjectList = new ArrayList();
  readObjects();
  readConfig();
  loadOffset();
}

void addObject(String Aname, float Adiameter, String Aunit, String Aimg) {
  println("Loading "+Aname);
  if (Aimg.equals("null")) {
    ObjectList.add(new celestialObject(Aname, Adiameter, Aunit, "images/"+Aname+".png"));
  } else {
    ObjectList.add(new celestialObject(Aname, Adiameter, Aunit, "images/"+Aimg));
  }
}

void readObjects() {
  for (int i = 0; i < objectfile.length; i++) {
    String[] currentObject = split(objectfile[i], ",");
    addObject(currentObject[0], float(currentObject[1]), currentObject[2], currentObject[3]);
  }
}

void readConfig() {
  for (int i = 0; i < configfile.length; i++) {
    char slash = configfile[i].charAt(0);
    if (slash != '/') {
      //getting config values based on line number
      if (i == 1) {
        xoffset = int(configfile[i]);
      } else if (i == 3) {
        scale = float(configfile[i]);
      }
    }
  }
}

void loadOffset() {
  //for (int i = 0; i <= xoffset; i++) {
  //  int x = 0 + xoffset;
  //  for ( celestialObject drawObject : ObjectList ) {         
  //    float dia;
  //    if (drawObject.unit.equals("km")) {
  //      dia = drawObject.diameter * 1000;
  //    } else {
  //      dia = drawObject.diameter;
  //    }
  //    int drawWidth = int(scale * dia);
  //    //checks if image is too small to be drawn
  //    if (x+drawObject.img.width >= 0 && x <= 1500) {
  //      int drawWidth = int(scale * dia);
  //      int drawHeight = int(drawWidth * drawObject.hei / drawObject.wid);
  //      if (drawWidth > 0 && drawHeight > 0) {
  //        //drawObject.img.resize(drawWidth, drawHeight);
  //        image(drawObject.img, x+(drawWidth/2), 400,drawWidth, drawHeight);
  //        //calculates font size relative to object's current size
  //        int textSize;
  //        //checks if the name or diameter is longer, then uses the longer one for calculation
  //        if (drawObject.name.length() < str(drawObject.diameter).length()) {
  //          textSize = int(drawObject.img.width/str(drawObject.diameter).length());
  //        } else {
  //          textSize = int(drawObject.img.width/drawObject.name.length());
  //        }
  //        if (textSize > 0) {
  //          textSize(textSize);
  //          float texty = 418+(drawObject.img.height/2);
  //          if (texty < (418+(drawObject.img.height/2))) {
  //            texty = 418;
  //          }
  //          text(drawObject.name, x+(drawObject.img.width/2), texty);
  //          text(drawObject.diameter+drawObject.unit, x+(drawObject.img.width/2), texty+textSize);
  //        }
  //      }
  //    }
  //    drawObject.xpos = x;
  //    x += (drawObject.img.width*0.08 + drawObject.img.width);
  //  }
  //}
}

void draw() {
  image(backgroundImage, screenwidth/2, screenheight/2);
  int x = int(0 + xoffset + trans);
  for ( celestialObject drawObject : ObjectList ) {
    float dia;
    if (drawObject.unit.equals("km")) {
      dia = drawObject.diameter * 1000;
    } else {
      dia = drawObject.diameter;
    }
    int drawWidth = int(scale * dia);
    if (x+(scale*dia) >= 0 && x <= screenwidth) {
      //checks if image is too small to be drawn 
      int drawHeight = int(drawWidth * drawObject.hei / drawObject.wid);
      if (drawWidth > 0 && drawHeight > 0) {
        //drawObject.img.resize(drawWidth, drawHeight);
        image(drawObject.img, x+(drawWidth/2), screenheight/2, drawWidth, drawHeight);
        //calculates font size relative to object's current size
        int textSize;
        //checks if the name or diameter is longer, then uses the longer one for calculation
        if (drawObject.name.length() < str(drawObject.diameter).length()) {
          textSize = int(drawWidth/str(drawObject.diameter).length());
        } else {
          textSize = int(drawWidth/drawObject.name.length());
        }
        if (textSize > 0) {
          textSize(textSize);
          float texty = screenheight/2+18+(drawHeight/2);
          if (texty < (screenheight/2+18+(drawHeight/2))) {
            texty = screenheight/2+18;
          }
          text(drawObject.name, x+(drawWidth/2), texty);
          text(drawObject.diameter+drawObject.unit, x+(drawWidth/2), texty+textSize);
        }
      }
    }
    drawObject.xpos = x;
    x += (drawWidth*0.08 + drawWidth);
  }
  //display deltax
  textSize(32);
  text(str(deltax), screenwidth-50, 10);
  text(str(deltascale), screenwidth-50, 50);
  //display Saved
  if (savetimer > 0) {
    text("Saved", screenwidth-50, 90);
    //text(str(savetimer),1450,130);
  }
  if (savetimer > 0) {
    savetimer -= 1;
  }
  //println(str(scale));
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  if (e < 0) {
    scale *= (1 + deltascale);
    mouseX = xoffset;
    trans -= (getStriplength() * deltascale);
  } else if (e > 0) {
    scale *= (1 - deltascale) ;
    mouseX = xoffset;
    trans += (getStriplength() * deltascale);
  }
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == LEFT) {
      xoffset += deltax;
    } else if (keyCode == RIGHT) {
      xoffset -= deltax;
    } else if (keyCode == UP) {
      deltax += 5;
    } else if (keyCode == DOWN) {
      deltax -= 5;
    }
  }
  if (key == 's') {
    for (int i = 0; i < configfile.length; i++) {
      if (i == 1) {
        configfile[i] = str(xoffset);
      } else if (i == 3) {
        configfile[i] = str(scale);
      }
    }
    saveStrings("config.ini", configfile);
    savetimer = 500;
  } else if (key == 'q') {
    deltascale += 0.02;
  } else if (key == 'a') {
    deltascale -= 0.02;
  }
  if (deltax < 0) {
    deltax = 0;
  } else if (deltascale < 0) {
    deltascale = 0;
  }
}

float getStriplength() {
  float x = 0;
  int i = 0;
  for ( celestialObject getObject : ObjectList ) {
    float dia;
    if (getObject.unit.equals("km")) {
      dia = getObject.diameter * 1000;
    } else {
      dia = getObject.diameter;
    }
    int drawWidth = int(scale * dia);
    x += (drawWidth*0.08 + drawWidth);
    i++;
    //println(ObjectList.size());
    if (i == ObjectList.size()) {
       x -= drawWidth*0.08;
    }
    //println(x);
  }
  //println(x);
  return x;  
}

Here is my code:

var target;

// Array the stores all targets
var targets = [];

// x and y spawn coordinates for targets
var x;
var y;
var targetX;
var targetY;

// Image that shows when a target is hit, an explosion etc
var deathImage;

function setup() {
    createCanvas(windowWidth, windowHeight);
    frameRate(2);
    imageMode(CENTER);
    cursor(CROSS);
}

function draw() {

    x = int(random(windowWidth));
    y = int(random(windowHeight));
    targetImage = createImg('assets/test.png').hide();

    targets.push(new Target(x, y, targetImage));
    fill(0, 255, 255);
    rectMode(CORNER);
    rect(0, 0, width, height);
    for (var i = 0; i < targets.length; i++) {
            targets[i].display();
    }

}

// Target Class
function Target(x, y, targetImage) {
    this.display = function() {
            this.targetX = x;
            this.targetY = y;
            this.TargetPicture = targetImage;

            /* When I use an image here it only shows in a single frame and then dissapears, the targets[i].display(); for loop fails to redraw all the targets */
            image(this.TargetPicture, this.targetX, this.targetY, 200, 200);

            /*However if I draw rectangles it works as expected            
            fill(255,0,0);
            rectMode(CENTER);
            rect(x,y,200,200); */
    }
}

function mouseClicked() {
    for (var i = 0; i < targets.length; i++) {
        var distanceChecker = dist(mouseX, mouseY, targets[i].targetX, targets[i].targetY);
        // If target is hit
        if (distanceChecker < 150) {
            fill(255, 0, 255);
            // Show explosion when target hit
            deathImage = createImg('assets/deathImage.png').hide();
            image(deathImage, mouseX, mouseY, 300, 300);
            // Remove target from array
            targets.splice(i, 1);
        }
    }

}

What am I missing? Thanks in advance!

So I have a few questions:
1) How do I write it so that the wheel image is the one that rotates?
2) Why does the bg image that is incorrectly rotating rotating from the (0,0) position instead of the center, when I specified imageMode(CENTER)?
3) How would you recommend making the image rotate once per click, instead of whenever the mouse is pressed?

Here's my code:

PImage bg;
PImage wheel;
float x = width;
float y = height;
int a = 0;

void setup() {
background(255);
size(750, 500);
imageMode(CENTER);
bg = loadImage("bg1.png");
wheel = loadImage("colorwheel.png");
}
void draw() {
background(255);
if(mousePressed){
a = (a+1);
}
wheel(750,0,a);
image(bg, 375, 250);
}
void wheel(int xloc, int yloc, int angle){
image(wheel, xloc, yloc);
rotate(angle);
}

Thank you!

here the code:

PImage img, imgR, imgG, imgB, imgF;
int phase=1, phase2=phase*2, it=0;
String imgName="yolandi_2_-8000000";
String imgType="jpg";

void setup() {
  size(850, 1274, P2D);
  imageMode(CENTER);
  img=loadImage(imgName+"."+imgType);
  background(0);
  imgR=createImage(img.width, img.height, ARGB);
  imgG=createImage(img.width, img.height, ARGB);
  imgB=createImage(img.width, img.height, ARGB);
  imgF=createImage(img.width, img.height, ARGB);
}

void draw() {
  it++;
  img.loadPixels();
  phase+=1;
  phase2=phase*2;
  for (int i=0; i<img.width-phase; i++) {
    for (int j=0; j<img.height-phase; j++) {
      if (i<width && j+(2*phase2)<height) {
        imgR.pixels[i+j*img.width]=color(red(img.pixels[i+j*img.width]), 0, 0);
        imgG.pixels[i+(j+phase)*img.width+phase]=color(0, green(img.pixels[i+j*img.width]), 0);
        imgB.pixels[i+(j+phase2)*img.width+phase2]=color(0, 0, blue(img.pixels[i+j*img.width]));
        imgF.pixels[i+j*img.width]=color(
          red(imgR.pixels[i+j*img.width]), 
          green(imgG.pixels[i+j*img.width]), 
          blue(imgB.pixels[i+j*img.width]));
      }
    }
  }
  println(it, phase, phase2);
  img.updatePixels();
  image(imgF, width/2, height/2);
  saveFrame("C:/Users/pietr/Documents/Processing/Sketch/effettiImmagini/imagePhase/frames/"+imgName+"+phase+"+phase+"_"+it+"."+imgType);
  if (it>=30) {
    println("fine");
    exit();
  }
}

It doesn't seem to be working properly. Or am I missing something?

(This is my first post in this forum, so sorry for any confusion)

For the most part, I do understand what it happening. I just want to know these few things will not work and how to fix them. Thank you in advance!

I've used the following examples to help me out so far:

https://forum.processing.org/two/discussion/4229/help-with-dragging-and-dropping-multiple-images-in-an-array https://processing.org/discourse/beta/num_1256052533.html

My code is as follows:

String[] images = {
  "Sprite.png", "Sprite2.png", "Sprite3.png"
};

float[] positions =new float [images.length*2] ;

// 0,1,2,3,4,5
// 4,5,6,7,8,9
float bx;
float by;
int bs = 40;
int bz = 30;
boolean bover = false;
boolean locked = false;
float bdifx = 0.0; 
float bdify = 0.0; 
PImage[] image1 = new PImage [images.length]; 
float newx, newy;
int whichImage;

void setup() 
{
  imageMode (CENTER);
  size(600, 400);
  bx = width/2.0;
  by = height/2.0;

  for (int i=0; i < images.length; i++) {
    image1 [i]= loadImage(images[i]); //loads in the images
   // image (image1[i], random(width), random(height), 50, 50) ;
  } 

  for (int j=0; j < images.length*2; j+=2) { //Positions for Images
    positions[j]= random(100);
    positions[j+1]= random(100);
  }
}

void draw() 
{ 
  background(255);
  // Test if the cursor is over the box 
  for (int i=0; i < images.length; i++) {
    if (mouseX > positions[i*2]-bs && mouseX < positions[i*2]+bs && 
      mouseY > positions[i*2+1]-bs && mouseY < positions[i*2+1]+bs) 
    {
      println ("mouseover image: "+i);
      whichImage=i;

      bover = true;  
      if (!locked) 
      { 
        stroke(255); 
        fill(153);
      }
      break;
    } 
    else
    {
      stroke(153);
      fill(153);
      bover = false;
    }
  }
  for (int j=0; j < images.length; j++) {
    image (image1[j], positions[j*2], positions[j*2+1], 50, 50) ;
  }
}
void mousePressed() {
  if (bover) { 
    locked = true;
  } 
  else {
    locked = false;
  }
}
void mouseReleased() {
  locked = false;
}
void mouseDragged() {
  if (locked) {
    newx = mouseX; 
    newy = mouseY;
  } 
  positions [whichImage*2] = newx;
  positions [(whichImage*2)+1] = newy;
}

String[] images = {"life1.png", "life2.png", "life3.png"};
PImage Background; 
float[] positions =new float [images.length*2] ;
float bx;
float by;
int bs = 37;
int bz = 37;
boolean bover = false;
boolean locked = false;
float bdifx = 0.0; 
float bdify = 0.0; 
PImage[] image1 = new PImage [images.length]; 
float newx, newy;
int whichImage;

void setup() 
{
  imageMode (CENTER);
  fullScreen();
  Background = loadImage("Background.png");
  bx = width/2.0;
  by = height/2.0;
  for (int i=0; i < images.length; i++) {
    image1 [i]= loadImage(images[i]); 
    image (image1[i], random(width), random(height), 75, 75) ;
  } 
  for (int j=0; j < images.length*2; j+=2) {
    positions[j]= random(width);
    positions[j+1]= random(height);
  }
}

void draw() 
{ 
  background(Background);
  for (int i=0; i < images.length; i++) {
    if (mouseX > positions[i*2]-bs && mouseX < positions[i*2]+bs && 
      mouseY > positions[i*2+1]-bs && mouseY < positions[i*2+1]+bs) 
    {
      println ("mouseover image: "+i);
      whichImage=i;
      bover = true;  
      if (!locked) 
      { 
        stroke(255); 
        fill(153);
      }
      break;
    } 
    else
    {
      stroke(153);
      fill(153);
      bover = false;
    }
  }
  for (int j=0; j < images.length; j++) {
    image (image1[j], positions[j*2], positions[j*2+1], 75, 75) ;
  }
}
void mousePressed() {
  if (bover) { 
    locked = true;
  } 
  else {
    locked = false;
  }
}

void mouseReleased() {
  locked = false;
}

void mouseDragged() {
  if (locked) {
    newx = mouseX; 
    newy = mouseY;
  }
  positions [whichImage*2] = newx;
  positions [(whichImage*2)+1] = newy;
}

It is working well, you can drag and drop the pictures around, but the problem is that If you are holding one picture and drag it over another, it drops that piece and picks up the one that you were moving over. Why does this happen, and how can I fix it?

Can someone please have a look at this break down of the code and tell me where I am going wrong?

`PGraphics canvas; int rect[] = new int[1]; int rect2[] = new int[1];

void setup() { size(1000, 750); canvas = createGraphics(500, 500); imageMode(CORNERS); rect[0] = 100; rect2[0] = 100; }

void draw() { canvas.beginDraw(); canvas.background(100); canvas.line(10, 0, 1100, 1100); for(int i = 0; i < rect.length; i++) canvas.rect(rect[i], rect2[i], 10, 10); canvas.endDraw(); image(canvas, 50, 50, 500, 500); }

void mouseClicked() { rect = append(rect, mouseX); rect2 = append(rect2, mouseY); println(mouseX); } `

Thanks

Here you can take a look on this sample of my project : http://paste2.org/w4G3etCZ

Have a good day :)

I'm having trouble with a bit of code that looks like it should work fine, but doesn't.

I want to draw a texture on vertices, but all of this is happens inside a PGraphics window. In the code below, the shape gets drawn just fine with a fill, but if it's a texture then nothing works. However, when drawn outside of the window the texture works just fine. You can check by using comment/uncomment on each section.

Is this a bug? Or is there some unknown solution?

PImage photo;
PGraphics mf;

void setup(){
  size(800, 600, P3D);
  mf = createGraphics(500, 315, P3D);
  background(100);
  photo = loadImage("test.png");
  textureMode(NORMAL);
  imageMode(CENTER);
}

void draw(){
  background(150);

  //pushMatrix();
  //translate(width/2, height/2);
  //noStroke();
  //beginShape();
  // texture(photo);
  // vertex(-mf.width/2, -mf.height/2, 0, 0);
  // vertex(mf.width/2, -mf.height/2, 1, 0);
  // vertex(mf.width/2, mf.height/2, 1, 1);
  // vertex(-mf.width/2, mf.height/2, 0, 1);
  //endShape();
  //popMatrix();

  mf.beginDraw();
   mf.background(50);
   mf.pushMatrix();
   mf.translate(mf.width/2 + 10, mf.height/2 + 10);
   mf.noStroke();
   mf.beginShape();
     //mf.texture(photo);
     mf.fill(255);
     mf.vertex(-mf.width/2, -mf.height/2, 0, 0);
     mf.vertex(mf.width/2, -mf.height/2, 1, 0);
     mf.vertex(mf.width/2, mf.height/2, 1, 1);
     mf.vertex(-mf.width/2, mf.height/2, 0, 1);
   mf.endShape();
   mf.popMatrix();
  mf.endDraw();

  pushMatrix();
  translate(width/2, height/2);
  image(mf, 0, 0);
  popMatrix();
}

Can someone suggest how to achieve the same effect with a BackgroundImage.png instead of a white rectangle? I've read a bunch of entries on fade in/out with images but no luck (but I'd say this must have been answered somewhere already.) uploaded the full code here; but below is the relevant part:

    fill(255, 17);
      rect(0, 0, width, height);
      sceal.firstLoop(); 

and firstLoop() is a method of Storyboard.pde which says:

float time = 0;
float a = 0;
float b = 50;
int nowFrame = 0;
int numFrames = 55;
int numConceptPics = 12;
PImage[] story = new PImage[numFrames];
PImage[] conceptPics = new PImage[numConceptPics];
//PImage[] bgImg= new PImage[1];
PImage taunt;

boolean redraw = true;
boolean toFade = false;
boolean showTaunt = false;
boolean runFirstLoop = true;
int setState = 0;

class Storyboard {




  void firstLoop() {

    if (setState ==0) {

      pushMatrix();
      image(story[nowFrame], 0, 0);

      popMatrix();
    }


    if (setState ==1) {

      pushMatrix();
      imageMode(CORNER);
      image (conceptPics[0], 0, 0);
      popMatrix();
    }
  }
}

My code at the moment look like that maybe I am not in the good pats to accomplish what I want. Thank in advance for information.

PImage [] icone = new PImage[6]; 
float im1;
float im2;
float x;
float y; 
float s; 
float s2;
int ra;

int rx;
int ry;
int rs;

void setup() {
  frameRate(1);
  size(1000, 1000);
  imageMode(CENTER);
  for (int i = 0; i < icone.length; i++) {
    icone[i] = loadImage (i+".png");
  }
} 

void draw() {
  background(200);

  ImagePosition();
  ImagePosition();
  ImagePosition();
  ImagePosition();
  ImagePosition();
  ImagePosition();
  ImagePosition();
}

void ImagePosition() {
  ra=int(random(6));
  x=(random (0, 10))*100;
  rx = round(x);
  y=(random (0, 10))*100;
  ry = round(y);
  s=(random (1, 5))*100;
  rs = round(s);
  image(icone[ra], rx, ry, rs, rs);

  if (s< 200 ) {
    float i=0;
    float rx2; 
    float ry2; 
    i=0;
    rx2=rs;
    ry2=rs;

    while (i < 9) {
      image(icone[ra], rx+rx2, ry+ry2, rs, rs);
      i= random(0, 10);

      float[] a = {-rs, 0, rs};
      float rb= ( random(0, 2));
      int rb2 = round(rb);
      rx2= rx2+ a[rb2];
      float[] b = {-rs, 0, rs};
      float rby= ( random(0, 2));
      int rb3 = round(rby);
      ry2= ry2+ b[rb3];
    }
  }
}

Any idea on how to fix this? Or do I need my eyes checked? Thanks!

PImage cir;
    void setup() {
      size(400, 400);


      background(255);
      for(int x = 0; x < 100; x++)
      {
        PGraphics pg = createGraphics(200,200);
        pg.beginDraw();
        pg.background(255,255,255,0);
        pg.fill(random(255), random(255), random(255));
        pg.noStroke();
        pg.ellipse(100,100,50,50);
        pg.filter(BLUR,5);
        pg.endDraw();
        cir = pg.get();
        imageMode(CENTER);
        image( cir, random(width), random(height));
       }
        println("done");
    }
    void draw() {

    }

I tried using CodePen and uploading the images to imgur but this doesn't seem to work. The Chrome console says '403 forbidden' error from imgur.

Here is a barebones sketch which does not work.

http://codepen.io/marcusround/pen/ojQeyR/

Does anybody have a solution? Thanks!

"like

this

example"

instead of

"like this example"

I read that it's possible to make a box using two more var. in text() but my text is all oriented by the center, and apparently, this method only allow me to orient it by the top left edge.(tried imageMode(CENTER); and textAlign(CENTER) none of them seem to affect the text using a box to wrap inside it.

SO, is there another way to do that OR there is a way I can use the box AND still orient it by the center? Thank you for your time :)