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);
}

I have three jpgs named img1, img2, img3.

img1=loadImage("pic1.jpg")
img2=loadImage("pic2.jpg")
img3=loadImage("pic3.jpg")`

The variable names are in a list.

list1=["img1","img2","img3"]`

I wanted to iterate through the list using a for loop and call each image in sequence to run a simple animation, but I continue to get the error.

for i in list1:
      image(i, 100, 100)

Is this not possible with processing or is there a different way to make this work?

https://www.processing.org/reference/selectInput_.html

The issue I am having is that the code in my Setup and Draw function is starting to execute before I select a file.

I need my sketch to wait until I choose a file then proceed.

Any ideas?

Thanks.

Phil

    void setup() {
      selectInput("Select a file to process:", "fileSelected");

      size(img.width, img.height);


    }

    void draw() {  



    }




    void fileSelected(File file) {
      if (file == null) {
        println("Window was closed or the user hit cancel.");
      } else {
        println("User selected " + file.getAbsolutePath());
        img = loadImage(file.getPath());  // Load the image into the program  


      }
    }

var img;  // Declare variable 'img'.

function setup() {
  createCanvas(1000, 1000);
  img = loadImage("dillustration-01.png");  // Load the image
}

function draw() {
  // Displays the image at its actual size at point (0,0)
  image(img, 0, 0);
  // Displays the image at point (0, height/2) at half size
  //image(img, 0, height/2, img.width/2, img.height/2);
}

that "Processing's PApplet has a String[] field called args", so I'm wondering if anyone has managed to do an application that can use an argument on startup :

I mean I would like to double click on a gif and open a custom program made with processing to display it. Has anyone done this before ?

My program gets stuck in setup loading my image files - (heres the code for reference)

for (int n = 0; n < imageCount; n++) { images[n] = loadImage(prefix + n + fileformat); }

Is there a more memory efficient way to work with a large number of images? It still seems strange that the program takes significantly more memory than the file size of the images. I've been able to make it work with an image count ~1000.

Thanks! B

Can somebody help me?

My JS code:

var canvas;
var backgroundimage;

var type1_Rect = [];
var type1_Rect_amount = screen.width * 0.2;
var type1_Rect_speed = 1;
var type1_Rect_size = 1;

//-----------------------
var type2_Rect = [];
var type2_Rect_amount = screen.width * 0.1;
var type2_Rect_speed = 0.7;
var type2_Rect_size = 2;
var j = 0;
//------------------------

var i = 0;
function windowResized() {
    resizeCanvas(window.innerWidth, window.innerHeight);
}
function setup() {
    backgroundimage = loadImage("wallpaper/wallpaper.png"); //The Backgroundimage

    canvas = createCanvas(window.innerWidth, window.innerHeight);
    canvas.position(0, 0);
    canvas.style('z-index', '-10');

    for (i = 0; i < type1_Rect_amount; i++) {
    type1_Rect[i] = {
        x: random(0, screen.width),
        y: random(0, screen.height),

        display: function() {
            fill(255);
            noStroke();
            rect(this.x, this.y, type1_Rect_size, type1_Rect_size);
        },

        move: function() {
            this.y = this.y - type1_Rect_speed;

            if(type1_Rect[i].y <= 0) {
                type1_Rect[i].y = window.innerHeight;
            }
        }
    }
}
i = 0;

//-------------------------------------
for (j = 0; j < type2_Rect_amount; j++) {
type2_Rect[j] = {
    x: random(0, screen.width),
    y: random(0, screen.height),

    display: function() {
        fill(255);
        noStroke();
        rect(this.x, this.y, type2_Rect_size, type2_Rect_size);
    },

    move: function() {
        this.y = this.y - type2_Rect_speed;

        if(type2_Rect[j].y <= 0) {
            type2_Rect[j].y = window.innerHeight;
        }
    }
}
}
j = 0;
 //---------------------------------------
}

function draw() {

image(backgroundimage, 0, 0);      //Backgroundimage

fill(255);
      //text(screen.width, 50, 50);
      //text(type1_Rect_amount, 50, 70);
      //text(type2_Rect_amount, 50, 90);

while (i < type1_Rect_amount) {
type1_Rect[i].display();
type1_Rect[i].move();

i++;
}
i = 0;

      //----------------------------
while (j < type2_Rect_amount) {
type2_Rect[j].display();
type2_Rect[j].move();

j++;
}
j = 0;
      //----------------------------
}

I'm trying to make a slide show-type program that loads images into an array and displays them randomly. I've worked that out on a smaller scale but with the full array (1714 images) it runs out of memory. Any ideas on how to optimize this? Is there a way to randomly load a smaller number of images into the array as I go along, like randomized buffering?

PImage [] images = new PImage [1714];


void setup() {
  fullScreen;
  noCursor();
  for (int i = 0; i < images.length; i++) {
    images[i] = loadImage(i+".jpg");
  }
}

void draw() {
  image(images[int(random(1714))], 0, 0, width, height);
  frameRate(24);
}

Thank you!!

I am looking for ways to do scrolling slides. Say, I had a series of gif images or png images as frames. and as I slide down, those images will be loaded, working like an animation. I been searching on this Forum threads, but not really worked out. Any ideas? Thanks for your time on this.

I want to read JSON and images in my p5.js sketch,
and JSON has images information (number of files, names, id).
So I write a code and JSON as follows, but it doesn't work properly.
I think JSON value is not read normally or not on time in preload function.
I wonder how I can resolve this problem. Please your help!

var data;  
var images = [];  
var itemNum;  

function preload() {  
    data = loadJSON("./data.json");  

    itemNum = Object.keys(data).length;  
    console.log(itemNum); // output "0", but this is actually "3"  

    for (var i = 0; i < itemNum; i++) {  
        images[i] = loadImage("./images/image" + data[i].imageId + ".png");  
    }  
}  

function setup() {  
    createCanvas(100, 100);  
    image(images[0], 0, 0);  
}  

[{
        "name": "AAA",
        "imageId": "100"
    },
    {
        "name": "BBB",
        "imageId": "200"
    },
    {
        "name": "CCC",
        "imageId": "300"
    }
]

Here is the link to the code (I couldn't figure out how to indent the code on here): https://paste.ofcode.org/sBSTST866aqUv5xkzWJ84g

I tried doing if (pandaX==xPosCandy && pandaY==yPosCandy ) But it didn't work. I also tried doing if (pandaX>xPosCandy && pandaY<yPosCandy ) but it says YOU TOUCHED THE CANDY too soon.

Any help would be appreciated, and let me know if you need more code. Thanks!

i'm new here, but i cannot find the answer about my question.

I've writen a program with some text-entries. The coordinates of the text are calculated by a for-loop

for (i=0;i<14;i++){
   StrStart=tijdStart[i].substring(0,IntstrTemp);  
     IntstrTemp=tijdStop[i].indexOf(":");
     StrStop=tijdStop[i].substring(0,IntstrTemp);
     text(StrStart+" t/m "+StrStop+" u",(i*85)+10,215+yTranspose);
     WeatherPicture = loadImage("http://" + "openweathermap.org/img/w/" + code[i] + ".png");
     image(WeatherPicture,(i*85)+10,210+yTranspose,60,60);
     text("vocht: "+vochtigheid[i]+"%",(i*85)+10,270+yTranspose);

etc

The first time the program runs, everything is at the right place, but after a minute, the program gets an update from openweathermap.org and prints the info again.

The info is now placed to the left.. Everything is out of order...

1st picture is the right alignment, second picture is after 1 minute....

I hope you can give me some answer what to do.

Thanx

I tried to use sketchpad.cc but I gave up as it doesn't allow me to load mp3 files to their assets folder.

The idea is to load a sound file but I am having issues accessing the files from the assets source as demo by @GoToLoop in previous posts. I am not sure what I am doing wrong or what I am missing. I am trying images and no success. What I am missing?

This is what I have:

"use strict";

const SUBFOLDER = 'assets/';
let original;

function preload(){
  original = loadImage('http://"+"ashemag.com/wp-content/uploads/2016/03/Classy-Sunglasses-for-summer-03-300x300.jpg');}

  //NOTICE I also tried to loaded from hte resource folder
  //original = loadImage(SUBFOLDER + 'original.jpg');
}

function setup() {

  createCanvas(original.width, original.height);

}

function draw() {
  background(original); 
}

My html file is like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Made with Thimble</title>
  <link rel="stylesheet" href="style.css">

    <script async src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>

  <!--<script language="javascript" type="text/javascript" src="https://"+"cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.dom.js"></script>
<script async language="javascript" type="text/javascript"  src="https://"+"cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.sound.js"></script>-->

  <script defer src="sketch.js"> </script>
</head>
<body>

  <h1>Welcome to Thimble</h1>
  <div id="supercanvas"></div>
  <p>Make something <strong>amazing</strong> with the web!</p>
</body>

So when I try running the js + html, I get a "Loading..." but nothing happens. Is this CORS related despite I am running in thimbleproject?

CORS relate comment: https://forum.processing.org/two/discussion/comment/95739/#Comment_95739

Kf

Additional but not relevant: https://forum.processing.org/two/discussion/21532/dom-interfering-with-sketch-container/p1

I'm drawing some objects on canvas but if later I change the background image on demand, then already drawn objects are behind the background image. How to bring already drawn objects in front. Below is the sample code i'm using to change the background image.

function draw() { if(chnBg){ //if change background is clicked loadImage("images/Grid_Image.png",function(bg){
background(bg);
}); } }

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!

What am I doing wrong? Error

(if I print the value, it's ok).

def setup():

 photo = loadImage("Photo.jpg")
 print(photo.height)
 image(photo, 0, 0)

Thank you!

I am very new to p5.js and programming in general. I am trying to create an image slider in p5.js, but i am running into a problem. I want the image slider to function as an HTML object so when you click on the image it will shift to the next image. In order to make it into an HTML object I have to use the createImg(), right? But this function does not work with the variables I need for the image slider, I think because HTML objects are only drawn once.

Your assistance would be very much appreciated!

This is the code I have so far (hope I did that display as code thing right, it doesn't show yet)

var img = [];
var index = 0;
var lala;

function preload(){

  img[0] = loadImage('afbeelding0.jpg');
  img[1] = loadImage('afbeelding1.jpg');
}

function setup(){
  createCanvas(displayWidth,displayHeight*2);
}

function draw(){

  lala = createImg(img[index]);

  lala.position(50,50);
  lala.mousePressed(next);

  if (index == img.length){
    index = index - img.length;
  }
  print(index)
}

function next(){
  index = index + 1;
}

function gotFile(file){

var img = file.data image(img,0,0) }

I downloaded Processing, opened the code, put my image in the sketch's "data" folder and added the img = loadImage("img0.jpg"); line to the code under void setup(), but the program reterns an error:

"The file "img0.jpg" is missing or inaccessible, make sure the URL is valid or that the file has been added to your sketch and is readable. Could not run the sketch (Target VM failed to initialize). "

Thank you

Code I'm using is approximately: var path = "assets/video_placeholder.jpg" var imgHandler = loadImage(path); tint(255, 126); image(imgHandler, 200, 200, 450, 450);

Is this expected? Other than using DOM to load images and applying CSS to control opacity, is there any better way to give transparency to images?

thx!

PImage[] lol;
PImage thing;

void setup() {
  size(500,300);

  thing = loadImage("c_0.png");
  loadImages(lol, 12);
}

void loadImages(PImage[] p1, int size) {
  p1 = new PImage[size];

  for(int i = 0; i < size; i++) {
    p1[i] = thing;
  }
}

void draw() {
  image(lol[3], 30, 40);
}

However, this gives me a NullPointerException. Why? Can't I initialize the PImages inside a method?

Thank you for any help :)

In one of my programs I am loading three images on runtime from set of images in a folder. The images are changing runtime. Raspberrypi is fast enough to run the code and atleast load three images of each less then 150kb and of resolution 1260x760.

But my output becomes extremely slow while loading these images together. Loading one image runs smooth, two slower and three super slow. I have no guess about why is processing not able to run fast when Raspberypi is capable to running the code. The same code runs with perfect speed on my laptop in windows.

Part of the code is as under :

  //Load Images
  imgA = loadImage(path+ displayuserid +"/"+ displayobjectid +"/" + (imageno)%36 +  ".jpg");
  imgB = loadImage(path+ displayuserid +"/"+ displayobjectid +"/" + (imageno+1)%36 +  ".jpg");
  imgC = loadImage(path+ displayuserid +"/"+ displayobjectid +"/" + (imageno+2)%36 +  ".jpg");     


    //Display Images
    imgA.resize(0,250);
    image(imgA, width/2 - imgA.width/2, height/2 + height/2 - imgA.height);      


     pushMatrix();
     translate(width/2,height/2);
     rotate(90*TWO_PI/360);
     imgB.resize(0,250);
     image(imgB, -imgB.width/2, height/2-imgB.height);
     popMatrix();

     pushMatrix();
     translate(width/2,height/2);
     rotate(-90*TWO_PI/360);
     imgC.resize(0,250);
     image(imgC, -imgC.width/2, height/2-imgC.height);
     popMatrix();  

var bg;
var backgroundLoaded = false;

function setup() {
  bg = loadImage("assets/moonwalk.png");
  createCanvas(720, 400);
}

function draw() {
  // this works, loads the background image on every cycle and overrwites my ellipses:
  // background(bg);

  if (backgroundLoaded == false) {
    // this works, turns the screen red, ellipses are not overwritten
    // background(255, 0, 0);
    // but this gives me a white screen:
    background(bg);
    backgroundLoaded = true;
  }

  ellipse(mouseX, mouseY, 10);
}

PImage sourceImg;
int dw, dh;

void setup () {
  sourceImg = loadImage("test2.jpg");
  surface.setResizable(true);
  dw = sourceImg.width;
  dh = sourceImg.height;
  surface.setSize(dw, dh);
  background(sourceImg); //HERE IT GIVES ME THE ERROR
}

void draw() {
  //background(sourceImg); //HERE IT WORKS
}

I don't know how to fix this. I need the background image to be drawn one time at the start of the program. What does that error mean?

Thx in advance!

Code Sample:

    funtion preload(){
      mainFile = loadStrings("assets/MainFile.txt"); //load the text file
      //need it to wait here until loading strings finishes
      for (var i = 3; i < mainFile.length; i++) {
        var newCharacterStr = splitTokens(mainFile[i], ",");
        var newImage = loadImage(newCharacterStr[0]);
      }
    }

MainFile.txt:

player.png,player,5

PImage img = loadImage("background.jpg"); //a 100x100 background image.
size(100,100);
background(img);

However, since size() does not take in variables, how are we suppose to define a background with variable dimensions?

I have tested with the surface.setSize() function but it does not see to work.

Example:

PImage img = loadImage("background.jpg"); //a 100x100 background image.
surface.setSize(img.width,img.height);
background(img);

The error I get is: "The size of this sketch could not be determined from your code. Use only numbers (not variables) for the size() command. Read the size() reference for more details.".

void setup(){ PImage img = loadImage("image.jpg"); size(img.width*2, img.height, P2D); }