DIR : /home/kozerus/public_html/ruffle/ko_builder1.htm
/home/kozerus/public_html/ruffle
<!DOCTYPE html>
<html>
<head>
<title>/ruffle/ko_builder.html 20250711_2350</title>
<!-- <title>Audio Visualization</title> -->
<style id=style_canvas > canvas { border: 5px solid black; } </style id=style_canvas_end>
<script id=script_data>
bgs=`bg_ancientfootprints.jpg
bg_angel.jpg
bg_artic.jpg
bg_background1.jpg
bg_bagpress2.jpg
bg_ball_field.jpg
bg_base3.jpg
bg_base4.jpg
bg_blackhole_collision.jpg
bg_blue_sky.jpg
bg_bottom.jpg
bg_busch.jpg
bg_coors.jpg
bg_corn.jpg
bg_defeatism.jpg
bg_elysim.jpg
bg_fence.jpg
bg_flag_ralley.jpg
bg_flood_gutter.jpg
bg_footer1.jpg
bg_footer2.jpg
bg_footprints.jpg
bg_gathering_storm.jpg
bg_gold_bars.jpg
bg_gold_sunset.jpg
bg_goldenegg.jpg
bg_grass.jpg
bg_home2.jpg
bg_jetshock.jpg
bg_john.jpg
bg_money.jpg
bg_morning_after.jpg
bg_mt.jpg
bg_nytimesprop.jpg
bg_olympics.jpg
bg_red_sky.jpg
bg_sand.jpg
bg_snow_bridge.jpg
bg_snow_covered_bridge.jpg
bg_storm.jpg
bg_wrig.jpg
bg_yankee.jpg`.split("\n");
meshs=`mesh1.jpg
mesh1_380.jpg
mesh1_fmp.jpg
mesh1_ko.jpg
mesh2.jpg
mesh2_300.jpg
mesh2_fmp.jpg
mesh2_ko.jpg
mesh3.jpg
mesh3_fmp.jpg
mesh3_ko.jpg
mesh4.jpg
mesh4_fmp.jpg
mesh4_ko.jpg
mesh5.jpg
mesh5_fmp.jpg
mesh5_ko.jpg
mesh6.jpg
mesh6_fmp.jpg
mesh6_ko.jpg
mesh7.jpg
mesh7_fmp.jpg
mesh7_ko.jpg
mesh8.jpg
mesh8_fmp.jpg
mesh8_ko.jpg
mesh_mask.jpg`.split("\n");
pads=`pad1.jpg
pad2.jpg
pad3.jpg
pad4.jpg
pad5.jpg
pad6.jpg
pad7.jpg
pad8.jpg
pad9.jpg
pad_mask.jpg`.split("\n");
mp3s=`takemeou.mp3
alarm.mp3
bat_taps.mp3
bells.mp3
bubbles.mp3
busy.mp3
cashregister.mp3
catch.mp3
charge.mp3
charge_2.mp3
cheer.mp3
chord.mp3
clap_stomp.mp3
click2.mp3
cork.mp3
crowd.mp3
crumpling.mp3
cymbal.mp3
digging_in.mp3
dooropen.mp3
doorslam.mp3
dropped_bat.mp3
exclamation.mp3
fall.mp3
field_of.mp3
flipflop.mp3
gong.mp3
hit.mp3
lets_go.mp3
phaser.mp3
phone.mp3
ping.mp3
pitch_whoosh.mp3
slide.mp3
slip.mp3
whoosh.mp3`.split("\n");
// alert( "BUGS_11 bgs_len="+bgs.length+" bgs="+bgs );
// alert( "BUGS_12 meshs_len="+meshs.length+" meshs="+meshs );
// alert( "BUGS_13 pads_len="+pads.length+" pads="+pads );
// alert( "BUGS_11 mp3s_len="+mp3s.length+" mp3s="+mp3s );
</script id=script_data_end>
<script id=script_random_int>
function random_int(max,min) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script id=script_random_int_end>
<p id=p_audiosource>chord</p>
<canvas id="myAudioCanvas" height=100 width=500></canvas>
<audio id="myAudio" src="./ko_builder/chord.mp3" controls autoplay="true" ></audio>
<script id=script_audio>
// alert( "BUGS_10 mp3s.length="+mp3s.length+" mp3s="+mp3s );
mp3root="./ko_builder/";
mp3_idx=random_int(mp3s.length,1);
mp3=mp3root+mp3s[mp3_idx];
document.getElementById('p_audiosource').innerHTML=mp3s[mp3_idx];
document.getElementById('myAudio').src=mp3;
// alert( "BUGS_11 mp3_idx="+mp3_idx+" mp3="+mp3+" byid="+ document.getElementById('myAudio').srv );
// document.getElementById('myAudio').src="./ko_builder/charge_2.mp3";
// document.getElementById('myAudio').src=mp3;
const audio_mp3 = document.getElementById('myAudio');
// const audio_mp3 = new Audio("./ko_builder/chord.mp3");
audio_mp3.load();
audio_mp3.play();
const canvas = document.getElementById('myAudioCanvas');
const ctx_audio = canvas.getContext('2d');
const audioContext = new AudioContext();
const source = audioContext.createMediaElementSource(audio_mp3);
const analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(audioContext.destination); // Connect to speakers
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
function draw() {
requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
ctx_audio.clearRect(0, 0, canvas.width, canvas.height);
ctx_audio.lineWidth = 2;
ctx_audio.strokeStyle = 'rgb(0, 0, 0)';
ctx_audio.beginPath();
const sliceWidth = canvas.width * 1.0 / bufferLength;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const v = dataArray[i] / 128.0;
const y = v * canvas.height / 2;
if (i === 0) { ctx_audio.moveTo(x, y); }
else { ctx_audio.lineTo(x, y); }
x += sliceWidth;
}
ctx_audio.lineTo(canvas.width, canvas.height / 2);
ctx_audio.stroke();
}
draw();
</script id=script_audio_end>
<script id="script_ko_builder">
function ko_builder(bg,mesh,pad,mp3) {
// bg_idx=2; mesh_ids=2; pad_idx=2; mp3_idx=3;
bg="./ko_builder/elysim.jpg";
mesh="./ko_builder/mesh1.jpg";
pad="./ko_builder/pad1.jpg";
mp3="./ko_builder/chord.mp3";
// mp3_idx=random_int(mp3s.length,1);
// mp3=mp3root+mp3s[mp3_idx];
// document.getElementById('p_audiosource').innerHTML=mp3s[mp3_idx];
// document.getElementById('myAudio').src=mp3;
// bg=""; mesh=""; pad=""; mp3="";
bg=""; mesh="";
imgroot="./ko_builder/";
bg_idx=random_int(bgs.length,1);
mesh_idx=random_int(meshs.length,1);
pad_idx=random_int(pads.length,1);
mp3_idx=random_int(mp3s.length,1);
if( bg == "" ) { bg=imgroot+bgs[bg_idx]; }
if( mesh == "" ) { mesh=imgroot+meshs[mesh_idx]; }
if( pad == "" ) { pad=imgroot+pads[pad_idx]; }
if( mp3 == "" ) { mp3=imgroot+mp3s[mp3_ids]; }
// alert( "BUGS_151 bg_idx="+bg_idx+" imgroot="+imgroot+" bg="+bg );
// alert( "BUGS_152 mesh_idx="+mesh_idx+" imgroot="+imgroot+" mesh="+mesh );
// alert( "BUGS_161 bgs.length="+bgs.length+" bgs1="+bgs[1] );
// alert( "BUGS_162 meshs.length="+meshs.length+" meshs_1="+meshs[1] );
// alert( "BUGS_163 pads.length="+pads.length+" bgs_1="+pads[1] );
// alert( "BUGS_164 mp3s.length="+mp3s.length+" mp3s_1="+mp3s[1] );
// alert( "BUGS_170 ko_builder bg="+bg+" mesh="+mesh+" pad="+pad+" mp3="+mp3 );
bg_mesh_pad="";
bg_mesh_pad+=" bg=<b>"+bgs[bg_idx].replace(".jpg","")+"</b>";
bg_mesh_pad+=" mesh=<b>"+meshs[mesh_idx].replace(".jpg","")+"</b>";
bg_mesh_pad+=" pad=<b>"+pads[pad_idx].replace(".jpg","")+"</b>";
document.getElementById('p_bgmeshpad').innerHTML=bg_mesh_pad;
if( document.getElementById('canvas_ko_builder')) {
var canvas = document.getElementById('canvas_ko_builder');
}
if(canvas.getContext == null) { return; }
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.moveTo(0,0);
ctx.lineTo(250,250);
ctx.stroke();
ctx.font = "30px Arial";
ctx.fillText("ko_builder",10,50);
// ctx.strokeText("ko_builder",10,250);
// var img_bg = document.getElementById("img_bg");
// var img_pad = document.getElementById("img_pad");
// var img_mesh = document.getElementById("img_mesh");
var img_bg = new Image();
var img_mesh = new Image();
var img_pad = new Image();
img_bg.src=bg;
img_mesh.src=mesh;
img_pad.src=pad;
// alert( "BUGS_201 img_bg.src="+img_bg.src+" bg="+bg );
// alert( "BUGS_202 img_mesh.src="+img_mesh.src+" mesh="+mesh );
// alert( "BUGS_203 img_pad.src="+img_pad.src+" pad="+pad );
img_bg.onload = () => { ctx.drawImage(img_bg,100,100); }
img_mesh.onload = () => { ctx.drawImage(img_mesh,200,410); }
img_pad.onload = () => { ctx.drawImage(img_pad,200,400); }
// alert( "BUGS_12 ko_builder ctx="+ctx );
// if( document.getElementById('audio_mp3')) {
// var audio = document.getElementById('audio_mp3');
// }
// Draw a simple rectangle on the canvas
// ctx.fillStyle = 'blue';
// ctx.fillRect(50, 50, 100, 100);
// canvas.addEventListener('click', function(event) {
// var rect = canvas.getBoundingClientRect();
// var x = event.clientX - rect.left;
// var y = event.clientY - rect.top;
// if (x >= 50 && x <= 150 && y >= 50 && y <= 150) {
// audio.play();
// }
// });
// var sound = new Audio("C.wav");
// var sound = new Audio(mp3);
// sound.preload = 'auto';
// sound.load();
// sound.play();
return(args);
}
</script>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let currentImage = new Image();
currentImage.src = "path/to/initial-image.jpg"; // Replace with your initial image path
currentImage.onload = () => {
ctx.drawImage(currentImage, 0, 0);
};
function swapImage() {
// Load a new image
const newImage = new Image();
newImage.src = "path/to/another-image.jpg"; // Replace with your new image path
newImage.onload = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.drawImage(newImage, 0, 0); // Draw the new image
};
}
</script>
<script id=script_playsound>
function playSound(volume) {
// C();
// var click = sound.cloneNode();
// click.volume = volume;
// click.play();
}
</script id=script_playsound>
<script id=script_bg>
function bg(filetext) {
alert( "BUGS_410 bg filetext="+filetext );
return(filetext);
}
</script id=script_bg_end>
<script id=script_mesh>
function mesh(filetext) {
alert( "BUGS_420 mesh filetext="+filetext );
return(filetext);
}
</script id=script_mesh_end>
<script id=script_pad>
function pad(filetext) {
alert( "BUGS_430 pad filetext="+filetext );
return(filetext);
}
</script id=script_pad_end>
<script id=script_mp3>
function mp3(filetext) {
alert( "BUGS_440 mp3 filetext="+filetext );
return(filetext);
}
</script id=script_mp3_end>
<script id=script_loadfile>
function loadfile(filename, filetext) {
// alert( "BUGS_300 loadfile filename="+filename );
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
filetext=this.responseText.split("\n");
// alert( "BUGS_301 loadfile readyState=4 status=200 filename="+filename+" filetext="+filetext );
if( filename == "./ko_builder/bg.psv" ) {
// alert( "BUGS_311 filename="+filename );
htmout=bg(filetext);
// alert( "BUGS 312 BG filename="+filename+" filetext="+filetext+" htmout="+htmout );
}
if( filename == "./ko_builder/mesh.psv" ) {
// alert( "BUGS_321 filename="+filename );
htmout=mesh(filetext);
// alert( "BUGS 322 MESH filename="+filename+" filetext="+filetext+" htmout="+htmout );
}
if( filename == "./ko_builder/pad.psv" ) {
// alert( "BUGS_331 filename="+filename );
htmout=pad(filetext);
// alert( "BUGS 332 PAD filename="+filename+" filetext="+filetext+" htmout="+htmout );
}
if( filename == "./ko_builder/mp3.psv" ) {
// alert( "BUGS_341 filename="+filename );
htmout=mp3(filetext);
// alert( "BUGS 342 MP3 filename="+filename+" filetext="+filetext+" htmout="+htmout );
}
}
}
// alert( "BUGS_350 loadfile filename="+filename );
xmlhttp.open("GET", filename, true );
xmlhttp.send();
return(filetext);
}
</script id=script_loadfile_end>
<script id=script_startup>
function startup(args) {
// alert( "BUGS_21 startup args="+args );
response=""; filename="ko_builder.psv"; filetext="";
response_bg=""; filename_bg="./ko_builder/bgs.psv"; filetext_bg="";
response_mesh=""; filename_mesh="./ko_builder/meshs.psv"; filetext_mesh="";
response_pad=""; filename_pad="./ko_builder/pads.psv"; filetext_pad="";
response_mp3=""; filename_mp3="./ko_builder/mp3s.psv"; filetext_mp3="";
response_bg=loadfile(filename_bg, filetext_bg );
// alert( "BUGS_111 response_bg="+response_bg+" filename_bg="+filename_bg );
response_mesh=loadfile(filename_mesh, filetext_mesh );
// alert( "BUGS_112 response_mesh="+response_mesh+" filename_mesh="+filename_mesh );
response_pad=loadfile(filename_pad, filetext_pad );
// alert( "BUGS_113 response_pad="+response_pad+" filename_pad="+filename_pad );
response_mp3=loadfile(filename_mp3, filetext_mp3 );
// alert( "BUGS_114 response_mp3="+response_mp3+" filename_mp3="+filename_mp3 );
ko_builder(bg,mesh,pad,mp3);
// alert( "BUGS_22 startup args="+args );
return(args);
}
</script id=script_startup_end>
</head>
<body bgcolor=linen onload="startup('onload'); return false;" >
<div id=div_ko_builder>
<br>
<hr color=goldenrod>
<button onclick="window.location.reload();">refreshPage</button>
<hr color=goldenrod>
<!--
<a href=/ruffle/ko_builder1.jpg target=_blank>
<img src=/ruffle/tn_ko_builder1.png title=" ko_builder1" >
</a>
<br>
<h1>ko_builder</h1>
-->
<hr color=goldenrod>
<hr color=white>
<hr color=black>
<p id=p_bgmeshpad>bg mesh pad</p>
<canvas id=canvas_ko_builder width=800 height=600 style="border:2px solid #000000'">
</canvas>
<hr color=black>
<hr color=white>
<hr color=goldenrod>
</div id=div_ko_builder_end>
<br>
<hr color=goldenrod>
<img hidden id=img_bg src="./ko_builder/elysim.jpg" draggable="true" title=" img_bg_elysim" height=600 width=600>
<img hidden id=img_mesh src="./ko_builder/mesh1.jpg" draggable="true" title=" img_mesh1" height=200 width=500>
<img hidden id=img_pad src="./ko_builder/pad1.jpg" draggable="true" title=" img_pad1" height=10 width=500>
<!--
<audio id="audio_mp3" preload="auto">
<source src="./ko_builder/chord.mp3" type="audio/mpeg" >
<source src="./ko_builder/chord.ogg" type="audio/ogg" >
</audio>
-->
<hr color=goldenrod>
<!--
<img src=/imgs/btn/kob.png onclick="ko_builder('bg_elysim.jpg','','','') return false;" title=" bg=elysim.jpg" height=25 >bg_elysim
       
-->
<img src=/imgs/btn/kob.png onclick="ko_builder('','mesh1.jpg','',''); return false;" title=" mesh=mesh1.jpg" height=25 >mesh1
       
<img src=/imgs/btn/kob.png onclick="ko_builder('','','pad1.jpg',''); return false;" title=" pad=pad1.jpg" height=25 >pad1
<!--
       
<img src=/imgs/btn/kob.png onclick="ko_builder('','','','takemeou.mp3'); return false;" title=" mp3=chord.mp3" height=25 >takemeou.mp3
-->
</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