Your Images DESERVE These Effects
Ғылым және технология
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
Пікірлер: 100
hyperplexed and juxtopposed are both very chill creators
@CC-1.
11 ай бұрын
These are channels for time pass while Learning new effects for me😅
@ropoxdev
11 ай бұрын
They should collab
@CC-1.
11 ай бұрын
@@ropoxdev If they colab I'll beg to colab with them I'm good at programing (Intermid to professional level)
@katech6020
11 ай бұрын
the css couple
@ropoxdev
11 ай бұрын
@@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!
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?
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?
I loved the grid one!
Amazing! Thank you I've always wanted to recreate those effects, but most of the creative developers keep them a secret.
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.
I love your style, thanks.
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? 🎨✨
@motivatedbeastph
10 ай бұрын
The manner in which you've elucidated these image hover effects incorporating JavaScript and shaders is genuinely captivating! Each effect carries its unique charm.
@monicasoriano8581
10 ай бұрын
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.
@MarkexcelSarsaba
10 ай бұрын
Innovative image effects draw from diverse inspirations, creating captivating visuals.
@monalizapantoja8490
10 ай бұрын
Creating innovative concepts for these effects can indeed be an exciting process.
@ryanvalenzuela551
10 ай бұрын
It's fascinating! Creating innovative image effects involves inspiration from various sources. Stay curious and open to new ideas, translating inspiration into engaging visuals.
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.
love this channel. great stuff
Amazing as always!
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
This is fav channel now
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.
@juxtopposed
11 ай бұрын
no, don't say that. we are all just trying to grow together in this space. keep it up!
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 !!
I was not ready for "hitting the grid- dy.."😂😂😂😂
I love this channel so much!!
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
Fantastic explanation ❤👏🏻
whenever I see something super interesting on the internet and try to replicate them, I always reach this single dead end: Maths!
@darkreaper4990
11 ай бұрын
no way around it ig. gotta find ways to make learning it interesting.
So glad I've discovered your channel 🎯
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
Which 3d library do you suggest we should learn, because I think future trends will be revolving around 3d for a while, no?
@juxtopposed
11 ай бұрын
I personally use three.js, I think it's more versatile and they update it frequently too
@toshirohitsugaya1465
11 ай бұрын
@@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 ❤️
how do u only have 53k subs? u def deserve more!
amazing, but how can the first effect possible for gif animated images :D
Another great episode.
"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!
Design and Dev skills with cute
Your content is awesome
I love your content so much
Forgot to do my magic and did it by coming back.
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?
Awesome channel.
how does this work in next js ?
Sheesh, she went and did it again.
Did you pull effect 2 off opal camera's Website ? Great reference !
Amazing!
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.
The best shader I have ever created was an eyedropper, not very impressive but Im proud of it
I just don't understand the code but I still love to watch you videos 🥰
A small request, can you potentially add captions to videos? It would definitely help a lot of people. Anyways, keep up the good work!
"don't worry about using threejs - that's only for the renderer, the real magic is the shaders" My reaction to that information:
The amount of works are crazy, Lol.
Glitchy I just like the hacker feel to the Watch Dogs game presentation
@juxtopposed What is the name of the code font?
Can you also shade videos :o?
Wow I love your videos
My tiny brain cannot even come up with any of this, i'll just stick to copying designs from dribbble 😂
i am currently hitting the griddy for three.js
Impressive! 0.0
In the second effect, you missed the gaussian to smooth i think
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)
you are great , thanks
Hmm.. Hyperflexed but female 🧐 Either way, great video! Love the simplistic editing style on these videos ❤
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💀
@juxtopposed
11 ай бұрын
yeah absolutely. just wanted to try it with shaders this time :D
Could I add that to a Video too :O?
smashed the subscribe button
Wow
I think im simping for u.
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.
Can this be applied to multiple images...
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.
@YZracer316
11 ай бұрын
well at least you apologized
@knaughtymaree
11 ай бұрын
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)
@MCroppered
11 ай бұрын
@@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