Your Images DESERVE These Effects
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- This week, I tried replicating 3 cool image effects with shaders. Let's see how it's done.
// ✨ Demos on CodePen:
Distortion + Grids: codepen.io/Juxtopposed/pen/MW...
Glitch: codepen.io/Juxtopposed/pen/GR...
Wavy: codepen.io/Juxtopposed/pen/Vw...
// ✨ Helpful links:
stacksorted.com
zajno.com
cuberto.com
teamgeek.io
// ✨ Let's connect:
Twitter: / juxtopposed
CodePen: codepen.io/Juxtopposed
Dribbble: dribbble.com/juxtopposed
Github: github.com/juxtopposed
---
// Timestamps:
00:00 Intro
00:37 Three.js
00:41 Shaders
00:52 Effect 1
02:23 Effect 2
03:40 Effect 3
04:18 Choose your Fighter
--------
Music:
pixabay.com/users/moodmode-33...
---
#shaders #threejs #design #codepen #webdesign #imageeffects #imageediting - วิทยาศาสตร์และเทคโนโลยี
hyperplexed and juxtopposed are both very chill creators
These are channels for time pass while Learning new effects for me😅
They should collab
@@ropoxdev If they colab I'll beg to colab with them
I'm good at programing (Intermid to professional level)
the css couple
@@CC-1. tell me when you do haha
I'd love to see a Hyperplexed and Juxtopposed collab. You are both really good at showing step by step the thought process, and the quality of your videos are really good. My favourite css creators.
These are sweet! I’ve always assumed these types of animations are super complicated, but this shows that while it does take some thinking, it is doable. I’ll have to check out that book of shaders.
i love the way you explain stuff... your explanation make the hard things looks easy!
Shaders. Fun stuff. Also funny how many parallels between sound design and visual processing there are. Did you know, that the posterization effect uses the same math as the bitcrush effect in audio that is commonly used to simulate the low resolution sound of old video game consoles?
Now imagine a website with sound (maybe for a audio software company), where sound and visuals use the same effect?
crazy how i'm constantly learning new things thanks to content creators like you. amazing work !
I love how you explain these and every time i watch your videos i always tend to laugh a little.. thank you for creating such content and explaining it in a very clear and fun way. I inspire to be as good as you doing these
Your videos are so well produced.
Thank you ❤️
Love the video! Can you do a longer video about the basics of shaders?
Just like some of the Fireship videos, DIdn't understand anything, but interesting to watch.
You both are very similar, short but useful videos, hope you reach same numbers as him.
The way you've explained these image hover effects involving JavaScript and shaders is truly intriguing! Each effect possesses its distinct appeal. Could you shed some light on how you generate innovative concepts for these image effects? Do you derive inspiration from specific references or personal experiences? 🎨✨
The manner in which you've elucidated these image hover effects incorporating JavaScript and shaders is genuinely captivating! Each effect carries its unique charm.
It's indeed intriguing! Generating innovative concepts for image effects, whether they involve JavaScript, shaders, or other techniques, often draws from a combination of inspiration sources. It's also important to stay curious and open to new ideas, as inspiration can come from unexpected places. Whether you're drawing from references or personal experiences, the key is to translate your inspiration into unique and engaging visual experiences for your audience.
Innovative image effects draw from diverse inspirations, creating captivating visuals.
Creating innovative concepts for these effects can indeed be an exciting process.
It's fascinating! Creating innovative image effects involves inspiration from various sources. Stay curious and open to new ideas, translating inspiration into engaging visuals.
This is fav channel now
Amazing as always!
I loved the grid one!
love this channel. great stuff
I love your style, thanks.
On my second channel, I learned shaders for a game I’m working on and adapted one to make a 2D pixel art shadow that reacts to light position
Amazing! Thank you I've always wanted to recreate those effects, but most of the creative developers keep them a secret.
I was always avoided shaders, i dont know why they just felt complicated to me, but i was able to learn a lot from this video, i may add this is my next project, apart from this can someone suggest alternatives to ThreeJS
Design and Dev skills with cute
When im watching your or Hyperplexed's videos, I don't understand a single thing that's happening cuz im dumb, but I enjoy it.
no, don't say that. we are all just trying to grow together in this space. keep it up!
I love this channel so much!!
whenever I see something super interesting on the internet and try to replicate them, I always reach this single dead end: Maths!
no way around it ig. gotta find ways to make learning it interesting.
Fantastic explanation ❤👏🏻
I'm wavy team! A true fan of sine and cosine functions. Basically you can describe oscillating movements (like springs or pendulums) using those functions creating the wave effect.
Another great episode.
Amazing!
So glad I've discovered your channel 🎯
I was not ready for "hitting the grid- dy.."😂😂😂😂
how do u only have 53k subs? u def deserve more!
Awesome channel.
I love your content so much
heyy, would love it if u did a video about the basics of spline and how to make scenes that can be exported to threejs since I can't figure out how to use it and I think a lot of web devs would find it helpful bc its so tiresome to have to learn belnder or something advanced to do that !!
The best shader I have ever created was an eyedropper, not very impressive but Im proud of it
"sometimes the answer is just CSS, you know?" real example of this in my life: I was writing a sorting algo to put certain items at the top of a list, only to realize instead of JS array shenanigans I could just use `display: flex` and `order: 1`, no javascript needed!
Your content is awesome
Sheesh, she went and did it again.
Forgot to do my magic and did it by coming back.
amazing, but how can the first effect possible for gif animated images :D
My tiny brain cannot even come up with any of this, i'll just stick to copying designs from dribbble 😂
I just don't understand the code but I still love to watch you videos 🥰
Wow I love your videos
This is so great. I would love to create these shaders and present it to my class, what a shame i already past my website dev project.
Anyways, can I request something? how about animating humanoid / creature in website? do you think its possible?
how does this work in next js ?
i love that i learn all these techniques but then never apply them because i can barely write my own name let alone create art
Impressive! 0.0
The amount of works are crazy, Lol.
A small request, can you potentially add captions to videos? It would definitely help a lot of people. Anyways, keep up the good work!
Which 3d library do you suggest we should learn, because I think future trends will be revolving around 3d for a while, no?
I personally use three.js, I think it's more versatile and they update it frequently too
@@juxtopposed three.js it is then. I will be catching up to you slowly, lol. You really are doing what I want to do someday ❤️
Glitchy I just like the hacker feel to the Watch Dogs game presentation
Did you pull effect 2 off opal camera's Website ? Great reference !
"don't worry about using threejs - that's only for the renderer, the real magic is the shaders"
My reaction to that information:
you are great , thanks
i am currently hitting the griddy for three.js
@juxtopposed What is the name of the code font?
Can you also shade videos :o?
The wave-effect doesnt seem to work with videos, webp- or png-images :( idk what im doing wrong. I'd love to use it on my logo or big headlines, at least in .png formats.
Hmm.. Hyperflexed but female 🧐
Either way, great video! Love the simplistic editing style on these videos ❤
In the second effect, you missed the gaussian to smooth i think
smashed the subscribe button
by the way (🤓), it is not suggested that you use if-else within shaders, and instead, use 0 or 1 and multiply a value by that, for example (or any other workaround, just avoid using logic). this is because the shader will run on a GPU, if available, which is not as optimized as the CPU for such things. (correct me if I'm wrong)
Wow
Could I add that to a Video too :O?
I believe you could actually do effect 1's RGB shifting with SVG and one of its effects, if you wanted to forgo three.js or similar. But I suppose that's too basic lol💀
yeah absolutely. just wanted to try it with shaders this time :D
I think im simping for u.
Can this be applied to multiple images...
I'm gonna be honest here. I got really, really depressed watching this video. Not because the video was of bad quality, because it was the exact opposite. Maybe that's what caused my depression. I'm just too stupid to understand this, let alone think of creating this as a designer. I'm logging off for today, pour me a drink and sit down in the shower - with the water dripping on my skull - regretting all the decisions I made in my life.
vUv
Images are pretty important for websites, so this would come in handy
edit: also first
You've literally just copied hyperplexed. Right down to the intonation and forced intejections and unnecessary thought narrations such "...i divided it by 3... no wait 12..." and "okayyy.....okayyyyy". It is an really un-natural way to speak (you obviously don't talk to your friends and family this way) and is more annoying than entertaining or edgy. I just don't get this persona by both creators. Absolutely great in terms of educational merit, but the delivery is cringe (like the stupid faces in YT thumbnails everyone's abusing). Sorry.
well at least you apologized
Holy cow, dude that's how a freaking youtube video works, if you want to entertain people while teaching them some boring. You need to make it fun. If you don't like it just stop watching, no one is forcing you to do it. I for one enjoy watching these kinds of videos and would love more creators to add humour to their videos. if you just want some humour less person teaching stuff you can find 100's of creators go watch them. STOP shaming people who are just trying to make others have a laugh while learning something and for love of god "cringe" really ? how about you go make a meaningful video which helps others and then lameass guy comments cringe cause he thinks he's too edgy for the world. you'd know how that feels. P.S Sorry( This should fix every mean thing I just said)
@@knaughtymaree it’s a forum for comment - criticism and otherwise. That was mine. seems harsh but what I said wasn’t baseless. It’s not humour, it’s noise that eats into peoples time, by extending the video unnecessarily. It would show the solution flowing beautifully rather than it stop starting without it. But there’s overemphasis on this technique and the internal thought monologue when it’s not live. As i said It’s a time waster. Mean? The world isn’t fluffy and soft. Critical comment is good and an essential part of any growth. Why do all comments need to be positive, back patting?
You should collab with @Hyperplexed