If your new to PixiJS, and like me who love to dissect working demos examples, you’ll find that the best demos are the ones by PixiJS on their website. For filters, check out this demo. Most you’ll find out in the wild on the internet are usually for the older pixiJS versions 1 to 3. And if you haven’t really read the docs over there you might be pulling your hair out trying to do certain things with PixiJS.
We’ll I’m here to get you started with one of the cool filters that come with PixiJS V4 called the Displacement Filter. This filter is the same type we’ve used in 3D application material designs. The Displacement filter uses the measurement of white and black variations of the displacement map(image) to determine its offset view. This offset is by “x” and “y”. So what’s really cool about the “DisplacementFilter” in PixiJS V4 is that you can use different displacement graphics to create all types of effects with this one single filter. The most famous effect for the displacement filter is the underwater look as demonstrated below.
And the displacement map image we used for the water filter
Now here is where you can have some fun, try changing out the displacement map image for a different tiled background image. Make sure its a tiled image which means it repeats seamlessly. It also has to be black and white. Hope this helps get you started working with filters and PixiJS V4.
You can download the source files here, if this was helpful to you, please give me a like or share on the article. If you have a comment or question, let me know.
I had a project recently for Miami International Airport where I created a vector B-17 bomber for a collage and decided I’d add it as a free download to the public. The B-17 Flying Fortress Bomber is famous for its bombing campaigns during World War 2. You can get a good read on Wiki about the Boeing B-17 Bomber.
To download and use these files, I only ask that you give me a like/tweet/google+. This may not and should not be redistributed and sold for any amount of money. Enjoy!
Displaying statistic numbers on your website has become quite popular and has been trending since mid-year of 2016. You may have seen a section on a site you scroll to with statistic information like “Projects Tackled – 347” or humorous stats like “Cups of Coffee – 2,547”. Some are static and some animated. These type of stats tend to introduce the performance and human factor of the company and lend to some good marketing points of view that align with info-graphics.
While playing around with some stats Ideas lately, I created a few different types of animated stats displays and out of the 3 I created, statsOmeter was one I wanted to share with the web development community. This little jQuery stats plugin will add an odometer type stats bar to a specific div with a specific class name. A plus to this stats counter is that you can use letter characters as well to spell words as well as adding a happy and sad face via characters ” ) ( :”. Adding letters allows you to also add humor to your stats. Very simple to use and you can change its appearance via CSS to match your website theme.
Since I’ve had an increase in request over the past few years for WordPress websites, I decided it would be beneficial to create a WordPress plugin version that would not only be super easy to add to the site during development, but would allow my clients to easily change and edit their business hours through accessing its settings page.
busnHours only supports businesses hours of operation from 6:00am to 10:00pm. Future updates will support Holidays settings and more customizations. This plugin for a limited time is available as a free download. Eventually it will only be available by either a paid one time fee or annual subscription with support and free updates. For details, info and to download, please visit the busnHours plugin page.
Animated Notice when Open
6 Messages, 3 when your open, 3 when closed. Messages are when open = “Almost Open”, “Just Opened” and “Open Now” Messages when Closed = “Almost Closed”, “Just Closed” and “Closed Now”.
These messages are shown in a frequency of 15 minutes, at 15 to prior/exact time/15 after time
<img src="images/image-1.jpg"alt="image one"/>
<img src="images/image-2.jpg"alt="image two"/>
As you can see by code this will get all images within the container using jQuery’s “each” loop and apply their max-width size as an inline style on each image. Of course you’ll need your CSS setup like below as example max-width 1900 pixels. I chose this size since I only develop websites to max fit standard HD resolution. Notice its 1900 not 1920 to allow for 10 pixels of padding on left and right sides of the container(“photos”) or your body tag for mobile:
Tip Your image will abruptly change size after loading, that’s why its best to set an opacity on them at “0” and once the page is loaded add the opacity of “1”. You can animate a fade in with jQuery or even take it a step further and add a loader per image. Typically if your building a web photo application these are things you would do.
I recently helped out a friend on a project that needed a clip-art image of the iconic Rosie the Riveter. The project needed a very large version and I requested we use a illustration I would create in vector format so it could be scaled to any size without losing any detail. For those of you who don’t know who she is, Rosie was an iconic graphic created during World War 2 for the women who where working in the factories and shipyards while the men where off fighting the war. Rosie symbolizes the power of women and what they can and have done for our country. You can read more about her in this Wiki.
My Free illustration of Rosie the Riveter is available in 2 versions(original and retro) and is a free download in 4 formats(2 SVG and 2 Illustrator files) for anyone who needs to use it in their projects. You can change and edit the colors as you like. You will need a graphic program to use these if your going to print them like Illustrator. There is a free vector program called Inkscape you can get here. Or you can also use a free raster program to open the SVG files like Gimp, which you can get here. If your going to print this to silk screen for t-shirts you’ll need to properly separate the colors on layers and most likely adjust the colors in pallette.
To download and use these files, I only ask that you give me a like/tweet/google+. This may not and should not be redistributed and sold for any amount of money. This IMO should be free to use. Enjoy!
AMP HTML are web pages designed to load near instantaneously. With mobile devices as the leader in internet access today, Google and many other companies have created the AMP project. Google best explains it as quote; ” For many, reading on the mobile web is a slow, clunky and frustrating experience – but it doesn’t have to be that way. The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.”
AMP HTML is a subset of HTML for authoring content pages such as news articles, blogs and products in a way that guarantees certain baseline performance characteristics. If you’re looking to optimize your site or client’s websites for speed. AMP is the way to go. For and introduction to AMP HTML see the video below. For more details see the ampproject.org website.
Win a free logo design for your business, service, product, organization or club. Contest ends February 28th. All logos are 100% vector and comes with various file formats for web. This is a hosted contest on Facebook and is not affiliated with Facebook. Design has a credit maximum of 8 hours. Names will be added to a computer generated raffle. Winner will be notified on the 1st of March via email. Enter to win here
This year I wanted to create a custom eCard to send to family and friends and came up with a 3D pop-up eCard design. To make it work I relied on getting parameters from the URL link I would send out. After designing and building the eCard. I realized I had quite a few to send it too and created a small app page to create the link to make it easier and thought I’d share this with everyone , so you can also use it. Check it out here, and here is the link for customizing it to send to someone: http://markhawkinsdesigns.com/3d-popup-christmas-card/ecard-someone.html. Merry Christmas! 🙂
For graphic designers and web designers, check out my updated social media icon pack. I added “Snapchat” and “Behance”. These are 14 social media icons that are round hollow-cut, meaning the silhouette of the symbol is cut out. They are SVG vector so you can use them directly in Illustrator, Photoshop, InDesign, Gimp and other graphic programs. For web designers, this is perfect for today’s web and mobile devices since they are SVG and scalable and retina ready for iPhones and Apple devices. This is free and you can download it here. If you like it, please share it and give me a like or Google+!