Viewing Program

Program Data

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

Title	Pixel Art Fundamentals
ID	5885702662864896
Created	5 years ago, 1594318956963
Updated	5 years ago, 1594319230387
Code	/ A pixel art tutorial, made so that aspiring pixel artists can make legit pixel art. This isn't made to teach the code behind pixel art (although I did comment my code to help you if you want a place to start), but for people who know the code but want the art to look better. / // These are just the fundamentals, hopefully written in a way that makes sense. SOMETIMES it's okay to break these rules but IN GENERAL these will help make your pixel art look WAY better! // Smooths out graphics on certain browsers smooth(); // Set pixel size var pixelSize = 6; // Fill the background background(20, 20, 20); // Colors var palette = { " " : color(255, 0), "0" : color(100, 20, 50), "1" : color(150, 70, 60), "2" : color(200, 120, 70), "3" : color(255, 240, 200) }; // Bitmaps for art var bitmaps = [ [ "222222222222", " ", "222 ", " 222 ", "22 222 ", " 22 222", "2 22 ", " 2 22 ", " 2 22 ", " 2 22", " 2 ", " 2 " ], [ "222 ", " 2 ", " 2 ", " 2 ", " 2 ", " 222 ", "2 2 ", " 22 2 ", " 2 22 ", " 22 2", " 2 ", " 22 " ], [ "000000 2222", "00000 2222", "0000 2222", "000 2222", "00 11 ", "0 1111 ", " 111111 ", " 11111111 ", " 11111111 ", " 111111 ", " 1111 ", " 11 ", ], [ " 121 221 ", "210101 122111", "021020 111100", " 021 100 " ], [ " 1221 ", " 01222221 ", " 0111123321 ", " 0111112331 ", "001111112221", "001111111221", "000100111121", "100110011121", " 0001111111 ", " 1000011111 ", " 10000001 ", " 0000 " ], [ " 0000 ", " 00111100 ", " 0011221100 ", " 0112332110 ", "011233332110", "012333333210", "012333333210", "011233332110", " 0112332110 ", " 0011221100 ", " 00111100 ", " 0000 " ], [ "2 22223 ", "1111133 011 ", "1110033 011 ", "1111133 000 ", "1 1133 ", "1 113222223", "111111111133", "1111111 133", "100 11 133", "111 1111133", "11111100113 ", "001111111133" ], [ "2 32323 ", "1010032 021 ", "0101123 012 ", "1001032 000 ", "0 0023 ", "1 113232323", "101001010032", "0111100 123", "100 10 132", "011 0110023", "10001100103 ", "001100110123" ], [ "0 1 2 3", " 0 1 2 ", "0 1 2 3", " 0 1 2 ", "0 1 2 3", ] ]; // Draws art based on a bitmap at x, y var drawArt = function(x, y, bitmap) { noStroke(); // No outlines! for (var i = 0; i < bitmap.length; i++) { for (var j = 0; j < bitmap[i].length; j++) { // Loops through bitmap arrays fill(palette[bitmap[i].charAt(j)]); // Finds a color from the 'palette' object based on the current character the loops are looking at rect((x + j) * pixelSize, (y + i) * pixelSize, pixelSize, pixelSize); // Draw a rectangle } } }; // Draw the art drawArt(9, 35, bitmaps[0]); drawArt(29, 35, bitmaps[1]); drawArt(57, 34, bitmaps[2]); drawArt(78, 40, bitmaps[3]); drawArt(9, 70, bitmaps[4]); drawArt(29, 70, bitmaps[5]); drawArt(55, 70, bitmaps[6]); drawArt(73, 70, bitmaps[7]); drawArt(89, 76, bitmaps[8]); // Text textFont(createFont("FreeSans"), 50); textAlign(3, 3); fill(225, 220, 235, 100); text("PIXEL ART TUTORIAL", 300, 75); fill(255, 250, 235); text("PIXEL ART TUTORIAL", 300, 70); textSize(35); text("LINES", 150, 160); text("SHAPES", 450, 160); text("FORMS", 150, 390); text("TEXTURE", 450, 390); textSize(18); text("Try to use straight lines,\nwhen possible. Jaggies (to the right)\nlook messy and are confusing.", 150, 320); text("Make the shapes simple;\neasy to read. Choose readability\nover 'realistic' messiness.", 450, 320); text("When drawing forms made to\nlook '3D', choose one light source,\nnot pillow shading, like on the right.", 150, 530); text("Keep textures simple inside\na form to make the art less\nconfusing. You can use the contour\nto help with the texture.\n", 450, 550); text("BY GREEN GHOST", 475, 105); textSize(15); text("Easy to read", 525, 205); text("Messy", 435, 270); text("Don't\noveruse\ndithering", 560, 428); // Arrows/lines/crosses stroke(255, 250, 235); strokeWeight(1.3); noFill(); line(535, 215, 535, 235); line(535, 235, 540, 230); line(535, 235, 530, 230); line(458, 271, 470, 262); line(470, 262, 463, 263); line(470, 262, 467, 270); strokeWeight(3); line(528, 280, 495, 220); strokeWeight(4); stroke(170, 30, 30); line(230, 215, 240, 225); line(230, 225, 240, 215); pushMatrix(); translate(20, 210); line(230, 215, 240, 225); line(230, 225, 240, 215); popMatrix(); pushMatrix(); translate(280, 205); line(230, 215, 240, 225); line(230, 225, 240, 215); popMatrix(); pushMatrix(); translate(245, 55); line(230, 215, 240, 225); line(230, 225, 240, 215); popMatrix(); stroke(80, 210, 40); pushMatrix(); translate(-90, 0); line(230, 225, 240, 215); line(230, 225, 225, 220); popMatrix(); pushMatrix(); translate(-95, 210); line(230, 225, 240, 215); line(230, 225, 225, 220); popMatrix(); pushMatrix(); translate(180, 205); line(230, 225, 240, 215); line(230, 225, 225, 220); popMatrix(); pushMatrix(); translate(325, 55); line(230, 225, 240, 215); line(230, 225, 225, 220); popMatrix();
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOWDv6C6Cgw
Votes	195
Spin-Offs	4
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Green Ghost
Author Name	GreenGhost1
Author ID	kaid_145655330786057731504264
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739450393938
Updated	10 months ago, 1739450393938
Source Deleted	unknown