setSize(480, 480); var MIN_PIXEL_VALUE=0; var MAX_PIXEL_VALUE=255; var DARKENING_FACTOR=25; var BRIGHTENING_FACTOR=25; var IMAGE_LOAD_WAIT_TIME=45; var DELAY = 20; var WIN_WIDTH = getWidth(); var WIN_HEIGHT = getHeight(); // Object Tracking var imagesLoaded = 0; var totalImages = 0; var numImagesProcessed = 0; var objectsAddedInCurrentScene = 0; var readyToDraw = false; var currentSceneObjects = []; var allImages = []; // Constants for pixel indices var RED = 0; var GREEN = 1; var BLUE = 2; var ALPHA = 3; function init(){ waitForImagesToLoad(); setTimer(trackTransparentIndices, DELAY); } function trackTransparentIndices(){ if(imagesLoaded < totalImages){ return; } if(numImagesProcessed >= allImages.length){ readyToDraw = true; stopTimer(trackTransparentIndices); drawObjects(currentSceneObjects); return; } var img = allImages[numImagesProcessed].img; // Add the image to a hidden canvas so we can get its pixel data var canvas = document.createElement('canvas'); canvas.width = getWidth() + 100; canvas.height = getHeight() + 100; var ctx = canvas.getContext('2d'); ctx.drawImage(img.image, 0, 0, img.getWidth(), img.getHeight()); var pixelData = ctx.getImageData(0, 0, img.getWidth(), img.getHeight()); // Track the transparent indices for this image so we don't filter them later allImages[numImagesProcessed].transparentIndices = getTransparentIndices(pixelData.data, img.getWidth(), img.getHeight()); numImagesProcessed++; } function getTransparentIndices(pixelData, width, height){ var indices = {}; for(var x = 0; x < width; x++){ for(var y = 0; y < height; y++){ var coords = x + ", " + y; var alphaVal = pixelData[4*(y * width + x) + ALPHA]; if(alphaVal == 0){ indices[coords] = true; } else { indices[coords] = false; } } } return indices; } // Add image to the canvas function addImage(url, filterType, width, height, x, y) { // Set up the image var image = new WebImage(url); image.setSize(width, height); image.setPosition(x, y); // Track image loading totalImages++; image.loaded(function(){ imagesLoaded++; }); var fn; if(filterType == "invert") { fn = invert; } else if (filterType == "brighten") { fn = brighten; } else if (filterType == "darken") { fn = darken; } else if (filterType == "grayscale") { fn = grayscale; } else if (filterType == "saturate") { fn = saturate; } else if (filterType == "blue") { fn = blue; } else if (filterType == "red") { fn = red; } else if (filterType == "green") { fn = green; } else if (filterType == "sepia") { fn = sepia; } else { fn = null; } var imageSceneObject = { 'img': image, 'filter': fn, 'type':'WebImage', 'transparentIndices': {} }; // Add it to the scene currentSceneObjects.push(imageSceneObject); allImages.push(imageSceneObject); } function waitForImagesToLoad(){ var text = new Text("Loading Images...", "28pt Impact"); text.setPosition(getWidth() / 2 - text.getWidth() / 2, getHeight()/2 - text.getHeight() / 2); add(text); } function drawObjects(objects){ if(!readyToDraw){ setTimeout(function(){drawObjects(objects);}, DELAY); return; } removeAll(); for(var i = 0; i < objects.length; i++){ if(objects[i].type == "WebImage"){ var img = objects[i].img; var filterFn = objects[i].filter; var coords = objects[i].transparentIndices; // Add objects one at a time so filters apply properly addToQueue(img, filterFn, coords); } else if (objects[i].type == "Audio"){ objects[i].audio.play(); } else { // Add objects one at a time so filters apply properly addToQueue(objects[i]); } } } function addToQueue(elem, filterFn, coords){ setTimeout(function(){ add(elem); if(filterFn && coords){ filter(elem, filterFn, coords); } }, IMAGE_LOAD_WAIT_TIME * objectsAddedInCurrentScene); // If we don't want the animation-style adding for every single object // We can make it so we only wait for the images, everything else adds in bulk: // Simply wrap this line in an: if(elem.type == "WebImage") objectsAddedInCurrentScene++; } // Add Text to the canvas function addText(text, font, size, color, x, y){ var fontString = size + "pt " + font; var txt = new Text(text,fontString); if(x < 0 || x > WIN_WIDTH) x = WIN_WIDTH / 3; if(y < 0 || y > WIN_HEIGHT) y = WIN_HEIGHT / 4; txt.setPosition(x,y); txt.setColor(color); currentSceneObjects.push(txt); } // Filter Functions // Darken a given pixel var darken = function(pixel) { pixel[RED] = Math.max(pixel[RED] - DARKENING_FACTOR, MIN_PIXEL_VALUE); pixel[GREEN] = Math.max(pixel[GREEN] - DARKENING_FACTOR, MIN_PIXEL_VALUE); pixel[BLUE] = Math.max(pixel[BLUE] - DARKENING_FACTOR, MIN_PIXEL_VALUE); return pixel; }; // Brighten a given pixel var brighten = function(pixel) { pixel[RED] = Math.min(pixel[RED] + BRIGHTENING_FACTOR, MAX_PIXEL_VALUE); pixel[GREEN] = Math.min(pixel[GREEN] + BRIGHTENING_FACTOR, MAX_PIXEL_VALUE); pixel[BLUE] = Math.min(pixel[BLUE] + BRIGHTENING_FACTOR, MAX_PIXEL_VALUE); return pixel; }; // Invert a given pixel var invert = function(pixel) { pixel[RED] = MAX_PIXEL_VALUE - pixel[RED]; pixel[GREEN] = MAX_PIXEL_VALUE - pixel[GREEN]; pixel[BLUE] = MAX_PIXEL_VALUE - pixel[BLUE]; return pixel; }; // Grayscale a given pixel var grayscale = function(pixel) { var avg = (pixel[RED] + pixel[GREEN] + pixel[BLUE]) / 3; pixel[RED] = avg; pixel[GREEN] = avg; pixel[BLUE] = avg; return pixel; }; var sepia = function(pixel) { var newRed = (pixel[RED] * 0.393) + (pixel[GREEN] *0.769) + (pixel[BLUE] * 0.189); var newGreen = (pixel[RED] * 0.349) + (pixel[GREEN] *0.686) + (pixel[BLUE] * 0.168); var newBlue = (pixel[RED] * 0.272) + (pixel[GREEN] *0.534) + (pixel[BLUE] * 0.131); pixel[RED] = newRed; pixel[GREEN] = newGreen; pixel[BLUE] = newBlue; return pixel; }; // Saturate a value x function saturateValue(x){ var threshold = MAX_PIXEL_VALUE / 2; if (x >= threshold) { return MAX_PIXEL_VALUE; } return MIN_PIXEL_VALUE; } // Saturate a given pixel var saturate = function(pixel) { pixel[RED] = saturateValue(pixel[RED]); pixel[GREEN] = saturateValue(pixel[GREEN]); pixel[BLUE] = saturateValue(pixel[BLUE]); return pixel; }; // Convert pixel to only use red var red = function(pixel) { pixel[GREEN] = 0; pixel[BLUE] = 0; return pixel; }; // Convert pixel to only use green var green = function(pixel) { pixel[RED] = 0; pixel[BLUE] = 0; return pixel; }; // Convert pixel to only use blue var blue = function(pixel) { pixel[RED] = 0; pixel[GREEN] = 0; return pixel; }; // END FILTER FUNCTIONS // Filter an image function filter(image, filterfn, transparentCoords) { setTimeout(function(){ for(var x = 0; x < image.getWidth(); x++) { for(var y = 0; y < image.getHeight(); y++) { if(!transparentCoords[x + ", " + y]){ var pixel = image.getPixel(x, y); var newPixel = filterfn(pixel); image.setRed(x, y, newPixel[RED]); image.setGreen(x, y, newPixel[GREEN]); image.setBlue(x, y, newPixel[BLUE]); } } } }, IMAGE_LOAD_WAIT_TIME); } //Shapes function addCircle(radius, x, y, color){ var c = new Circle(radius); c.setColor(color); c.setPosition(x, y); currentSceneObjects.push(c); } function addRectangle(width, height, x, y, color){ var r = new Rectangle(width, height); r.setPosition(x, y); r.setColor(color); currentSceneObjects.push(r); } // Create paint splatters // For Splatter block function splatter(splats, color){ for(var i = 0; i < splats; i++){ var c = new Circle(Randomizer.nextInt(5, 40)); //c.setPosition(Randomizer.nextInt(c.getRadius(), getWidth() - c.getRadius()), Randomizer.nextInt(c.getRadius(), getHeight() - c.getRadius())); c.setPosition(Randomizer.nextInt(0, getWidth()), Randomizer.nextInt(0, getHeight())); c.setColor(color); currentSceneObjects.push(c); } } // For line splatter block function line_splatter(splats, color){ for(var i = 0; i < splats; i++){ var x = Randomizer.nextInt(0, getWidth()); var y = Randomizer.nextInt(0, getHeight()); var x2 = x + Randomizer.nextInt(5, 20); var y2 = y + Randomizer.nextInt(5, 20); var length = Math.sqrt((x-x2)*(x-x2) + (y-y2)*(y-y2)); var c = new Line(x, y, x2, y2); //c.setPosition(Randomizer.nextInt(length, getWidth() - length), Randomizer.nextInt(length, getHeight() - length)); c.setPosition(Randomizer.nextInt(-length, getWidth()), Randomizer.nextInt(-length, getHeight())); c.setColor(color); currentSceneObjects.push(c); } } // Background setting functions function setBackgroundImage(url){ if(checkValidImageURL(url)){ var background = new WebImage(url); background.setSize(WIN_WIDTH, WIN_HEIGHT); totalImages++; background.loaded(function(){ imagesLoaded++; }); var imageSceneObject = { 'img': background, 'filter': null, 'type':'WebImage', 'transparentIndices': {} }; currentSceneObjects.unshift(imageSceneObject); } } function setBackgroundColor(color){ var background = new Rectangle(WIN_WIDTH, WIN_HEIGHT); background.setColor(color); currentSceneObjects.unshift(background); } function checkValidImageURL(url){ if(!url.startsWith("https://codehs.com") && !url.startsWith("https://static.codehs.com")){ println("Invalid URL! Make sure the URL for your image starts with https://codehs.com or https://static.codehs.com. Use the Upload Tab to create a valid URL!"); return false; } return true; }