Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Pixel Art Pro! [KHANTOBER]
ID	6377597369008128
Created	5 years ago, 1602509027089
Updated	5 years ago, 1602553237157
Code	/** Welcome to my latest program, a Pixel Art Engine! @INSTRUCTIONS (Hover the mouse over a button for additional instructions) 1) Select a randomly generated color by clicking on one of the colored boxes to your left. 2) You can change the color to whatever you want by using the sliders on the right. 3) You can change your tool from the bottom left corner, switching between either a paintbrush, moving tool, or eraser. 4) You can save your art as code by presiing the bottom right downlad button. You can also delete your art using the cancel button in the bottom right. 5) You can zoom in with the zoom slider in the bottom middle. @IMPORTANT If you ever find that you can't color on some squares, try changing the zoom slider slightly @SUBSCRIBE_HERE for weekly programs :D https://www.khanacademy.org/computer-programming/subscribe-to-a-random-coder-arc/5433664836812800 / var pix = []; var canvasSize = 400, pixSize = 8, zoom = 1, drag = {x: 0, y: 0}, mouse = ARROW; var colorSelected = 0; var totalX = canvasSize/pixSize, total = totalXtotalX; for (var i = 0; i < total; i ++) { pix.push(-1); } var mouseInteract = 'paint'; var colors = [color(255, 0, 0), color(1, 0), color(1, 0), color(1, 0), color(1, 0), color(1, 0), color(1, 0), color(1, 0), color(1, 0), color(1, 0), ]; textAlign(CENTER, CENTER); Object.constructor.prototype.new = function () { var obj = Object.create(this.prototype); this.apply(obj, arguments); return obj; }; var i2t1 = function(x, y) { return x/(pixSizezoom) + y/(pixSizezoom) * (canvasSizezoom / (pixSizezoom)); }; var i2t12 = function(x, y) { return x/(pixSize) + y/(pixSize) * (canvasSize / (pixSize)); }; var mouseInCircle = function(x, y, s) { return dist(mouseX, mouseY, x, y) < s/2; }; var mouseInRect = function(x, y, w, h) { return mouseX > x && mouseX < x + w && mouseY > y & mouseY < y+h; }; var snap = function(val, i) { return floor(val/i)i; }; var moveIcon = function(x, y) { pushMatrix(); translate(x, y); scale(1, 1); noStroke(); fill(0); rect(-2, -12, 4, 24); rect(-12, -2, 24, 4); triangle(-7, -12, 0, -20, 7, -12); triangle(-7, 12, 0, 20, 7, 12); triangle(12, -7, 20, 0, 12, 7); triangle(-12, -7, -20, 0, -12, 7); popMatrix(); }; var paintIcon = function(x, y) { noFill(); stroke(0); strokeWeight(2); pushMatrix(); translate(x-5, y-5); scale(1, 1); rotate(-45); rectMode(CENTER); rect(0, -7, 10, 20, 10, 10, 0, 0); rect(0, 8, 20, 8); rect(0, 20, 20, 15); strokeWeight(1.5); line(-5, 27, -5, 20); line(0, 27, 0, 23); line(7, 27, 7, 18); rectMode(CORNER); popMatrix(); }; var eraseIcon = function(x, y) { pushMatrix(); translate(x, y); scale(0.8, 0.8); rotate(-45); noFill(); stroke(0); strokeWeight(2); beginShape(); vertex(-20, -10); vertex(20, -10); vertex(20, 10); vertex(-10, 10); vertex(-20, 0); endShape(CLOSE); noStroke(); fill(0); rect(0, -10, 20, 20); popMatrix(); }; var deleteIcon = function(x, y) { pushMatrix(); translate(x, y); noFill(); stroke(0); strokeWeight(5); ellipse(0, 0, 35, 35); line(sin(-45)17.5, cos(-45)17.5, sin(135)17.5, cos(135)17.5); popMatrix(); }; var saveIcon = function(x, y) { pushMatrix(); translate(x, y-2); noStroke(); fill(0); rect(-5, -15, 10, 15); triangle(-10, 0, 10, 0, 0, 10); rect(-15, 12, 30, 5); popMatrix(); }; var Button = function(x, y, w, h, icon, onClick, name, desc) { this.x = x; this.y = y; this.w = w; this.h = h; this.icon = icon; this.onClick = onClick; this.name = name; this.selected = false; this.desc = desc; }; Button.prototype.draw = function() { this.over = mouseInRect(this.x, this.y, this.w, this.h)&&!this.selected; if (this.over) { mouse = HAND; } switch (this.name) { case 'moveButton': this.selected = mouseInteract === 'drag'; break; case 'paintButton': this.selected = mouseInteract === 'paint'; break; case 'eraseButton': this.selected = mouseInteract === 'erase'; break; case 'deleteAllButton': this.selected = false; break; case 'saveButton': this.selected = false; break; } stroke(0); strokeWeight(this.selected?5:2); fill(this.over\|\|this.selected?150:220); rect(this.x, this.y, this.w, this.h, 10); this.icon(this.x+this.w/2, this.y+this.h/2); }; Button.prototype.box = function() { if (mouseInRect(this.x, this.y, this.w, this.h)) { this.timer ++; if (this.timer > 40) { stroke(0); strokeWeight(1); fill(255); rect(mouseX, mouseY-50, 100, 50); textSize(12); fill(0); text(this.desc, mouseX, mouseY-50, 100, 50); } } else { this.timer = 0; } }; var moveButton = Button.new(25, 525, 50, 50, moveIcon, function(){mouseInteract = 'drag';}, "moveButton", "Drag tool to move around your art"); var paintButton = Button.new(100, 525, 50, 50, paintIcon, function(){mouseInteract = 'paint';}, "paintButton", "Paintbrush to create your artwork"); var eraseButton = Button.new(15, 450, 50, 50, eraseIcon, function(){mouseInteract = 'erase';}, "eraseButton", "Eraser to get rid of mistakes"); var deleteAllButton = Button.new(395, 525, 50, 50, deleteIcon, function(){pix = [];for (var i = 0; i < total; i ++) {pix.push(-1);}}, "deleteAllButton", "Click to delete your art and start over"); var saveButton = Button.new(470, 525, 50, 50, saveIcon, function(){ var xTotal = canvasSize/pixSize, yTotal = canvasSize/pixSize; println("// Made using ARC's Pixel Art Pro Engine at https://www.khanacademy.org/computer-programming/p/4513433620660224\n\nvar artData = [["+pix+"],["+colors+"]];\n\nvar drawArt = function(x, y, s) {\n noStroke();\n for (var i = 0; i < artData[0].length; i++) {\n if (artData[0][i] === -1) {\n continue;\n }\n fill(artData[1][artData[0][i]]);\n rect(x+i%"+xTotal+"s, y+floor(i/"+yTotal+")s, s, s);\n }\n};\n\ndrawArt(0, 0, 10);\n\n\n// Copy the code above and paste it into a new program to see your art! It comes with a function so you can use your picture any way you like! Just please do not remove credit it any way"); }, "saveButton", "Click to save your art as code"); var buttons = [moveButton, paintButton, eraseButton, deleteAllButton, saveButton]; var Slider = function(x, y, val, min, max, snap, title, clr) { this.x = x; this.y = y; this.val = val; this.min = min; this.max = max; this.snap = snap; this.title = title; this.clr = clr; this.w = 150; this.h = 75; this.selected = false; this.circleX = map(this.val, this.min, this.max, this.x-this.w/2, this.x+this.w/2); this.circleY = map(this.val, this.min, this.max, this.y-this.h/2, this.y+this.h/2); }; Slider.prototype.draw = function() { if (this.over) { mouse = "GRAB"; } if (this.clr) { this.over = mouseInCircle(this.x, this.circleY, 20); this.val = snap(map(this.circleY, this.y-this.h/2, this.y+this.h/2, this.min, this.max), this.snap); if (this.selected) { mouse = "GRABBING"; this.circleY = constrain(mouseY, this.y-this.h/2, this.y+this.h/2); } stroke(100); strokeWeight(5); line(this.x, this.y-this.h/2, this.x, this.y+this.h/2); stroke(0); strokeWeight(3); fill(this.over\|\|this.selected?170:220); ellipse(this.x, this.circleY, 20, 20); fill(255); noStroke(); rect(this.x-this.w/6, this.y+this.h/2+20, this.w/3, 20, 5); fill(0); textSize(20); text(this.title, this.x, this.y-this.h/2-15); textSize(15); text(this.val, this.x, this.y+this.h/2+30); } else { if (this.selected) { mouse = "GRABBING"; this.circleX = constrain(mouseX, this.x-this.w/2, this.x+this.w/2); } this.over = mouseInCircle(this.circleX, this.y, 20); this.val = snap(map(this.circleX, this.x-this.w/2, this.x+this.w/2, this.min, this.max), this.snap); stroke(100); strokeWeight(5); line(this.x-this.w/2, this.y, this.x+this.w/2, this.y); stroke(0); strokeWeight(3); fill(this.over\|\|this.selected?170:220); ellipse(this.circleX, this.y, 20, 20); fill(255); noStroke(); rect(this.x-this.w/4, this.y+20, this.w/2, 20, 5); fill(0); textSize(20); text(this.title, this.x, this.y-25); textSize(15); text(this.val, this.x, this.y+30); } }; var zoomSlider = Slider.new(275, 550, 1, 0.5, 2.5, 0.01, "Zoom"); var sliders = [zoomSlider]; var clrBtn = function(y, i) { this.s = 30; this.y = y; this.x = (70-this.s)/2; this.i = i; this.sliders = [Slider.new(565, 70, random(255), 0, 255, 1, "Red", true), Slider.new(565, 215, random(255), 0, 255, 1, "Green", true), Slider.new(565, 360, random(255), 0, 255, 1, "Blue", true), Slider.new(565, 505, 255, 0, 255, 1, "Alpha", true), ]; this.r = 255; this.g = 255; this.b = 255; this.a = 255; this.selected = false; }; clrBtn.prototype.draw = function() { this.over = mouseInRect(this.x, this.y, this.s, this.s) && !this.selected; if (this.over) { mouse = HAND; } this.r = this.sliders[0].val; this.g = this.sliders[1].val; this.b = this.sliders[2].val; this.a = this.sliders[3].val; this.selected = colorSelected === this.i; stroke(0); strokeWeight(this.over\|\|this.selected?5:2); fill(this.r, this.g, this.b, this.a); rect(this.x, this.y, this.s, this.s, 20); colors[this.i] = color(this.r, this.g, this.b, this.a); if (this.selected) { for (var i = 0; i < this.sliders.length; i++) { this.sliders[i].draw(); } } }; var clrBtns = []; for (var i = 0; i < 10; i++) { clrBtns.push(clrBtn.new(10+i40, i)); } var keys = []; function keyPressed () { keys[keyCode] = true; } function keyReleased () { keys[keyCode] = false; } function thumb () { if (keys[75] && keys[86] && keys[89]) { noLoop(); fill(0); textFont(createFont("arial black"), 50); textAlign(CENTER, CENTER); pushMatrix(); translate(350, 350); rotate(-30); for (var i = 0; i < 360; i += 10) { text("PIXEL ART\nMADE EASY", sin(i)10, cos(i)10); } fill(255, 0, 0); text("PIXEL ART\nMADE EASY", 0, 0); popMatrix(); } } function Smooth (p, d, t) { return (d-p) / t; } var scene = 'intro'; var introA = 0, introTitleA = 0, introPA = 0, introFade = 0, introSpeed = 25; function intro () { pushMatrix(); scale(width/500, height/500); textFont(createFont("Trebuchet MS Bold")); background(0); noStroke(); fill(255); arc(250, 200, 100, 100, 180, 180+introA); noFill(); stroke(255); strokeWeight(30); strokeCap(SQUARE); arc(250, 200, 160, 160, 360-introA, 360); arc(250, 200, 250, 250, 180, 180+introA); introA += Smooth(introA, 180, introSpeed/1.9); fill(255, introTitleA); textSize(100); text("A R C", 250, 250); noFill(); stroke(255, introTitleA); strokeWeight(5); rect(50, 50, 400, 250); if (introA > 179) { introTitleA += Smooth(introTitleA, 255, introSpeed); } fill(255, introPA); textSize(50); textFont(createFont("Trebuchet MS")); text("Presents", 250, 425); textFont(createFont("Trebuchet MS Bold")); if (introTitleA > 244) { introPA += Smooth(introPA, 255, introSpeed); } noStroke(); fill(0, introFade); rect(0, 0, 500, 500); if (introPA > 244.9) { introFade += Smooth(introFade, 255, introSpeed); } if (introFade > 244.99) { scene = 'program'; } textFont(createFont("lol")); popMatrix(); } var indexed; function program () { background(150); var topLeftCorner = { x: width/2-canvasSize/2zoom+drag.x, y: height/2-50-canvasSize/2zoom+drag.y }; pushMatrix(); translate(topLeftCorner.x, topLeftCorner.y); scale(zoom, zoom); noStroke(); for (var y = 0; y < canvasSize; y += pixSize) { for (var x = 0; x < canvasSize; x += pixSize) { var sqNum = i2t12(x, y); var pixel = pix[sqNum]; var pxClr = colors[pixel]; if (pixel === -1 \|\| pxClr === color(1, 0)) { fill((x+y)%(pixSize2)===0?200:255); } else { fill(pxClr); } rect(x, y, pixSize, pixSize); } } popMatrix(); pushMatrix(); translate(topLeftCorner.x, topLeftCorner.y); var rectSize = pixSizezoom; var gmouseX = constrain(snap(mouseX-topLeftCorner.x, rectSize), 0, canvasSizezoom-pixSizezoom); var gmouseY = constrain(snap(mouseY-topLeftCorner.y, rectSize), 0, canvasSizezoom-pixSizezoom); indexed = floor(i2t1(gmouseX, gmouseY)); noFill(); stroke(0); strokeWeight(2zoom); if (mouseInteract !== 'drag') { rect(gmouseX, gmouseY, rectSize, rectSize); } popMatrix(); if (mouseIsPressed && mouseInRect(80, 0, 440, 500) && mouseInRect(width/2-canvasSize/2zoom+drag.x, height/2-50-canvasSize/2zoom+drag.y, canvasSizezoom, canvasSizezoom)) { if (mouseInteract === 'paint') { pix[indexed] = colorSelected; } else if (mouseInteract === 'erase') { pix[indexed] = -1; } } stroke(50); strokeWeight(2); fill(220); rect(-10, -10, 90, 700); rect(520, -10, 90, 700); noStroke(); rect(-10, 500, 700, 150); stroke(0); line(80, 500, 519, 500); for (var i = 0; i < sliders.length; i++) { sliders[i].draw(); } zoom = zoomSlider.val; for (var i = 0; i < buttons.length; i++) { buttons[i].draw(); } for (var i = 0; i < clrBtns.length; i++) { clrBtns[i].draw(); } for (var i = 0; i < buttons.length; i++) { buttons[i].box(); } if (mouseInteract === 'drag' && mouseInRect(80, 0, 440, 500) && mouseInRect(width/2-canvasSize/2zoom+drag.x, height/2-50-canvasSize/2zoom+drag.y, canvasSizezoom, canvasSizezoom)) { mouse = "all-scroll"; } if (mouseInteract === 'paint' && mouseInRect(80, 0, 440, 500) && mouseInRect(width/2-canvasSize/2zoom+drag.x, height/2-50-canvasSize/2zoom+drag.y, canvasSizezoom, canvasSizezoom)) { mouse = "cell"; } if (mouseInteract === 'erase' && mouseInRect(80, 0, 440, 500) && mouseInRect(width/2-canvasSize/2zoom+drag.x, height/2-50-canvasSize/2zoom+drag.y, canvasSizezoom, canvasSizezoom)) { mouse = "no-drop"; } } draw = function() { switch (scene) { case 'intro': intro(); break; case 'program': program(); break; } cursor(mouse); mouse = ARROW; thumb(); }; mouseDragged = function() { if (mouseInteract === 'drag' && mouseInRect(80, 0, 440, 500) && mouseInRect(width/2-canvasSize/2zoom+drag.x, height/2-50-canvasSize/2zoom+drag.y, canvasSizezoom, canvasSize*zoom)) { drag.x += mouseX-pmouseX; drag.y += mouseY-pmouseY; } }; mousePressed = function() { for (var i = 0; i < sliders.length; i++) { if (sliders[i].over) { sliders[i].selected = true; } } btnLoop: for (var j = 0; j < clrBtns.length; j++) { sliderLoop: for (var i = 0; i < clrBtns[j].sliders.length; i++) { if (!clrBtns[j].selected) { continue btnLoop; } if (clrBtns[j].sliders[i].over) { clrBtns[j].sliders[i].selected = true; } } } }; mouseReleased = function() { for (var i = 0; i < sliders.length; i++) { sliders[i].selected = false; } btnLoop: for (var j = 0; j < clrBtns.length; j++) { sliderLoop: for (var i = 0; i < clrBtns[j].sliders.length; i++) { if (!clrBtns[j].selected) { continue btnLoop; } clrBtns[j].sliders[i].selected = false; } } }; mouseClicked = function() { for (var i = 0; i < buttons.length; i++) { if (buttons[i].over) { buttons[i].onClick(); } } for (var i = 0; i < clrBtns.length; i++) { if (clrBtns[i].over) { colorSelected = i; } } };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgM3NwYyqCww
Votes	187
Spin-Offs	2
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	A Random Coder
Author Name	ARandomCoder123
Author ID	kaid_1173743019606462635001282
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739457235597
Updated	10 months ago, 1739457244635
Source Deleted	unknown