Author: Ling

Here’s the final output(hint: try to move the mouse around the portrait).

Inspiration:

From long ago, I watched the Love Death + Robots series produced by Netflix and loved the story of Zima Blue. https://www.imdb.com/title/tt9788510/ . I love the plot and the artistic choice, so when it comes to a chance to digitally create something related to my self-portrait, I decided to draw a painting in the style of Zima Blue.

However, I am not good at drawing and learn how to draw picture quickly in p5js almost seems impossible. Thanks to the development of computer vision and the style transfer algorithm(https://en.wikipedia.org/wiki/Neural_style_transfer), I was able to upload my picture and a photo of Zima Blue to ChatGPT and ask it to perform style transfer.

Here’s the Zima Blue original episode screenshot and the photo I obtained after style transferring to one of my photos.

(original episode screenshot)

(style-transferred picture)

Work Flow:

However, the produced format is in jpg style and it is impossible to convert it into drawing functions that are built in p5js. And directly asking GPT to transfer the image to p5js code produces unintended effects.

 

(direct p5js conversion)

 

I consulted previous student Pi(pi.ko@nyu.edu) for assistance and solution is followed:

1. upload the jpg file to websites like(https://www.cutout.pro/photo-enhancer-sharpener-upscaler) to increase the number of pixels in the photo.
2. load the file into Adobe Illustrator use the Make Trace Command to receive the SVG file(https://en.wikipedia.org/wiki/SVG) which contains all the x,y coordinate of the lines so it is possible for it to be converted into built-in functions in p5js(the parser could be found in the appendix)

After this, I worked with GPT to color the drawing. Since they are of irregular shapes and the parser convert them into coordinates, it is hard for me to identify which parts to color. So, I ask GPT to write a helper function to label the region of the curves and the coloring comes after.

In the end, I want to add an effect of changing the background color with mouse moving, so the central logic behind is as followed:

// Normalize mouse to 0..1 (works even when mouse is outside the canvas)
const mx = constrain(mouseX / width,  0, 1);
const my = constrain(mouseY / height, 0, 1);

// Use mouseX to steer hue, mouseY to steer saturation/brightness.
// Feel free to tweak the ranges to taste.
const baseHue = map(mx, 0, 1, 20, 220, true);     // left→right: orange → blue
const sat     = map(my, 0, 1, 70, 90,  true);     // bottom→top: more vivid
const bTop    = map(my, 0, 1, 95, 70,  true);     // top band gets darker as you go down
const bMid    = map(my, 0, 1, 90, 65,  true);
const bBot    = map(my, 0, 1, 80, 60,  true);

The complete code and the parser could be found on:

1. complete code(copy and paste the code into p5js and you will receive what’s above): https://github.com/dr04002/Intro_IM/blob/acaed841ba9257a17bef0dad063c0cf1d1e4a1bb/sketch.js
2. parser:https://github.com/dr04002/Intro_IM/blob/acaed841ba9257a17bef0dad063c0cf1d1e4a1bb/svg_conversion

Here are future improvements that I could make:

1. the left shoulder should be blue but they are left blank in this drawing
2. the size of the canvas should fit the size of the main portrait so there’s no blank on the bottom,