Purpzl patch 1 added preset menu

ASCII.js

@@ -120,8 +120,116 @@ var obj = {
     randomness: 15,
     invert: false,
     animationType: 'Random Text',
+    rotationAngle: 0 // Default rotation angle (0 degrees) 
 };
 
+function savePreset(name) {
+    const preset = {
+        fontColor: obj.fontColor,
+        fontColor2: obj.fontColor2,
+        fontSizeFactor: obj.fontSizeFactor,
+        pixelSizeFactor: obj.pixelSizeFactor,
+        threshold: obj.threshold,
+        textInput: obj.textInput,
+        randomness: obj.randomness,
+        invert: obj.invert,
+        rotationAngle: obj.rotationAngle,
+        backgroundColor: obj.backgroundColor,
+        backgroundSaturation: obj.backgroundSaturation,
+        backgroundGradient: obj.backgroundGradient
+    };
+
+    // Get existing presets from localStorage or initialize as an empty object
+    let presets = JSON.parse(localStorage.getItem('asciiPresets')) || {};
+
+    // Add the new preset by name
+    presets[name] = preset;
+
+    // Save the updated presets list back to localStorage
+    localStorage.setItem('asciiPresets', JSON.stringify(presets));
+    alert('Preset Saved!');
+}
+
+// Step 2: Add the input field for preset name
+gui.add(obj, 'presetName').name('Preset Name').onFinishChange(refresh);
+
+// Step 3: Add the rest of the GUI controls
+gui.addColor(obj, "backgroundColor").name("Background Color").onFinishChange(refresh);
+gui.add(obj, "backgroundGradient").name('Bg Gradient?').onChange(refresh);
+gui.add(obj, "backgroundSaturation").min(0).max(100).step(1).name('Bg Saturation').onChange(refresh);
+gui.addColor(obj, "fontColor").name("Font Color").onFinishChange(refresh);
+gui.addColor(obj, "fontColor2").name("Font Color2").onFinishChange(refresh);
+gui.add(obj, "fontSizeFactor").min(0).max(10).step(1).name('Font Size Factor').onChange(refresh);
+// Add all your other controls...
+function savePreset(name) {
+    // Save the current settings (controls) to an object
+    const preset = {
+        fontColor: obj.fontColor,
+        fontColor2: obj.fontColor2,
+        fontSizeFactor: obj.fontSizeFactor,
+        pixelSizeFactor: obj.pixelSizeFactor,
+        threshold: obj.threshold,
+        textInput: obj.textInput,
+        randomness: obj.randomness,
+        invert: obj.invert,
+        rotationAngle: obj.rotationAngle,
+        backgroundColor: obj.backgroundColor,
+        backgroundSaturation: obj.backgroundSaturation,
+        backgroundGradient: obj.backgroundGradient
+    };
+
+    // Get existing presets from localStorage or initialize as an empty object
+    let presets = JSON.parse(localStorage.getItem('asciiPresets')) || {};
+
+    // Add the new preset by name
+    presets[name] = preset;
+
+    // Save the updated presets list back to localStorage
+    localStorage.setItem('asciiPresets', JSON.stringify(presets));
+    alert('Preset Saved!');
+}
+function loadPreset(name) {
+    let presets = JSON.parse(localStorage.getItem('asciiPresets')) || {};
+
+    if (presets[name]) {
+        const preset = presets[name];
+        obj.fontColor = preset.fontColor;
+        obj.fontColor2 = preset.fontColor2;
+        obj.fontSizeFactor = preset.fontSizeFactor;
+        obj.pixelSizeFactor = preset.pixelSizeFactor;
+        obj.threshold = preset.threshold;
+        obj.textInput = preset.textInput;
+        obj.randomness = preset.randomness;
+        obj.invert = preset.invert;
+        obj.rotationAngle = preset.rotationAngle;
+        obj.backgroundColor = preset.backgroundColor;
+        obj.backgroundSaturation = preset.backgroundSaturation;
+        obj.backgroundGradient = preset.backgroundGradient;
+        refresh();
+        alert('Preset Loaded!');
+    } else {
+        alert('Preset not found!');
+    }
+}
+gui.add({ savePreset: function () {
+    var presetName = obj.presetName; // Get preset name from the input field
+    if (presetName) {
+        savePreset(presetName); // Save the preset with the input name
+    } else {
+        alert('Please enter a preset name!');
+    }
+} }, 'savePreset').name('Save Preset');
+
+gui.add({ loadPreset: function () {
+    var presetName = obj.presetName; // Get preset name from the input field
+    if (presetName) {
+        loadPreset(presetName); // Load the preset by name
+    } else {
+        alert('Please enter a preset name!');
+    }
+} }, 'loadPreset').name('Load Preset');
+
+
 var videoType = "Default";
 var animationType = obj.animationType;
 
@@ -172,6 +280,7 @@ gui.add(obj, "randomness").min(0).max(100).step(1).name('Randomness').onChange(r
 
 gui.add(obj, 'animationType', [ 'Random Text', 'User Text'] ).name('Text Type').onChange(refresh);
 gui.add(obj, "textInput").onFinishChange(refresh);
+gui.add(obj, "rotationAngle").min(0).max(360).step(1).name('Rotation').onChange(refresh);
 
 obj['pausePlay'] = function () {
     togglePausePlay();
@@ -348,10 +457,32 @@ function renderText(){
             if(invertToggle == false){
                 if(currentGrayValue/255 > adjustedThreshold){
 
-                    ctx.fillStyle = interpolateHex(fontColor,fontColor2,(currentGrayValue/255-adjustedThreshold) / (1-adjustedThreshold))                    
-                    ctx.fillText(char, col*pixelSize, row*(pixelSize) + pixelSize);
-                    //ctx.strokeStyle = fontColor;
-                    //ctx.strokeText(char, col*pixelSize + pixelSize/4, row*(pixelSize) + pixelSize/2);
+           if (currentGrayValue / 255 < (1 - adjustedThreshold)) {
+    // Save the context before rotating
+    ctx.save();
+
+    // Translate the context to the center of each character
+    ctx.translate(col * pixelSize + pixelSize / 2, row * pixelSize + pixelSize / 2);
+
+    // Rotate the context based on the rotation angle from the slider
+    ctx.rotate(obj.rotationAngle * Math.PI / 180); // Convert degrees to radians
+
+    // Set the fill style based on the gray value
+    ctx.fillStyle = interpolateHex(fontColor2, fontColor, (currentGrayValue / 255) / (1 - adjustedThreshold));
+
+    // Draw the rotated text
+    ctx.fillText(char, -pixelSize / 2, pixelSize / 2);
+
+    // Restore the context to its original state
+    ctx.restore();
+} else {
+    // Set the fill style based on the other condition
+    ctx.fillStyle = interpolateHex(fontColor, fontColor2, (currentGrayValue / 255 - adjustedThreshold) / (1 - adjustedThreshold));
+
+    // Draw the text without rotation
+    ctx.fillText(char, col * pixelSize, row * pixelSize + pixelSize);
+}
+
                 }
             } else {
                 if(currentGrayValue/255 < (1-adjustedThreshold)){
@@ -981,4 +1112,4 @@ setTimeout(function(){
 
 //MAIN METHOD
 refresh();
-startDefaultVideo();
+startDefaultVideo();