DIR : /home/kozerus/public_html/ruffle/vas/iperms_vas.html
/home/kozerus/public_html/ruffle/vas
<html>
<head>
<title>konet_vas 20250713_1500</title>
<!-- <link rel="stylesheet" type="text/css" href="/js/wz/wz.css"> -->
<link rel="stylesheet" type="text/css" href="../../js/wz/wz.css">
<script id=script_konet_vas>
//
// fmp_vas21.as 0.3 20060430_1300 jk btn_urls work
//
// var appversion = "1.0_20250713_1500";
// var appversion = "0.2_20060430_1300";
var myCfg;
var mc_images;
var image_names;
var dttm;
var appName;
var default_cfgfil;
var cfgfil;
var appSettings;
var appFlashvars;
imgs=`id|src|w|h
img1|iperms1.jpg|234|355
img2|iperms2.jpg|234|355
img3|iperms3.jpg|234|355
img4|iperms4.jpg|234|355
img5|iperms5.jpg|234|355
img6|iperms6.jpg|234|355
img7|iperms7.jpg|700|220
img8|iperms8.jpg|700|220
img9|ipermt9.jpg|700|220
img1|iperms1a.jpg|234|355
img2|iperms2a.jpg|234|355
img3|iperms3a.jpg|234|355
img4|iperms4a.jpg|234|355
img5|iperms5a.jpg|234|355`.split("\n");
function init () {
this.mc_images = new Array();
this.image_names = new Array();
this.dttm = this.get_dttm();
this.appname = this.get_appname();
this.default_cfgfil = appname + ".xml";
this.set_flashvars();
this.setCfgFil();
this.loadCfgXML();
}
function main() {
// trace( appname + " " + dttm + " main BEG:" );
// trace("XML is loaded, load images based on appSettings.image1 (" + appSettings.image1 + "), etc...");
// trace( "" );
this.text.txt_header.text = appSettings.txthdr;
this.txt_header.text = appSettings.txthdr;
// trace( "BUGS txt_header=["+ this.txt_header.text +"] txthdr=["+ appSettings.txthdr +"]" );
this.txt_message.text = appSettings.txtmsg;
load_images();
}
url_home="http://ko2.us";
url_contact="jkwii@ko1.us";
url_skip="http://ko2.us?skip";
txthdr="_txthdr_";
txtmsg="_txtmsg_";
txterr="_txterr_";
function load_images() {
trends1._visible=false;
trends2._visible=false;
images_x._visible=true;
images_y._visible=true;
}
function get_appname() {
}
function get_dttm() {
}
function anim( imgnum ) {
if( imgnum < 7 ) {
anim_x( imgnum );
}
else {
anim_y( imgnum );
}
}
function anim_x( imgnum ) {
if( imgnum == 1 ) { anim_x1( imgnum ); }
}
function anim_y( imgnum ) {
if( imgnum == 7 ) { anim_y7( imgnum ); }
}
function anim_x1( imgnum ) {
txtmsg= "mouse=[ "+_xmouse+" , "+_ymouse+" ] wh=[ "+_level0._width+" , "+_level0._height+" ]";
s_xmin=177; s_xmax=870; s_ymin=177; s_ymax=182;
iwidth=175; iheight=175;
dx = .75; dy = .5;
idx = 10; idy = 10;
bdx = 75; bdy = 120;
mdx = 50; mdy = -10;
ix = s_xmax - ( _xmouse - ( _level0.image1._height / 2 ) * dx ) - idx;
iy = 100;
mx = _xmouse - ( _level0.image1._height / 2 ) + 50;
my = 200 + mdy;
bx = ix + bdx;
by = iy + bdy;
image1._x = ix;
image1._y = iy;
border1._width = iwidth + 5;
border1._height = iheight + 140;
border1._x = bx;
border1._y = by;
mask1._x = mx;
mask1._y = my;
mask1._width = iwidth;
mask1._height = iheight;
image1.setMask( _level0.mask1 );
txterr = "iw=[ "+_level0.image1._width + " ] ih=[ " + _level0.image1._height +" ]";
}
function anim_y7( imgnum ) {
txterr = "anim_x1 imgnum=[ "+ imgnum +" ]";
txtmsg= "mouse=[ "+_xmouse+" , "+_ymouse+" ] wh=[ "+_level0._width+" , "+_level0._height+" ]";
s_xmin=177; s_xmax=870; s_ymin=177; s_ymax=182;
iwidth=700; iheight=175;
dx = .75; dy = .5;
idx = 10; idy = 10;
bdx = 340; bdy = 85; bdh = 2; bdw = 2;
mdx = 130; mdy = -10;
iy = s_ymax - ( _ymouse - ( _level0.image7._height / 2 ) * dy ) - idy;
ix = 5;
my = _ymouse - ( _level0.image7._height / 2 ) + 50;
mx = 200 + mdx;
by = iy + bdy;
bx = ix + bdx;
image7._x = ix;
image7._y = iy;
border7._width = iwidth + bdw;
border7._height = iheight + bdh;
border7._x = bx;
border7._y = by;
mask7._x = mx;
mask7._y = my;
mask7._width = iwidth;
mask7._height = iheight;
image7.setMask( mask7 );
txterr= "iw=[ "+_level0.image7._width + " ] ih=[ " + _level0.image7._height +" ]";
}
function bugmsg( bugid ) {
dttm = get_dttm();
trace_label = appname + " " + dttm + " MSG " + bugid + ": ";
txt_error.text = txt_error.txt + "/n" + trace_label + "/n";
}
</script id=script_bugmsg_end>
<script id=script_dttm>
function my_dttm(args) {
dttm="20250714_0000";
const date = new Date();
yyyy=date.getFullYear();
mm=String(date.getMonth()+1).padStart(2,"0");
dd=date.getDate();
hh=date.getHours();
mn=date.getMinutes();
ss=date.getSeconds();
ms=date.getMilliseconds();
dttm=yyyy+"_"+mm+"_"+dd+"-"+hh+":"+mn+":"+ss;
return(dttm);
}
</script id=script_dttm_end>
<script id=script_my_functions>
function normalize(val,min,max) {
norm = (val - min) / (max -min);
return(norm);
}
function sigmoid(x) {
// let e = Math.E;
// let e = Math.exp(1);
// sig = 1 / ( + e^(-x));
return 1 / ( a + Math.exp(-x));
}
function clamp(val,min,max) {
return Math.min(Math.max(val, min), max);
}
</script id=script_my_functions>
<script id=script_startup>
function startup(args) {
// alert( "BUGS_100 startup args="+args );
// var dttm=my_dttm('');
dttm="20250714_0035";
// alert( "BUGS_101 startup dttm="+dttm );
// min=10; max=700;
// val=800; cval=clamp(val,min,max);
// alert( "BUGS_101 (123) val="+val+" min="+min+" max="+max+" cval="+cval );
// movie_700x480_black mask_704x300_letterbox background_710x310
// 365,20+25x308-0.5 1.0 kf61=-5,20+167x308-0.5
// mask kf1-61 kf61-169 -371,20+25x308
// img1 kf12 0.5 103,0 1.0 kf61 .5,0 kf107 0.5 -103,0
var iW = dd.getWndW();
var iH = dd.getWndH();
div_x=dd.elements.div_vas.x;
div_y=dd.elements.div_vas.y;
div_w=dd.elements.div_vas.w;
div_h=dd.elements.div_vas.h;
div_z=dd.elements.div_vas.z;
status = "";
status += "<br>";
status += "<hr color=goldenrod>";
status +=dttm;
status += " iWH=("+iW+","+iH+") ";
status += " div_xy=("+div_x+","+div_y+")";
status += " div_wh="+div_w+","+div_h+")";
status += "<hr color=goldenrod>";
status += "<br>";
// info("STARTUP");
// ko6 img6 ko8 img8
// alert( "BUGS_102 "+status );
dd.elements.div_status.write(status);
// dd.elements.circle.moveTo(div_x+div_w/2,div_y+div_h/2);
// dd.elements.linev.moveTo(div_x+100,div_y-10);
// dd.elements.lineh.moveTo(div_x+200,div_y-20);
dd.elements.circle.moveTo(150, 200);
dd.elements.linev.moveTo(0, 210);
dd.elements.lineh.moveTo(156, 20);
dd.elements.img1.moveTo(div_x,div_y);
dd.elements.img2.moveTo(div_x+10,div_y+10);
dd.elements.img3.moveTo(div_x+20,div_y+20);
dd.elements.img4.moveTo(div_x+30,div_y+30);
dd.elements.img5.moveTo(div_x+40,div_y+40);
dd.elements.img6.moveTo(div_x+50,div_y+50);
dd.elements.img7.moveTo(div_x+60,div_y+60);
dd.elements.img8.moveTo(div_x+70,div_y+70);
dd.elements.img9.moveTo(div_x+80,div_y+80);
dd.elements.maskv.moveTo(div_x+90,div_y+90);
dd.elements.maskvl.moveTo(div_x+100,div_y+100);
dd.elements.maskvr.moveTo(div_x+110,div_y+110);
dd.elements.maskh.moveTo(div_x+120,div_y+120);
dd.elements.maskht.moveTo(div_x+125,div_y+125);
dd.elements.maskhb.moveTo(div_x+130,div_y+130);
dd.elements.handhither.moveTo(div_x+110,div_y+110);
dd.elements.maskv.resizeTo(355,355);
dd.elements.maskvr.resizeTo(355,355);
dd.elements.maskvl.resizeTo(355,355);
dd.elements.maskh.resizeTo(700,355);
dd.elements.maskht.resizeTo(700,355);
dd.elements.maskhb.resizeTo(700,355);
dd.elements.maskvl.resizeTo(355,355);
// dd.elements.maskvl.resizeBy(deltaW,DeltaH);
// dd.elements.maskvl.swqpImage("maskvr.png");
dd.elements.handhither.hide();
dd.elements.maskh.hide();
dd.elements.maskv.hide();
dd.elements.maskht.hide();
dd.elements.maskhb.hide();
dd.elements.maskvl.hide();
dd.elements.maskvr.hide();
dd.elements.img1.setOpacity(0.0);
dd.elements.img2.setOpacity(0.1);
dd.elements.img3.setOpacity(0.2);
dd.elements.img4.setOpacity(0.3);
dd.elements.img5.setOpacity(0.4);
dd.elements.img6.setOpacity(1.0);
dd.elements.img7.setOpacity(0.6);
dd.elements.img8.setOpacity(0.7);
dd.elements.img9.setOpacity(1.0);
my_Hide('');
// jg.setColor("#ff0000"); // red
// jg.setColor("#000000"); // white
// var jg = new jsGraphics("div_vas");
// jg.setColor("#ffffff"); // blakk
// jg.setStroke(5);
// mx=dd.elements.circle.x;
// my=dd.elements.circle.y;
// divh=dd.elements.div_vas.h;
// divw=dd.elements.div_vas.w;
// jg.drawLine(mx,0,mx,divh);
// jg.drawLine(0,my,divw,my);
// 0,0 mx,0 divw, 0
//
// 0,my mx,my divw,my
//
// 0,divh mx,divh divw,divh
// jg.drawLine(10, 113, 220, 55); // co-ordinates related to "myCanvas"
// jg.setColor("#0000ff"); // blue
// jg.fillRect(110, 120, 30, 60);
// jg.paint();
// jg.setColor("#0000ff"); // blue
// jg.drawEllipse(10, 50, 30, 100);
// jg.drawRect(400, 10, 100, 50);
// jg.paint();
name=dd.obj.name; x=dd.obj.x; y=dd.obj.y; w=dd.obj.w; h=dd.obj.h; z=dd.obj.z;
cname=dd.elements.circle.name;
cx=dd.elements.circle.x; cy=dd.elements.circle.y;
ch=dd.elements.circle.h; cw=dd.elements.circle.w; cz=dd.elements.circle.z;
status="<br><hr color=goldenrod>Drop: "+name+" ("+x+","+y+") ("+w+","+h+","+z+")<hr color=goldenrod><br>";
status+="<hr color=goldenrod>drop: "+cname+" ("+cx+","+cy+") ("+cw+","+ch+","+cz+")<hr color=goldenrod><br>";
dd.elements.div_status.write(status);
return(args);
}
</script id=script_startup_end>
</head>
<body bgcolor=linen onload="startup('onload'); return false;" >
<script id=script_wz src="../../js/wz/wz_dragdrop.js"></script>
<script id=script_wz src="../../js/wz/wz_library.js"></script>
<script id=script_wz src="../../js/wz/wz_graphics.js"></script>
<!--
<script id=script_wz src="../../js/wz/wz_grapher.js"></script>
<script id=script_wz src="../../js/wz/wz_scripts.js"></script>
<script id=script_wz src="../../js/wz/wz_tooltip.js"></script>
-->
<!--
// ../../js/wz/wz_dragdrop.js ../../js/wz/wz_tip_balloon.js
// ../../js/wz/wz_grapher.js ../../js/wz/wz_tip_centerwindow.js
// ../../js/wz/wz_grapherstr.js ../../js/wz/wz_tip_drag.js
// ../../js/wz/wz_graphics.js ../../js/wz/wz_tip_followscroll.js
// ../../js/wz/wz_library.js ../../js/wz/wz_tooltip.js
// ../../js/wz/wz_scripts.js
-->
<div id="div_status" style="position:relative; width:700px; height:300px; background-color:wheat; border: 3px solid black" >
<hr color=goldenrod>
<h1>status</h1>
<hr color=goldenrod>
</div id=div_status_end>
<br>
<hr color=goldenrod>
<!--
mask 704x300
HORIZONTAL+MAXOFFLEFT+10+MAXOFFRIGHT+700
VERTICAL+MAXOFFTOP+10+MAXOFFBOTTOM+480
dd.elements.someName.div.ondblclick = myDblClickFunc;
defy defz setHorizontal setVertical
maxoffl maxoffr maxofft maxoffb
setZ() maximizeZ()
var dropTarget = dd.obj.getEltBelow();
if(dropTarget != null) alert(dropTarget.name);
dd.elements.img1.setOpacity(o);
dd.getWndH() dd.getWndW()
my_PickFunc() my_DragFunc() my_ResizeFund() my_DropFunc()
setPickFunc(functionname) setDragFunc(functionname)
setResizeFunc(functionname) setDropFunc(functionname)
DDObj.prototype.myNewProperty = someValue;
Math.max(1,3,5,4)=5 MAth.min(4,71,-7,2,1,0) = -7
scores = [23,12,52,6,26,38,19,76,54,24]
highscore = Math.max(scores);
Math.abs(-42) = 42
difference = Math.abs( 5 - 8 ) = 3
Math.pow(2,3) = 8 Math.pow(8,0) = 1
onst ship = {x: 220, y: 100}
const boat = {x: 340, y: 50}
const distance = Math.hypot(ship.x - boat.x,ship.y - boat.y)
-->
<div id=div_vas style="position:relative; width:700px; height:480px; background-color:wheat; border: 3px solid black" >
<hr color=goldenrod>
<h1>vas</h1>
<hr color=goldenrod>
<img name="img1" id="img1" src="iperms1a.jpg" height=355 width=235 border=0 title=" iperms1a">
<img name="img2" id="img2" src="iperms2a.jpg" height=355 width=235 border=0 title=" iperms2a">
<img name="img3" id="img3" src="iperms3a.jpg" height=355 width=235 border=0 title=" iperms3a">
<img name="img4" id="img4" src="iperms4a.jpg" height=355 width=235 border=0 title=" iperms4a">
<img name="img5" id="img5" src="iperms5a.jpg" height=355 width=235 border=0 title=" iperms5a">
<img name="img6" id="img6" src="iperms6.jpg" height=355 width=235 border=0 title=" iperms6">
<img name="img7" id="img7" src="iperms7.jpg" height=220 width=700 border=0 title=" iperms7">
<img name="img8" id="img8" src="iperms8.jpg" height=220 width=700 border=0 title=" iperms8">
<img name="img9" id="img9" src="iperms9.jpg" height=220 width=700 border=0 title=" iperms9">
<!-- <img name="linev" id="linev" src="linev.png" height=5 width=700 border=0 title=" linev"> -->
<img name="linev" id="linev" src="linev.png" height=10 width=700 border=0 title=" linev">
<img name="lineh" id="lineh" src="lineh.png" height=700 width=10 border=0 title=" lineh">
<img name="maskv" id="maskv" src="maskv.png" height=800 width=1100 border=0 title=" maskv">
<img name="maskvl" id="maskvl" src="maskvl.png" height=800 width=1100 border=0 title=" maskvl">
<img name="maskvr" id="maskvr" src="maskvr.png" height=800 width=1100 border=0 title=" maskvr">
<img name="maskh" id="maskh" src="maskh.png" height=800 width=1100 border=0 title=" maskh">
<img name="maskht" id="maskht" src="maskht.png" height=800 width=1100 border=0 title=" maskht">
<img name="maskhb" id="maskhb" src="maskhb.png" height=800 width=1100 border=0 title=" maskhb">
<img name="circle" id="circle" src="circle.png" height=25 width=25 border=0 title=" circle">
<img name="handhither" id="handhither" src="/imgs/btn/koeye_handhither.gif" height=100 width=200 border=0 title=" handhither">
<!--
<img name="circle" id="circle" src="circles/tn_circle34.png" height=25 width=25 border=0 title=" circle">
<img name="circle" id="circle" src="circles/tn_circle10.png" height=25 width=25 border=0 title=" circle">
<img name="circle" id="circle" src="circles/tn_circle27.png" height=25 width=25 border=0 title=" circle">
<img name="circle" id="circle" src="circles/tn_circle33.png" height=25 width=25 border=0 title=" circle">
<img name="circle" id="circle" src="circles/tn_circle37.png" height=25 width=25 border=0 title=" circle">
<img name="circle" id="circle" src="circles/tn_circle53.png" height=25 width=25 border=0 title=" circle">
<img name="circle" id="circle" src="circles/tn_circle61.png" height=25 width=25 border=0 title=" circle">
-->
</div id=div_vas_end>
<br><br><br><br>
<br><br><br><br>
<hr color=goldenrod>
<!--
<form name="myForm">
<center>
<table>
<tr>
<td align="right">name = </td>
<td><input name="NAME" type="text" size="12"></td>
<td align="right"> x = </td>
<td><input name="X" type="text" size="12"></td>
<td align="right"> y = </td>
<td><input name="Y" type="text" size="12"></td>
</tr>
</table>
</center>
</form>
-->
<br> <br> <br> <br>
<hr color=goldenrod>
<img src="/imgs/btn/kob.png" onclick="my_Hide(''); return false;" height=50 title=" hide">hide
<img src="/imgs/btn/kow.png" onclick="my_Show(''); return false;" height=50 title=" hide">show
<br>
<hr color=goldenrod>
<a href=http://www.walterzorn.de/en/dragdrop/commands_e.htm target=_blank>commands_d</a>
<br>
<a href=http://www.walterzorn.de/en/dragdrop/api_e.htm target=_blank>api_e</a>
<br>
<a href=http://www.walterzorn.de/en/dragdrop/demos/demos.htm target=_blank>demos</a>
<hr color=goldenrod>
<br>
<script id=script_my_hide>
function my_Hide(item) {
if( item == "" ) {
dd.elements.img1.hide();
dd.elements.img2.hide();
dd.elements.img3.hide();
dd.elements.img4.hide();
dd.elements.img5.hide();
dd.elements.img6.hide();
dd.elements.img7.hide();
dd.elements.img8.hide();
dd.elements.img9.hide();
dd.elements.maskh.hide();
dd.elements.maskht.hide();
dd.elements.maskhb.hide();
dd.elements.maskv.hide();
dd.elements.maskvl.hide();
dd.elements.maskvr.hide();
dd.elements.handhither.hide();
return;
}
if( item ) { item.hide(); }
}
</script id=script_my_hide_end>
<script id=script_my_show>
function my_Show(item) {
if( item == "" ) {
dd.elements.img1.show();
dd.elements.img2.show();
dd.elements.img3.show();
dd.elements.img4.show();
dd.elements.img5.show();
dd.elements.img6.show();
dd.elements.img7.show();
dd.elements.img8.show();
dd.elements.img9.show();
dd.elements.maskh.show();
dd.elements.maskht.show();
dd.elements.maskhb.show();
dd.elements.maskv.show();
dd.elements.maskvl.show();
dd.elements.maskvr.show();
dd.elements.handhither.show();
return;
}
if ( item ) { item.show(); }
}
</script id=script_my_show_end>
<script id=script_kludge>
// The following loop creates a copy for each of the two images,
// but hides that copy immediately while the page is still loading
// for (var i = 0; i < 2; i++) {
// dd.elements[i].copy();
// dd.elements[i].copies[0].hide();
// }
// The following two functions override their empty namesakes predefined in wz_dragdrop.js.
// They are automatically invoked from wz_dragdrop.js when a drag operation starts
// and ends, respectively.
// Here we make the non-transparent 'placeholder' copy of the dragged image visible
// and move it to the place where the drag operation starts
function jsgraph() {
if( name == "circle" ) {
var jg = new jsGraphics("div_vas");
jg.setColor("#000000"); // blakk
jg.setStroke(5);
mx=dd.elements.circle.x;
my=dd.elements.circle.y;
divh=dd.elements.div_vas.h;
divw=dd.elements.div_vas.w;
jg.drawLine(mx,0,mx,divh);
jg.drawLine(0,my,divw,my);
}
}
function easeInOutCubic(t) {
return t < 0.5
? 4 * t * t * t
: 1 - Math.pow(-2 * t + 2, 3) / 2;
}
function anim1(cx, minx, maxx) {
let t = (cx - minx) / (maxx - minx); // Normalize cx to 0–1
t = Math.max(0, Math.min(1, t)); // Clamp t to [0,1]
let easedT = easeInOutCubic(t);
let iy = 270;
// Center point for symmetry
let center = (minx + maxx) / 2;
// Ease-in-out mirrored around center for ix (from edges to center)
let mirroredT = 2 * Math.abs(easedT - 0.5); // t=0.5 → 0, t=0 or 1 → 1
// let ix = mirroredT * (maxx - minx); // Range: [0, 200]
let ix = maxx - mirroredT * (maxx - minx);
// Ease-in-out for io: bell-shaped curve, max at center
let io = 0.5 + 0.5 * (1 - mirroredT); // Range: 0.5 to 1
dd.elements.img1.moveTo(ix, iy);
dd.elements.mashv.moveTo(ix, iy);
dd.elements.img1.setOpacity(io);
info("ANIM1");
}
// can you modify the ix expression in anim1 to only move from maxx to minx without changing direction
// but retain the ease in out around the minx and maxx values
function anim2(cx, minx, maxx) {
let t = (cx - minx) / (maxx - minx); // Normalize cx to 0–1
t = Math.max(0, Math.min(1, t)); // Clamp t to [0,1]
let easedT = easeInOutCubic(t);
let iy = 275;
// Center point for symmetry
let center = (minx + maxx) / 2;
// Ease-in-out mirrored around center for ix (from edges to center)
let mirroredT = 2 * Math.abs(easedT - 0.5); // t=0.5 → 0, t=0 or 1 → 1
// let ix = mirroredT * (maxx - minx); // Range: [0, 200]
let ix = maxx - mirroredT * (maxx - minx);
// Ease-in-out for io: bell-shaped curve, max at center
let io = 0.5 + 0.5 * (1 - mirroredT); // Range: 0.5 to 1
dd.elements.img2.moveTo(ix, iy);
dd.elements.mashv.moveTo(ix, iy);
dd.elements.img2.setOpacity(io);
info("ANIM2");
}
function anim3(cx, minx, maxx) {
let t = (cx - minx) / (maxx - minx); // Normalize cx to 0–1
t = Math.max(0, Math.min(1, t)); // Clamp t to [0,1]
let easedT = easeInOutCubic(t);
let iy = 275;
// Center point for symmetry
let center = (minx + maxx) / 2;
// Ease-in-out mirrored around center for ix (from edges to center)
let mirroredT = 2 * Math.abs(easedT - 0.5); // t=0.5 → 0, t=0 or 1 → 1
// let ix = mirroredT * (maxx - minx); // Range: [0, 200]
let ix = maxx - mirroredT * (maxx - minx);
// Ease-in-out for io: bell-shaped curve, max at center
let io = 0.5 + 0.5 * (1 - mirroredT); // Range: 0.5 to 1
dd.elements.img3.moveTo(ix, iy);
dd.elements.img3.setOpacity(io);
info("ANIM3");
}
function anim4(cx, minx, maxx) {
let t = (cx - minx) / (maxx - minx); // Normalize cx to 0–1
t = Math.max(0, Math.min(1, t)); // Clamp t to [0,1]
let easedT = easeInOutCubic(t);
let iy = 275;
// Center point for symmetry
let center = (minx + maxx) / 2;
// Ease-in-out mirrored around center for ix (from edges to center)
let mirroredT = 2 * Math.abs(easedT - 0.5); // t=0.5 → 0, t=0 or 1 → 1
// let ix = mirroredT * (maxx - minx); // Range: [0, 200]
let ix = maxx - mirroredT * (maxx - minx);
// Ease-in-out for io: bell-shaped curve, max at center
let io = 0.5 + 0.5 * (1 - mirroredT); // Range: 0.5 to 1
dd.elements.img4.moveTo(ix, iy);
dd.elements.img4.setOpacity(io);
info("ANIM4");
}
function anim5(cx, minx, maxx) {
let t = (cx - minx) / (maxx - minx); // Normalize cx to 0–1
t = Math.max(0, Math.min(1, t)); // Clamp t to [0,1]
let easedT = easeInOutCubic(t);
let iy = 275;
// Center point for symmetry
let center = (minx + maxx) / 2;
// Ease-in-out mirrored around center for ix (from edges to center)
let mirroredT = 2 * Math.abs(easedT - 0.5); // t=0.5 → 0, t=0 or 1 → 1
// let ix = mirroredT * (maxx - minx); // Range: [0, 200]
let ix = maxx - mirroredT * (maxx - minx);
// Ease-in-out for io: bell-shaped curve, max at center
let io = 0.5 + 0.5 * (1 - mirroredT); // Range: 0.5 to 1
dd.elements.img5.moveTo(ix, iy);
dd.elements.img5.setOpacity(io);
info("ANIM5");
}
function anim6(cx, minx, maxx) {
let t = (cx - minx) / (maxx - minx); // Normalize cx to 0–1
t = Math.max(0, Math.min(1, t)); // Clamp t to [0,1]
let easedT = easeInOutCubic(t);
let iy = 275;
// Center point for symmetry
let center = (minx + maxx) / 2;
// Ease-in-out mirrored around center for ix (from edges to center)
let mirroredT = 2 * Math.abs(easedT - 0.5); // t=0.5 → 0, t=0 or 1 → 1
// let ix = mirroredT * (maxx - minx); // Range: [0, 200]
let ix = maxx - mirroredT * (maxx - minx);
// Ease-in-out for io: bell-shaped curve, max at center
let io = 0.5 + 0.5 * (1 - mirroredT); // Range: 0.5 to 1
dd.elements.img6.moveTo(ix, iy);
dd.elements.img6.setOpacity(io);
info("ANIM6");
}
function anim7(cy, miny, maxy) {
let t = (cy - miny) / (maxy - miny); // Normalize cx to 0–1
t = Math.max(0, Math.min(1, t)); // Clamp t to [0,1]
let easedT = easeInOutCubic(t);
let ix = 5;
// Center point for symmetry
let center = (miny + maxy) / 2;
// Ease-in-out mirrored around center for ix (from edges to center)
let mirroredT = 2 * Math.abs(easedT - 0.5); // t=0.5 → 0, t=0 or 1 → 1
// let iy = mirroredT * (maxx - minx); // Range: [0, 200]
let iy = maxy - mirroredT * (maxy - miny);
// Ease-in-out for io: bell-shaped curve, max at center
let io = 0.5 + 0.5 * (1 - mirroredT); // Range: 0.5 to 1
dd.elements.img7.moveTo(ix, iy);
dd.elements.img7.setOpacity(io);
info("ANIM7");
}
function anim8(cy, miny, maxy) {
let t = (cy - miny) / (maxy - miny); // Normalize cx to 0–1
t = Math.max(0, Math.min(1, t)); // Clamp t to [0,1]
let easedT = easeInOutCubic(t);
let ix = 5;
// Center point for symmetry
let center = (miny + maxy) / 2;
// Ease-in-out mirrored around center for ix (from edges to center)
let mirroredT = 2 * Math.abs(easedT - 0.5); // t=0.5 → 0, t=0 or 1 → 1
// let iy = mirroredT * (maxy - miny); // Range: [0, 200]
let iy = maxy - mirroredT * (maxy - miny);
// Ease-in-out for io: bell-shaped curve, max at center
let io = 0.5 + 0.5 * (1 - mirroredT); // Range: 0.5 to 1
dd.elements.img8.moveTo(ix, iy);
dd.elements.img8.setOpacity(io);
info("ANIM8");
}
function anim9(cy, miny, maxy) {
let t = (cy - miny) / (maxy - miny); // Normalize cx to 0–1
t = Math.max(0, Math.min(1, t)); // Clamp t to [0,1]
let easedT = easeInOutCubic(t);
let ix = 5;
// Center point for symmetry
let center = (miny + maxy) / 2;
// Ease-in-out mirrored around center for ix (from edges to center)
let mirroredT = 2 * Math.abs(easedT - 0.5); // t=0.5 → 0, t=0 or 1 → 1
// let iy = mirroredT * (maxy - miny); // Range: [0, 200]
let iy = maxy - mirroredT * (maxy - miny);
// Ease-in-out for io: bell-shaped curve, max at center
let io = 0.5 + 0.5 * (1 - mirroredT); // Range: 0.5 to 1
dd.elements.img9.moveTo(ix, iy);
dd.elements.img9.setOpacity(io);
info("ANIM9");
}
function info(action) {
name=dd.obj.name; x=dd.obj.x; y=dd.obj.y; w=dd.obj.w; h=dd.obj.h; z=dd.obj.z;
cname=dd.elements.circle.name;
cx=dd.elements.circle.x; cy=dd.elements.circle.y;
ch=dd.elements.circle.h; cw=dd.elements.circle.w; cz=dd.elements.circle.z;
status="<br><hr color=goldenrod>INFO "+action+": "+name+" ("+x+","+y+") ("+w+","+h+","+z+")<hr color=goldenrod><br>";
status+="<hr color=goldenrod>INFO "+action+": "+cname+" ("+cx+","+cy+") ("+cw+","+ch+","+cz+")<hr color=goldenrod><br>";
dd.elements.div_status.write(status);
}
function my_PickFunc() {
// dd.obj.copies[0].moveTo(dd.obj.x, dd.obj.y);
// dd.obj.copies[0].show();
// name=dd.obj.name; x=dd.obj.x; y=dd.obj.y; w=dd.obj.w; h=dd.obj.h; z=dd.obj.z;
// cname=dd.elements.circle.name;
// cx=dd.elements.circle.x; cy=dd.elements.circle.y;
// ch=dd.elements.circle.h; cw=dd.elements.circle.w; cz=dd.elements.circle.z;
// status="<br><hr color=goldenrod>Pick: "+name+" ("+x+","+y+") ("+w+","+h+","+z+")<hr color=goldenrod><br>";
// status+="<hr color=goldenrod>pick: "+cname+" ("+cx+","+cy+") ("+cw+","+ch+","+cz+")<hr color=goldenrod><br>";
// dd.elements.div_status.write(status);
info("PICK");
}
// Here we hide the 'placeholder' again
function my_DropFunc() {
// dd.obj.copies[0].hide();
// Write the name and coordinates of the dropped item into form inputs:
// document.myForm.NAME.value = dd.obj.name;
// document.myForm.X.value = dd.obj.x;
// document.myForm.Y.value = dd.obj.y;
cx=clamp(dd.elements.circle.x, 100, 740);
cy=clamp(dd.elements.circle.y, 100, 355 );
dd.elements.circle.moveTo( cx, cy );
dd.elements.lineh.moveTo( 0, cy );
dd.elements.linev.moveTo( cx, 0 );
info("DROP");
}
function my_DragFunc() {
// if( dd.obj.name == "circle" ) {
// dd.elements.linev.move(dd.elements.circle.x, 10);
// dd.elements.lineh.move(10, dd.elements.circle.y );
// }
// else {
// }
cx=clamp(dd.elements.circle.x, 0, 700 );
cy=clamp(dd.elements.circle.y, 0, 480);
// dx=350; dy=100;
// dy=240;
// dx=75; dy=50;
dx=85; dy=50;
minx=0; maxx=minx+dx;
if(( cx > minx ) && ( cx < maxx )) {
dd.elements.img1.show();
// x=dd.elements.img1.x; y=dd.elements.img1.y;
// dd.elements.maskv.moveTo(x,y);
// dd.elements.maskv.show();
anim1(cx, minx, maxx );
}
else {
dd.elements.img1.hide();
// dd.elements.maskv.hide();
}
minx=maxx+1; maxx=minx+dx;
if(( cx > minx ) && ( cx < maxx )) {
dd.elements.img2.show();
// x=dd.elements.img2.x; y=dd.elements.img2.y;
// dd.elements.maskv.moveTo(x,y);
// dd.elements.maskv.show();
anim2(cx, minx, maxx );
}
else {
dd.elements.img2.hide();
// dd.elements.maskv.hide();
}
minx=maxx+1; maxx=minx+dx;
if(( cx > minx ) && ( cx < maxx )) {
dd.elements.img3.show();
// x=dd.elements.img3.x; y=dd.elements.img3.y;
// dd.elements.maskv.moveTo(x,y);
// dd.elements.maskv.show();
anim3(cx, minx, maxx );
}
else {
dd.elements.img3.hide();
// dd.elements.maskv.hide();
}
minx=maxx+1; maxx=minx+dx;
if(( cx > minx ) && ( cx < maxx )) {
dd.elements.img4.show();
// x=dd.elements.img4.x; y=dd.elements.img4.y;
// dd.elements.maskv.moveTo(x,y);
// dd.elements.maskv.show();
anim4(cx, minx, maxx );
}
else {
dd.elements.img4.hide();
// dd.elements.maskv.hide();
}
minx=maxx+1; maxx=minx+dx;
if(( cx > minx ) && ( cx < maxx )) {
dd.elements.img5.show();
// x=dd.elements.img5.x; y=dd.elements.img5.y;
// dd.elements.maskv.moveTo(x,y);
// dd.elements.maskv.show();
anim5(cx, minx, maxx );
}
else {
dd.elements.img5.hide();
// dd.elements.maskv.hide();
}
minx=maxx+1; maxx=minx+dx;
if(( cx > minx ) && ( cx < maxx )) {
dd.elements.img6.show();
// x=dd.elements.img6.x; y=dd.elements.img6.y;
// dd.elements.maskv.moveTo(x,y);
// dd.elements.maskv.show();
anim6(cx, minx, maxx );
}
else {
dd.elements.img6.hide();
// dd.elements.maskv.hide();
}
// miny=300; maxy=miny+dy;
miny=280; maxy=miny+dy;
if(( cy > miny ) && ( cy < maxy )) {
dd.elements.img7.show();
// x=dd.elements.img7.x; y=dd.elements.img7.y;
// dd.elements.maskh.moveTo(x,y);
// dd.elements.maskh.show();
anim7(cy, miny, maxy );
}
else {
dd.elements.img7.hide();
// dd.elements.maskh.hide();
}
miny=maxy+1; maxy=miny+dy;
if(( cy > miny ) && ( cy < maxy )) {
dd.elements.img8.show();
// x=dd.elements.img8.x; y=dd.elements.img8.y;
// dd.elements.maskh.moveTo(x,y);
// dd.elements.maskh.show();
anim8(cy, miny, maxy );
}
else {
dd.elements.img8.hide();
// dd.elements.maskh.hide();
}
miny=maxy+1; maxy=miny+dy;
if(( cy > miny ) && ( cy < maxy )) {
dd.elements.img9.show();
// x=dd.elements.img9.x; y=dd.elements.img9.y;
// dd.elements.maskh.moveTo(x,y);
// dd.elements.maskh.show();
anim9(cy, miny, maxy );
}
else {
dd.elements.img9.hide();
// dd.elements.maskh.hide();
}
// can you identify the value for dy so the final maxy value is 480
dd.elements.circle.z=maximizeZ();
info("DRAG");
}
// wheat= #F5DEB3, rgb(245, 222, 179)
function my_ResizeFunc() {
info("RESIZE");
}
//-->
</script>
<script type="text/javascript">
// "maskh"+TRANSPARENT+SCALABLE,
<!--
SET_DHTML(CURSOR_MOVE, RESIZABLE,
"linev"+TRANSPARENT+SCALABLE+VERTICAL,
"lineh"+TRANSPARENT+SCALABLE+HORIZONTAL,
"circle"+TRANSPARENT+SCALABLE,
"div_status"+TRANSPARENT+SCALABLE,
"div_vas"+TRANSPARENT+SCALABLE,
"maskh"+TRANSPARENT+SCALABLE,
"maskht"+TRANSPARENT+SCALABLE,
"maskhb"+TRANSPARENT+SCALABLE,
"maskv"+TRANSPARENT+SCALABLE,
"maskvl"+TRANSPARENT+SCALABLE,
"maskvr"+TRANSPARENT+SCALABLE,
"handhither"+TRANSPARENT+SCALABLE,
"img1"+TRANSPARENT+SCALABLE+HORIZONTAL,
"img2"+TRANSPARENT+SCALABLE+HORIZONTAL,
"img3"+TRANSPARENT+SCALABLE+HORIZONTAL,
"img4"+TRANSPARENT+SCALABLE+HORIZONTAL,
"img5"+TRANSPARENT+SCALABLE+HORIZONTAL,
"img6"+TRANSPARENT+SCALABLE+HORIZONTAL,
"img7"+TRANSPARENT+SCALABLE+VERTICAL,
"img8"+TRANSPARENT+SCALABLE+VERTICAL,
"img9"+TRANSPARENT+SCALABLE+VERTICAL );
</script id=script_dhtml_end>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer