How can I clone an image object?

thinsoldier

I want to load an image and draw it once with a mask and again without the mask.

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

GoToLoop

http://p5js.org/reference/#/p5.Image/get

KevinWorkman

Can't you just call loadImage() again?

img = loadImage("assets/moonwalk.jpg");
imgMask = loadImage("assets/mask.png");
img2 = loadImage("assets/moonwalk.jpg");

GoToLoop

Something important I've forgotten to mention:
loadImage() is an async function. Meaning it takes some time to complete its task.

Trying to clone it too soon, before the loading is completed, gonna get ya an empty image or some error. :-S The right moment to use get() for cloning is inside setup() instead. *-:)

Check it out online at the following link:
https://Glitch.com/~preload-image-masks

https://ThimbleProjects.org/gotoloop/97931/sketch.js https://ThimbleProjects.org/gotoloop/97931/assets/moonwalk.jpg https://ThimbleProjects.org/gotoloop/97931/assets/mask.png

<script async src=https://CDN.JSDelivr.net/p5.js/latest/mainfile></script>
<script defer src=sketch.js></script>

/**
 * Preload Image Masks (v2.0.3)
 * ThinSoldier & GoToLoop (2016-Sep-08)
 *
 * Forum.Processing.org/two/discussion/18109/
 * how-can-i-clone-an-image-object#Item_3
 *
 * Glitch.com/~preload-image-masks
 */

"use strict";

const SUBFOLDER = 'assets/';
let original, masker, masked;

function preload() {
  original = loadImage(SUBFOLDER + 'moonwalk.jpg');
  masker = loadImage(SUBFOLDER + 'mask.png');
}

function setup() {
  createCanvas(original.width, original.height);
  ( masked = original.get() ).mask(masker);
}

function draw() {
  background(original);
  image(masked, mouseX - width*.5, mouseY - height*.5);
}

thinsoldier

Thanks GoToLoop!

Do you prefer Thimble over Codepen, js bin, & js fiddle?

GoToLoop

Actually I frequently use http://p5js.SketchPad.cc/ in order to host p5.js sketches.
But lately due to some bugs there I can't upload asset files anymore! :-S

The only free service I know about which still allows uploading is Thimble.
If you know about others, please tell us! =P~

thinsoldier

github.io?

GoToLoop

That 1's nice too, of course. Although demands a bit of effort given we need to pick some repo and choose a special branch called "gh-pages" and other stuff. #:-S

thinsoldier

Nah, it's not that hard. Maybe understanding git initially is the hard part but a good gui like Tower or Sourcetree or GitKraken makes learning the basics of git easy.

GoToLoop

Thimble is retired! Sketch is now hosted at Glitch:
https://Glitch.com/~preload-image-masks