Back to articles
Photo Filters Are Just Matrix Operations on Pixel Arrays
News

Photo Filters Are Just Matrix Operations on Pixel Arrays

via Dev.to TutorialMichael Lip

Every Instagram filter is a combination of brightness adjustment contrast modification color channel manipulation and selective blurring. None of these operations are complex individually. The art is in combining them. Anatomy of a filter A typical "vintage" filter combines: Reduce contrast slightly (factor 0.9) Add warmth (increase red +10, decrease blue -10) Slight vignette (darken corners) Reduce saturation to 80% function vintageFilter ( imageData ) { const data = imageData . data ; for ( let i = 0 ; i < data . length ; i += 4 ) { let r = data [ i ], g = data [ i + 1 ], b = data [ i + 2 ]; // Reduce contrast r = 0.9 * ( r - 128 ) + 128 ; g = 0.9 * ( g - 128 ) + 128 ; b = 0.9 * ( b - 128 ) + 128 ; // Add warmth r = Math . min ( 255 , r + 10 ); b = Math . max ( 0 , b - 10 ); // Reduce saturation const gray = 0.299 * r + 0.587 * g + 0.114 * b ; r = gray + 0.8 * ( r - gray ); g = gray + 0.8 * ( g - gray ); b = gray + 0.8 * ( b - gray ); data [ i ] = Math . min ( 255 , Math . max ( 0 ,

Continue reading on Dev.to Tutorial

Opens in a new tab

Read Full Article
1 views

Related Articles