How to Turn a Procreate Drawing into a Web Animation
Strategy

How to Turn a Procreate Drawing into a Web Animation


I recently started drawing on my iPad using the Procreate app with Apple Pencil. I’m enjoying the flexibility of drawing this way. What usually keeps me from painting at home are basic things, like setup, cleaning brushes, proper ventilation, and other factors not really tied to the painting itself. Procreate does a pretty nice job of emulating painting and drawing processes, but adding digital features like undo/redo, layers, and layer effects.

Here’s a Procreate painting I made that I wound up exporting and animating on the web.

See the Pen
zebra page 2
by Sarah Drasner (@sdras)
on CodePen.

You can do this too! There are two basic animation effects we’ll cover here: the parallax effect that takes place on hover (with the ability to turn it off for those with vestibular disorders), and the small drawing effect when the page loads.

Parallax with drawing layers

I mentioned that part of the reason I enjoy drawing on the iPad is the ability to work in layers. When creating layers, I take care to keep certain “themes” on the same layer, for instance, the zebra stripes are on one layer and the dots are on own layer under beneath the stripes.

I’ll extend the drawing beyond the boundaries of where the line from the layer above ends, mainly because you’ll be able to peek around it a bit as we move the drawing around in the parallax effect. If the lines are sharp at any point, this will look unnatural.

Once I’m done creating my layers, I can export things as a Photoshop (PSD) file, thanks to Procreate’s exporting options.

The same drawing opened in Photoshop.

Then I’ll join together a few, so that I’m only working with about 8 layers at most. I use a photoshop plugin called tinyPNG to export each layer individually. I’ve heard there are better compression tools, but I’ve been pretty happy with this one.

Next, I’ll go into my code editor and create a div to house all the various images that are contained in the layers. I give that div relative positioning while all of the images inside it get absolute positioning. This places the images one on top the other.

<div id="zebra-ill" role="presentation">
  <img class="zebraimg" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/zebraexport6.png' />
  <img class="zebraimg" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/zebraexport5.png' />
 …
</div>
#zebra-ill {
  position: relative;
  min-height: 650px;
  max-width: 500px;
}

.zebraimg {
  position: absolute;
  top: 0;
  left: 0;
  perspective: 600px;
  transform-style: preserve-3d;
  transform: translateZ(0);
  width: 100%;
  }

The 100% width on the image will confines all of the images to the size of the parent div. I do this so that I’m controlling them all at once with the same restrictions, which works well for responsive conditions. The max-width and min-height on the parent allow me to confine the way that the div shrinks and grows, especially as when it gets dropped into a CSS Grid layout. It will need to be flexible, but have some constraints as well and CSS Grid is great for that.

Next, I add a mousemove event listener on the parent div with JavaScript. That lets me capture some information about the coordinates of the mouse using e.clientX and e.clientY.

const zebraIll = document.querySelector('#zebra-ill')

// Hover
zebraIll.addEventListener('mousemove', e => {
  let x = e.clientX;
  let y = e.clientY;
})

Then, I’ll go through each of the drawings and use those coordinates to move the images around. I’ll even apply transform styles connected to those coordinates.

const zebraIll = document.querySelector('#zebra-ill')
const zebraIllImg = document.querySelectorAll('.zebraimg')
const rate = 0.05

//hover
zebraIll.addEventListener('mousemove', e => {
  let x = e.clientX;
  let y = e.clientY;
  
  zebraIllImg.forEach((el, index) => {
    el.style.transform = 
      `rotateX(${x}deg) rotateY(${y}deg)`
  })
})

See the Pen
zebra page
by Sarah Drasner (@sdras)
on CodePen.

Woah, slow down there partner! That’s way too much movement, we want something a little more subtle. So I’ll need to slow it way down by multiplying it by a low rate, like 0.05. I also want to change it a just bit per layer, so I’ll use the layers index to speed up or slow down the movement.

const zebraIll = document.querySelector('#zebra-ill')
const zebraIllImg = document.querySelectorAll('.zebraimg')
const rate = 0.05

// Hover
zebraIll.addEventListener('mousemove', e => {
  let x = e.clientX;
  let y = e.clientY;
  
  zebraIllImg.forEach((el, index) => {
    let speed = index += 1
    let xPos = speed + rate * x
    let yPos = speed + rate * y
    
    el.style.transform = 
      `rotateX(${xPos - 20}deg) rotateY(${yPos - 20}deg) translateZ(${index * 10}px)`
  })
})

Finally, I can create a checkbox that asks the user if want to turn off this effect.

<p>
  <input type="checkbox" name="motiona11y" id="motiona11y" />
  <label for="motiona11y">If you have a vestibular disorder, check this to turn off some of the effects</label>
</p>
const zebraIll = document.querySelector('#zebra-ill')
const zebraIllImg = document.querySelectorAll('.zebraimg')
const rate = 0.05
const motioncheck = document.getElementById('motiona11y')
let isChecked = false

// Check to see if someone checked the vestibular disorder part
motioncheck.addEventListener('change', e => {
  isChecked = e.target.checked;
})

// Hover
zebraIll.addEventListener('mousemove', e => {
  if (isChecked) return
  let x = e.clientX;
  let y = e.clientY;
  
  // ...
})

Now the user has the ability to look at the layered dimensionality of the drawing on hover, but can also turn the effect off if it is bothersome.

[insert image]

Drawing Effect

The ability to make something look like it’s been drawn on to the page has been around for a while and there are a lot of articles on how it’s done. I cover it as well in a course I made for Frontend Masters.

The premise goes like this:

  • Take an SVG path and make it dashed with dashoffset.
  • Make the dash the entire length of the shape.
  • Animate the dashoffset (the space between dashes).

What you get in the end is a kind of “drawn-on” effect.

But in this particular drawing you might have noticed that the parts I animated look like they were hand-drawn, which is a little more unique. You see, though that effect will work nicely for more mechanical drawings, the web doesn’t quite yet support the use of tapered lines (lines that vary in thickness, as is typical of a more hand-drawn feel).

For this approach, I brought the file into Illustrator, traced the lines from that part of my drawing, and made those lines tapered by going into the Stroke panel, where I selected “More options” and clicked the tapered option from the dropdown.

Screenshot of the Illustrator Stroke menu.

I duplicated those lines, and created fatter, uniform paths underneath. I then took those fat lines and animate them onto the page. Now my drawing shows through the shape:

Here’s what I did:

  • I traced with Pen tool and used tapered brush.
  • I duplicated the layer and changed the lines to be uniform and thicker.
  • I took the first layer and created a compound path.
  • I simplified path points.
  • I created clipping mask.

From there, I can animate everything with drawSVG and Greensock. Though you don’t need to, you could use CSS for this kind of animation. There’s a ton of path points so in this case, so it makes sense to use something more powerful. I wrote another post that goes into depth on how to start off creating these kinds of animations. I would recommend you start there if you’re fresh to it.

To use drawSVG, we need to do a few things:

  • Load the plugin script.
  • Register the plugin at the top of the JavaScript file.
  • Make sure that paths are being used, and that there are strokes on those paths.
  • Make sure that those paths are targeted rather than the groups that house them. The parent elements could be targeted instead.

Here’s a very basic example of drawSVG (courtesy of GreenSock):

See the Pen
DrawSVGPlugin Values
by GreenSock (@GreenSock)
on CodePen.

So, in the graphics editor, there is this clipping mask and a group that is clipped by them with fat uniform lines underneath:

[insert image]

From here, we’ll grab a hold of those paths and use the drawSVG plugin to animate them onto the page.

//register the plugin
gsap.registerPlugin(DrawSVGPlugin);

const drawLines = () => {
  gsap.set('.cls-15, #yellowunderline, .cls-13', {
    visibility: 'visible'
  })
  
  const timeline = gsap.timeline({ 
    defaults: {
      delay: 1,
      ease: 'circ',
      duration: 2
    }		  
  })
  .add('start')
  .fromTo('.cls-15 path', {
    drawSVG: '0%'
  }, {
    drawSVG: '100%',
    immediateRender: true
  }, 'start')
  .fromTo('#yellowunderline path', {
    drawSVG: '50% 50%'
  }, {
    drawSVG: '100%',
    immediateRender: true
  }, 'start+=1')
  .fromTo('.cls-13', {
    drawSVG: '50% 50%'
  }, {
    drawSVG: '100%',
    immediateRender: true
  }, 'start+=1')
}

window.onload = () => {
  drawLines()
};

And there we have it! An initial illustration for our site that’s created from a layered drawing in the Procreate iPad app. I hope this gets you going making your web projects unique with wonderful hand-drawn illustrations. If you make anything cool, let us know in the comments below!



Source link

Server-Side Pagination Using ASP.NET Core and Angular 8
Strategy

Server-Side Pagination Using ASP.NET Core and Angular 8


Introduction

In this article, we will learn how to create server-side pagination, which is very useful whenever we have to display a large number of records.  

This will come in a total of three articles. In this article, we are displaying a number of records, and with that, we will calculate the number of pages needed. But, in one page, we can see only selected records, so rather than fetching all records at one time, we are going to fetch records based on pages. This will increase our performance. 

How Will it Work?

Suppose we have 500 records to display in the frontend and we are displaying only 100 records per page. When you click on page 2, it will display the next 100 records and so on. In Angular, we can use pipes and install some packages to display pagination, but here, if we are only showing 100 records at one time, then why fetch all 500 records at once?

It would be better if we fetch only 100 records at one time and when you click on next page, the application will fetch the next 100 records of that particular page.

Prerequisites

  • Basic knowledge of Angular.
  • Visual Studio Code must be installed.
  • Angular CLI must be installed.
  • Node JS must be installed.
  • Microsoft Visual Studio 2017 must be installed.
  • SQL server 2014.

You may also like:
Pagination and Sorting With Spring Data JPA.

Backend 

Here we will be implementing most of our logic with SQL server. The very first step is to create a database.

Step 1

Let’s create a database on your local SQL Server. I hope you have installed SQL Server 2017 in your machine (you can use SQL Server 2008, 2012, or 2016, as well). 

 

Step 2

Create Company Details Table by using the following code:

Now, let’s add a Store Procedure.

Step 3

Create a Stored Procedure with the following code: 

GetAllCompanies 

GetAllCompaniesCount 

Web API

Create an ASP.NET Core application 

Follow these steps to create an ASP.NET Core application.

Step 1

In Visual Studio 2019, click on File -> New -> Project.

 

Step 2 

Choose the Create option and select ASP.NET web application.

Step 3 

Select Web API and click Ok.

Step 4

Now, right-click on controller and then add a new item.

Step 5

Choose ADO.NET Entity Data Model and then click on Add.

Step 6

The next step is EF Designer; just click on Next

Step 7

A new pop-up will show. Click on next. If yours isn’t established, then click on new connection

Step 8

Copy your database connection server name and paste it in the server name textbox. You will see all the databases; select your database and click Ok.  

Step 9

The next popup will show. Paste your database server name, choose the correct database, test for the connection, and then click Next. Here, in the new screen, select your tables and store the procedure. Then, click Finish

 

Our next step is to right-click on the controllers folder and add a new controller. Name it Paginationcontroller and add the following namespace in the Paginationcontroller.

Here is the complete code for getting all the Pagination records. 

Complete Pagination controller code

Frontend

Step 1

Let’s create an Angular project using the following npm command:

 

Step 2

 Open the newly created project in Visual Studio Code and install Bootstrap in the project:

 

Now, open the styles.css file and add a Bootstrap file reference. To add a reference in the styles.css file, add this line:

Step 3

Now, let’s create a new component by using the following command:

Step 4

Now, create a new service using the following command:

Step 5 

Now, open the pagination.component.html file and paste the following code to see the HTML template. 

Step 6 

After this, open pagination.component.ts file and add the following code in this file:

Step 7 

Next, open the pagination.component.css file and paste the code to add some styling:

Step 8 

Lastly, open pagination.service.ts file and add services to call our API.

Step 9 

Let’s add the following code in the api.service.ts file:

Step 10

 The next and last step is to add the app module file in your project.

Step 11 

Now, it’s time to see the output. To do this, open your terminal and type ng serve -o to compile and open automatically in your browser.

Here, the total number of records is 33. Based on the logic implemented in our frontend, we will calculate the number of pages we need. We are displaying five records per page, so we need seven total pages, where the last will only display three records.

On the second page, the total number of records to display is 5.

The last page will only show 3 records. 

With this step, we have successfully completed our frontend, Web API, and backend. 

Further Reading



Source link

How to Get Localized Number Format Based on Country Using An...
Strategy

How to Get Localized Number Format Based on Country Using An…


I have seen many users get confused about how different countries use different formats to display number format according to their country code. Most of the countries use “dot notation” as their separator, and many of the them use a “comma” as their separator. In this article, you will learn how to use a localized number format based on the country code and symbol to display using JavaScript’s tolocalestring() method, which returns a string.

To explain the concept of localization and number format based on their locale, I am using my previous article as a reference to display the price based on different countries and their currencies.

So, please check my previous article, How to Create Nested Grid using Angular 8. As a reference, I am fetching the price and displaying it with the currency symbol based on their country and currency code. Additionally, in the nested grid, I am displaying all prices with a currency symbol.

In this article, I am just trying to explain the concept of tolocalestring(), which I am going to apply to the prices we’re looking at. In my previous article, I just displayed price in “en” format, which is just a decimal number, but what if we want to see the price according to the respective country?

You may also like:
Angular 8: All You Need to Know.

Backend

To fetch all countries, you just have to add the following code in SQL Server:

After creating the table, it’s time to insert records in the country table. For that, I  have inserted the code, so just copy and paste in SQL Server.

In my previous article, I unfortunately forgot to give database records for product table so I am sharing that with you.

For Product Country Information, which is our nested grid, below is the insert query that I, unfortunately, forgot to share it in my last article.

Web API

Copy and paste the following code into your controller. This code will fetch all the countries that are in your database’s Countries table.

If you don’t have the complete code, I am sharing it with you below.

Complete Code for country controller:

Frontend

This following code will fetch all the countries and bind it to our drop-down.

This HTML code adds one drop-down which will bind all the countries which we are getting from database table country. Here, one method I have declared is onCountryChange, which fires when we change the drop-down selection.

Copy the following code and paste it in the product.component.html file inside the div that has the class, col-12 col-md-12.

Copy the following code and paste it or replace it with ngOnInIt(), which will get all the countries and bind them to our drop-down.

Copy the following code and paste it inside our service to fetch all the countries.

Next, copy this code and paste it inside the getProducts method, which will convert the price based on their country and display it in our browser.

 

 Then, paste the following code inside the showProductCountryInfo method.

    

This method is used to check if any country is selected or not; if no country is selected, then price will display normally without any currency symbol and currency format. On the other hand, if a country is selected, then the price will display according to their country code and currency symbol.

tolacalestring() is the JavaScript inbuilt method to convert a number to a string, which has some overloaded features, including country code and currency code (inside style curly braces), which we are fetching from the Countries table. 

This particular code is the method for changing the country. If $event is 0, no country is selected, and price will display normally. But, if the country code is present, then it will display the number according to their country currency code list.

To avoid any confusion, I am sharing the full code, so just replace that with the old code if you already have it from my previous article.

products.components.ts  

Also, I am sharing the complete source code so that it will be very easy to find the concerned output. Once you download the source code, then you just have to open it in VS Code and type npm install --save in the terminal. This will create a node_module file, and your project will run without any error. 

The following image is shown when you click on the plus icon to see the nested grid, which displays the price with all formats with their country name and currency symbol. 

For example, India uses dot notation for their decimal symbol with the rupee currency symbol.

 The following image is displayed when there is no country selected in the drop-down.

The following image is displayed when Sweden is selected in the drop-down.

The following image is displayed when Kuwait is selected in the drop-down.

The below image is the Countries table.

Further Reading



Source link