DIGF-3011-501 (Winter 2023) Shader Art
Just another OCAD University Blogs site
So here is my homework that has a concert with randomness and the show I want to make a shader looks really interesting and cool I accidentally made it with different layers and I am also out of full-screen mode.
And the idea of this homework except explore bump mapping with different colours, different bumping levels etc.
The randomness makes me happy to have different results each time.
For week 5s hw. I tried messing around with the shader, just as how I usually try to start. But there wasn’t to work with in the .frag file, so I looked through the js file.
I went through the file trying understand how it all works. From there I changed the rotation of the image, I then made the canvas bigger to see the rotation properly. The rotation looks as though someone is rotating the image themselves with how jerky it seems. it even rotates all the way around.
I tried experimenting with noise, trying to add noise functions that I used on my midterm but I didn’t know how to add it in. I tried adding them into the .vert file somehow but that didn’t work. So i decided to make another slider to change something.
the color sliderr is used to control the overall brightness of the texture, and a gradient of color is created based on the brightness of the image. The color gradient goes from red to yellow for the lower half of the brightness range, and from yellow to blue for the upper half of the brightness range. Then, the color gradient is mixed with white based on the value of the slider.
https://editor.p5js.org/CosmicNyx/full/-L1btLpdB
I wanted to explore more using seamless images, because once viewed at an angle it appears as if its drawing itself, even more so as the bump mapping increases. I have it cycling through three color variations of the same image to see the different brightness values change the mapping differently on each image.
Different scale. I also animated the opacity over time to light up the pixels more then just being flat colors.
In real time it feels like flying over digital terrain. I also added in noise displacement trying to mix it with the bump mapping color but couldn’t get them to work together.
I found the most interesting viewpoint was when the video mesh was flat to show off the depth.
https://editor.p5js.org/ethangriffin6/sketches/lFYfwyU24
This week I had a lot of fun playing around with bumpmapping and displacement. Most of my time was spent trying it out on different images and seeing what kind of fun results I could get. Most of the images I used had backgrounds of some sort, which would result in all sorts of weird displacement.
Eventually, I decided to try an image of the earth. The results were pretty cool! I was able to control the height of the landmasses and the clouds, as well as rotate the image to offer better views of the bumpmapping. I thought it was kind of interesting how the earth was both two-dimensional and three-dimensional at the same time.
I imagine this is how flat-earthers think the earth looks like from space.
I also tried it with the moon – similar results!
Below is a link to my shader:
My Midterm shader!
Hey everyone. For the midterm I decided to make a music video shader. I recently got really into synthwave/vaporwave type stuff, and I decided to make a music video with the C418 ST Theme remix ! https://youtu.be/Jmv5pTyz–I .
The goal was to get a lot of wavey, trippy, and 8-bitty type shaders to play along to the music, and make someone just enjoy the experience and be brought into it. I feel like it tells a little story through the shapes, starting with a slow rise then going deep into the movements.
I discovered more about adding low resolution within shaders to give it more of an aesthetic, as well as refining a lot of aspects of this video. I particularly liked to work with the colour Red, with aspects of blue. Much like my week 4, I loved to work with the concept of things warbling and moving around, therefore I focused a lot on that when the meat of the song was playing.
Here’s a couple of shots from it !
It was a bit tough trying to get the animations to work together. I put it all initially on one frag file, then realized that it could be a lot easier if I just called upon them in a bunch of separate frag files, which is what I ended up doing! As well, instead of making more I decided to just have it loop to the song, so that it can keep going always.
https://editor.p5js.org/dragonbornbestie/sketches/u9xuPwlUc
Here’s a link to it :)! Hope you enjoy.
https://editor.p5js.org/dragonbornbestie/full/u9xuPwlUc here it is without the code.
I was too busy with the midterm that posting Week 4 flew completely by me. Nonetheless, here is my week 4 ! I decided to go with the displacement shader and do some crazy stuff with one of my favourite art pieces.
And here is the original photo used !
I wanted to see how it would look like if it was split and moving around, yet still retaining a lot of the base photo. I didn’t wish to make it super split though, my goal was looking at it through a broken glass, and trying to find a way for it to line up. If you hover your mouse over it, it even alters it in a way.
https://editor.p5js.org/dragonbornbestie/full/wzW0cS-Us Here’s a link to the shader alone.
This is a screenshot of how it ended up somewhat looking, and overall, I’m happy with how it turned out !
Week 04, Magdalena Szlapczynski
First Shader
https://editor.p5js.org/magszla0202/sketches/b2OBNe1vk
For this shader, Patricio’s simplex 2D noise was used to create a distorted effect. It was difficult to make it move exactly how I’d want it to, so I was messing around with what I was able to achieve with it. The image was duplicated and rotated around into four sections to make a psychedelic image of these mystical horses. I played around with multiplying the pixels in the frag shader. I made the distortion go faster and tug itself around the canvas.
Second Shader
https://editor.p5js.org/magszla0202/sketches/iFVye1Q_N
The difficulties I experienced with this shader is that there is a white fine line in between where the image gets mirrored. It was hard for me to pin point the issue and I couldn’t rid of it. But overall it looks like something that can be repetitive which is what I was going for, as the middle part would be the pink fading into the blue sides of the artwork.
Use of this service is governed by the IT Acceptable Use and Web Technologies policies.
Privacy Notice: It is possible for your name, e-mail address, and/or student/staff/faculty UserID to be publicly revealed if you choose to use OCAD University Blogs.