Creative Coding: The Maharanis of India

An exploration of Brand Imagery and Indian history through p5js.

In the summer of 2022, I spent time learning about p5.js through an Edx X NYU course titled, Creative Coding. I was specifically excited about learning to use it as an interactive creative medium. This project, was my final submission for the coursework and counted towards half of my grade. Through this project I wanted to create a brand style guide for Shilपी Collective, a clothing brand I created rooted in Indian artistry, textiles and luxury. I wanted to use this project to showcase and capture a history that is not well known outside of India by using imagery from the royal families to reinforce the feeling of Indian luxury and textiles.

PROJECT DETAILS

Problem Statement

Create an OpenProcessing sketch satisfying the following criteria:

Work with images and/or video to create an interactive collage.
You must create at least 1 custom JavaScript object

My Role

I worked on this project as a creative technologist. I conceptualized, branded, coded and executed this project.

Goals

Design an interactive collage through p5js.
Gain familiarity with using JavaScript as a creative medium.
Learn more about branding and Indian royalty through visual story-telling.
Have fun!

Project Overview

After gaining independence in 1947, India’s representation in western media has gone through a few iterations. Only recently, has south asian representation been able to break free from being a caricature or a model minority. Through this project, I wanted to make an attempt to capture the lost history of India through images of Indian royalty with a special focus on its maharanis (queens). These pictures portray the icons, the people and more importantly the vibrancy of India as a country pre colonization.

Timeline

July 2022 - August 2022

Tool Kit

JavaScript (p5.js), Canva

What I Learnt through the project

This project helped me not only become comfortable with JavaScript, but also to work on project branding. It was fun to learn to distill the spirit of a brand onto a virtual brand pitch board and use code to present it.

CONCEPT

Through the coursework, I had gained familiarity with different elements of p5.js and how they can be used to build projects. I gained experience in building functions, objects, DOM elements and played around with different interactive and generative art projects. My goal for the project was to create a visual identity as soon as the viewer opens the project. While the project required the usage of objects, I also wanted to add DOM elements like buttons to allow some visual elements that would add interactivity that could simulate how one would present a pitch deck for a branding meeting.

The expertise to bring this project to life was gained over a period of 14 weeks. Each week would introduce a new concept like looping, objects, functions, DOM elements, video integration etc. At the end of the week, we would be responsible to work on a prompt and use the skills gained in the weeks prior to implement it and meet the problem statement. Here are a few assignments I worked on that helped me develop the skills to work on this project:

Baby eyes follow rattle, character design in p5js — Week 5

Designing a character to understand function usage.

p5js project to create battleships using objects — Week 8

Working with particle systems to learn how to use objects and classes.

Mountain-scape with sheep and dom elements like buttons and sliders to control weather elements. — Week 9

Working with interactive DOM elements like buttons and sliders to change project elements.

EARLY ITERATIONS

Through early iterations of the project I played around with how to present my idea. I wanted the focus to be on the visual narrative that was being built for the brand. I started off with visualizing the piece as being played on a television screen amidst static to mimic an old-worldly charm.

Image with a centre rectangle with text "interactive collage here", small remote control on bottom center with button that changes images in collage and text static here on top right. — My initial idea was to create a remote control on screen with DOM elements and use that to add the interactivity in the project.

Screen with static and a rectangle for interactive collage and button to cycle through images — However, after chalking out this initial design I realized the static might overwhelm the visual elements of the collage and take away from the impact i wanted it to have. So I went back to the drawing board!

Magazine like layout for project with image and text boxes — In my next iteration I wanted to play with a traditional magazine layout.

I planned an initial layout with content as well as blocks for images which would be the interactive elements of the collage.

High fidelity prototype of coding project with image and text placements and button to cycle through images. — Next I used Canva to play around with color palettes, image layouts, button placements and arrived at a pretty concrete vision of what I wanted the project to look like. I wanted to use green to signify the sustainable nature of the brand as well as use a deeper green for text elements to keep it monochromatic and to provide readability and good contrast.

Once I finalized the project layout, it was time to code!

RESULT

You can view the project and my code hosted on OpenProcessing here.

INTERACTIONS

The viewer can interact with the collage by pressing the mouse. Each mouse press creates a new combination of text and images that help reinforce the brand identity for the brand. The viewer can also press the MUSIC CONTROL button to turn the music ON or OFF.