Hello! I’m Lydia Choi, and I work as a technical art director at Oculus, where I’m involved in developing virtual reality hardware. One of our exciting projects is a virtual reality sculpting tool that lets you experience clay sculpting in a digital space.
Today, we’re diving into the pixelation widget, a tool that allows you to encode a black and white image by manually typing out binary code. It might sound complex, but it’s actually quite straightforward and enjoyable!
In this widget, the first two bytes, or 16 bits of data, are crucial as they define the width and height of your image. The first eight bits specify the width, while the next eight bits determine the height. Although you need to type out all the bits, the widget conveniently displays the decimal equivalent, ensuring you’re entering the correct numbers.
To make the process more manageable, you can insert spaces and line breaks in your binary code. The widget ignores these, focusing solely on the bits, which helps you easily identify the bits that need adjustment for setting your desired image dimensions.
Let’s create a small image, just 4 pixels by 4 pixels. Once you’ve set the width and height, the next step is to define the pixel colors. Since we’re working with black and white, each pixel is represented by a single bit. In digital images, color is defined by light: a ‘1’ turns the light on, resulting in white, while a ‘0’ turns it off, giving you black.
Notice how I used line breaks to keep track of the row I was working on? It’s a useful technique, and the widget provides buttons to help with this. The ‘raw format’ button removes all spaces and line breaks, showing you the raw binary code. The ‘readable format’ button reintroduces spaces and line breaks, making it easier to read and edit. If you ever get lost in the bits or make a mistake, the ‘format’ button will tidy things up for you.
Let’s explore a larger black and white image. By clicking ‘actual size,’ you can see how your image appears using the real pixels on your computer. Keep in mind that images here might appear quite small. Finally, you can save your creation by clicking ‘save PNG.’ This action captures the current state of your canvas, whether zoomed in or at actual size, and opens it in a new window. From there, you can drag the image to your computer or save it in another way.
Pixelation encoding in black and white is a fascinating way to understand how digital images are constructed. By manually entering binary code, you gain a deeper appreciation for the simplicity and complexity of digital art. Enjoy experimenting with the pixelation widget and creating your own unique images!
Start by practicing binary code conversion. Take a few decimal numbers and convert them to binary manually. This will help you get comfortable with the binary system, which is crucial for setting image dimensions in the pixelation widget.
Use the pixelation widget to create a simple 4×4 black and white image. Experiment with different patterns by changing the binary code for each pixel. This will reinforce your understanding of how binary code translates to visual output.
Pair up with a classmate and design a larger image together. Decide on a pattern or design, and take turns encoding the binary code. This activity encourages teamwork and helps you learn from each other’s coding techniques.
Swap your created images with another group and try to decode their binary code back into an image. This will test your ability to read and understand binary code, as well as your attention to detail.
Reflect on your experience with pixelation encoding by writing a short paragraph about what you learned and found challenging. Share your reflections with the class to gain insights into different perspectives and approaches.
**Sanitized Transcript:**
**Intro to B&W Pixelation**
My name is Lydia Choi. I work for Oculus as a technical art director, and I’m currently working on virtual reality hardware.
The current project we’re building is a virtual reality sculpting tool, aiming to simulate clay sculpting in space.
Welcome to the pixelation widget, where you will encode a black and white image by typing out the binary yourself. Don’t worry, it’s easier and more fun than you might think.
In this widget, the first two bytes, 16 bits of data, are used to define the width and height of the image you want to encode. The first eight bits define the width, and the second eight bits define the height. You have to type out all the bits, but the widget shows you the decimal translation so you can ensure you’re typing the numbers you want.
To make it easier to keep track of where you’re typing, you can add spaces and line breaks to the binary code. The widget doesn’t pay attention to them; it just interprets the bits that are there. This makes it easier to see which bits need to be changed to set the desired width and height.
I’m going to create a very small image that’s just 4 pixels by 4 pixels.
Now for the fun part! After we’ve set the width and height of the image, the next bits we type will define how the pixels are colored. We’re just working in black and white for now, so we’ll keep it simple with one bit per pixel. In digital images, we define color in terms of light, and we can turn the lights behind each pixel on or off. A one means turning the light on, which gives us white, while a zero means turning the light off, resulting in black.
Did you notice that I added line breaks while typing to keep track of the row I was working on? That’s a handy trick, and we actually have buttons that will assist you with that.
If you click the raw format button, it will strip out all the spaces and line breaks so you can see what the raw binary code looks like. The readable format button will reinsert spaces and line breaks to make it easier to read and edit. If you make a mistake with your spacing or get lost in the bits, you can always hit format, and it will clean things up for you.
Let’s look at an example of a larger black and white image. If you click actual size, it will show you what your image looks like when using the real pixels on your computer. For images here, it’s probably going to be quite small. Lastly, you can save the image you’ve created by clicking save PNG. This will take the current state of your canvas, whether you’re zoomed in or showing actual size, and open it in a new window. You can then drag the image from there to your computer or save it in another way.
Pixelation – The effect that occurs when an image is displayed at such a large size that individual pixels are visible, resulting in a blocky appearance. – When the image was enlarged beyond its original size, pixelation made it difficult to discern the finer details.
Encoding – The process of converting data into a particular form, especially for the purpose of efficient transmission or storage. – The video file was compressed using H.264 encoding to reduce its size for streaming.
Binary – A base-2 numeral system that uses two distinct symbols, typically 0 and 1, to represent data in computing. – Computers process data using binary code, which is a series of 0s and 1s.
Image – A digital representation of a visual object, typically stored in formats such as JPEG, PNG, or GIF. – The image was edited using software to enhance its brightness and contrast.
Dimensions – The measurements that define the size of an image or object, typically expressed in terms of width and height. – The dimensions of the image were set to 1920×1080 pixels to fit the display screen.
Pixels – The smallest unit of a digital image or display, which contains information about color and brightness. – The high-resolution monitor displayed over two million pixels for a sharp and clear image.
Colors – The various shades and hues that can be displayed on a screen, often defined by combinations of red, green, and blue light. – The digital artist used a wide range of colors to create a vibrant and dynamic graphic.
Digital – Relating to technology that uses discrete values, often represented by binary code, to process and store information. – Digital photography allows for easy editing and sharing of images online.
Widget – A small application or component that provides specific functionality within a larger software environment, often used in graphical user interfaces. – The weather widget on the desktop provided real-time updates on the local forecast.
Art – The creation of visual, auditory, or performance artifacts that express the creator’s imagination or technical skill, often using digital tools and media. – The student showcased their digital art project, which included animations and interactive elements.
