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 am at a loss trying to change the color of a png image. Nothing I have tried seems to be working. Here is my code so far (the image (note.png is just a black music eight on a transparent background which you can easily recreate). I want the black color of the note to change, not the background.

var img;

function setup() {
  createCanvas(100, 100);
  pixelDensity(1);
  img = loadImage("../data/note.png");
}

function draw() {
  background(255, 0, 0, 50);      // pinkish
  image(img, 25, 0, 50, 90);

  img.loadPixels();

  for (var x = 0; x < img.width; x++) {
      for (var y = 0; y < img.height; y++) {
             var index = (x + y * width)*4;
         var pixC = img.get(index);
    //     console.log(pixC);
         if (pixC !=  color('255, 0, 0, 50'))    // background color   // I also tried "if (pixC ==  color('0, 0, 0'))" 
             {  
            console.log("OK");      
            pixels[index+0] = 0;
            pixels[index+1] = 255;
            pixels[index+2] = 0;
            pixels[index+3] = 255;           
         }
      }
  }

  img.updatePixels();
  image(img, 25, 0, 50, 90);
}

Thanks for your help.

At the moment, this code doesn't make any sound, though I got the keyTyped() example to trigger changes in a sketch. Is the problem in my use of song.playMode('restart')? Or should I preload() the sound? Or do I need to assign number ASCII values to the samples?

Thanks for any help!

var song;

function setup(){
  song = loadSound('10sec.mp3');
}

function keyTyped() {
    song.playMode('restart');
    if (keyCode === 'a') {
        song.jump(0, 1);
    } else if (keyCode === 's') {
        song.jump(5, 1);
    } else if (keyCode === 'd') {
        song.jump(2, 1);
    }
}

I'm follow Shiffman incredible lessons on using P5js with chrome extensions.

In the example of the Canvas sketch with chrome extensions I followed, I wanted to do some more. Add gifs in the canvas overlaying the top layer of the browser viewing.

My attempt was unsuccessful.. The gif doesn't play..

So what did I do. I used this example to import gif in to p5js put it in my sketch.js as this:

console.log('sketch blah');

var s = function(sketch) {
var img; //declare image

sketch.setup = function() {
  document.body.style['userSelect'] = 'none';
  let h = document.body.clientHeight;
  let c = sketch.createCanvas(sketch.windowWidth, h);
  img = sketch.loadImage("https://" + "media.giphy.com/media/xUOxfnlpG1tsYGFI40/giphy.gif");
  c.position(0,0);
  c.style('pointer-events', 'none');
  sketch.clear();
}

sketch.draw = function() {
  console.log('sketch Looping');
  sketch.image(img, 0, 0);
  //sketch.background(0);
  }
};

var myp5 = new p5(s);

My manifest.json looks like this.

  {
    "manifest_version": 2,
    "name": "Agent Extension",
    "version": "0.0002",
    "web_accessible_resources": [
      "gif/*.gif"
    ],
    "content_scripts": [
      {
        "matches": [
            "<all_urls>"
        ],
        "js": ["p5.js","p5.dom.js","p5.gif.js","p5.gif.min.js", "sketch.js"]

      }
    ],
    "background": {
      "scripts": ["background.js"]
    },
    "browser_action": {
      "default_icon": "img.png"
    }
  }

all the files are in the wright place.

I get this error in the browsers console

sketch.js:18 Uncaught ReferenceError: image is not defined
    at sketch.draw (sketch.js:18)
    at p5.redraw (p5.js:50266)
    at p5.<anonymous> (p5.js:44917)
    at p5.<anonymous> (p5.js:44812)
sketch.draw @ sketch.js:18
p5.redraw @ p5.js:50266
(anonymous) @ p5.js:44917
(anonymous) @ p5.js:44812

I did define it, my guess it is not defined for the browsers standards

I want to have a few 'objects' on the canvas and other types of code taking over the content as end goal.

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

For this 5 seconds,the screen goes black. Instead of that I want to display some little animation which would keep the user active instead of looking at the black empty screen.

How can I do this?

function preload() {
  let gamename = "test";
  let fdat = loadStrings("games/"+gamename+".bit");
  console.log(fdat);
  fdata = fdat;
}

And the file "test.bit" reads:

block
50
110
200
200
0
255
0
floor
50
100
200
10
0
255
0

But what I get in console is an array containing the values:

"block"
"50"
"110"
"200"
"200"
"0"
"255"
"0"

Even though the file reads what is above.

The array should read:

"block"
"50"
"110"
"200"
"200"
"0"
"255"
"0"
"floor"
"50"
"100"
"200"
"10"
"0"
"255"
"0"

I have no idea why this happens, can someone explain?

    function draw() {
        background(255);
        image(loadImage("sprites/running0.png"), 0, 0);
    }

I'm receiving this error:

p5.js says: It looks like there was a problem loading your image. Try checking if the file path [file:///C:/Users/Pradeep/Documents/.../.../src/sprites/running0.png] is correct, hosting the image online, or running a local server.[https://github.com/processing/p5.js/wiki/Local-server] >

The source is correct so I have no idea what to do next since I think I'm correctly pointing it the file? Do I really have to run a private local server to circumnavigate security blocks? What are these security blocks that disable me from loading images if any?

Finally, once an image is loaded, is it possible to alter its pixel values, such as draw vertical and horizontal white lines across its entire image-width/image-length using simple for loops? I'm trying to do the same with a Python script (dependencies = matplotlib, scipy, numpy) but matplotlib saving figures is extremely awkward if you're just "editing images" rather than plotting mathematical stuff. If anyone knows any form of coding image pixel manipulation that is simpler please let me know! No I will not draw over my image using Paint. ;)

Ultimately I would like to load images such that my sprite (8 images) seems to run over draw:

    var i = 0;
    function draw() {
        background(255);
        image(loadImage("sprites/running" + i + ".png"), 0, 0);
        i++;
        if (i == 8) {
            i = 0;
        }
    }

I've been reading through every 'convert Processing into P5' document I can get a hold of, and I still can't figure out how to translate PVector's (processing) into p5.vector syntax.

Beneath is code in Processing (working). Beneath that is my code for p5 (not working) I'm pretty sure it's my Vector syntax that is out of wack. Can someone please provide direction? Saying that, there might be other things wrong, and I'm open to suggestions.

PROCESSING:

PImage img;
ArrayList pts;


void setup() {
  img = loadImage("ASKEW A.jpg");

    size(500, 500, P3D);

  pts = new ArrayList();
  findPoints();
}

void draw () {
  background(255);


for (int i = pts.size()-1; i >= 0; i --){
      PVector pt = (PVector)pts.get(i);

      fill(pt.z);

      noStroke();

      stroke(0, 30);
      for (int j = pts.size()-1; j >= 0; j --){
      if(i>1){  
        PVector pt2 = (PVector)pts.get(j);
        if (pt.dist(pt2) < 20){

          int r = 10;
          float x = r * tan(radians(i*(360.0/ (mouseX * tan(3)) )));
          float y = r * sin(radians(i*(360.0/ (mouseY*  tan(3)) )));

          int r1 = 2;
          float x1 = r1 * tan(radians(i*(360.0 / (mouseX* tan(3)))));
          float y1 = r1 * sin(radians(i*(360.0 / (mouseY* tan(3)))));


          stroke(0, 30);
          line(pt.x + x, pt.y + y, 
          pt2.x + x1, pt2.y + y1);
        }
      }
    }
  }
}

void findPoints(){

  img.loadPixels();
  for (int i = img.width-1; i >= 0; i -= 3){
    for (int j = img.height; j >=0; j -= 3){

      color c = img.get(i, j);
      if (brightness(c) < 255){
        pts.add(new PVector(i, j, brightness(c)));
      }
    }
  }
}

p5 :

var img;
var pts = [];
var i, j;


function setup() {

  createCanvas(500, 500);

    img = loadImage("ASKEW A.jpg");
    findPoints();
    }


function draw () {
  background(255);

for (i = pts.length()-1; i >= 0; i --){
      var pt = new p5.Vector.pts.get(i);
      fill(pt.z);

      noStroke();

      stroke(0, 30);
      for (j = pts.length()-1; j >= 0; j --){
      if(i>1){  
        var pt2 = new p5.Vector.pts.get(j);
        if (pt.dist(pt2) < 20){

          var r = 20;
          var x = r * tan(radians(i*(360.0/ (mouseX) )));
          var y = r * sin(radians(i*(360.0/ (mouseY) )));

          var r1 = 2;
          var x1 = r1 * tan(radians(i*(360.0 / (mouseX))));
          var y1 = r1 * sin(radians(i*(360.0 / (mouseY))));


          stroke(0, 30);
          line(pt.x + x, pt.y, 
          pt2.x + x1, pt2.y + y1);
        }
      }
    }
  }
}


function findPoints(){

  img.loadPixels();
  for (var i = img.width-1; i >= 0; i -= 3){
    for (var j = img.height; j >=0; j -= 3){

      var c = img.get(i, j);
      if (brightness(c) < 255){
        pts.push(new p5.Vector(i, j, brightness(c)));
      }
    }
  }
}

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

the only time it has worked when i tried (but not with the typeface i need) it is when i set it to textFont('Courier') in draw(). i've tried to load another .ttf file to see if the font itself was the problem, but the replacement one didn't work either. the font i'm trying to load is this one.

you can find my sketch here. it takes a little bit of time to load. i would post the code here, too but there are a dozen files needed to play it locally, so i think it's better if i don't. if you need more information, let me know.

thanks in advance.

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"
    }
]

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

i have an array of objects that contain svg images from preloaded image array. objects have two methods - update and fsize update displays the array, but size changes the sizse of each image each time displayed.

when i run the code, usually it doesn't fill the whole screen and gives me this:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' at p5.Renderer2D.image (p5.js:14621) at p5.image (p5.js:20773) at Letter.update (sketch.js:71) at draw (sketch.js:46) at p5.redraw (p5.js:16560) at p5.resizeCanvas (p5.js:15974) at windowResized (sketch.js:102) at p5._onresize (p5.js:12789)

but there are times when it does fill the whole screen and runs without any problem. Can someone please help me with this?

the code:

/*
Created by anetecima
27/03/2017
*/



        var characters = [];
        var Angle;
        var space;
        var letters = [];

        function preload() {
          characters = [66];
          for(var i = 1; i<67; i++){
            characters[i] = new Image();
            characters[i] = loadImage("burti/"+i+".svg");               
          }
        }

        function setup(){
        createCanvas(windowWidth,windowHeight);
        space = 120;
        Angle = 0;
        imageMode(CENTER);
        background(255);
        noStroke();

        var wide = width / space;
        var high = height / space;

        //AIZPILDA LAUKUMU AR BURTIEM
        var tf = [ 1,0 ];
        for (var i = 0; i < wide; i++) {
          for (var j = 0; j < high; j++) {
            letters.push(new Letter(i,j,random(characters),random(tf),random(15,60)));
          }
        }
        }

        function draw(){
        background(255);
        translate(50,50);
        Angle = frameCount*0.06;

        for (var i = 0; i<letters.length; i++) {
          push();
            letters[i].update();
            letters[i].fsize();
          pop();
          }
        }

        function Letter( ixC, iyC,  ia, idirection,  isize, degreesss) {
        this.xC = ixC;
        this.yC = iyC;
        this.a = ia;
        this.direction = idirection;
        this.size = isize;


        this.update = function(){
            translate(this.xC*space, this.yC*space);
            push(); 
                rotate((Angle+(this.xC+this.yC*100)));
                image(this.a, 0,0,this.a.width * (this.size*0.01),this.a.height * (this.size*0.01));
            pop();

          };


          this.fsize = function(){

          if(this.direction==0){
                this.size--;
            if(this.size<=15){
              this.direction=1;
            }
          }
          if(this.direction==1){
          this.size++;  
            if(this.size>=60){
              this.direction=0;
            }  
          }
          };

        }

        function mouseClicked() {
          for (var i = 0; i < letters.length; i++) {
              letters[i].a = random(characters);
              letters[i].size = random(15,60);
          }
        }
        function windowResized() {
          resizeCanvas(windowWidth, windowHeight);
        }

`

here is a print screen from this issue on the reference page where the left canvas wouldn't load.

Back in Processing I would just have simple code like this:

PShape shape;
/***************************************************************************/
void setup() 
{
  size(400, 400);
  shapeMode(CENTER);
  shape = loadShape("bot1.svg");
} 
/***************************************************************************/
void draw() 
{
  background(100);
  pushMatrix();
  translate(width/2, height/2);
  shape(shape, 0, 0);
  popMatrix();
}

P5 doesn't work that way. What would be the P5.js equivalent to that?

    var shape;
    var canvas;
/***************************************************************************/
    function setup() 
    {
      canvas = createCanvas(400, 400);
      canvas.position(0, 0);
      //shapeMode(CENTER);
      //shape = loadShape("bot1.svg");
    } 
    /***************************************************************************/
    void draw() 
    {
      background(100);
      push();
      translate(width/2, height/2);
      //shape(shape, 0, 0);
      pop();
    }

But if I want to be able to load another text file while a sketch is running (to load the next level in a game, for instance) can I call preload again? I assume that could cause trouble since it would "preload" other things that are already loaded.

I haven't used callbacks, but is that an alternative to preloading when using loadStrings()? If so, what would it look like.

Also, since the data (a list of numbers) loads as strings, is there an easy way to convert them to numbers as they load into the array? Here's the loading line of code"

gridSquare = loadStrings('data.txt');

But after much banging of my head wondering why the data wasn't doing what it should, , I realised it does exactly what it says and loads strings. I assume I need split. again, but how?

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

var locationData;

function preload() {
  locationData =  getCurrentPosition();

  var currentLat = locationData.latitude;
  var currentLon = locationData.longitude;

  var url = "//api.openweathermap.org/data/2.5/weather?lat=" + currentLat + "&lon=" + currentLon + "&appid=[myAPIkey]";

  weather = loadJSON(url);
}

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

function preLoad() { myFont = loadFont('assets/DroidSansMono.ttf'); }

function setup() { textFont(myFont); }

why does this give me the following error: "25722: Uncaught Error: null font passed to textFont"?

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

function draw() {
  image(img,0,0);
}

And here the code of the index.html:

<html>
<head>
  <title>IMAGE</title>

  <script language="javascript" type="text/javascript" src="../../lib/p5.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>

</head>
<body>

</body>
</html>

What am I doing wrong? Thanks in advance!

var api = "https://" + "api.flickr.com/services/rest/?method=flickr.photos.search";
var apiKey = "&api_key=a0dd883dc062aadeaec4addb5211da7f";

var tag = "planet"

var query = "&per_page=500&tags=" + tag + "&is_commons=true&format=json&nojsoncallback=1";

var i = 14;

var imgurl;
var img;

function preload() {
 var url = api + apiKey + query;

 loadJSON(url, gotData);


}

function setup() {
 createCanvas(300, 300);
 pixelDensity(1);


}

function gotData(data, imgurl) {

 var farmid = data.photos.photo[i].farm;
 var serverid = data.photos.photo[i].server;
 var id = data.photos.photo[i].id;
 var secret = data.photos.photo[i].secret;

 imgurl = "farm" + farmid + ".staticflickr.com/" + serverid + "/" + id + "_" + secret + ".jpg";

}

function draw() {
img = createImage(imgurl);
image(img,0,0);

}

//initializes bullets
var bullets = {
    x: new Array(),
    y: new Array(),
    shot: new Array()
}
//initializes the ship
var ship = {
    x: 625,
    y: 475,
    photo: loadImage("download.png")
}

function setup() {
  createCanvas(1350,650);

  //bullet1
  append(bullets.x, ship.x);
  append(bullets.y, ship.y);
  append(bullets.shot, false);

  //bullet2
  append(bullets.x, ship.x);
  append(bullets.y, ship.y);
  append(bullets.shot, false);

  //bullet3
  append(bullets.x, ship.x);
  append(bullets.y, ship.y);
  append(bullets.shot, false);
}

//Controls
function updateShip()
{
    //Right movement
    if (keyIsDown(RIGHT_ARROW)) {
        ship.x = ship.x+ 10;
        if (ship.x >= 1350) {
            ship.x = ship.x - 11;
        }
    }
    //Left movement
    if (keyIsDown(LEFT_ARROW)) {
        ship.x = ship.x - 10;
        if (ship.x <= 0) {
            ship.x = ship.x + 11;
        }
    }
    //Up movement
    if (keyIsDown(UP_ARROW)) {
        ship.y = ship.y - 10;
        if (ship.y <= 350) {
            ship.y = ship.y + 11;
        }
    }
    //Down movement
    if (keyIsDown(DOWN_ARROW)) {
        ship.y = ship.y + 10;
        if (ship.y >= 580) {
            ship.y = ship.y - 11;
        }
    }
}

function drawShip()
{
    ship.photo.resize(75,75);
    image(ship.photo,ship.x-ship.photo.width/2,ship.y+ship.photo.height/2);
}

//Drawing the bullets
function drawBullets() {
    fill(255);
    rect(bullets.x[0],bullets.y[0], 5, 10);
    rect(bullets.x[1],bullets.y[1], 5, 10);
    rect(bullets.x[2],bullets.y[2], 5, 10);
}

//Controls the bullet movement
function updateBullets() {
    bullets.y[0] = bullets.y[0] + 10;
}

//Checks if bullet is shot
function checkShoot() {
    if (keyIsPressed && keyCode === 32) {
        bullets.y[0] = ship.y;
    }
}

function draw() {
    background(0);

    updateShip();
    drawShip();
    checkShoot();
    updateBullets();
    drawBullets();
}

I'm trying to better understand video manipulation, and think that an example in the P5JS Reference Guide can help me visualize what I need. However, this example is throwing an error to the console. i'm getting the JS error:

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

Can someone help me understand why this code isn't working?

Thanks!

var izzms = [];
var imgs = [];
var j = 0;

function preload() {
  for (var i = 0; i < 3; i++) {
    imgs[i] = loadImage('assets/proj' + i + '.jpg');
 }
}

function setup() {
  createCanvas(640, 480);
  image(imgs[j], 0, 0);
}

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

function mousePressed() {
  // var r = floor(random(imgs.length));
  var b = new Izzm(0, 0, imgs[j]);
  izzms.push(b);
  j++;
  if (j > 2) {
    j = 0;
  }
}


//object
function Izzm(x, y) {
  this.x = x;
  this.y = y;

  this.display = function() {
    image(imgs[j], this.x, this.y);
 }
}

Unfortunately, i'm working with over 100 images all of which are fairly high quality. When I switch between background-images, I get the slight flicker whilst it loads the next bg-image. Any advice on how to solve this issue?