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

  • @aryanmadan
    @aryanmadan11 ай бұрын

    hyperplexed and juxtopposed are both very chill creators

  • @CC-1.

    @CC-1.

    11 ай бұрын

    These are channels for time pass while Learning new effects for me😅

  • @ropoxdev

    @ropoxdev

    11 ай бұрын

    They should collab

  • @CC-1.

    @CC-1.

    11 ай бұрын

    @@ropoxdev If they colab I'll beg to colab with them I'm good at programing (Intermid to professional level)

  • @katech6020

    @katech6020

    11 ай бұрын

    the css couple

  • @ropoxdev

    @ropoxdev

    11 ай бұрын

    @@CC-1. tell me when you do haha

  • @abtix
    @abtix11 ай бұрын

    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.

  • @dingus4138
    @dingus413811 ай бұрын

    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.

  • @invysible
    @invysible11 ай бұрын

    i love the way you explain stuff... your explanation make the hard things looks easy!

  • @melon_2929
    @melon_292911 ай бұрын

    crazy how i'm constantly learning new things thanks to content creators like you. amazing work !

  • @firefly5033
    @firefly503311 ай бұрын

    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

  • @Carhill
    @Carhill11 ай бұрын

    Your videos are so well produced. Thank you ❤️

  • @hariharansreenivas6752
    @hariharansreenivas675211 ай бұрын

    Love the video! Can you do a longer video about the basics of shaders?

  • @Solanaar
    @Solanaar2 ай бұрын

    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?

  • @zokalyx
    @zokalyx11 ай бұрын

    I loved the grid one!

  • @sarahv363
    @sarahv36311 ай бұрын

    Amazing! Thank you I've always wanted to recreate those effects, but most of the creative developers keep them a secret.

  • @abacuswithrehan264
    @abacuswithrehan26411 ай бұрын

    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.

  • @okosmik
    @okosmik11 ай бұрын

    I love your style, thanks.

  • @dotpenji
    @dotpenji10 ай бұрын

    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

    @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

    @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

    @MarkexcelSarsaba

    10 ай бұрын

    Innovative image effects draw from diverse inspirations, creating captivating visuals.

  • @monalizapantoja8490

    @monalizapantoja8490

    10 ай бұрын

    Creating innovative concepts for these effects can indeed be an exciting process.

  • @ryanvalenzuela551

    @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.

  • @Santopirata
    @Santopirata11 ай бұрын

    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.

  • @oladiedoo50
    @oladiedoo5011 ай бұрын

    love this channel. great stuff

  • @madnad9634
    @madnad963411 ай бұрын

    Amazing as always!

  • @affangavankar8848
    @affangavankar88486 ай бұрын

    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

  • @maharshiguin7813
    @maharshiguin781311 ай бұрын

    This is fav channel now

  • @SpaceDorito
    @SpaceDorito11 ай бұрын

    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

    @juxtopposed

    11 ай бұрын

    no, don't say that. we are all just trying to grow together in this space. keep it up!

  • @niharikachhabra2341
    @niharikachhabra234111 ай бұрын

    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 !!

  • @mark.martinkovics
    @mark.martinkovics8 ай бұрын

    I was not ready for "hitting the grid- dy.."😂😂😂😂

  • @flatline-timer
    @flatline-timer11 ай бұрын

    I love this channel so much!!

  • @OctagonalSquare
    @OctagonalSquare3 ай бұрын

    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

  • @AndersonMancini
    @AndersonMancini6 ай бұрын

    Fantastic explanation ❤👏🏻

  • @darkreaper4990
    @darkreaper499011 ай бұрын

    whenever I see something super interesting on the internet and try to replicate them, I always reach this single dead end: Maths!

  • @darkreaper4990

    @darkreaper4990

    11 ай бұрын

    no way around it ig. gotta find ways to make learning it interesting.

  • @fauxir
    @fauxir11 ай бұрын

    So glad I've discovered your channel 🎯

  • @asimshamim113
    @asimshamim11311 ай бұрын

    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

  • @toshirohitsugaya1465
    @toshirohitsugaya146511 ай бұрын

    Which 3d library do you suggest we should learn, because I think future trends will be revolving around 3d for a while, no?

  • @juxtopposed

    @juxtopposed

    11 ай бұрын

    I personally use three.js, I think it's more versatile and they update it frequently too

  • @toshirohitsugaya1465

    @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 ❤️

  • @vino9427
    @vino942711 ай бұрын

    how do u only have 53k subs? u def deserve more!

  • @MidoFace
    @MidoFace8 ай бұрын

    amazing, but how can the first effect possible for gif animated images :D

  • @subinaypanda9936
    @subinaypanda993611 ай бұрын

    Another great episode.

  • @GrantPerdue
    @GrantPerdue8 ай бұрын

    "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!

  • @fabrica-de-naves
    @fabrica-de-naves19 күн бұрын

    Design and Dev skills with cute

  • @nekuuu
    @nekuuu11 ай бұрын

    Your content is awesome

  • @RegalWK
    @RegalWK10 ай бұрын

    I love your content so much

  • @_kumar06
    @_kumar0611 ай бұрын

    Forgot to do my magic and did it by coming back.

  • @Oneiroi0
    @Oneiroi011 ай бұрын

    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?

  • @Gnomek
    @Gnomek9 ай бұрын

    Awesome channel.

  • @farhaankhan4885
    @farhaankhan4885Ай бұрын

    how does this work in next js ?

  • @Jacob_Price
    @Jacob_Price11 ай бұрын

    Sheesh, she went and did it again.

  • @chxmpetre8147
    @chxmpetre814711 ай бұрын

    Did you pull effect 2 off opal camera's Website ? Great reference !

  • @dotKext
    @dotKext10 ай бұрын

    Amazing!

  • @thevikingsock8527
    @thevikingsock852711 ай бұрын

    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.

  • @glaze4629
    @glaze46295 күн бұрын

    The best shader I have ever created was an eyedropper, not very impressive but Im proud of it

  • @dhiiraj4ux
    @dhiiraj4ux11 ай бұрын

    I just don't understand the code but I still love to watch you videos 🥰

  • @komododragon6126
    @komododragon612611 ай бұрын

    A small request, can you potentially add captions to videos? It would definitely help a lot of people. Anyways, keep up the good work!

  • @its.arjun.s
    @its.arjun.s11 ай бұрын

    "don't worry about using threejs - that's only for the renderer, the real magic is the shaders" My reaction to that information:

  • @loliradotopper
    @loliradotopper11 ай бұрын

    The amount of works are crazy, Lol.

  • @seanrileyhawkins4511
    @seanrileyhawkins451111 ай бұрын

    Glitchy I just like the hacker feel to the Watch Dogs game presentation

  • @thepope2005
    @thepope200511 ай бұрын

    @juxtopposed What is the name of the code font?

  • @thevikingsock8527
    @thevikingsock852711 ай бұрын

    Can you also shade videos :o?

  • @mateussarmento7692
    @mateussarmento769211 ай бұрын

    Wow I love your videos

  • @heesel4089
    @heesel408911 ай бұрын

    My tiny brain cannot even come up with any of this, i'll just stick to copying designs from dribbble 😂

  • @koth_harvest_final
    @koth_harvest_final11 ай бұрын

    i am currently hitting the griddy for three.js

  • @juanmacias5922
    @juanmacias592211 ай бұрын

    Impressive! 0.0

  • @zralok
    @zralok11 ай бұрын

    In the second effect, you missed the gaussian to smooth i think

  • @aetherclouds1181
    @aetherclouds118111 ай бұрын

    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)

  • @hernanbphb
    @hernanbphb11 ай бұрын

    you are great , thanks

  • @sohamkarandikar6726
    @sohamkarandikar672611 ай бұрын

    Hmm.. Hyperflexed but female 🧐 Either way, great video! Love the simplistic editing style on these videos ❤

  • @technotechmusic
    @technotechmusic11 ай бұрын

    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

    @juxtopposed

    11 ай бұрын

    yeah absolutely. just wanted to try it with shaders this time :D

  • @thevikingsock8527
    @thevikingsock852711 ай бұрын

    Could I add that to a Video too :O?

  • @shanquan93
    @shanquan9311 ай бұрын

    smashed the subscribe button

  • @videos6505
    @videos65059 ай бұрын

    Wow

  • @user-hz2fl3mg6j
    @user-hz2fl3mg6j10 ай бұрын

    I think im simping for u.

  • @userb7fg474
    @userb7fg47410 ай бұрын

    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.

  • @markodjurdjevic8916
    @markodjurdjevic891610 ай бұрын

    Can this be applied to multiple images...

  • @corruptedknight0
    @corruptedknight011 ай бұрын

    vUv

  • @TheBedLump_Sans
    @TheBedLump_Sans11 ай бұрын

    Images are pretty important for websites, so this would come in handy edit: also first

  • @MCroppered
    @MCroppered11 ай бұрын

    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

    @YZracer316

    11 ай бұрын

    well at least you apologized

  • @knaughtymaree

    @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

    @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?

  • @sythatsokmontrey8879
    @sythatsokmontrey887911 ай бұрын

    You should collab with @Hyperplexed

Келесі