Heretic86

This ones going in Javascript, so exponents there are ** operators, others are ^ operators... Im just having trouble figuring out how to implement a* (b ** x) + c so I dont really have anything close to working since i cant figure out where to plug in the variables into the data! I understand that there should be a way to do something like a Level Curve as i, where i ** exp = 9999, but not sure where to plug in those figures into the equation?

Im messing around in HTML5 Canvas which uses Javascript to draw to the Canvas. The Canvas is being used to display an RPG Character attribute over the number of levels. Making a Linear Slope (straight line) is easy. (NOTE: same post on a couple places I dont visit regularly, varied responses are VERY helpful...) Im curious what the formula is to calculate the value for each level that implements an Exponential Curve? The following image is from the Editor that I am trying to emulate. This is a Non Exponential Curve, which I already have working. These are the Exponential Curves that I want to emulate, and I dont know the value of the Slider when its set to either "Fast" or "Slow", and "Middle" is a Non Exponential Curve (so guessing a value of 0 there. What would I need to do to generate a curve that looks like this, where we input the Level 1 and Level 99 values? Experimented with something like this but its not coming out anywhere like I need it to... let exp_list = [null]; let pow = parseInt(slider.value); for (let i = 1; i < 99; i++){ exp_list[i] = 500 * (n ** pow) + 1; // ???? ab^x } Not quite sure what this formula is to plug in here. Halp?

Might as well *bump this since I did get it to work, and this is at the top of the list. Definitely had to improve my SVG skills to get it up and running. I was not setting the values in the feColorMatrix correctly. End result:

Thats the plan. Currently drawing raw images on that demo page. Edit: So I can now get my SVG and convert it to a new Image(), but when I try to draw my image to my canvas, it doesnt draw! I tested it out on the base64 source version of the image and that draws just fine. (NOTE: once this works, the temporary stuff will be removed from the DOM and only the Canvas displaying the results will be displayed.) https://www.webucate.me/svg4.html On this link, can someone tell me why my Image is not drawing to the Canvas?

I have been trying to draw an SVG Graphic to an HTML5 Canvas element, which has only been partly successful. The image draws, but does not include the SVG Filter Effects that I am looking for. Can anyone suggest how to draw a FILTERED SVG graphic to an HTML 5 Canvas? I want to use the feColorMatrix filter before drawing it to my canvas... https://www.webucate.me/svg.html (My current example code, probably gonna change a bunch) Suggestions? Solutions?

Boy, you guys sure did a great job of helping me out on this. Thanks for nothing.

word-break: break-all; white-space: break-spaces; This is as close as I can get. Works as I want in Firefox, but other people have reported that Firefox is not working like it is supposed to. So the behavior I want apparently is a "bug" in Firefox? In chrome, that behavior still remains, it never wraps the space character to the next line which is what I need to make it a "WSYIWYG" editor for my users...

I need to make a Text Area behave like a DOS prompt Basically so it wraps and spaces are placed like they are in a DOS / CMD window... This might display a little better... Can you see how it goes back and forth between "o foo" and just "foo"? It moves two characters. What am I doing wrong here? https://www.webucate.me/textarea.htm

Impressive! and pretty fun also!

Not quite game related (directly), just a simple form. In my form, I have an Event Listener for Paste Events, then handle the Paste data the way I want. Trouble is that once I do that and use e.preventDefault() and textarea.value = modifiedString to set the value, I am no longer able to use the browser feature of CTRL+Z to undo changes. Like it records some Event? Mutation? What am I doing wrong?

Im messing around with Classes, Inheritance, and some other stuff but to keep it "simple" I'll just say ES6 Classes On one page, I create an instance of a class class MyClass { constructor(name = "", value = ""){ this.name = name; this.value = value; } } const foo = new MyClass("Tom", "123"); There is a lot of other stuff going on, so in order to visually organize the data for the user (there is a LOT), I use a separate page to modify one aspect of the data that they can change. The sub page then uses postMessage to send an instance of the class that is created on the subpage back to the main page, but it loses its Class Type. let msg = { pageMsg : { myData: foo } }; mainPage.postMessage(msg); console.log(msg.data.myMsg instanceof MyClass); // This always returns true on this page Then I process the message back on the main page: // Main Page function messageListener(msg){ console.log(msg.data.myMsg instanceof MyClass); // This always returns false } I left out all the security and module stuff to keep it easy. Is there a way to send a message object from one page to another and retain the Class Instance?

Can we see a bit more of your code? What is there doesnt really give us a clear explanation as to why your property is coming back undefined. I am curious however if you log any of your objects, what your Dev Tools show...

I've been playing around with the Web Audio API to create sound effects, background music and sound for games. I can adjust playbackRate to adjust the pitch of audio by disabling Preserves Pitch property (true by default) as an HTML5 Audio Object. var bgm = new Audio(); bgm.source = "somefile.php?bgmId=1"; bgm.mozPreservesPitch = false; bgm.webkitPreservesPitch = false; Trouble is that is HTML5 not the Web Audio API. So I needed to throw in some Web Audio API components. First thing I thought I would try was the Spectrum Analyzer. That wasnt difficult. It draws to a Canvas, shows some pretty bars that represent tones, but once I did that, I can no longer adjust the playbackRate of whatever my audio file is, at least in Firefox. It works in Chrome but not Firefox and it needs to work in both. I dont think it is a Firefox bug, but rather the way I am connecting each Audio API node to each other. function setupAudio(){ aCtx = new (window.AudioContext || window.webkitAudioContext)(); audio_source = aCtx.createMediaElementSource(audio); audio_filter = aCtx.createBiquadFilter(); audio_source.connect(audio_filter); audio_filter.type = 'allpass'; audio_filter.detune.value = -1200; } function playBGM(e){ stopBGM(e); if (!selectedBgm) return; let el = document.getElementById(selectedBgm), s = selectedBgm.substr(0,4); let asset_id = (s == 'user') ? el.dataset.user_bgm : (s == 'team') ? el.dataset.team_bgm : el.dataset.game_bgm; if (asset_id != ''){ audio.oncanplay = function(){ audio.volume = volume.value / 100.0; audio.playbackRate = pitch.value / 100.0; seekSlider.disabled = false; audio.play(); audio_filter.detune.value = -1200; console.log(audio_source.mediaElement.playbackRate); } audio.ontimeupdate = function(){ if (audio.duration != Infinity && audio.duration.toString() != "NaN"){ seekSlider.value = audio.currentTime * (100 / audio.duration); currentTime.innerHTML = Math.floor(audio.currentTime / 60) + ":" + ("0" + Math.floor(audio.currentTime) % 60).slice(-2); totalTime.innerHTML = Math.floor(Math.ceil(audio.duration) / 60) + ":" + ("0" + Math.ceil(audio.duration) % 60).slice(-2); } } playingName.innerHTML = el.dataset.name; audio.preload = "metadata"; audio.preservesPitch = false; audio.mozPreservesPitch = false; audio.webkitPreservesPitch = false; audio.loop = true; audio.src = "load_game_asset.php?game_id=" + game_id + "&asset_id=" + asset_id; } } function setupGraph(){ graph.width = 222; graph.height = 20; ctx = graph.getContext('2d'); analyzer = aCtx.createAnalyser(); analyzer.fftSize = 256; audio_filter.connect(analyzer); analyzer.connect(aCtx.destination); graphAnimator(); } function graphAnimator(){ requestAnimationFrame(graphAnimator); let fbc_array = new Uint8Array(analyzer.frequencyBinCount); analyzer.getByteFrequencyData(fbc_array); ctx.clearRect(0, 0, graph.width, graph.height); ctx.fillStyle = "#00FFAA"; for (let i = 0; i < 256; i++){ let x = i * 2; let h = -(fbc_array[i] / 12); ctx.fillRect(x, 20, 1, h); } } I might throw in more questions later, what I really want to do is adjust the Pitch without the playbackRate, but so far, I want to get playbackRate working also... What exactly am I doing wrong here? Do you guys have a lot of experience with the Web Audio API?