The p5 docs state how to load an image from the assets folder.
However I am using 'instance mode' in my Vue 3 setup and any attempt to use loadImage is resulting in the return of an Event object of type"error" and no explanation.
I have tried:
const script = p5 => {
...
this.assets.rocket = p5.loadImage('./assets/rocket.jpg')
this.assets.rocket = p5.loadImage('~assets/rocket.jpg')
this.assets.rocket = p5.loadImage('#/assets/rocket.jpg')
}
and so on.
I know the image exists as <img src="./assets/rocket.jpg"> renders the image correctly.
What have I missed?
(Everything else regarding p5 in instance mode appears to be working fine.)
Try p5.loadImage(require('#/assets/rocket.jpg'))?
Importing image should be a Webpack responsibility, not p5.js
Related
I'm kind of newbie and and I'm starting to be very fascinated by GSAP animations...
I found this with the code and everything: https://codepen.io/GreenSock/pen/QWjjYEw.
My problem is that in this animation I have some random pictures, but I want to use some local images that I have instead. Any suggestion of what to change?
I'm using Vue 2 and I put already the JS in the mounted :)
Thanks in advance!
I know that I should change this part but I don't know how
section.bg.style.backgroundImage = `url(https://picsum.photos/1600/800?random=${i})`;
I tried to duplicate this
part:section.bg = section.querySelector(".bg");
with:
section.bg = section.querySelector(".bg");
section.bg = section.querySelector(".bg2")
section.bg = section.querySelector(".bg3");
and then here :
section.bg.style.backgroundImage = "url('myImagePath')";
section.bg2.style.backgroundImage = "url('myImagePath')";
section.bg3.style.backgroundImage = "url('myImagePath')";
Nothing happens...if I put the imagepath inline style on the html I lose the animation.
First, your Q not related to vue.
Next inspect your code (For errors -- your main mistake section.bg is item inside a forEach loop - the path should be related to each iteration).
One way (DRY) to change the images from random images is to get the data-attribute of each bg item inside the forEach "section" loop.
One way to solve this.
Change the path from random path:
section.bg.style.backgroundImage = `url(https://picsum.photos/1600/800?random=${i})`;
To specific one for each iteration:
/*#### NEW CODE ####*/
let image_path = section.bg.dataset.image;
// Get images path from data attribute
section.bg.style.backgroundImage = `url(${image_path})`;
Read more:
Use_data_attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
GSAP UtilityMethods: https://greensock.com/docs/v3/GSAP/UtilityMethods/toArray()
querySelector: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
I've created a proof-of-concept SPA (source code / demo) which loads stereoscopic images from a web server and renders them in stereoscopic 3D using the aframe-stereo-component for A-frame.
Testing this on a Quest 2 in the Oculus Browser and Firefox Reality, this works fine: each image appears in 3D when viewed in immersive VR mode via WebXR.
However, after scrolling through a number of images (usually 8 to 12), the slideshow stops working.
In Firefox Reality, this manifests by the app just freezing and becoming unresponsive.
In Oculus Browser, the image description is displayed but the image area remains black.
Connecting the Quest 2 to a PC with adb and inspecting the page using Chrome DevTools, I can see the following output when this occurs:
23:07:59.195 [.WebGL-0x55930300]GL ERROR :GL_OUT_OF_MEMORY : glTexImage2D:
23:07:59.195 [.WebGL-0x55930300]GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips
23:07:59.195 [.WebGL-0x55930300]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?
23:08:03.340 [.WebGL-0x55930300]GL ERROR :GL_OUT_OF_MEMORY : glTexImage2D:
23:08:03.340 [.WebGL-0x55930300]GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips
23:08:03.340 [.WebGL-0x55930300]GL ERROR :GL_OUT_OF_MEMORY : glTexImage2D:
23:08:03.340 [.WebGL-0x55930300]GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips
23:08:03.499 WebGL: too many errors, no more errors will be reported to the console for this context.
Admittedly the images being loaded are large JPS files (2 to 3Mb) and each image is rendered twice: once for each eye.
However, an <img> element is used to load the image content by adding it to the DOM and when the next image is requested, this is removed and nulled to invalidate the image content so in theory only one image should be loaded at any one time.
Therefore I'm assuming there must be a memory leak somewhere which is causing the memory to get filled up after a number of images have been loaded but I'm not sure where it's leaking.
I'm not able to reproduce the issue on a PC using Chrome/Firefox but this is probably because it has more memory than the Quest 2.
Relevant source code extracts:
<a-scene id="scene" vr-mode-ui="enabled: false" >
<a-assets id="assets"></a-assets>
<a-plane id="left-image"
material="repeat:0.5 1"
scale="2 1 1"
position="0 0 -1"
stereo="eye:left"
>
</a-plane>
<a-plane id="right-image"
material="repeat:0.5 1; offset: 0.5 0"
scale="2 1 1"
position="0 0 -1"
stereo="eye: right"
></a-plane>
</a-scene>
const stereoImageId = 'fullsize-image'
const _stereoImage = '#'+stereoImageId;
const leye = $('#left-image')[0];
const reye = $('#right-image')[0];
const $assets = $('#assets');
const removeStereoImage = function(){
let $stereoImage = $(_stereoImage);
if($stereoImage.length){
let stereoImage = $stereoImage[0];
stereoImage.onload = stereoImage.onerror = null;
$stereoImage.attr('src', '').remove();
$stereoImage = stereoImage = null;
}
};
const unloadStereoImage = function(){
removeStereoImage();
leye.setAttribute("material", "src", '');
reye.setAttribute("material", "src", '');
setStereoImageVisibility(false);
};
const setStereoImageVisibility = function(visible){
leye.setAttribute("visible", visible)
reye.setAttribute("visible", visible)
};
const showImg = function(url, description){
function onImgLoaded(){
leye.setAttribute("material", "src", _stereoImage);
reye.setAttribute("material", "src", _stereoImage);
setStereoImageVisibility(true);
}
unloadStereoImage();
let stereoImage = document.createElement('img');
stereoImage.setAttribute('id', stereoImageId);
stereoImage.setAttribute('crossorigin', "anonymous");
stereoImage.setAttribute('src', url);
stereoImage.onload = onImgLoaded;
$(stereoImage).appendTo($assets);
};
I've also raised this as an issue in the source code repo
The asset management system (a-assets) is intended to help with preloading assets, not throwing them in and out at runtime.
Removing the <img> element from the assets won't dispose the texture (which is cached within the material system).
You can access and clear the cache, but I'd try managing the images 'manually',
loading the image via new THREE.Texture(src) like the material system does
apply the material with
element.getObject3D("mesh").material.map = texture;
material.needsUpdate = true;
remove the old texture with texture.dispose()
Thought that the textures are too big, but I guess each one would crash.
I'm working with Bokeh and I want to add a circle on a specific position on my image.
For the moment, I create my image like this :
img = image(image=[data],
x_range=[0, x_range],
y_range=[0, y_range],
x=x,
y=y,
dw=dw,
dh=dh,
tools=TOOLS,
palette=["Greys-9"],
title=title,
plot_width=plot_width,
plot_height=plot_height,
)
circle(x=10,y=10,radius=100,fill_color="#df1c1c",line_color="#df1c1c")
resources = Resources("inline")
plot_script, plot_div = components(img, resources)
html_script = encode_utf8(plot_script)
html_div = encode_utf8(plot_div)
hold()
figure()
return html_script, html_div
and send this to my HTML page.
The problem is that the circle is not on the final display. Maybe on background ? I don't know...
I tryed add function, add_glyph function, add_layout... None of these are functionnal!
Thanks for helping guys
The above code did not work due to a bug in Bokeh. However, the bug has since been fixed, and that code and code similar to it will function as expected.
I have a phantomjs script that is stepping through the pages of my site.
For each page, I use page = new WebPage() and then page.close() after finishing with the page. (This is a simplified description of the process, and I'm using PhantomJS version 1.9.7.)
While on each page, I use page.renderBase64('PNG') one or more times, and add the results to an array.
When I'm all done, I build a new page and cycle through the array of images, adding each to the page using <img src="data:image/png;base64,.......image.data.......">.
When done, I use page.render(...) to make a PDF file.
This is all working great... except that the images stop appearing in the PDF after about the 20th image - the rest just show as 4x4 pixel black dots
For troubleshooting this...
I've changed the render to output a PNG file, and have the same
problem after the 19th or 20th image.
I've outputted the raw HTML. I
can open that in Chrome, and all the images are visible.
Any ideas why the rendering would be failing?
Solved the issue. Turns out that PhantomJS was still preparing the images when the render was executed. Moving the render into the onLoadFinished handler, as illustrated below, solved the issue. Before, the page.render was being called immediately after the page.content = assignment.
For those interested in doing something similar, here's the gist of the process we are doing:
var htmlForAllPages = [];
then, as we load each page in PhantomJS:
var img = page.renderBase64('PNG');
...
htmlForAllPages.push('<img src="data:image/png;base64,' + img + '">');
...
When done, the final PDF is created... We have a template file ready, with all the required HTML and CSS etc. and simply insert our generated HTML into it:
var fs = require('fs');
var template = fs.read('DocumentationTemplate.html');
var finalHtml = template.replace('INSERTBODYHERE', htmlForAllPages.join('\n'));
var pdfPage = new WebPage();
pdfPage.onLoadFinished = function() {
pdfPage.render('Final.pdf');
pdfPage.close();
};
pdfPage.content = finalHtml;
I used spritext() method for the animation, and I tried to release the memory of spritesheets by using the dispose() method, but it is showing error.
How to release the memory of spritesheets?
local spritext = require("spritext")
local arr = {"images/rainbow2.png","images/rainbow1.png"}
local myAnim = spritext.newAnim(arr[1], 600,350, 1, 15);
myAnim.x = display.contentWidth/2;
myAnim.y = display.contentHeight/2 -70;
r:insert(myAnim);
myAnim:play{ startFrame=1, endFrame=15, loop=1 }
local function cleanUp()
myAnim:dispose();
end
Are you using the API for SpriteSheet? I believe that object:dispose is deprecated.
The new way of using it is via SpriteObject, and it inherits from the DisplayObject API.
http://docs.coronalabs.com/api/type/SpriteObject/index.html - SpriteObject
You should able to call object:removeSelf from the DisplayObject API. http://docs.coronalabs.com/api/type/DisplayObject/removeSelf.html
Here is a snippet of how I handle my spritesheets.
-- Import sprite sheet
local someSheet = graphics.newImageSheet( "someimages.png", someInfo:getSheet() ) -- ImageSheet.png is the image Texture packer published
-- Set sprite sequence data.
local someSequenceData = {
{ name="dance", frames={8,1,2,3,4,5,4,3,2,1,8}, time=2000, loopCount=1},
{ name="sad", frames={8,9,8}, time=3000, loopCount=1},
{ name="happy", frames={8,5,8}, time=3000, loopCount=1},
{ name="smile", frames={8,10,8}, time=3000, loopCount=1},
{ name="hit", frames={7,8}, time=2000, loopCount=1}
}
-- load sprite object
spriteObject = display.newSprite( someSheet, someSequenceData )
spriteObject.x = display.contentWidth/2
spriteObject.y = display.contentHeight/2
-- play one of the animations
spriteObject:play("dance")
-- to remove the entire sprite object
spriteObject:removeSelf()
A quick note:
For my spritesheets I use a application called "TexturePacker", I just drop some images in, set some settings, and then it builds a packed sprite sheet, along with a data sheet to go along with it.
EDIT:
I didn't realize this question is rather old.. Oh well. I hope this helps someone out anyway. :P