> Tiny Art

In this tutorial, we'll create a visually striking piece of art using HTML Canvas and JavaScript, powered by mathematical calculations and worth of inclusion in the Met! This project is perfect for anyone looking to explore JavaScript's canvas capabilities and see how simple math operations can create dynamic, pixel-based art.

In this tutorial, we'll cover:

1. Setting up the canvas in HTML and JavaScript.
2. Using the canvas 2D context to draw rectangles and manipulate colors.
3. Implementing simple XOR operations to generate unique patterns.
4. Displaying a dynamic RGB color code on the canvas.

Let’s dive in!

Table of Contents

• Overview
• Setup
• Drawing on the Canvas
• Mathematical Patterns with XOR
• Adding Text to the Canvas
• Conclusion

Overview

In this project, we will generate art dynamically using nested loops and the XOR bitwise operator. The art is created by filling rectangles on the canvas based on calculated values. We'll also add a small text label that shows the RGB values used to create the pattern.

Setup

We'll start by creating a canvas element where the art will be drawn. This will be done using JavaScript to keep things dynamic.

HTML Structure

<div id="display"></div>
<div id="options"></div>

CSS (Basic Styling)

Here’s an example of some simple styling for the canvas:

canvas {
    border: 5px solid #FF66FF; /* Customize the color */
    background-color: #000;
}

Drawing on the Canvas

The canvas API allows us to draw shapes and manipulate pixels. Let's start by creating a canvas and setting up its dimensions in JavaScript.

JavaScript Setup

Here’s how we’ll set up the canvas and get the 2D context to start drawing:

const generateArt = () => {
    const canv = document.createElement('canvas');
    canv.id = 'art';
    canv.height = '500';
    canv.width = '500';
    canv.style.border = '5px solid #FF66FF'; // Customize as needed
    canv.style.background = '#000000';

    const ctx = canv.getContext("2d");
    display.append(canv);
};

This code creates the canvas, sets its size, adds a border, and gives it a black background. We also grab the 2D context (ctx), which we'll use to draw on the canvas.

Mathematical Patterns with XOR

The core of our art will be generated using two nested loops that iterate through x and y values. We’ll apply an XOR (^) operation between x and y to create interesting patterns based on the result.

Drawing Rectangles Dynamically

Here’s how we’ll use the XOR operation to fill rectangles across the canvas:

for (let x = 0; x < 255; x++) {
    for (let y = 0; y < 255; y++) {
        if ((x ^ y) % 10) {  // Applying XOR and modulus to generate patterns
            ctx.fillStyle = `rgb(${(x ^ y) % 210}, ${y}, ${x})`; // Dynamic color
            ctx.fillRect(x * ((x ^ y) % 10), y * ((x ^ y) % 10), x, y); // Dynamic size and position
        }
    }
}

• The XOR operation (x ^ y) gives a unique value based on the x and y positions.
• We use the result of the XOR and modulus (%) to determine the color and position of each rectangle.
• The color of each rectangle is set using an RGB string where the red component is influenced by the XOR result, and the green and blue components are based on y and x respectively.

Adding Text to the Canvas

To enhance our art, we’ll add a small label that displays the RGB color pattern used in the artwork.

Drawing Text

We can add text to the canvas using the fillText method:

ctx.font = "15px Courier New";
ctx.fillStyle = '#FF66FF';
ctx.fillText("`rgb(${(x ^ y) % 210}, ${y}, ${x})`", 180, 490);

This places the text "rgb(${(x ^ y) % 210}, ${y}, ${x})" at the bottom of the canvas, giving the viewer insight into how the colors were calculated.

Full JavaScript Code

Here’s the complete JavaScript code for generating the art on the canvas:

const generateArt = () => {
    const canv = document.createElement('canvas');
    canv.id = 'art';
    canv.height = '500';
    canv.width = '500';
    canv.style.border = '5px solid #FF66FF';
    canv.style.background = '#000000';

    const ctx = canv.getContext("2d");

    // Generate art based on XOR operations
    for (let x = 0; x < 255; x++) {
        for (let y = 0; y < 255; y++) {
            if ((x ^ y) % 10) {
                ctx.fillStyle = `rgb(${(x ^ y) % 210}, ${y}, ${x})`;
                ctx.fillRect(x * ((x ^ y) % 10), y * ((x ^ y) % 10), x, y);
            }
        }
    }

    // Add dynamic text to the canvas
    ctx.font = "15px Courier New";
    ctx.fillStyle = '#FF66FF';
    ctx.fillText("`rgb(${(x ^ y) % 210}, ${y}, ${x})`", 180, 490);

    const options = document.getElementById('options');
    display.append(canv);
};

Conclusion

Congratulations! You’ve successfully created dynamic art using an HTML canvas and some mathematical operations in JavaScript. This project demonstrates how even simple bitwise operations like XOR can result in visually interesting patterns, and how we can use JavaScript’s canvas API to bring those patterns to life.

Feel free to experiment with the logic inside the loops or tweak the colors to create your own unique patterns!

Happy Hacking!