From b5274c3926e2dfece972118e0bb7ac1c8e5fd33c Mon Sep 17 00:00:00 2001 From: Ponali <jean_b2011@icloud.com> Date: Sat, 13 Jan 2024 10:12:41 +0100 Subject: [PATCH] Initial commit --- files/jsart/demos/apptools-example3.js | 79 ++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 files/jsart/demos/apptools-example3.js diff --git a/files/jsart/demos/apptools-example3.js b/files/jsart/demos/apptools-example3.js new file mode 100644 index 0000000..26c4952 --- /dev/null +++ b/files/jsart/demos/apptools-example3.js @@ -0,0 +1,79 @@ +(()=>{if(x==0&&y==0){if(!window.aptf){(()=>{fetch("https://ponali.github.io/files/jsart/modules/appTools.js").then(data=>data.text()).then((body)=>{window.aptf.func= new Function("i","t","x","y","mx","my","sw","sh","c","ic","cl","k","return "+body);window.aptf.func(); + + /* JSArt AppTools example + Created by @Ponali */ + + let frame,bgImg,curSize; + at.func.init=(()=>{ + curSize=64; + at.noStroke=true; + frame=0; + bgImg=new Image(512,512); + bgImg.crossOrigin = "Anonymous"; + bgImg.src="https://picsum.photos/256"; + bgImg.onload=(()=>{ + at.initiated=true; + }); + }); + at.func.draw=((t,mx,my,sw,sh)=>{ + /* mxa and mya are the same as mx and my, but with a cap that doesn't let the values be less than 0 nor be more than 255. */ + let mxa=Math.min(Math.max((mx-(curSize/2)),0),(sw-curSize));let mya=Math.min(Math.max((my-(curSize/2)),0),(sh-curSize)); + /* render background */ + at.background(20); + at.setOpacity(0.5); + at.drawImage(bgImg,0,0,256,256); + at.setOpacity(1); + at.setFill(255); + at.textSettings.size=16; + /* get background */ + let scrImg2=at.getScreenImg(0,0,sw,sh); + + /* render second screen */ + at.drawText("you found me!",12,10,256); + at.textSettings.size=12; + at.textSettings.align="r"; + at.drawText("picsum.photos",-2,2); + at.setFill(15,240,15); + at.drawTriangle([40,156],[130,176],[110,76]); + at.setOpacity(0.7); + at.setFill(0,255,255); + at.drawRectangle(170-40,170-120,90,90); + at.setFill(255,0,255); + at.drawRectangle(160-40,180-120,90,90); + at.setFill(255); + at.drawImage(bgImg,160-30,180-60,90,90); + at.setOpacity(1); + at.textSettings.align="l"; + /* get a portion of this screen depending on the cursor position */ + let scrImg=at.getScreenImg(Math.floor(mxa),Math.floor(mya),curSize,curSize); + + /* render background again, but with gotten image */ + at.drawImage(scrImg2,0,0,sw,sh); + /* render primary screen */ + at.textSettings.size=16; + at.drawText("sample text",12,10,256); + at.textSettings.size=12; + at.textSettings.align="r"; + at.drawText("@Ponali",-2,2); + at.setFill(0,255,0); + at.drawTriangle([40,100],[130,80],[110,180]); + at.setFill(255,0,255); + at.drawRectangle(170-40,170-120,90,90); + at.setFill(0,255,255); + at.drawRectangle(160-40,180-120,90,90); + at.setFill(255); + at.drawImage(bgImg,160-50,180-60,90,90); + /* render cursor portion of second screen from image */ + at.drawRectangle(Math.floor(mxa)-1,Math.floor(mya)-1,curSize+2,curSize+2); + at.drawImage(scrImg,Math.floor(mxa),Math.floor(mya)); + + /* information text */ + at.textSettings.align="l"; + at.textSettings.size=10; + at.drawText("Note: lag may occur when using this function.",2,217,256-4); + at.textSettings.size=12; + at.drawText("move your cursor anywhere to see it getting changed",2,230,256-4); + at.drawText("getScreenImg function example -- JSArt AppTools",2,243,256-4); + }); + +})})();window.aptf={"func":(()=>{return 0;})};}}return window.at.result(i,t,x,y,mx,my,sw,sh);})(); \ No newline at end of file