HTML5 Canvas

It's Raining It's Pouring

September 8, 2016

HTML5 canvas allows objects to be drawn via scripting. This allows creation of graphs, photo composition and animation. Bitmap images and 2D shapes can be created using canvas.

For this tutorial I'm showing how to draw rain over a background image.

Canvas Browser Support

  • Chrome
  • Firefox
  • Safari
  • Internet Explorer
  • Microsoft Edge

Digital Painting by Carin Camen


    

<section class="introduction">
    <div class="row">
        <div class="example">
            <div class="col-lg-6">
                <canvas class="rain"></canvas>
                <p>Digital Painting by Carin Camen</p>
            </div>
        </div>
    </div>
</section>

    
    
    

    

.example {
padding-top: 60px;
}

.example .img{
max-width: 80%;
}

.rain {
width: 450px;
height: 450px;
border: 1px solid black;
box-shadow: 5px 5px 5px #888888;
background-image: url("../img/html/rain.png");
}

canvas {
width: 450px;
height: 450px;
border: 1px solid black;
box-shadow: 5px 5px 5px #888888;
background-image: url("../img/html/rain.png");
}

    
    
    

    

<!-- Modification of https://codepen.io/ruigewaard/pen/JHDdF -->

<!-- First we set up the rain to go inside the canvas window -->
$(document).ready(function() {
var canvas = $('#rain')[0]; <!-- html5 canvas is defined by the css and div #rain -->
canvas.width = window.innerWidth; <!-- we ensure that the rain fits inside the inner
width and height of the canvas window -->
canvas.height = window.innerHeight;

<!-- Next we define the color and size of the rain drops -->
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
ctx.strokeStyle = 'rgba(183,201,283,1)'; <!-- rain color -->
ctx.lineWidth = 1;  <!-- length of rain drop -->
ctx.lineCap = 'round'; <!-- rounding off raindrop line -->

<!-- We then use math.random to randomize the raindrops falling -->
var init = [];
var maxParts = 1500; <!-- the higher this number the heavier the rain -->
for(var a = 0; a < maxParts; a++) {
init.push({
x: Math.random() * w,
y: Math.random() * h,
l: Math.random() * 2, <!-- the higher this number the longer the raindrops -->
xs: -4 + Math.random() * 4 + 2,
ys: Math.random() * 10 + 10
})
}

<!-- Now we set up the actual drawing of the raindrops on canvas -->
var particles = [];
for(var b = 0; b < maxParts; b++) { <!-- this is saying if 0 < 1500 then add 1 to 0
until it reaches 1500 -->
particles[b] = init[b];
}

function draw() {
ctx.clearRect(0, 0, w, h); <!-- margin left, margin top, width and height -->
for(var c = 0; c < particles.length; c++) {
var p = particles[c];
ctx.beginPath();
ctx.moveTo(p.x, p
ctx.stroke();
}
move();
}

<!-- finalizes random raindrops -->
function move() {
for(var b = 0; b < particles.length; b++) {
var p = particles[b];
p.x += p.xs;
p.y += p.ys;
if(p.x > w || p.y > h) {
p.x = Math.random() * w;
p.y = -20;
}
}
}

setInterval(draw, 40); <!-- setInterval is giving the time delay to draw the
 rain e.g. 3000 is 3 seconds -->

}
});

    
    
    

HTML5 Canvas

Let it Snow!

September 9, 2016

With a slight bit of change to the Javascript above, rain can be turned into snow.

In this tutorial, I present how Canvas can be used for marketing and advertising, in a banner ad.

Canvas Browser Support

  • Chrome
  • Firefox
  • Safari
  • Internet Explorer
  • Microsoft Edge

Digital Painting by Carin Camen


    

<section class="introduction">
    <div class="row">
        <div class="example">
            <div class="col-lg-6">
                <canvas class="snow"></canvas>
                <p>Digital Painting by Carin Camen</p>
            </div>
        </div>
    </div>
</section>

    
    
    

    

.example {
padding-top: 60px;
}

.example .img{
max-width: 80%;
}

.snow {
position: absolute;
width: 450px;
height: 450px;
border: 1px solid black;
box-shadow: 5px 5px 5px #888888;
background-image: url("../img/html/snow.png");
z-index: 0;
}


.tread_text {
position: absolute;
width: 400px;
height: 150px;
margin-top: 20px;
margin-left: 30px;
background-image: url("../img/html/tread_text.png");
z-index: 1;
display: none;
}

.weather_text {
position: absolute;
width: 400px;
height: 150px;
margin-top: 20px;
margin-left: 30px;
background-image: url("../img/html/weather_text.png");
z-index: 1;
display: none;
}

.tire_logo {
position: absolute;
width: 400px;
height: 150px;
margin-top: 20px;
margin-left: 30px;
background-image: url("../img/html/tire_logo.png");
z-index: 1;
display: none;

}

.tire {
position: absolute;
width: 400px;
height: 280px;
margin-top: 170px;
margin-left: -45px;
background-image: url("../img/html/tire02.png");
z-index: 1;
overflow: hidden;
display: none;

}

    
    
    

    

$(document).ready(function() {
var canvas = $('.snow')[0];
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

if(canvas.getContext) {
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
ctx.strokeStyle = 'rgba(255,255,255,1)'; <!-- Changed the color to white for the snow -->
ctx.lineWidth = 5;
ctx.lineCap = 'round';


var init = [];
var maxParts = 100; <!-- reduced from 1500 down to 100 to slow down the snowflakes falling -->
for(var a = 0; a < maxParts; a++) {
init.push({
x: Math.random() * w,
y: Math.random() * h,
l: Math.random() * 0.5, <!-- reduced from 1 to 0.5 to make the snowflakes more rounded -->
xs: -4 + Math.random() * 4 + 2,
ys: Math.random() * 10 + 10
})
}

var particles = [];
for(var b = 0; b < maxParts; b++) {
particles[b] = init[b];
}

function draw() {
ctx.clearRect(0, 0, w, h);
for(var c = 0; c < particles.length; c++) {
var p = particles[c];
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p.x + p.l * p.xs, p.y + p.l * p.ys);
ctx.stroke();
}
move();
}

function move() {
for(var b = 0; b < particles.length; b++) {
var p = particles[b];
p.x += p.xs;
p.y += p.ys;
if(p.x > w || p.y > h) {
p.x = Math.random() * w;
p.y = -20;
}
}
}

setInterval(draw, 40);

}
});

/********************  Text FadeIn ************************/

var animationShown = false;
$(window).scroll(function() {
if($(this).scrollTop() > 500) {
if(!animationShown) {
$('.tread_text').hide().fadeIn(3000).delay(1000).fadeOut('3000');
$('.weather_text').hide().delay(4000).fadeIn(4000).delay(1000).fadeOut('3000');
$('.tire_logo').hide().delay(10000).fadeIn(4000);


animationShown = true;
}
} else {
if(animationShown) {
$('.tread_text').hide();
$('.weather_text').hide();
$('.tire_logo').hide();


animationShown = false;
}
}
});


/********************  Tire Slide In **********************/

var animationSlide = false;
$(window).scroll(function() {
if($(this).scrollTop() > 400) {
if(!animationSlide) {
$('.tire').hide().delay(1000).show('slide', {direction: "left"}, 3000);

animationSlide = true;
}
} else {
if(animationSlide) {
$('.tire').hide().fadeIn(3000).delay(1000).fadeOut('3000');

animationSlide = false;
}
}
});


    
    
    

Email Gather UI

Capturing Emails without the Annoying Pop Up

June 13, 2017

Email captures is a very prominent tool for many businesses to assist with the marketing and promotions campaigns. Unfortunately, the trend it to provide an annoying pop up that occurs every time you visit the site. While this may benefit the company, it doesn't make for a positive User Experience or Customer Experience.

UX and CX go close in hand. User Experience is the interaction between the user and the system. Based upon that interaction, CX is formed. Customer Experience is the emotional response to the User Experience. This response helps to formulate the relationship between the consumer and company. If their User Experience was frustrating, consumers will transfer that emotion into a negative opinion of the company. This makes the difference between a one time user or repeat customers.

To help bridge the gap between what the company's and consumers expectations. This type of email capture form can be a solution. The form tab is located in a prominent permanent position. This makes is easy for the user to access and a gentle reminder that if they desire to be kept up to date, on sales, promotions, etc. a click of the button, provides them that option. The CX on this changes from a blaring in your face, "WE WANT YOUR EMAIL SO WE CAN BUG YOU ENDLESSLY!!!! to "We'd love to send you coupons so you can save money!" The later provides a better User and Customer Experience

HTML5 Browser Support

  • Chrome
  • Firefox
  • Safari
  • Internet Explorer
  • Microsoft Edge

Slide Down Email Form

This is your mock navigation bar.

This is your mock body content section

Save Me Money!

If you are interested in receiving updates to our sales and promotion, please fill out the form below.


We protect your privacy. Your email will never be shared.

    

<section class="introduction">
   <div class="row">
            <div class="col-lg-6">
                <h3>Slide Down Email Form</h3>
            </div>

            <div class="example">
                <div class="col-lg-6 responsive">
                    <div class="sample">
                        <div class="mock_nav">
                            <p>
                                This is your mock navigation bar.
                            </p>
                        </div>

                        <div class="mock_body">
                            <p style="margin-top: 100px;">
                                This is your mock body content section
                            </p>


                            <div id="form_container">
                                <div id="form_header">
                                    <h5>Save Me Money!</h5>
                                </div>

                                <div id="form_wrapper">

                                    <div class="form_body">
                                        <div class="form_subheader">

                                            <p>
                                                If you are interested in receiving updates to our sales and promotion, please fill out the form below.
                                            </p>

                                            <div class="form_close">
                                                <i class="fa fa-times" style="color: white;" aria-hidden="true"></i>
                                            </div>
                                        </div>

                                        <div class="form-check form-check-inline">
                                            <label class="form-check-label form_radial">
                                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">Sales and Promotions
                                            </label>

                                            <label class="form-check-label">
                                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">New Products
                                            </label>

                                            <label class="form-check-label">
                                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">Help me Organize
                                            </label>

                                            <label class="form-check-label">
                                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">Send me Everything!
                                            </label>
                                        </div>

                                        <br>

                                        <form>
                                            <div class="form-group" style="text-align:left; font-size:10px;">
                                                <label for="firstName">* Required</label>
                                                <input type="text" class="form-control" id="firstName" placeholder="First Name*" required="required">
                                            </div>

                                            <div class="form-group">
                                                <label for="lastName"></label>
                                                <input type="text" class="form-control" id="lastName" placeholder="Last Name*" required="required">
                                            </div>

                                            <div class="form-group">
                                                <label for="email"></label>
                                                <input type="email" class="form-control" id="email" placeholder="Email Address*" required="required">
                                                <small id="emailHelp" class="form-text text-light">We protect your privacy. Your email will never be shared.</small>
                                            </div>

                                            <div class="form-group">
                                                <label for="message"></label>
                                                <textarea  class="form-control" id="message" rows="3" placeholder="Message"></textarea>
                                            </div>

                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input class="form-check-input" type="checkbox" checked> Please sign me up to receive updates, special offers and promotions.
                                                </label>
                                            </div>

                                            <button type="submit" class="btn btn-default" style="margin-bottom: 20px;">Submit</button>
                                        </form>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
   </div>


    
                                
    

    

/*************************************************
*             Email Form                     *
**************************************************/

.mock_nav {
    position: relative;
    margin: 30px 0 0 0;
    padding: 10px 0 0 0;
    background-color: black;
    height: 50px;
    color: white;
    text-align: center
}

.mock_body {
    margin: 0;
    padding: 10px 0 0 0;
    background-color: lightgrey;
    height: 800px;
    color: white;
    text-align: center

}

.fixed {
    position: fixed;
    top: 10%;
    left: 0;
}

.consulting {
    width: 70%;
    margin: 20px;
}

.ccc_icons {
    margin: 0 0 0 90px;

}

#form_wrapper {
    position: relative;
}

#form_container {
    position: relative;
    height: 100%;
    margin: -32px 0 0 0;
    z-index: 9999;
}


#form_header {
    position: relative;
    width: 150px;
    height: 25px;
    text-align: center;
    margin: -141px 0 0 65.5%;
    background-color: rgb(76, 98, 118);
    border-left: 3px ridge;
    border-right: 3px ridge;
    border-color: rgb(235, 236, 237);
    color:white;
}


#form_header h5{
    margin: 10px 10px 20px 10px;
    padding: 4px 0 0 0;
    font-size: 1em;
}

.form_close {
    position: absolute;
    text-align: center;
    width: 60px;
    height: 60px;
    margin: -13.5% 0 0 80%
}

.form_pop {
    width: 350px;
    margin: -10px 10px 10px 25px;
    color: black;
}

.form_subheader {
    margin: 20px;
    height: 70px;
    text-align: left;
    color: rgb(230,231,232);
    padding-top: 30px;
}

.form_body {
    margin: -20px 0 30px 0;
    height: 100%;
    border-bottom: 3px ridge;
    border-left: 3px ridge;
    border-right: 3px ridge;
    background-color: rgb(64, 64, 65);

}

.text-light{
    color: white;
}

input:hover, textarea:hover{
    background-color: rgba(64,64,65,.2);
}

/* Adds space between radio button and text */
input[type="radio"]
{
    margin-right: 10px;
}


/* Bootstrap Form Modifications */
label {
    display:block;
    margin: 10px;
    color: white;
    padding-left: 20px;
    font-weight: 200;
}


.form-group {
    margin: 0 3px 0 3px;
}

.form-check-label {
    display: block;
    text-align: left;
}






    
                                
    

    


/**
 * Email Slide Up Form
 */

$('#form_wrapper').hide();

$( document ).ready(function() {

    // Initiate slide up function and toggle to close
    $("#form_header").on('click', function() {
        $(this).next('#form_wrapper').slideToggle(500);
    });


    // Give user the option to close form with X
    $('.form_close').click (function(){
        $('#form_wrapper').slideUp(500)
    });


});