Greasy Fork is available in English.
Yes! Allows for quick drawing on r/whatismycookiecuutter ! There isn't even a need to exit Reddit! So much easier than having to load an entire drawing program, or trying to download it to your computer!
// ==UserScript==
// @name r/"What is My Cookie Cutter" Drawing Software!
// @namespace http://greasyfork.icu/en/scripts/486930-r-what-is-my-cookie-cutter-drawing-software/code
// @version 1.0
// @description Yes! Allows for quick drawing on r/whatismycookiecuutter ! There isn't even a need to exit Reddit! So much easier than having to load an entire drawing program, or trying to download it to your computer!
// @author Heptatron
// @license MIT
// @match https://www.reddit.com/*
// @match https://i.redd.it/*
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(function() {
'use strict';
let canvas, ctx;
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let history = [];
let historyIndex = -1;
let showControls = false;
let colorHistory = [];
// Default settings
let settings = {
color: 'black',
lineWidth: 2,
eraser: false,
circleDistance: 2,
opacity: 1,
softness: 5,
shadow: false,
touchscreenMode: false
};
function createCanvas() {
canvas = document.createElement('canvas');
canvas.style.position = 'fixed';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.pointerEvents = 'none'; // To allow clicking through canvas
canvas.style.zIndex = '9999'; // Canvas is on top
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
}
function createOverlay() {
const overlay = document.createElement('div');
overlay.id = 'overlay';
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)';
overlay.style.zIndex = '9998';
overlay.style.display = 'none';
document.body.appendChild(overlay);
}
function showOverlay() {
const overlay = document.getElementById('overlay');
overlay.style.display = 'block';
}
function hideOverlay() {
const overlay = document.getElementById('overlay');
overlay.style.display = 'none';
}
function startDrawing(e) {
if ((settings.touchscreenMode || e.ctrlKey) && (e.button === 0 || e.button === 2)) {
isDrawing = true;
[lastX, lastY] = [e.clientX, e.clientY];
if (!settings.eraser) {
addToHistory();
}
}
}
function draw(e) {
if (!isDrawing) return;
if (settings.eraser) {
ctx.globalCompositeOperation = 'destination-out';
} else {
ctx.globalCompositeOperation = 'source-over';
}
const deltaX = e.clientX - lastX;
const deltaY = e.clientY - lastY;
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
const angle = Math.atan2(deltaY, deltaX);
for (let i = 0; i < distance; i += settings.circleDistance) {
const x = lastX + Math.cos(angle) * i;
const y = lastY + Math.sin(angle) * i;
ctx.beginPath();
ctx.arc(x, y, settings.lineWidth / 2, 0, Math.PI * 2);
ctx.fillStyle = settings.color;
ctx.globalAlpha = settings.opacity;
if (settings.shadow) {
ctx.shadowColor = settings.color;
ctx.shadowBlur = settings.lineWidth / 2;
} else {
ctx.shadowColor = 'transparent';
ctx.shadowBlur = 0;
}
ctx.fill();
}
[lastX, lastY] = [e.clientX, e.clientY];
}
function stopDrawing() {
isDrawing = false;
}
function init() {
createCanvas();
createOverlay();
document.addEventListener('mousedown', startDrawing);
document.addEventListener('mousemove', draw);
document.addEventListener('mouseup', stopDrawing);
createSettingsMenu();
createButtons();
createDraggableCircle(); // Add draggable circle
document.addEventListener('keydown', handleKeyPress);
document.addEventListener('keydown', toggleControls);
document.addEventListener('keyup', toggleControls);
loadSettings();
loadColorHistory();
}
function createSettingsMenu() {
const settingsMenu = document.createElement('div');
settingsMenu.id = 'settingsMenu';
settingsMenu.style.display = 'none';
settingsMenu.style.position = 'fixed';
settingsMenu.style.top = '10px';
settingsMenu.style.left = '10px';
settingsMenu.style.backgroundColor = 'rgba(77, 77, 77, 0.7)';
settingsMenu.style.padding = '10px';
settingsMenu.style.borderRadius = '5px';
settingsMenu.style.zIndex = '10000';
settingsMenu.innerHTML = `
<h3>Settings</h3>
<label for="color">Color:</label>
<input type="color" id="color" value="${settings.color}">
<button id="saveColor">Save Color</button>
<br>
<div id="colorHistoryContainer"></div>
<button id="clearColorHistory">Clear Color History</button>
<br>
<label for="lineWidth">Line Width:</label>
<input type="range" id="lineWidth" min="0.5" max="100" step="0.5" value="${settings.lineWidth}">
<br>
<label for="circleDistance">Circle Distance:</label>
<input type="number" id="circleDistance" min="1" value="${settings.circleDistance}">
<br>
<label for="eraser">Eraser:</label>
<input type="checkbox" id="eraser">
<br>
<label for="opacity">Opacity:</label>
<input type="range" id="opacity" min="0" max=".5" step="0.01" value="${settings.opacity}">
<br>
<label for="softness">Softness:</label>
<input type="number" id="softness" min="1" value="${settings.softness}">
<br>
<label for="shadow">Shadow:</label>
<input type="checkbox" id="shadow">
<br>
<label for="touchscreenMode">Touchscreen Mode:</label> <!-- Updated setting name -->
<input type="checkbox" id="touchscreenMode"> <!-- Updated setting name -->
`;
document.body.appendChild(settingsMenu);
const colorInput = document.getElementById('color');
colorInput.addEventListener('input', function() {
settings.color = colorInput.value;
GM_setValue('color', settings.color);
});
const lineWidthInput = document.getElementById('lineWidth');
lineWidthInput.addEventListener('input', function() {
settings.lineWidth = parseFloat(lineWidthInput.value);
GM_setValue('lineWidth', settings.lineWidth);
});
const circleDistanceInput = document.getElementById('circleDistance');
circleDistanceInput.addEventListener('input', function() {
settings.circleDistance = parseInt(circleDistanceInput.value);
GM_setValue('circleDistance', settings.circleDistance);
});
const eraserCheckbox = document.getElementById('eraser');
eraserCheckbox.checked = settings.eraser;
eraserCheckbox.addEventListener('change', function() {
settings.eraser = eraserCheckbox.checked;
GM_setValue('eraser', settings.eraser);
});
const opacityInput = document.getElementById('opacity');
opacityInput.addEventListener('input', function() {
settings.opacity = parseFloat(opacityInput.value);
GM_setValue('opacity', settings.opacity);
ctx.globalAlpha = settings.opacity;
});
const softnessInput = document.getElementById('softness');
softnessInput.addEventListener('input', function() {
settings.softness = parseInt(softnessInput.value);
GM_setValue('softness', settings.softness);
});
const shadowCheckbox = document.getElementById('shadow');
shadowCheckbox.checked = settings.shadow;
shadowCheckbox.addEventListener('change', function() {
settings.shadow = shadowCheckbox.checked;
GM_setValue('shadow', settings.shadow);
});
const touchscreenModeCheckbox = document.getElementById('touchscreenMode');
touchscreenModeCheckbox.checked = settings.touchscreenMode;
touchscreenModeCheckbox.addEventListener('change', function() {
settings.touchscreenMode = touchscreenModeCheckbox.checked;
GM_setValue('touchscreenMode', settings.touchscreenMode);
});
const saveColorButton = document.getElementById('saveColor');
saveColorButton.addEventListener('click', saveColor);
const clearColorHistoryButton = document.getElementById('clearColorHistory');
clearColorHistoryButton.addEventListener('click', clearColorHistory);
}
function createButtons() {
const buttonsContainer = document.createElement('div');
buttonsContainer.id = 'buttonsContainer';
buttonsContainer.style.display = 'none';
buttonsContainer.style.position = 'fixed';
buttonsContainer.style.top = '10px';
buttonsContainer.style.right = '10px';
buttonsContainer.style.zIndex = '10000';
const undoButton = document.createElement('button');
undoButton.textContent = 'Undo (Ctrl + Z)';
undoButton.addEventListener('click', undo);
buttonsContainer.appendChild(undoButton);
const redoButton = document.createElement('button');
redoButton.textContent = 'Redo (Ctrl + Shift + Z)';
redoButton.addEventListener('click', redo);
buttonsContainer.appendChild(redoButton);
const clearButton = document.createElement('button');
clearButton.textContent = 'Clear All';
clearButton.addEventListener('click', clearCanvas);
buttonsContainer.appendChild(clearButton);
document.body.appendChild(buttonsContainer);
}
function createDraggableCircle() {
const circle = document.createElement('div');
circle.id = 'draggableCircle';
circle.style.position = 'fixed';
circle.style.width = '20px';
circle.style.height = '20px';
circle.style.borderRadius = '50%';
circle.style.backgroundColor = '#888';
circle.style.cursor = 'move';
circle.style.zIndex = '10000';
circle.style.left = '10px';
circle.style.top = '10px';
document.body.appendChild(circle);
let isDragging = false;
let offsetX, offsetY;
circle.addEventListener('mousedown', function(event) {
if (settings.touchscreenMode) {
isDrawing = false;
}
isDragging = true;
offsetX = event.clientX - circle.getBoundingClientRect().left;
offsetY = event.clientY - circle.getBoundingClientRect().top;
});
document.addEventListener('mousemove', function(event) {
if (isDragging) {
const newX = event.clientX - offsetX;
const newY = event.clientY - offsetY;
circle.style.left = newX + 'px';
circle.style.top = newY + 'px';
}
});
document.addEventListener('mouseup', function() {
isDragging = false;
if (settings.touchscreenMode) {
isDrawing = false;
}
});
circle.addEventListener('click', function() {
toggleControlsWithTouchscreenMode();
});
}
function toggleControlsWithTouchscreenMode() {
const settingsMenu = document.getElementById('settingsMenu');
const buttonsContainer = document.getElementById('buttonsContainer');
if (!showControls) {
settingsMenu.style.display = 'block';
buttonsContainer.style.display = 'block';
showControls = true;
showOverlay();
createColorHistoryButtons();
} else {
settingsMenu.style.display = 'none';
buttonsContainer.style.display = 'none';
showControls = false;
hideOverlay();
clearColorHistoryButtons();
}
}
function handleKeyPress(e) {
if (e.ctrlKey && e.key === 'z') {
if (e.shiftKey) {
redo();
} else {
undo();
}
}
}
function addToHistory() {
if (historyIndex !== history.length - 1) {
history = history.slice(0, historyIndex + 1);
}
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
history.push(imageData);
historyIndex++;
}
function undo() {
if (historyIndex > 0) {
historyIndex--;
ctx.putImageData(history[historyIndex], 0, 0);
}
}
function redo() {
if (historyIndex < history.length - 1) {
historyIndex++;
ctx.putImageData(history[historyIndex], 0, 0);
}
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
history = [];
historyIndex = -1;
}
function loadSettings() {
const savedColor = GM_getValue('color', settings.color);
settings.color = savedColor;
document.getElementById('color').value = savedColor;
const savedLineWidth = parseFloat(GM_getValue('lineWidth', settings.lineWidth));
settings.lineWidth = savedLineWidth;
document.getElementById('lineWidth').value = savedLineWidth;
const savedCircleDistance = parseInt(GM_getValue('circleDistance', settings.circleDistance));
settings.circleDistance = savedCircleDistance;
document.getElementById('circleDistance').value = savedCircleDistance;
const savedEraser = GM_getValue('eraser', settings.eraser);
settings.eraser = savedEraser;
document.getElementById('eraser').checked = savedEraser;
const savedOpacity = parseFloat(GM_getValue('opacity', settings.opacity));
settings.opacity = savedOpacity;
document.getElementById('opacity').value = savedOpacity;
const savedSoftness = parseInt(GM_getValue('softness', settings.softness));
settings.softness = savedSoftness;
document.getElementById('softness').value = savedSoftness;
const savedShadow = GM_getValue('shadow', settings.shadow);
settings.shadow = savedShadow;
document.getElementById('shadow').checked = savedShadow;
const savedTouchscreenMode = GM_getValue('touchscreenMode', settings.touchscreenMode);
settings.touchscreenMode = savedTouchscreenMode;
document.getElementById('touchscreenMode').checked = savedTouchscreenMode;
}
function toggleControls(e) {
if (e.ctrlKey && e.altKey) {
toggleControlsWithTouchscreenMode();
}
}
function createColorHistoryButtons() {
const colorHistoryContainer = document.getElementById('colorHistoryContainer');
colorHistoryContainer.innerHTML = '';
let row;
colorHistory.forEach((color, index) => {
if (index % 10 === 0) {
row = document.createElement('div');
row.style.display = 'flex';
row.style.flexWrap = 'wrap';
colorHistoryContainer.appendChild(row);
}
const colorButton = document.createElement('button');
colorButton.textContent = '';
colorButton.style.width = '20px';
colorButton.style.height = '20px';
colorButton.style.backgroundColor = color;
colorButton.style.marginRight = '5px';
colorButton.style.marginBottom = '5px';
colorButton.addEventListener('click', () => {
settings.color = color;
document.getElementById('color').value = color;
GM_setValue('color', settings.color);
});
row.appendChild(colorButton);
});
}
function clearColorHistoryButtons() {
const colorHistoryContainer = document.getElementById('colorHistoryContainer');
colorHistoryContainer.innerHTML = '';
}
function saveColor() {
const colorInput = document.getElementById('color');
const color = colorInput.value;
if (!colorHistory.includes(color)) {
colorHistory.push(color);
GM_setValue('colorHistory', JSON.stringify(colorHistory));
createColorHistoryButtons();
}
}
function clearColorHistory() {
colorHistory = [];
GM_setValue('colorHistory', JSON.stringify(colorHistory));
clearColorHistoryButtons();
}
function loadColorHistory() {
const savedColorHistory = JSON.parse(GM_getValue('colorHistory', '[]'));
colorHistory = savedColorHistory;
createColorHistoryButtons();
}
init();
})();