Your Images DESERVE These Effects

Подписаться 225 тыс.

Просмотров 38 тыс.

50% 1

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

Наука

Опубликовано:

24 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 100

@aryanmadan 11 месяцев назад

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

@abtix 11 месяцев назад

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 11 месяцев назад

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 11 месяцев назад

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

@melon_2929 11 месяцев назад

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

@Carhill 11 месяцев назад

Your videos are so well produced. Thank you ❤️

@firefly5033 11 месяцев назад

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

@hariharansreenivas6752 11 месяцев назад

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

@Solanaar 2 месяца назад

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?

@dotpenji 10 месяцев назад

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.

@zokalyx 11 месяцев назад

I loved the grid one!

@okosmik 11 месяцев назад

I love your style, thanks.

@oladiedoo50 11 месяцев назад

love this channel. great stuff

@sarahv363 11 месяцев назад

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

@madnad9634 11 месяцев назад

Amazing as always!

@mark.martinkovics 8 месяцев назад

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

@flatline-timer 11 месяцев назад

I love this channel so much!!

@abacuswithrehan264 11 месяцев назад

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.

@maharshiguin7813 11 месяцев назад

This is fav channel now

@fauxir 11 месяцев назад

So glad I've discovered your channel 🎯

@AndersonMancini 6 месяцев назад

Fantastic explanation ❤👏🏻

@Santopirata 11 месяцев назад

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.

@SpaceDorito 11 месяцев назад

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!

@darkreaper4990 11 месяцев назад

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.

@Gnomek 9 месяцев назад

Awesome channel.

@OctagonalSquare 3 месяца назад

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

@dotKext 10 месяцев назад

Amazing!

@subinaypanda9936 11 месяцев назад

Another great episode.

@affangavankar8848 6 месяцев назад

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

@RegalWK 10 месяцев назад

I love your content so much

@vino9427 11 месяцев назад

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

@nekuuu 11 месяцев назад

Your content is awesome

@fabrica-de-naves 19 дней назад

Design and Dev skills with cute

@niharikachhabra2341 11 месяцев назад

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

@asimshamim113 11 месяцев назад

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

@Jacob_Price 11 месяцев назад

Sheesh, she went and did it again.

@MidoFace 8 месяцев назад

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

@heesel4089 11 месяцев назад

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

@Oneiroi0 11 месяцев назад

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?

@toshirohitsugaya1465 11 месяцев назад

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

@loliradotopper 11 месяцев назад

The amount of works are crazy, Lol.

@juanmacias5922 11 месяцев назад

Impressive! 0.0

@its.arjun.s 11 месяцев назад

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

@mateussarmento7692 11 месяцев назад

Wow I love your videos

@_kumar06 11 месяцев назад

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

@chxmpetre8147 11 месяцев назад

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

@seanrileyhawkins4511 11 месяцев назад

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

@GrantPerdue 8 месяцев назад

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

@dhiiraj4ux 11 месяцев назад

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

@koth_harvest_final 11 месяцев назад

i am currently hitting the griddy for three.js

@farhaankhan4885 Месяц назад

how does this work in next js ?

@hernanbphb 11 месяцев назад

you are great , thanks

@thevikingsock8527 11 месяцев назад

Can you also shade videos :o?

@thevikingsock8527 11 месяцев назад

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.

@komododragon6126 11 месяцев назад

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

@shanquan93 11 месяцев назад

smashed the subscribe button

@glaze4629 4 дня назад

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

@zralok 11 месяцев назад

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

@thepope2005 11 месяцев назад

@juxtopposed What is the name of the code font?

@sohamkarandikar6726 11 месяцев назад

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

@thevikingsock8527 11 месяцев назад

Could I add that to a Video too :O?

@videos6505 9 месяцев назад

Wow

@technotechmusic 11 месяцев назад

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

@aetherclouds1181 11 месяцев назад

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)

@user-hz2fl3mg6j 10 месяцев назад

I think im simping for u.

@userb7fg474 10 месяцев назад

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.

@corruptedknight0 11 месяцев назад

vUv

@markodjurdjevic8916 10 месяцев назад

Can this be applied to multiple images...

@TheBedLump_Sans 11 месяцев назад

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

@MCroppered 11 месяцев назад

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?