Viewing Program

Program Data

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

Title	Creating Pixel Art +
ID	6192620261818368
Created	4 years ago, 1620649632171
Updated	4 years ago, 1620729566194
Code	<!DOCTYPE html> <!-- Creating Pixel Art + (Tutorial) Gray Wolf, May 2021 Try out the light/dark mode toggle (bottom right of the page). Let me know what you think of this style, how I can improve it, any issues, etc. Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 Credits - Pamela for the template on adding a PJS program into HTML https://www.khanacademy.org/cs/pjs-inside-webpages-template/5157014494511104 - KY for embedding multiple programs into canvas elements https://www.khanacademy.org/profile/KyProgramming 𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming for the thumbnail saving functionality https://www.khanacademy.org/profile/kaid_1111587369709668626687999 - Slider button used to toggle light/dark mode adapted from https://www.w3schools.com/howto/howto_css_switch.asp - Mozilla Developer Network (MDN) site as always :) --> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Creating Pixel Art +</title> <link rel="stylesheet" id="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/atom-one-light.min.css"/> <link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet"> <style> , ::before, ::after { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; transition-duration: 0.2s; } html.dark body { background: rgb(48, 47, 48); color: rgb(232, 232, 232); } html.dark body a { color: rgb(230, 67, 105); } html.dark body a:hover { color: rgb(209, 75, 107); } #header { /local variables used for the header colors/ --hlight-color: rgb(130, 90, 74); --hdark-color: rgb(119, 82, 68); padding: 20px 15px; border-bottom: solid 1px rgba(200, 200, 200, 0.2); font-weight: bold; margin-top: 0; margin-bottom: 20px; color: white; background-color: var(--hlight-color); background: repeating-linear-gradient(-45deg, var(--hlight-color) 0, var(--hlight-color) 25%, var(--hdark-color) 0, var(--hdark-color) 38%) 0 / 20px 20px; font-family: 'Poiret One', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; } html.dark #header { --hlight-color: rgb(89, 62, 52); --hdark-color: rgb(74, 52, 44); color: rgb(232, 232, 232); } #header span { display: flex; align-items: center; font-size: 34px; margin-bottom: -20px; } #header p { font-size: 20px; font-weight: normal; } #header span img { width: 80px; margin-right: 5px; } #themeSlider { position: fixed; bottom: 8px; right: 10px; } /slider css adapted from web example/ .switch { position: relative; display: inline-block; width: 35px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(191, 187, 191, 0.5); -webkit-transition: .4s; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: rgba(82, 82, 82, 0.5); } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .program { border: solid 2px rgb(220, 220, 220); } .author { color: rgb(122, 118, 122); } .note { color: rgb(242, 75, 117); margin-top: 5px; } .quote { color: rgb(242, 75, 117); margin-top: 0; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } </style> </head> <body> <main> <div id="themeSlider"> <label class="switch"> <input id="themeCheckbox" type="checkbox"> <span class="slider"></span> </label> </div> <div id="header"> <div class="container"> <span><img src="https://cdn.kastatic.org/images/avatars/svg/sneak-peak-blue.svg">GW Tutorials</span> <p>Tutorials for the KA programming community</p> </div> </div> <div class="container"> <h1>Creating Pixel Art +</h1> <p class="author">By <a href="https://www.khanacademy.org/profile/kaid_639291037700385781852565" target="_blank">Gray Wolf</a>, May 2021</p> <p>This is a tutorial on how to make a simple Pixel Art program on Khan Academy (KA).</p> <p>We'll also see how this type of setup can be used in a Platformer (and similar) game where you have a map that determines your blocks (player, enemies, lava, spikes, etc.). Note that we won't be making a platformer in this tutorial - I'll be making a separate tutorial for that.</p> <p>So what exactly is Pixel Art? In it's simplest form, it's a graphic that's made up of different colored pixels. In the old days screens had less pixels to what we do now, and as such changing a single pixel was noticable. Nowadays we have way more pixels on our screen (higher resolution) so instead of changing the color for each individual pixel we will draw colored squares (<code>rect</code>) with the same width and height) that we'll consider to be large pixels :)</p> <p class="quote">Pixel Art: The beauty lies within the simplicity, with fantastic arrangements of coloured pixel blocks</p> <p>The resulting program from this tutorial can be used as a template (if you want to use it). But more importantly, it's to help you understand how the code actually works so you can learn concepts that can be applied to other types of programs.</p> <p><em>Please note that there are many ways to write code and as such other people's pixel art programs may be written very differently to this one. I've mainly focused on trying to highlight some of the key concepts to help you with your understanding of how everything works, etc.</em></p> <p>Also a reminder that you can always check out the <a href="https://www.khanacademy.org/computing/computer-programming/pjs-documentation" target="_blank">PJS documentation</a> for help as you go.</p> <p>So what are we waiting for - let's get started.</p> <!--What do we need--> <h3>What do we need to make a pixel art program?</h3> <ul> <li>Array of data (our pixels)</li> <li>Set of colors to use for our pixels</li> </ul> <!--Skills required--> <h3>What skills are required?</h3> <p>Ideally, you should have already completed 100% of <a href="https://www.khanacademy.org/computing/computer-programming/programming">Intro to JS: Drawing & Animation</a>. This covers all the concepts that make up the code required to make a pixel art program.</p> <p>Note that I'll try to explain as much as possible as we go through the tutorial. If you have any further questions you can always ask me in the Questions tab under this program.</p> <ul> <li>Variables</li> <li>Conditional Statements</li> <li>Arrays</li> <li>Loops (nested - loop within a loop)</li> </ul> <!--Project / Canvas--> <h3>Project / Canvas</h3> <p>First thing we need is a new project. Steps required are below:</p> <ol> <li><a href="https://www.khanacademy.org/computer-programming/new/pjs" target="_blank">Create and save a new program</a> (name it anything you like)</li> <li>Go into the Settings (beneath the program) and change the width and height to 600 (default is 400)</li> <li>Save the program</li> <li>Refresh your page (browser window)</li> </ol> <p>We're now ready to write some actual code.</p> <p>Note that this program isn't going to be doing any sort of animation so we don't actually need to use the <code>draw</code> function. We'll just write our code and have it run once when the program loads.</p> <!--Variables--> <h3>Variables</h3> <p>So the first thing we'll do is create the variables we need. Firstly we'll need to define <code>x</code> and <code>y</code> variables to determine where on the screen the pixel art should be positioned.</p> <pre><code class="javascript">var x = 100; var y = 100; </code></pre> <p>Next we need to specify how large each pixel should be (the width and height of our rectangles).</p> <pre><code class="javascript">var pixelSize = 25; </code></pre> <p>We also need to store our data for the pixels plus what colors they should be. Let's start with the data.</p> <h3>Data array</h3> <p>Our data will be made up of an array of strings. Each specific character in the string will represent a different color. Let's create a simple example and I'll take you through it. Firstly we need an array so we'll define that first.</p> <pre><code class="javascript">var data = []; </code></pre> <p>Next we'll add some strings in the array with a few different characters.</p> <pre><code class="javascript">var data = [ "---bbbbb----", "--bbbbbbbbb-", "--dddccec---", "-dcdccceccc-", "-dcddccceccc", "--dcccceeee-", "---cccccc---", "--bbabbabb--", "-bbbabbabbb-", "bbbbaaaabbbb", "ccbacaacabcc", "cccaaaaaaccc", "ccaaaaaaaacc", "--aaa--aaa--", "-ddd----ddd-", "dddd----dddd" ]; </code></pre> <p>We now have an array of strings with a bunch of hyphen <code>-</code> characters and the characters <code>a, b, c, d, e</code>. In this implementation anytime the programs sees a hyphen in the <code>data</code> array it will ignore it, and for all other characters it will look up a corresponding color that we define for each character.</p> <p>So the <code>data</code> array includes both where the rectangles should be placed on the screen and what color they should be filled with. We'll get to how that works a bit later, but just know that the <code>data</code> array is where you actually define how the drawing will look.</p> <p>Before we get any further let's look at how we can extract individual characters out of a string of text which is required for pixel art. If we look at the following code you'll see that there is a variable called <code>fruit</code> which is assigned the string <code>"apple"</code>.</p> <pre><code class="javascript">var fruit = "apple"; </code></pre> <p>If we wanted to extract the first letter from the variable <code>fruit</code> we can treat is as though it's an array of characters. With arrays (<em>in JavaScript and most other programming languages</em>) the first item in the array is located at index 0, the second item at index 1, and the last item will have an index of 1 less than the length of the array.</p> <p>See examples below on working with strings.</p> <pre><code class="javascript">var fruit = "apple"; println( fruit[0] ); //will print the letter <strong>a</strong> println( fruit[3] ); //will print the letter <strong>l</strong> println( fruit.length ); //will print the length of the string <strong>5</strong> </code></pre> <p>Now looking back at our <code>data</code> array we can see that it's actually not just an array of strings, but an array of arrays (because each string can be thought of as an array of characters).</p> <p><em>Note that what I said above is not exactly technically true - a string is not an array, but you can apply array type methods on strings and for our purpose we can think of them as arrays of characters.</em></p> <p>In the example below the <code>data</code> array has 16 items (strings) and each string has 12 characters.</p> <pre><code class="javascript">var data = [ "---bbbbb----", "--bbbbbbbbb-", "--dddccec---", "-dcdccceccc-", "-dcddccceccc", "--dcccceeee-", "---cccccc---", "--bbabbabb--", "-bbbabbabbb-", "bbbbaaaabbbb", "ccbacaacabcc", "cccaaaaaaccc", "ccaaaaaaaacc", "--aaa--aaa--", "-ddd----ddd-", "dddd----dddd" ]; </code></pre> <h3>Colors</h3> <p>Ok, so let's get on to defining our colors for each character. To do this we'll setup an object literal where the property names match the characters in the <code>data</code> array (<code>a, b, c, d, e</code>).</p> <pre><code class="javascript">var colors = { "a": color(20, 102, 168), // blue "b": color(224, 36, 64), // red "c": color(227, 227, 139), // yellow "d": color(115, 72, 13), // brown "e": color(0, 0, 0) // black }; </code></pre> <p>So everytime we find the letter <code>a</code> in the <code>data</code> array we'll fill it with a blue color, <code>b</code> with a red color, and <code>c</code> with a yellow color, etc.</p> <p>Now why did we use property names enclosed in quotation marks such as <code>"a"</code>, <code>"b"</code>, etc. We don't have to, but doing so gives us the option to use even more characters apart from a-z and A-Z. A lot of people like to use the asterisk , or a plus +, etc. If we tried to use these as property names without quotes we would get an error.</p> <pre><code class="javascript">var colors = { : color(20, 102, 168) //would get an error }; var colors = { "": color(20, 102, 168) //would NOT get an error }; </code></pre> <p>Also just a bit on how we can access the object's properties. Generally we just write the name of the object followed by a . and then the property name such as <code>color.a</code> or <code>person.name</code>, etc. This is called <em>dot notation</em>. However this isn't how we will be accessing them when we do our pixel art. We'll be using <em>bracket notation</em> to access the properties. Bracket notation is where you specify the name of the property followed by square brackets, and within the brackets the name of the property enclosed in quotation marks. An example is below.</p> <pre><code class="javascript">var person = { name: "Gray Wolf" }; //using dot notation println( person.name ); //using bracket notation println( person["name"] ); </code></pre> <p>However, if you try to use <em>bracket notation</em> in KA (as per the example above) it will give you an error. But if you store the name of the property in a variable first and use the variable within the brackets then it works. This is just a workaround for KA. In general programming environments bracket notation works without having to create a variable first. Let's see the KA workaround below.</p> <pre><code class="javascript">var person = { name: "Gray Wolf" }; //using dot notation println( person.name ); //using bracket notation that works on KA var propertyName = "name"; println( person[propertyName] ); </code></pre> <p>We will come back to this when we start to work on getting the colors for each pixel.</p> <p>We now have everything we need in terms of variables. Next we need to loop through the <code>data</code> array and draw each rectangle at the correct position and with the appropriate color. Before we move on, let's have a look at what our code would look like so far.</p> <pre><code class="javascript">var x = 100; var y = 100; var pixelSize = 25; var data = [ "---bbbbb----", "--bbbbbbbbb-", "--dddccec---", "-dcdccceccc-", "-dcddccceccc", "--dcccceeee-", "---cccccc---", "--bbabbabb--", "-bbbabbabbb-", "bbbbaaaabbbb", "ccbacaacabcc", "cccaaaaaaccc", "ccaaaaaaaacc", "--aaa--aaa--", "-ddd----ddd-", "dddd----dddd" ]; var colors = { "a": color(20, 102, 168), // blue "b": color(224, 36, 64), // red "c": color(227, 227, 139), // yellow "d": color(115, 72, 13), // brown "e": color(0, 0, 0) // black }; </code></pre> <p>Next we'll look at how we access individual characters from our <code>data</code> array manually.</p> <h3>Accessing items from the array</h3> <p>We can think of our array as a set of rows and columns. If we visualize our array below, lets try to think how we can access the letter <code>e</code> on the third row. To get row 3 we know that it will be at index 2 because array indexes always start at zero. And we can see that the letter <code>e</code> is the 8th character in that string (or at index 7).</p> <pre><code class="javascript">var data = [ "---bbbbb----", "--bbbbbbbbb-", "--dddccec---", "-dcdccceccc-", "-dcddccceccc", "--dcccceeee-", "---cccccc---", "--bbabbabb--", "-bbbabbabbb-", "bbbbaaaabbbb", "ccbacaacabcc", "cccaaaaaaccc", "ccaaaaaaaacc", "--aaa--aaa--", "-ddd----ddd-", "dddd----dddd" ]; </code></pre> <p>So to access that character we first specify the index for the row we want followed by the index for the character (the column) we want.</p> <pre><code class="javascript">data[2][7]; //gets the eighth character on the third row </code></pre> <p>And some other examples:</p> <pre><code class="javascript">data[0][0]; //gets the first character on the first row data[4][2]; //gets the third character on the fifth row </code></pre> <p>Ok, so now that we know how to access our individual characters, let's start to look at our loops.</p> <h3>Loops</h3> <p>In order to loop through an array of arrays (<em>remember we're treating our strings as arrays of characters</em>) we'll need to use nested loops (a loop within a loop). It sounds a bit daunting, but hopefully it'll make sense once we've gone through how it works.</p> <p>Let's start with the outer loop that will iterate through the <code>data</code> array so we can get access to each of the strings.</p> <pre><code class="javascript">//loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //inner loop goes here } </code></pre> <p>Each time in the outer loop we will get each row of data in the array. So the first time through the loop it will get the first string, the second time through the loop it will get the second string, and so on. Let's write a line of code that prints out each row (string of characters).</p> <pre><code class="javascript">//loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //print the current row of data println( data[row] ); } </code></pre> <p>Next we want to get each character within the string. This is where the inner loop comes in. Let's add it now and we'll see how it works.</p> <pre><code class="javascript">//loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //code goes here } } </code></pre> <p>Firstly, note that we are using a different counter variable name for each loop. The outer loop is using <code>row</code> and the inner loop is using <code>col</code>. It doesn't really matter what these are called, but when you are nesting loops you need to ensure each loop uses a different variable name. A common convention is to use <code>i</code> and then <code>j</code>, etc. But in this example it makes more sense (to me anyway) to use <code>row</code> and <code>col</code> as they will be used to get the rows, and the columns within those rows. It's best practice to name your variables so they match the context in which they are used as much as possible so your code is easier to read and understand.</p> <p>Also note that we used <code>data[row].length</code> in the condition of the inner loop. This is essentially getting the number or characters in the current row.</p> <p>So the outer loop is getting each string in the array, and the inner loop will get each character within the string. To access each character within the inner loop we would have the following code: <code>data[row][col];</code> Let's write some code that would get each character.</p> <pre><code class="javascript">//loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //get the character from the string var character = data[row][col]; } } </code></pre> <p>Let's have a look at exactly what's happening here. The first time the outer loop runs it will get the first string which in our example is <code>""---bbbbb----""</code>. Then the inner loop will get each of the characters in the string. The first time the inner loop runs it will get the letter <code>"-"</code>, the second time it will get <code>"-"</code>, and the fourth time <code>"b"</code>, etc.</p> <p>All we have to do now is set the fill color for the character, and lastly draw the <code>rect</code> at the correct location.</p> <h3>Pixel Color</h3> <p>Remember when we talked about accessing properties using <em>bracket notation</em>. This is what we will use here. Below is the <code>colors</code> object we setup earlier.</p> <pre><code class="javascript">var colors = { "a": color(20, 102, 168), // blue "b": color(224, 36, 64), // red "c": color(227, 227, 139), // yellow "d": color(115, 72, 13), // brown "e": color(0, 0, 0) // black }; </code></pre> <p>If we wanted to access the color for the character <code>a</code> we could do the following:</p> <pre><code class="javascript">var character = "a"; colors[character]; </code></pre> <p>Now remember that our inner loop stores each of the characters in the variable called <code>character</code>. So to access the color for that character we can just do:</p> <pre><code class="javascript">colors[character]; </code></pre> <p>And we want to use that color in a <code>fill</code> command so that it will set the appropriate fill color. See the code below:</p> <pre><code class="javascript">//loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //get the character from the string var character = data[row][col]; //set the fill color for the character fill(colors[character]); } } </code></pre> <p>Ok, so we now have the color being set for each character. The last thing we need to do is actually draw the <code>rect</code> at the correct <code>x</code> and <code>y</code> position and the appropriate width and height. We already defined a variable for the size called <code>pixelSize</code> that we will use for the width and height, so we just need to workout how to get the <code>x</code> and <code>y</code> position.</p> <p>We'll forget the <code>x</code> and <code>y</code> variables we defined early for now and just start drawing the pixel art from the top/left of the screen. Then we can add in the <code>x</code> and <code>y</code> later. To determine the correct position for each <code>rect</code> we can use the loop variables combined with the <code>pixelSize</code> variable. Let's see the full code below and I'll explain what it's actually doing.</p> <pre><code class="javascript">//loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //get the character from the string var character = data[row][col]; //set the fill color for the character fill(colors[character]); //draw the rectangle rect(col * pixelSize, row * pixelSize, pixelSize, pixelSize); } } </code></pre> <p>So what is this actually doing? Let's look at what happens the <strong>first time</strong> the outer loop runs (the first string of characters). Let's assume that <code>pixelSize</code> is equal to 25.</p> <ul> <li>The first character will be at row 0, column 0, so it will evaluate to:<br> <code>rect(0 * 25, 0 * 25, 25, 25);</code> </li> <li>The second character will be at row 0, column 1, so it will evaluate to:<br> <code>rect(1 * 25, 0 * 25, 25, 25);</code> </li> <li>The third character will be at row 0, column 2, so it will evaluate to:<br> <code>rect(2 * 25, 0 * 25, 25, 25);</code> </li> </ul> <p>So you can see that it places each <code>rect</code> on the same <code>y</code> position, but moves across the <code>x</code> position by 25 each time (the size of each <code>rect)</code></p> <p>If we now look at what happens the <strong>second time</strong> the outer loop runs (the second string of characters).</p> <ul> <li>The first character will be at row 1, column 0, so it will evaluate to:<br> <code>rect(0 * 25, 1 * 25, 25, 25);</code> </li> <li>The second character will be at row 1, column 1, so it will evaluate to:<br> <code>rect(1 * 25, 1 * 25, 25, 25);</code> </li> <li>The third character will be at row 1, column 2, so it will evaluate to:<br> <code>rect(2 * 25, 1 * 25, 25, 25);</code> </li> </ul> <p>This time it places each <code>rect</code> on the same <code>y</code> position (but 25 pixels down from the previous row), and moves across the <code>x</code> position by 25 each time (the size of each <code>rect)</code></p> <p>By the time it's finished looping through all the characters it will have displayed your pixel art using the colors you specified. Let's see what the full code looks like and how our pixel art would be displayed (so exciting) :p</p> <pre><code class="javascript">var x = 100; var y = 100; var pixelSize = 25; var data = [ "---bbbbb----", "--bbbbbbbbb-", "--dddccec---", "-dcdccceccc-", "-dcddccceccc", "--dcccceeee-", "---cccccc---", "--bbabbabb--", "-bbbabbabbb-", "bbbbaaaabbbb", "ccbacaacabcc", "cccaaaaaaccc", "ccaaaaaaaacc", "--aaa--aaa--", "-ddd----ddd-", "dddd----dddd" ]; var colors = { "a": color(20, 102, 168), // blue "b": color(224, 36, 64), // red "c": color(227, 227, 139), // yellow "d": color(115, 72, 13), // brown "e": color(0, 0, 0) // black }; //loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //get the character from the string var character = data[row][col]; //set the fill color for the character fill(colors[character]); //draw the rectangle rect(col * pixelSize, row * pixelSize, pixelSize, pixelSize); } } </code></pre> <canvas class="program"></canvas> <p>Ok, so that's looking pretty good so far. We have our Pixel art displayed with the correct colors and pixel sizes. But it still needs a few things to finish it off. Firstly we'll make sure that it doesn't draw rectangles if we have a hyphen in the string - they should just be blank so the background shows. Secondly we'll remove the grid lines (outlines of the rects) using <code>noStroke();</code> And lastly we'll add in our <code>x</code> and <code>y</code> variables for the positioning.</p> <pre><code class="javascript">var x = 100; var y = 100; var pixelSize = 25; var data = [ "---bbbbb----", "--bbbbbbbbb-", "--dddccec---", "-dcdccceccc-", "-dcddccceccc", "--dcccceeee-", "---cccccc---", "--bbabbabb--", "-bbbabbabbb-", "bbbbaaaabbbb", "ccbacaacabcc", "cccaaaaaaccc", "ccaaaaaaaacc", "--aaa--aaa--", "-ddd----ddd-", "dddd----dddd" ]; var colors = { "a": color(20, 102, 168), // blue "b": color(224, 36, 64), // red "c": color(227, 227, 139), // yellow "d": color(115, 72, 13), // brown "e": color(0, 0, 0) // black }; //loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //get the character from the string var character = data[row][col]; //only draw a rectangle if the character is NOT a hyphen if(character !== "-") { //remove the outline from each rectangle noStroke(); //set the fill color for the character fill(colors[character]); //draw the rectangle rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } } } </code></pre> <p>So what have we modified in the code above.</p> <p>We added <code>noStroke();</code> before we draw the <code>rect</code> so we don't get an outline on each rectangle.</p> <p>We added in a conditional statement to check if the character is NOT a hyphen so we only draw rectangles for other characters. Note that the condition operator <code>!==</code> means <em>not equal to</em>.</p> <pre><code class="javascript">//only draw a rectangle if the character is NOT a hyphen if(character !== "-") { //code goes here to draw the rectangle } </code></pre> <p>And lastly we added in the <code>x</code> and <code>y</code> variables when we draw the rectangle so they are in the correct location. You can think of these as offsetting the pixel art.</p> <pre><code class="javascript">//draw the rectangle rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); </code></pre> <p>Let's see what the output would be now that we've fixed up those few things.</p> <canvas class="program"></canvas> <h2 class="note">Congratulations - we now have a fully working Pixel Art program.</h2> <p>Let's see a couple more examples. Note that you don't need to change the loops or code within the loops at all. All you need to do is:</p> <ul> <li>Provide an <code>x</code> and <code>y</code> to specify where to start drawing the pixel art from.</li> <li>A <code>pixelSize</code> to determine the width and height of your pixels (<code>rects</code>).</li> <li>An array of strings (your characters) that make up what you want to draw.</li> <li>And finally the colors you want that match the characters in your array.</li> </ul> <p>In this example I've actually changed the hyphens in our array to be spaces which is what a lot of people use, and the light gray color of the cat is using hyphens. It doesn't really matter what you use for pixels as long as your conditional statement checks for the character you used and the colors match what you have used.</p> <p>I also added in a background color for this example to spice it up a bit.</p> <h2>Cat</h2> <pre><code class="javascript">var x = 80; var y = 120; var pixelSize = 20; var data = [ " a a ", " a-a a-a ", " a-baaaab-a aa ", " ab--bb-b--ba a--a", " a----------a a--a", "ab----------baaaa aba", "a--a--a--a---b-b-a a-a", "a-c--a-a--c--b-b--aaaba", "a------------------a-a ", "a------------------a-a ", "a-------------------a ", "ab------------------a ", "ab------------------a ", "ab-----------------ba ", " ab---------------ba ", " ab-bb-b---b-bb-ba ", " a-aa-aaaaa-aa-a ", " aa aa aa aa ", "ddddddddddddddddddddddd" ]; var colors = { "a": color(20, 20, 20), // black "b": color(120, 116, 117), // dark gray "c": color(227, 141, 226), // pink "-": color(204, 202, 200), // light gray "d": color(135, 101, 67) // brown (ground) }; background(94, 173, 165); //loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //get the character from the string var character = data[row][col]; //only draw a rectangle if the character is NOT a space if(character !== " ") { //remove the outline from each rectangle noStroke(); //set the fill color for the character fill(colors[character]); //draw the rectangle rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } } } </code></pre> <canvas class="program"></canvas> <p>And one more example</p> <h2>Among Us</h2> <pre><code class="javascript">var x = 120; var y = 80; var pixelSize = 22; var data = [ " aaa aaa ", " aeea ae a ", " adeeaeeea ", " addeeea ", " aadaa ", " ada ", " aaaaaaa ", " a-------a ", " a----aaaaa ", " a---abb a ", " a--acbbbbb a", " aaa--accbbbbba", "a--a---acccccca", "ax-a----aaaaaa ", "ax-ax--------a ", "axxax--------a ", "axxax--------a ", " aaax--xxxxx-a ", " ax--aaaaa-a ", " ax--a ax-a ", " axxxa axxa ", " aaa aa " ]; var colors = { "a": color(20, 20, 20), // black "b": color(108, 174, 196), // light blue "c": color(50, 135, 163), // dark blue "e": color(100, 166, 93), // light green "d": color(56, 102, 49), // dark green "-": color(230, 65, 51), // light red "x": color(163, 47, 39), // dark red }; background(184, 186, 186); //loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //get the character from the string var character = data[row][col]; //only draw a rectangle if the character is NOT a space if(character !== " ") { //remove the outline from each rectangle noStroke(); //set the fill color for the character fill(colors[character]); //draw the rectangle rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } } } </code></pre> <canvas class="program"></canvas> <h2>A slightly different approach</h2> <p>Remember that I said there are many ways to do the same thing. We'll now look at a slightly different way to set this up. We won't use the <code>colors</code> object and instead use a condition statement within the loop to check what the current character is and draw our pixel accordingly.</p> <p>The conditional statement will look something like this:</p> <pre><code class="javascript">//draw each of the pixels if(character === "a") { //draw the rect for the "a" character } else if(character === "b") { //draw the rect for the "b" character } else if(character === "c") { //draw the rect for the "c" character } </code></pre> <p>So we'll remove our <code>colors</code> object and also remove our existing conditional statement (and all the code inside it) within the loop. Let's see what we'll have now using the <strong>Cat</strong> example.</p> <pre><code class="javascript">var x = 80; var y = 120; var pixelSize = 20; var data = [ " a a ", " a-a a-a ", " a-baaaab-a aa ", " ab--bb-b--ba a--a", " a----------a a--a", "ab----------baaaa aba", "a--a--a--a---b-b-a a-a", "a-c--a-a--c--b-b--aaaba", "a------------------a-a ", "a------------------a-a ", "a-------------------a ", "ab------------------a ", "ab------------------a ", "ab-----------------ba ", " ab---------------ba ", " ab-bb-b---b-bb-ba ", " a-aa-aaaaa-aa-a ", " aa aa aa aa ", "ddddddddddddddddddddddd" ]; background(94, 173, 165); //loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //get the character from the string var character = data[row][col]; //conditional statement goes here } } </code></pre> <p>Next we'll add in our new conditional statement. The conditional statement will check for each of the characters and for each one it will set the appropriate color and draw the rect.</p> <pre><code class="javascript">var x = 80; var y = 120; var pixelSize = 20; var data = [ " a a ", " a-a a-a ", " a-baaaab-a aa ", " ab--bb-b--ba a--a", " a----------a a--a", "ab----------baaaa aba", "a--a--a--a---b-b-a a-a", "a-c--a-a--c--b-b--aaaba", "a------------------a-a ", "a------------------a-a ", "a-------------------a ", "ab------------------a ", "ab------------------a ", "ab-----------------ba ", " ab---------------ba ", " ab-bb-b---b-bb-ba ", " a-aa-aaaaa-aa-a ", " aa aa aa aa ", "ddddddddddddddddddddddd" ]; background(94, 173, 165); //loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //get the character from the string var character = data[row][col]; //draw each of the pixels if(character === "a") { noStroke(); fill(20, 20, 20); // black rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } else if(character === "b") { noStroke(); fill(120, 116, 117); // dark gray rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } else if(character === "c") { noStroke(); fill(227, 141, 226); // pink rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } else if(character === "d") { noStroke(); fill(135, 101, 67); // brown (ground) rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } else if(character === "-") { noStroke(); fill(204, 202, 200); // light gray rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } } } </code></pre> <canvas class="program"></canvas> <p>We can see that the output is exactly the same as using the <code>colors</code> array. The benefit of doing it this way is that you can now draw more that just a rect with a single color for each pixel. For example, if the character was "c" you might want to draw an ellipse instead of a rectangle. Or you might want to apply a pattern to some or all of the pixels. Let's see a slightly different example of the cat with some variation to the pixels.</p> <pre><code class="javascript">var x = 80; var y = 120; var pixelSize = 20; var data = [ " a a ", " a-a a-a ", " a-baaaab-a aa ", " ab--bb-b--ba a--a", " a----------a a--a", "ab----------baaaa aba", "a--x--a--x---b-b-a a-a", "a-c--a-a--c--b-b--aaaba", "a------------------a-a ", "a------------------a-a ", "a-------------------a ", "ab------------------a ", "ab------------------a ", "ab-----------------ba ", " ab---------------ba ", " ab-bb-b---b-bb-ba ", " a-aa-aaaaa-aa-a ", " aa aa aa aa ", "ddddddddddddddddddddddd" ]; background(94, 173, 165); //loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //get the character from the string var character = data[row][col]; //draw each of the pixels if(character === "a") { noStroke(); fill(20, 20, 20); // black rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } else if(character === "b") { noStroke(); fill(120, 116, 117); // dark gray rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } else if(character === "c") { noStroke(); fill(227, 141, 226); // pink rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); fill(186, 72, 186); // darker pink ellipse(x + col * pixelSize + pixelSize / 2, y + row * pixelSize + pixelSize / 2, pixelSize * 0.7, pixelSize * 0.7); } else if(character === "d") { noStroke(); fill(135, 101, 67); // brown (ground) rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); fill(87, 63, 40); // dark brown (ground) rect(x + col * pixelSize, y + row * pixelSize + pixelSize * 0.5, pixelSize, pixelSize * 0.5); } else if(character === "x") { //eyes noStroke(); fill(20, 20, 20); // dark gray rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); fill(240, 240, 240); // white ellipse(x + col * pixelSize + pixelSize * 0.6, y + row * pixelSize + pixelSize * 0.4, pixelSize * 0.5, pixelSize * 0.5); } else if(character === "-") { noStroke(); fill(204, 202, 200); // light gray rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); fill(196, 185, 174); // light brown rect(x + col * pixelSize + pixelSize / 3, y + row * pixelSize, pixelSize * 0.3, pixelSize); rect(x + col * pixelSize, y + row * pixelSize + pixelSize / 3, pixelSize * 0.3, pixelSize); } } } </code></pre> <canvas class="program"></canvas> <p>I just changed the pixels for the eyes to an <code>x</code> (in the <code>data</code> array). Then modified how each of the pixels were drawn within the conditional statement. The important thing to note here is that you now have more control of how each pixel is drawn.</p> <h2>Platformer</h2> <p>Let's look at a different set of pixels in the <code>data</code> array to see if it looks familiar.</p> <pre><code class="javascript">var pixelSize = 30; var data = [ "--------------------", "--------------------", "--------------------", "--------------------", "-----------------e--", "-----bbb------------", "-----------b-----b--", "-----------bblllbb--", "--bbb---------------", "--------------------", "-------b------------", "-------b------------", "-------b---s--------", "-------bttbbb-------", "------------------s-", "----------------bbbb", "-----------bbb------", "-------b------------", "---p---b------ss----", "bbbbbbbblllbbbbbbbbb" ]; background(157, 194, 212); //loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //get the character from the string var character = data[row][col]; //draw each of the pixels if(character === "p") { //player noStroke(); fill(17, 18, 18); rect(col * pixelSize, row * pixelSize + pixelSize * 0.5, pixelSize, pixelSize * 0.5); fill(224, 213, 186); rect(col * pixelSize, row * pixelSize, pixelSize, pixelSize * 0.5); //eyes fill(0); ellipse( col * pixelSize + pixelSize * 0.3, row * pixelSize + pixelSize * 0.3, pixelSize * 0.15, pixelSize * 0.2 ); ellipse( col * pixelSize + pixelSize * 0.7, row * pixelSize + pixelSize * 0.3, pixelSize * 0.15, pixelSize * 0.2 ); } else if(character === "l") { //lava noStroke(); fill(153, 121, 89); rect(col * pixelSize, row * pixelSize + pixelSize * 0.5, pixelSize, pixelSize * 0.5); fill(204, 25, 70); rect(col * pixelSize, row * pixelSize, pixelSize, pixelSize * 0.5); } else if(character === "s") { //spike noStroke(); fill(199, 195, 199); triangle( col * pixelSize, row * pixelSize + pixelSize, col * pixelSize + pixelSize / 2, row * pixelSize, col * pixelSize + pixelSize, row * pixelSize + pixelSize); } else if(character === "b") { //block noStroke(); fill(153, 121, 89); rect(col * pixelSize, row * pixelSize, pixelSize, pixelSize); } else if(character === "t") { //trampoline noStroke(); fill(153, 121, 89); rect(col * pixelSize, row * pixelSize + pixelSize * 0.5, pixelSize, pixelSize * 0.5); fill(114, 158, 95); rect(col * pixelSize, row * pixelSize, pixelSize, pixelSize * 0.5); } else if(character === "e") { //exit (portal) noStroke(); fill(181, 106, 177); ellipse(col * pixelSize + pixelSize / 2, row * pixelSize + pixelSize / 2, pixelSize, pixelSize); fill(130, 62, 127); ellipse(col * pixelSize + pixelSize / 2, row * pixelSize + pixelSize / 2, pixelSize * 0.5, pixelSize * 0.5); } } } </code></pre> <canvas class="program"></canvas> <p><em>Note that I actually removed the <code>x</code> and <code>y</code> variables from this example as we don't use any offset so they weren't required.</em></p> <p>As you can see it looks very much like a Platformer game. This is because a Platformer (and similar) games also use a map of characters similar to Pixel Art. If you look at some of the platformers on KA you'll notice that all the levels are made up of arrays of strings and each character represents a different part of the platformer (player, enemy, lava, block, spike, etc.). I'll be making a tutorial soon on how to make a Platformer game, so you'll see how it all works then.</p> <h2 class="note">So that's it for the tutorial. Hope you learnt a few more concepts :)</h2> <h2>Few more examples</h2> <p>Just to finish up, I've added a few more examples of some Pixel Art.</p> <h3>Black Cat</h3> <pre><code class="javascript">var x = 20; var y = 100; var pixelSize = 14; var data = [ "--a--------------a---------------------", "--aa------------aa---------------------", "--aaa----------aaa---------------------", "--abaa--------aaba---------------------", "--abbaaaaaaaaaabba---------------------", "--abbaaaaaaaaaabba---------------------", "--aaaaaaaaaaaaaaaa---------------------", "---aaaaaaaaaaaaaa----------------------", "--aacccaaaaaacccaa---------------------", "--acccacaaaacaccca---------------------", "--acccaccaaccaccca---------------------", "--aaccaccaaccaccaa---------------------", "aaaaaaaaaaaaaaaaaaaa--------------aaa--", "--aaaaaaabbaaaaaaa--------aaa----a---a-", "---aaaaaaaaaaaaaa--------a---a--a-----a", "--a-aaaaaaaaaaaa-a-------a----aa------a", "-a----aaaaaaaa----a------a------------a", "--------aaaaa-------------a-----------a", "--------aaaaaa------------a-----------a", "-------aaaaaaaa------------a---------a-", "-------aaaaaaaaaa-----------a--------a-", "-------aaaaaaaaaaa-----------aa-----a--", "--------aaaaaaaaaaa----------------a---", "--------aaaaaaaaaaa---------------a----", "---------aaaaaaaaaaa------------aa-----", "--------aaaaaaaaaaa-aa-------aaa-------", "--------aaaaaaaaaaa---aaaaaaa----------", "--------aaaaa-aaa----------------------", ]; var colors = { "a": color(20, 20, 20), // black "b": color(242, 244, 245), // white "c": color(230, 230, 23), // yellow }; background(132, 207, 207); //loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //get the character from the string var character = data[row][col]; //only draw a rectangle if the character is NOT a hyphen if(character !== "-") { //remove the outline from each rectangle noStroke(); //set the fill color for the character fill(colors[character]); //draw the rectangle rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } } } </code></pre> <canvas class="program"></canvas> <h3>Owl</h3> <pre><code class="javascript">var x = 25; var y = 100; var pixelSize = 18; var data = [ "-----------a-----a------------", "----------aa-----aa-----------", "---------abcaaaaacba----------", "---------abcccccccba----------", "---------aeeeccceeea----------", "--------aebbbecebbbea---------", "--------abbbbbebbbbba---------", "--------abbaabebaabba---------", "--------abbaabebaabba---------", "--------aebbbeeebbbea---------", "--------aceeedddeeeca---------", "---f--f-accccedecccca---------", "----gf--accccceccccca------f--", "---hg----acccccccccaa-----g---", "--h------accccccccca-f--g-gg--", "hh-g------adddaddda-ff---h--f-", "ihh------ihaaaiaaahhf-hhh-f---", "-ihh---hiiiihhiihhiihhff---f--", "--ihhhhii------gf---ih---f---f", "---hiii---------gf--g-h-fg-gf-", "----h----------------g-h--hg-f", "-----gg-------------f---hhgf--", "----f--f---------------g---gf-" ]; var colors = { //Cat "a": color(20, 20, 20), // black "b": color(242, 244, 245), // white "c": color(11, 110, 125), // blue "d": color(224, 194, 22), // yellow "e": color(117, 117, 115), // gray //Branch "f": color(186, 235, 89), // light green "g": color(108, 173, 29), // dark green "h": color(102, 78, 18), // brown "i": color(135, 135, 132), // gray }; background(106, 156, 153); //loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //get the character from the string var character = data[row][col]; //only draw a rectangle if the character is NOT a hyphen if(character !== "-") { //remove the outline from each rectangle noStroke(); //set the fill color for the character fill(colors[character]); //draw the rectangle rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } } } </code></pre> <canvas class="program"></canvas> <h3>Nyan Cat</h3> <pre><code class="javascript">var x = 20; var y = 180; var pixelSize = 12; var data = [ "------------------------aaaaaaaaaaaaaaaaa-------", "----gggggg------gggggggabbbbbbbbbbbbbbbbba------", "ggggggggggggggggggggggabbbcccccccccccccbbba-----", "ggggggggggggggggggggggabbccccccdccdcccccbba-----", "gggghhhhhhgggggghhhhhhabccdccccccccccccccba-----", "hhhhhhhhhhhhhhhhhhhhhhabccccccccccaaccdccba-aa--", "hhhhhhhhhhhhhhhhhhhhhhabcccccccccaeeaccccbaaeea-", "hhhhiiiiiihhhhhhaaaaiiabcccccdcccaeeeacccbaeeea-", "iiiiiiiiiiiiiiiiaeeaaiabcccccccccaeeeeaaaaeeeea-", "iiiiiiiiiiiiiiiiaaeeaaabcccdcccccaeeeeeeeeeeeea-", "iiiijjjjjjiiiiiijaaeeaabcccccccdaeeeeeeeeeeeeeea", "jjjjjjjjjjjjjjjjjjaaeeabcdccccccaeeefaeeeeefaeea", "jjjjjjjjjjjjjjjjjjjaaaabccccccccaeeeaaeeeaeaaeea", "jjjjkkkkkkjjjjjjkkkkkaabcccccdccaeddeeeeeeeeedda", "kkkkkkkkkkkkkkkkkkkkkkabbcdcccccaeddeaeeaeeaedda", "kkkkkkkkkkkkkkkkkkkkkkabbbcccccccaeeeaaaaaaaeea-", "kkkkllllllkkkkkklllllaaabbbbbbbbbbaeeeeeeeeeea--", "llllllllllllllllllllaeeeaaaaaaaaaaaaaaaaaaaaa---", "llllllllllllllllllllaeeaa-aeea-----aeea-aeea----", "llll------llllll----aaaa--aaa-------aaa--aa-----" ]; var colors = { //cat "a": color(20, 20, 20), // black "b": color(227, 206, 150), // tan "c": color(219, 149, 219), // light pink "d": color(194, 31, 180), // dark pink "e": color(117, 117, 115), // gray "f": color(252, 252, 252), // white //rainbow "g": color(250, 38, 10), // red "h": color(250, 138, 10), // orange "i": color(247, 247, 10), // yellow "j": color(32, 214, 8), // green "k": color(8, 219, 242), // blue "l": color(148, 10, 247), // purple }; background(64, 183, 189); //loop through the array to get each string for(var row = 0; row &lt data.length; row++) { //loop through the string to get each character for(var col = 0; col &lt data[row].length; col++) { //get the character from the string var character = data[row][col]; //only draw a rectangle if the character is NOT a hyphen if(character !== "-") { //remove the outline from each rectangle noStroke(); //set the fill color for the character fill(colors[character]); //draw the rectangle rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } } } </code></pre> <canvas class="program"></canvas> <h2>Wrapping up</h2> <p>Ok, so that was quite a bit to take in. Hopefully it all (or at least mostly) made sense. Remember that the purpose of this tutorial was to provide you with some skills you can use to make other types of programs, and also to give you an understanding on how Platformer levels are made using characters similar to Pixel Art. I'll be making a separate tutorial dedicated to making a Platformer game, so stay tuned.</p> <p>If you have any questions please ask in the Questions tab beneath this program. If you haven't finished the <a href="https://www.khanacademy.org/computing/computer-programming/programming" target="_blank">Intro to JS</a> course on KA then I'd suggest you go and complete that as soon as possible, then go on to the <a href="https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations" target="_blank">Advanced JS</a> course that covers even more topics.</p> <p>Also, if you see any errors please let me know and I'll ensure I fix them.</p> <h2>HAPPY CODING!!!!</h2> </div> </main> <!--Import the highlight JS library and load it--> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> <!--Import Khan Academy's Processing JS library--> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <!--Import library to handle saving a nice thumbnail--> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <!--Create the functions ready to insert into the appropriate places in the tutorial--> <script type="application/javascript"> window.addEventListener('DOMContentLoaded', (event) => { const programArr = [ (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(10); var x = 100; var y = 100; var pixelSize = 25 * (400/600); var data = [ "---bbbbb----", "--bbbbbbbbb-", "--dddccec---", "-dcdccceccc-", "-dcddccceccc", "--dcccceeee-", "---cccccc---", "--bbabbabb--", "-bbbabbabbb-", "bbbbaaaabbbb", "ccbacaacabcc", "cccaaaaaaccc", "ccaaaaaaaacc", "--aaa--aaa--", "-ddd----ddd-", "dddd----dddd" ]; var colors = { "a": color(20, 102, 168), // blue "b": color(224, 36, 64), // red "c": color(227, 227, 139), // yellow "d": color(115, 72, 13), // brown "e": color(0, 0, 0) // black }; //loop through the array to get each string for(var row = 0; row < data.length; row++) { //loop through the string to get each character for(var col = 0; col < data[row].length; col++) { //get the character from the string var character = data[row][col]; //set the fill color for the character fill(colors[character]); //draw the rectangle rect(col * pixelSize, row * pixelSize, pixelSize, pixelSize); } } } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(10); var scaleAmount = 400 / 600; var x = 100 * scaleAmount; var y = 100 * scaleAmount; var pixelSize = 25 * scaleAmount; var data = [ "---bbbbb----", "--bbbbbbbbb-", "--dddccec---", "-dcdccceccc-", "-dcddccceccc", "--dcccceeee-", "---cccccc---", "--bbabbabb--", "-bbbabbabbb-", "bbbbaaaabbbb", "ccbacaacabcc", "cccaaaaaaccc", "ccaaaaaaaacc", "--aaa--aaa--", "-ddd----ddd-", "dddd----dddd" ]; var colors = { "a": color(20, 102, 168), // blue "b": color(224, 36, 64), // red "c": color(227, 227, 139), // yellow "d": color(115, 72, 13), // brown "e": color(0, 0, 0) // black }; //loop through the array to get each string for(var row = 0; row < data.length; row++) { //loop through the string to get each character for(var col = 0; col < data[row].length; col++) { //get the character from the string var character = data[row][col]; //only draw a rectangle if the character is NOT a hyphen if(character !== "-") { //remove the outline from each rectangle noStroke(); //set the fill color for the character fill(colors[character]); //draw the rectangle rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } } } } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(10); background(94, 173, 165); var scaleAmount = 400 / 600; var x = 80 * scaleAmount; var y = 120 * scaleAmount; var pixelSize = 13; var data = [ " a a ", " a-a a-a ", " a-baaaab-a aa ", " ab--bb-b--ba a--a", " a----------a a--a", "ab----------baaaa aba", "a--a--a--a---b-b-a a-a", "a-c--a-a--c--b-b--aaaba", "a------------------a-a ", "a------------------a-a ", "a-------------------a ", "ab------------------a ", "ab------------------a ", "ab-----------------ba ", " ab---------------ba ", " ab-bb-b---b-bb-ba ", " a-aa-aaaaa-aa-a ", " aa aa aa aa ", "ddddddddddddddddddddddd" ]; var colors = { "a": color(20, 20, 20), // black "b": color(120, 116, 117), // dark gray "c": color(227, 141, 226), // pink "-": color(204, 202, 200), // light brown "d": color(135, 101, 67) // brown (ground) }; //loop through the array to get each string for(var row = 0; row < data.length; row++) { //loop through the string to get each character for(var col = 0; col < data[row].length; col++) { //get the character from the string var character = data[row][col]; //only draw a rectangle if the character is NOT a space if(character !== " ") { //remove the outline from each rectangle noStroke(); //set the fill color for the character fill(colors[character]); //draw the rectangle rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } } } } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(10); background(94, 173, 165); var scaleAmount = 400 / 600; var x = 120 * scaleAmount; var y = 80 * scaleAmount; var pixelSize = 14.5; var data = [ " aaa aaa ", " aeea ae a ", " adeeaeeea ", " addeeea ", " aadaa ", " ada ", " aaaaaaa ", " a-------a ", " a----aaaaa ", " a---abb a ", " a--acbbbbb a", " aaa--accbbbbba", "a--a---acccccca", "ax-a----aaaaaa ", "ax-ax--------a ", "axxax--------a ", "axxax--------a ", " aaax--xxxxx-a ", " ax--aaaaa-a ", " ax--a ax-a ", " axxxa axxa ", " aaa aa " ]; var colors = { "a": color(20, 20, 20), // black "b": color(108, 174, 196), // light blue "c": color(50, 135, 163), // dark blue "e": color(100, 166, 93), // light green "d": color(56, 102, 49), // dark green "-": color(230, 65, 51), // light red "x": color(163, 47, 39), // dark red }; background(184, 186, 186); //loop through the array to get each string for(var row = 0; row < data.length; row++) { //loop through the string to get each character for(var col = 0; col < data[row].length; col++) { //get the character from the string var character = data[row][col]; //only draw a rectangle if the character is NOT a space if(character !== " ") { //remove the outline from each rectangle noStroke(); //set the fill color for the character fill(colors[character]); //draw the rectangle rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } } } } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(10); background(94, 173, 165); var scaleAmount = 400 / 600; var x = 80 * scaleAmount; var y = 120 * scaleAmount; var pixelSize = 13; var data = [ " a a ", " a-a a-a ", " a-baaaab-a aa ", " ab--bb-b--ba a--a", " a----------a a--a", "ab----------baaaa aba", "a--a--a--a---b-b-a a-a", "a-c--a-a--c--b-b--aaaba", "a------------------a-a ", "a------------------a-a ", "a-------------------a ", "ab------------------a ", "ab------------------a ", "ab-----------------ba ", " ab---------------ba ", " ab-bb-b---b-bb-ba ", " a-aa-aaaaa-aa-a ", " aa aa aa aa ", "ddddddddddddddddddddddd" ]; var colors = { "a": color(20, 20, 20), // black "b": color(120, 116, 117), // dark gray "c": color(227, 141, 226), // pink "-": color(204, 202, 200), // light brown "d": color(135, 101, 67) // brown (ground) }; //loop through the array to get each string for(var row = 0; row < data.length; row++) { //loop through the string to get each character for(var col = 0; col < data[row].length; col++) { //get the character from the string var character = data[row][col]; //only draw a rectangle if the character is NOT a space if(character !== " ") { //remove the outline from each rectangle noStroke(); //set the fill color for the character fill(colors[character]); //draw the rectangle rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } } } } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(10); background(94, 173, 165); var scaleAmount = 400 / 600; var x = 80 * scaleAmount; var y = 120 * scaleAmount; var pixelSize = 13; var data = [ " a a ", " a-a a-a ", " a-baaaab-a aa ", " ab--bb-b--ba a--a", " a----------a a--a", "ab----------baaaa aba", "a--x--a--x---b-b-a a-a", "a-c--a-a--c--b-b--aaaba", "a------------------a-a ", "a------------------a-a ", "a-------------------a ", "ab------------------a ", "ab------------------a ", "ab-----------------ba ", " ab---------------ba ", " ab-bb-b---b-bb-ba ", " a-aa-aaaaa-aa-a ", " aa aa aa aa ", "ddddddddddddddddddddddd" ]; background(94, 173, 165); //loop through the array to get each string for(var row = 0; row < data.length; row++) { //loop through the string to get each character for(var col = 0; col < data[row].length; col++) { //get the character from the string var character = data[row][col]; //draw each of the pixels if(character === "a") { noStroke(); fill(20, 20, 20); // black rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } else if(character === "b") { noStroke(); fill(120, 116, 117); // dark gray rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } else if(character === "c") { noStroke(); fill(227, 141, 226); // pink rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); fill(186, 72, 186); // darker pink ellipse(x + col * pixelSize + pixelSize / 2, y + row * pixelSize + pixelSize / 2, pixelSize * 0.7, pixelSize * 0.7); } else if(character === "d") { noStroke(); fill(135, 101, 67); // brown (ground) rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); fill(87, 63, 40); // dark brown (ground) rect(x + col * pixelSize, y + row * pixelSize + pixelSize * 0.5, pixelSize, pixelSize * 0.5); } else if(character === "x") { //eyes noStroke(); fill(20, 20, 20); // dark gray rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); fill(240, 240, 240); // darker pink ellipse(x + col * pixelSize + pixelSize * 0.6, y + row * pixelSize + pixelSize * 0.4, pixelSize * 0.5, pixelSize * 0.5); } else if(character === "-") { noStroke(); fill(204, 202, 200); // light gray rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); fill(196, 185, 174); // light brown rect(x + col * pixelSize + pixelSize / 3, y + row * pixelSize, pixelSize * 0.3, pixelSize); rect(x + col * pixelSize, y + row * pixelSize + pixelSize / 3, pixelSize * 0.3, pixelSize); } } } } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(10); background(94, 173, 165); var scaleAmount = 400 / 600; var pixelSize = 20; var data = [ "--------------------", "--------------------", "--------------------", "--------------------", "-----------------e--", "-----bbb------------", "-----------b-----b--", "-----------bblllbb--", "--bbb---------------", "--------------------", "-------b------------", "-------b------------", "-------b---s--------", "-------bttbbb-------", "------------------s-", "----------------bbbb", "-----------bbb------", "-------b------------", "---p---b------ss----", "bbbbbbbblllbbbbbbbbb" ]; background(157, 194, 212); //loop through the array to get each string for(var row = 0; row < data.length; row++) { //loop through the string to get each character for(var col = 0; col < data[row].length; col++) { //get the character from the string var character = data[row][col]; //draw each of the pixels if(character === "p") { //player noStroke(); fill(17, 18, 18); rect(col * pixelSize, row * pixelSize + pixelSize * 0.5, pixelSize, pixelSize * 0.5); fill(224, 213, 186); rect(col * pixelSize, row * pixelSize, pixelSize, pixelSize * 0.5); //eyes fill(0); ellipse( col * pixelSize + pixelSize * 0.3, row * pixelSize + pixelSize * 0.3, pixelSize * 0.15, pixelSize * 0.2 ); ellipse( col * pixelSize + pixelSize * 0.7, row * pixelSize + pixelSize * 0.3, pixelSize * 0.15, pixelSize * 0.2 ); } else if(character === "l") { //lava noStroke(); fill(153, 121, 89); rect(col * pixelSize, row * pixelSize + pixelSize * 0.5, pixelSize, pixelSize * 0.5); fill(204, 25, 70); rect(col * pixelSize, row * pixelSize, pixelSize, pixelSize * 0.5); } else if(character === "s") { //spike noStroke(); fill(199, 195, 199); triangle( col * pixelSize, row * pixelSize + pixelSize, col * pixelSize + pixelSize / 2, row * pixelSize, col * pixelSize + pixelSize, row * pixelSize + pixelSize); } else if(character === "b") { //block noStroke(); fill(153, 121, 89); rect(col * pixelSize, row * pixelSize, pixelSize, pixelSize); } else if(character === "t") { //trampoline noStroke(); fill(153, 121, 89); rect(col * pixelSize, row * pixelSize + pixelSize * 0.5, pixelSize, pixelSize * 0.5); fill(114, 158, 95); rect(col * pixelSize, row * pixelSize, pixelSize, pixelSize * 0.5); } else if(character === "e") { //exit (portal) noStroke(); fill(181, 106, 177); ellipse(col * pixelSize + pixelSize / 2, row * pixelSize + pixelSize / 2, pixelSize, pixelSize); fill(130, 62, 127); ellipse(col * pixelSize + pixelSize / 2, row * pixelSize + pixelSize / 2, pixelSize * 0.5, pixelSize * 0.5); } } } } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(10); background(94, 173, 165); var scaleAmount = 400 / 600; var x = 20 * scaleAmount; var y = 100 * scaleAmount; var pixelSize = 9.5; var data = [ "--a--------------a---------------------", "--aa------------aa---------------------", "--aaa----------aaa---------------------", "--abaa--------aaba---------------------", "--abbaaaaaaaaaabba---------------------", "--abbaaaaaaaaaabba---------------------", "--aaaaaaaaaaaaaaaa---------------------", "---aaaaaaaaaaaaaa----------------------", "--aacccaaaaaacccaa---------------------", "--acccacaaaacaccca---------------------", "--acccaccaaccaccca---------------------", "--aaccaccaaccaccaa---------------------", "aaaaaaaaaaaaaaaaaaaa--------------aaa--", "--aaaaaaabbaaaaaaa--------aaa----a---a-", "---aaaaaaaaaaaaaa--------a---a--a-----a", "--a-aaaaaaaaaaaa-a-------a----aa------a", "-a----aaaaaaaa----a------a------------a", "--------aaaaa-------------a-----------a", "--------aaaaaa------------a-----------a", "-------aaaaaaaa------------a---------a-", "-------aaaaaaaaaa-----------a--------a-", "-------aaaaaaaaaaa-----------aa-----a--", "--------aaaaaaaaaaa----------------a---", "--------aaaaaaaaaaa---------------a----", "---------aaaaaaaaaaa------------aa-----", "--------aaaaaaaaaaa-aa-------aaa-------", "--------aaaaaaaaaaa---aaaaaaa----------", "--------aaaaa-aaa----------------------", ]; var colors = { "a": color(20, 20, 20), // black "b": color(242, 244, 245), // white "c": color(230, 230, 23), // yellow }; background(132, 207, 207); //loop through the array to get each string for(var row = 0; row < data.length; row++) { //loop through the string to get each character for(var col = 0; col < data[row].length; col++) { //get the character from the string var character = data[row][col]; //only draw a rectangle if the character is NOT a hyphen if(character !== "-") { //remove the outline from each rectangle noStroke(); //set the fill color for the character fill(colors[character]); //draw the rectangle rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } } } } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(10); background(94, 173, 165); var scaleAmount = 400 / 600; var x = 25 * scaleAmount; var y = 100 * scaleAmount; var pixelSize = 12; var data = [ "-----------a-----a------------", "----------aa-----aa-----------", "---------abcaaaaacba----------", "---------abcccccccba----------", "---------aeeeccceeea----------", "--------aebbbecebbbea---------", "--------abbbbbebbbbba---------", "--------abbaabebaabba---------", "--------abbaabebaabba---------", "--------aebbbeeebbbea---------", "--------aceeedddeeeca---------", "---f--f-accccedecccca---------", "----gf--accccceccccca------f--", "---hg----acccccccccaa-----g---", "--h------accccccccca-f--g-gg--", "hh-g------adddaddda-ff---h--f-", "ihh------ihaaaiaaahhf-hhh-f---", "-ihh---hiiiihhiihhiihhff---f--", "--ihhhhii------gf---ih---f---f", "---hiii---------gf--g-h-fg-gf-", "----h----------------g-h--hg-f", "-----gg-------------f---hhgf--", "----f--f---------------g---gf-" ]; var colors = { //Owl "a": color(20, 20, 20), // black "b": color(242, 244, 245), // white "c": color(11, 110, 125), // blue "d": color(224, 194, 22), // yellow "e": color(117, 117, 115), // gray //Branch "f": color(186, 235, 89), // light green "g": color(108, 173, 29), // dark green "h": color(102, 78, 18), // brown "i": color(135, 135, 132), // gray }; background(106, 156, 153); //loop through the array to get each string for(var row = 0; row < data.length; row++) { //loop through the string to get each character for(var col = 0; col < data[row].length; col++) { //get the character from the string var character = data[row][col]; //only draw a rectangle if the character is NOT a hyphen if(character !== "-") { //remove the outline from each rectangle noStroke(); //set the fill color for the character fill(colors[character]); //draw the rectangle rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } } } } }, (processingInstance) => { with (processingInstance) { size(400, 400); frameRate(10); background(94, 173, 165); var scaleAmount = 400 / 600; var x = 0 * scaleAmount; var y = 180 * scaleAmount; var pixelSize = 8; var data = [ "------------------------aaaaaaaaaaaaaaaaa-------", "----gggggg------gggggggabbbbbbbbbbbbbbbbba------", "ggggggggggggggggggggggabbbcccccccccccccbbba-----", "ggggggggggggggggggggggabbccccccdccdcccccbba-----", "gggghhhhhhgggggghhhhhhabccdccccccccccccccba-----", "hhhhhhhhhhhhhhhhhhhhhhabccccccccccaaccdccba-aa--", "hhhhhhhhhhhhhhhhhhhhhhabcccccccccaeeaccccbaaeea-", "hhhhiiiiiihhhhhhaaaaiiabcccccdcccaeeeacccbaeeea-", "iiiiiiiiiiiiiiiiaeeaaiabcccccccccaeeeeaaaaeeeea-", "iiiiiiiiiiiiiiiiaaeeaaabcccdcccccaeeeeeeeeeeeea-", "iiiijjjjjjiiiiiijaaeeaabcccccccdaeeeeeeeeeeeeeea", "jjjjjjjjjjjjjjjjjjaaeeabcdccccccaeeefaeeeeefaeea", "jjjjjjjjjjjjjjjjjjjaaaabccccccccaeeeaaeeeaeaaeea", "jjjjkkkkkkjjjjjjkkkkkaabcccccdccaeddeeeeeeeeedda", "kkkkkkkkkkkkkkkkkkkkkkabbcdcccccaeddeaeeaeeaedda", "kkkkkkkkkkkkkkkkkkkkkkabbbcccccccaeeeaaaaaaaeea-", "kkkkllllllkkkkkklllllaaabbbbbbbbbbaeeeeeeeeeea--", "llllllllllllllllllllaeeeaaaaaaaaaaaaaaaaaaaaa---", "llllllllllllllllllllaeeaa-aeea-----aeea-aeea----", "llll------llllll----aaaa--aaa-------aaa--aa-----" ]; var colors = { //cat "a": color(20, 20, 20), // black "b": color(227, 206, 150), // tan "c": color(219, 149, 219), // light pink "d": color(194, 31, 180), // dark pink "e": color(117, 117, 115), // gray "f": color(252, 252, 252), // white //rainbow "g": color(250, 38, 10), // red "h": color(250, 138, 10), // orange "i": color(247, 247, 10), // yellow "j": color(32, 214, 8), // green "k": color(8, 219, 242), // blue "l": color(148, 10, 247), // purple }; background(64, 183, 189); //loop through the array to get each string for(var row = 0; row < data.length; row++) { //loop through the string to get each character for(var col = 0; col < data[row].length; col++) { //get the character from the string var character = data[row][col]; //only draw a rectangle if the character is NOT a hyphen if(character !== "-") { //remove the outline from each rectangle noStroke(); //set the fill color for the character fill(colors[character]); //draw the rectangle rect(x + col * pixelSize, y + row * pixelSize, pixelSize, pixelSize); } } } } } ]; const programElements = document.getElementsByClassName("program"); let processingInstance; Array.prototype.forEach.call(programElements, (item, index) => { processingInstance = new Processing(item, programArr[index]); }); document.getElementById('themeCheckbox').addEventListener('change', function() { if(this.checked) { document.documentElement.classList.add("dark"); document.getElementById('stylesheet').href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/atom-one-dark.min.css'; } else { document.documentElement.classList.remove("dark"); document.getElementById('stylesheet').href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/atom-one-light.min.css'; } }); function saveThumbnail() { html2canvas(document.body, { onrendered: function(canvas) { b64Img = canvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); }, allowTaint : false, useCORS: true, width:window.innerWidth, height:window.innerWidth }); }; function save() { document.body.innerHTML = '<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap"rel="stylesheet"><div style="position:absolute;top:0;left:0;width:600px;height:600px;background-color:rgb(130,90,74);"><div style="display:grid;align-items:center;justify-content:center;text-align:center;color:white;font-family:\'Poiret One\';font-size:1.8em;"><img style="margin:auto;margin-bottom:-50px;text-align:center;width:250px;" src="https://cdn.kastatic.org/images/avatars/sneak-peak-blue.png"><h1 style="margin-bottom:0;">GW Tutorials</h1><p>Tutorials for the KA programming community</p><h2>Creating Pixel Art</h2></div></div>'; saveThumbnail(); } document.body.addEventListener("keydown", (e) => { if(e.keyCode === 83) { //S key save(); } }); }); </script> </body> </html>
Folds	33,183
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL2X_ISACww
Votes	249
Spin-Offs	17
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739454596937
Updated	6 months ago, 1739454607343
Source Deleted	unknown