Obamify-lite banner

Obamify-lite

Created by: serwin.dev
5 devlogs
9h 21m 35s

This is an attempt on recreating the famous website called "Obamify" from scratch using python and Pillow. But then switched to JavaScript for easy-to-use version.
In this journey, i'm determined to learn the algorithm that work behind this conc…

This is an attempt on recreating the famous website called “Obamify” from scratch using python and Pillow. But then switched to JavaScript for easy-to-use version.
In this journey, i’m determined to learn the algorithm that work behind this concept.

This project uses AI

So far, the AI is used to breakdown the concepts and teach me – what it actually do instead of giving just code

Demo Repository

README

Loading README...
serwin.dev
serwin.dev shipped Obamify-lite
about 3 hours ago

Shipped this project!

Yo!! I tried to build a lite version of Obamify – It was a good experience,
First, i implemented in python and pillow but then moved to JavaScript for web hosting..!! Also, this time, i didn’t use AI for Readme – I used AI only for learning concepts.

serwin.dev
serwin.dev worked on Obamify-lite
about 3 hours ago
3h 14m logged

In this 3+ hours of work, I have achieved the Final state.

Newly added

  • Improved the whole UI of the website
  • Added a Readme by my own.
  • In the website, I have written a tutorial – so that people won’t get confused using this.

See DEMO for final

Attachment
0
serwin.dev
serwin.dev worked on Obamify-lite
about 23 hours ago
1h 16m logged

In this 1hr of work, I have tried to optimize the pixel rearrangement – it will move a small range only.

  • Optimization of animation

To Do:

  • Style the page using CSS
  • maybe to implement someother algorithm
Attachment
0
serwin.dev
serwin.dev worked on Obamify-lite
1 day ago
2h 31m logged

Major changes:

  • Shipped the whole project from python to Javascript
  • Reason: Because, I need demo in web view!!
  • Applied the same brightness-based algorithm from python to js using html canvas.

To Do:

  • Add algorithms to improve animation and optimize it.
  • Style the page
Attachment
0
serwin.dev
serwin.dev worked on Obamify-lite
2 days ago
0h 54m logged

In this 50m, i have completed the basic working model of my project in python using pillow
So far,

  • The image which is given will undergoes continuous animation with the help of frames and each frame will be saved in different files.
  • But, i encountered a new problem – i need demo in web view (Ofc, Python can handle but it drastically reduces the performance) So, i’m completely moving into Html,CSS and JS.
  • This can be considered as a positive thing. Because, i can learn the concepts again.
0
serwin.dev
serwin.dev worked on Obamify-lite
2 days ago
1h 24m logged

In this 1 hour of work, i have went through the module of python, “pillow”.

Newly added:

  • Now, the program can extract pixels and calculate brightness for each pixel.
  • It would then compare the two images and get the color from first image and position from second image.
  • With those, new pixels – it would create an output, Combining the color from 1st image and structure from 2nd image.

The program just gives the output with no animation – right now!

0