Author: Tusharika Arora

For this week’s homework I downloaded a shoe model that I found on Turbosquid and imported into the substance designer.

I followed the instructions and first prepared my file in blender and then imported into substance designer. I did find unwrapping on blender a little difficult as I have never done it before.

In Substance designer, I was unable to import the fbx file directly but it worked when I dragged and dropped it.

Model: https://www.turbosquid.com/3d-models/women-shoes-3ds-free/647288

For this week’s homework, I followed the class instructions, at first I couldn’t get the option render the pipeline assets even though I followed the directions and made sure to download the package, URP assets etc.

But after re-installing the editor it worked out. I really like the patterns and textures available at Free PBR. I tried creating a dining room setting.

Final Work:

Sources:

Models:

https://www.turbosquid.com/3d-models/large-stone-arch-3d-1908101

https://www.turbosquid.com/3d-models/coffee-table-c4d-free/1091987

https://www.turbosquid.com/3d-models/old-wooden-chair-lowpoly-3d-model-2028528

https://www.turbosquid.com/3d-models/3d-abstract-ceramic-bird-figurine-2022488

https://www.turbosquid.com/3d-models/ufo-spaceship-3d-1962671

Textures:

Patterned BW Vinyl PBR Material

Scuffed Titanium PBR Metal Material

Bird Feathers 2 PBR Material

Worn Blue Burlap PBR Material

For this week’s homework, I followed the tutorial to make medieval fabric, I really like making embroidery on various types of fabrics so I really wanted to try this tutorial. While researching I came across the embroidery generator in substance designer which can be helpful in my other classes as well as I can export my work from adobe illustrator and bring it to the substance designer to have the embroidery effect.  In regards to creating the medieval fabric, substance has the tile sampler which has so many options for experimentation. I created a mask by adding the image below as bitmap to make the pattern I liked.

At first,I was unable to output the materials as a bitmap at the end and couldn’t figure out if I missed out anything in the tutorial but I was able to render the material, all over the fabric design turned out very well.

Link to the tutorial: https://www.youtube.com/watch?v=Gkzxq7SV1Gw

To accomplish this project, I wish to  get comfortable working with the fundamentals of P5.js and GLSL editor. I plan to start creating different GLSL editors focusing on different calming elements such as sunsets, rain, and cherry blossom trees.

I will use visual techniques such as linear interpolation, noise generation, texture generation, and color manipulation to create visual effects. I will also add an audio file containing calming sounds like waterfalls, rain, and birds to add an immersive and relaxing feel to the video. I may also consider using one of my favourite OST/music over it to create a music video

I believe this project can be a great way to learn and master p5.js while also creating something that is visually appealing and calming for people to enjoy.

For the final assignment I was confused at first as to if I should focus on first half of the semester or not, I think it would be good opportunity to learn and improve p5.js editor.

I remember seeing similar example shown for the music video  as Danny Rozins shared in class, in Museum of Illusions in Chicago, where the keyboard keys change as I came near the artwork.

I started experimenting with the GLSL and p5.js editors and thought it will be great idea to work on the music video to understand the editors better.

I wanted to create a music video which showcases different feelings and things that I like, for the first fragment I used one of weekly homework assignment that I submitted which looks like sunrise/sunset.

I wanted the music video to progress into from rain effect to galaxy so based on the rectangle randomness that was taught in class. I started working on the code.

The code was set up to loop but I wanted the shapes to be stable and changes colours in order to show that water is going down by changing colour. I experimented a bit if it should be water droplets or water kind of flowing and changed the x and y axis.

And then I made from generative concept taught in class I was able to make thunder effect

As I was working more on the shaders thought it will be great to consider more shaders like galaxy etc, have more (7-10) designs

Rainbow:

Eclipse:

Cherry Blossoms:

Then I preloaded and set up my files in p5.js

For some reason, I was unable to load the song as mp3, so I decided to have a separate js file and organize the code in a better manner.

After that I worked on the scenes, I also tried adding interaction with the mouse.

Link to the final video: https://drive.google.com/file/d/1NP_-RZBptH7llDqXyA-qK_w2ohMts-fv/view?usp=share_link

I was really excited to experiment with week 4 exercises as recently I was able to use the shader for one of my assignments for Atelier class where I created a ripple effect using the shader editor (I did took some assistance from a tutorial) and then imported into Touch designer to add some movement to prepare a final version that could be used in our Final Unity Project.

I also experimented with the obj texture file, I recently made a model through photogrammetry and exported as OBJ model to use in unity, it was amazing to see how the texture looks so different in the image from when once its applied to the model in unity. The coordinates of the textures are gets wrapped on the correct place on the models.

I first started working for the class exercises with the cat textures, I was unable to upload image of my own at first and couldn’t figure out what was the issue even though I was logged into my account. So, I made the files from scratch which made me understand better the code and how I can manipulate the code better.

Shader #1:Use shaping functions to do pixel manipulation on an image.

I used this image that I clicked last year to experiment with pixel manipulation.

I wanted the image to have less displacement, so I manipulated with the mirror function to see and get the right amount of mirroring within the image

float mirror( float v){

float m = mod(v, 2.0);//This effects the how much the design of the image will be disorted

At the same time I experimented with the speed of the animation and the displacement

var displacement = dist( mouseX, mouseY, width/2, height/2);//If the mouse X and Y is position is swapped in the displacement function, the design looks more complex
var maxDist = dist( 0, 0, width, height);//if the width and height is not divided by two the displacement is less and the actual image is more visible as an optical illusion
/// this function allows the displacement to be less when the mouse is in the center

myShader.setUniform(“uTime”, millis()/1000);
/// I tried the speed at just 100 for the animation, it looked as if they were was a earthquake and when the mouse was in center it looked like water ripples , once the speed was 2000 it looked quite soothing

https://editor.p5js.org/tusharika.arora/sketches/BHGVKWiIV

Digital Mirror Artwork

For the midterm assignment, I wanted to make the digital mirror artwork, as I like making Face-filters. I usually use Spark AR for making filters. I have never used the coding aspect to create a filter so I thought this assignment is great way to explore coding in p5.js.

Inspiration:

I really like Packet’s work on instagram. I really like distorted bubbles look on the web camera, but I wanted to try something more colourful.

At first, I wanted to try and make kaleidoscope effect but I thought it will be a great experiment to try and recreate an effect I loved in Museum of illusions in Chicago.

So to begin the assignment, I first started in p5.js I set the cam with tex

Tried adding plane color shader which change over time.

I tried adding the grids GlSL directly to the p5.js and the code wasn’t working, later I realized that code needs to be referenced properly in sketch.js for the code to work.

I took random tile images instead, preloaded  and created grids with code.

I realized that code was very specific to a camera filter and does not involve shaping the filter to match the object in front of the camera. However,  the goal is to create a custom camera filter that matches the shape of the object in front of the camera, so I tried working on additional code to be written to capture the shape of the object and apply it as a mask to the filter.

I couldn’t figure out why the code was not as responsive to camera so I tried adding a mask then after some research  and going through p5js references, I tried adding Camera offset to the code and then I was able to make the Digital mirror as I hoped it would be.

Link to the final work: https://editor.p5js.org/tusharika.arora/sketches/kogHu6lAg

Shader #1

After reading the article “how does is make it feel generative art?” by Amy Goodchild’s blog, I noticed that most of the times the end result of the code is usually through happy little accidents so I made sure that this time I approached working with Inspiration.

For the first shader, I took this painting by Piet Mondrian made in 1930, composition with red, blue and yellow as an inspiration and wanted to try to re-create this in the colours I find soothing.

I worked my way through the class exercise with making the squares, adding the mix() and utime.

I experimented with with how the code be organized better and made some silly mistakes, while coding the drawMultiplerect function, I couldn’t figure out for a few minutes why the code suddenly stopped working and understood my silly mistake that I didn’t return the result.

I ended up this work for the composition, I preferred less square and added some of my favourite colours than the ones in the painting, this can be considered my adaption version of the work. I experimented with the colours and the background specifically.

Shader #2

While working for shader 2 I took Inspiration from Angela Johan’s Vibrant Geometry work shown above, I started working through the grid shared from class, I thought It will a good idea to experiment in making the opposite work from the inspiration.

I started first with grid function and experiment with the number of grids in the code to see how it impacts the all over work and had colours totally opposite from the composition, similar with orientation the rectangles were placed horizontally.

After some experimentation with the grid lines, I started working different colour values.

I ended up having happy little accident in this work as I experimented with the if statements
if( true ){ // the results with false and true were very different and resulted in this amazing grid

// skew the canvas a bit on the y axis
st = st0;
st.y += st.x* 2.854;

// do the drop step pattern:
// shift every odd colum a half-step
if( mod(index.x, 1.896)==-1.328){
st.y += 0.148;
}

// recalculate the grid
// after the drop pattern

st = st * vec2(2., 2.); // 1.
index = floor(st); // 2.
st = fract(st); // 3.

The utime added a loop animation which changes colours starting from blue, pink and light off white on the right and gradually becomes darker. It was a great learning point that the Boolean – true/false can influence the end result a lot.

HSB Color and Animating the HSB Color

While working I didn’t have a proper plan as to what  I was expecting the end result to look like. I started experimenting with the shaping functions. While I was working with the amt and fact, I couldn’t have the x and the y fraction at the same time. I tried different styles but the only editor only runs then latest amt code.

Then when I started working the HSB code, the most satisfying part was to be able to play with various colours in the shader. The picture below reminded me how if a screen is not function or broken the colours would pop up like this on a TV screen or Netflix is being opened.

Then I just started using u time to animate on the side and just experimented with the colours, I preferred the animation and colours to be in a circular manner as it looked like optical illusion.

hsb.r = floor(-u_time+d*-3.)/10.;

if the multiplied value is negative it was animates from outwards to inwards direction, the number is also the number of colours that will be shown at a time.

When I replaced the floor in the code with sin, the texture was very smooth and kind of blur on the edges

vec3 rgb = clamp(abs(mod(c.x*1780876777777865555555555.0+vec3(2.783,3.444,4.000), ///Used to change the colours of the gradient
6.624)-5.896)-1.832,

just to experiment I kept on adding random number to see how the colours will look at the end, the number of colours kept on being multiplied and ended up make the gradient black with a yellow line

My end result: Sun effect