Bongani  Ngema

Bongani Ngema

1651350720

Tiny-Canvas: Composed By Two Minimal and Lightweight Rendering Modules

Tiny-Canvas

Tiny-Canvas is composed by two minimal and lightweight rendering modules. One called TinyCanvas and the other one called TinySprite. Both of this modules use WebGL as a rendering backend for high performance. None of them falls back to canvas to keep the size of the library as small as possible. Tiny-Canvas modules are great if you have limited space (ex: Limited size contests) and want to have WebGL features like custom shaders.

The main difference between TinyCanvas and TinySprite is that the first one implements a simple matrix stack to enable multiple layers of transformation, this would allow an easy implementation of a scene graph type of structure. TinySprite is mostly useful if you are working on a single layer of transformation. This means that TinySprite is a bit faster than TinyCanvas but less flexible.

Modules size

TinyCanvas zipped size is: 1571 bytes

TinyCanvas compiled size is: 3195 bytes

TinyCanvas full size is: 10335 bytes


TinySprite zipped size is: 1416 bytes

TinySprite compiled size is: 3137 bytes

TinySprite full size is: 9844 bytes

Examples

Small KittenMark Example (TinyCanvas)

Small KittenMark Example (TinySprite)

TinyCanvas Module

TinyCanvas module is instanced using the construction function TC or TinyCanvas if working with unminified version. The function requires as a parameter a HTML Canvas element.

var canvas = TC(document.getElementsByClassName('canvas')[0]);

TinyCanvas Properties:

  • g : WebGLRenderingContext : Reference to the WebGL Context used by the renderer.
  • c : HTMLCanvasElement : Reference to the HTML Canvas Element used by the renderer.
  • col: Number : Integer number representing the current tint color on the canvas. It's represented like ARGB (ex: 0xFFFFFFFF).

TinyCanvas Methods:

  • bkg(red : Number, green : Number, blue : Number) : void: Sets the background color. Maps to glClearColor. It requires normilized to 1.0 values.
  • cls() : void: Clear the current frame buffer.
  • trans(x : Number, y : Number) : void: Applies translate transformation to current matrix.
  • scale(x : Number, y : Number) : void: Applies scale transformation to current matrix.
  • rot(radians : Number) : void: Applies rotation transformation to current matrix.
  • push() : void: Pushes the current matrix into the matrix stack.
  • pop() : void: Pops the matrix stack into the current matrix.
  • img( texture : WebGLTexture, x : Number, y : Number, width : Number, height : Number, u0 : Number, v0 : Number, u1 : Number, v1 : Number) : void: Batches texture rendering properties. NOTE: If you are not drawing a tile of a texture then you can set u0 = 0, v0 = 0, u1 = 1 and v1 = 1.
  • flush() : void: Pushes the current batch information to the GPU for rendering.

TinySprite Module

TinySprite module is instanced using the construction function TS or TinySprite if working with unminified version. The function requires as a parameter a HTML Canvas element.

var canvas = TS(document.getElementsByClassName('canvas')[0]);

TinySprite Properties:

  • g : WebGLRenderingContext : Reference to the WebGL Context used by the renderer.
  • c : HTMLCanvasElement : Reference to the HTML Canvas Element used by the renderer.
  • col: Number : Integer number representing the current tint color on the canvas. It's represented like ARGB (ex: 0xFFFFFFFF).

TinySprite Methods:

  • bkg(red : Number, green : Number, blue : Number) : void: Sets the background color. Maps to glClearColor. It requires normilized to 1.0 values.
  • cls() : void: Clear the current frame buffer.
  • img( texture : WebGLTexture, x : Number, y : Number, width : Number, height : Number, rotation: Number, translateX: Number, translateY: Number, scaleX: Number, scaleY: Number, u0 : Number, v0 : Number, u1 : Number, v1 : Number) : void: Batches texture rendering properties. It's very similar to TinyCanvas img method but here you must pass the transformation parameters drawing function. This is because TinySprite doesn't have a matrix stack. NOTE: If you are not drawing a tile of a texture then you can set u0 = 0, v0 = 0, u1 = 1 and v1 = 1.
  • flush() : void: Pushes the current batch information to the GPU for rendering.

Utility Functions

Tiny-Canvas comes with a couple of utility functions for easy creation of some WebGL primitives.

TCPrg(gl : WebGLRenderingContext, vsSrouce : String, fsSource : String) : WebGLProgram : Compiles a vertex and fragment shader and then links them to program.

TCBuf(gl : WebGLRenderingContext, bufferType : Number, size : Number, usage : Number) : WebGlBuffer : Creates and allocates a buffer object.

TCTex(gl : WebGLRenderingContext, image : (Image | ArrayBuffer), width : Number, height: Number) : WebGLTexture


Developed by Felipe Alfonso.

Author: Bitnenfer
Source Code: https://github.com/bitnenfer/tiny-canvas 
License: WTFPL License

#node #game #javascript 

What is GEEK

Buddha Community

Tiny-Canvas: Composed By Two Minimal and Lightweight Rendering Modules
Bongani  Ngema

Bongani Ngema

1651350720

Tiny-Canvas: Composed By Two Minimal and Lightweight Rendering Modules

Tiny-Canvas

Tiny-Canvas is composed by two minimal and lightweight rendering modules. One called TinyCanvas and the other one called TinySprite. Both of this modules use WebGL as a rendering backend for high performance. None of them falls back to canvas to keep the size of the library as small as possible. Tiny-Canvas modules are great if you have limited space (ex: Limited size contests) and want to have WebGL features like custom shaders.

The main difference between TinyCanvas and TinySprite is that the first one implements a simple matrix stack to enable multiple layers of transformation, this would allow an easy implementation of a scene graph type of structure. TinySprite is mostly useful if you are working on a single layer of transformation. This means that TinySprite is a bit faster than TinyCanvas but less flexible.

Modules size

TinyCanvas zipped size is: 1571 bytes

TinyCanvas compiled size is: 3195 bytes

TinyCanvas full size is: 10335 bytes


TinySprite zipped size is: 1416 bytes

TinySprite compiled size is: 3137 bytes

TinySprite full size is: 9844 bytes

Examples

Small KittenMark Example (TinyCanvas)

Small KittenMark Example (TinySprite)

TinyCanvas Module

TinyCanvas module is instanced using the construction function TC or TinyCanvas if working with unminified version. The function requires as a parameter a HTML Canvas element.

var canvas = TC(document.getElementsByClassName('canvas')[0]);

TinyCanvas Properties:

  • g : WebGLRenderingContext : Reference to the WebGL Context used by the renderer.
  • c : HTMLCanvasElement : Reference to the HTML Canvas Element used by the renderer.
  • col: Number : Integer number representing the current tint color on the canvas. It's represented like ARGB (ex: 0xFFFFFFFF).

TinyCanvas Methods:

  • bkg(red : Number, green : Number, blue : Number) : void: Sets the background color. Maps to glClearColor. It requires normilized to 1.0 values.
  • cls() : void: Clear the current frame buffer.
  • trans(x : Number, y : Number) : void: Applies translate transformation to current matrix.
  • scale(x : Number, y : Number) : void: Applies scale transformation to current matrix.
  • rot(radians : Number) : void: Applies rotation transformation to current matrix.
  • push() : void: Pushes the current matrix into the matrix stack.
  • pop() : void: Pops the matrix stack into the current matrix.
  • img( texture : WebGLTexture, x : Number, y : Number, width : Number, height : Number, u0 : Number, v0 : Number, u1 : Number, v1 : Number) : void: Batches texture rendering properties. NOTE: If you are not drawing a tile of a texture then you can set u0 = 0, v0 = 0, u1 = 1 and v1 = 1.
  • flush() : void: Pushes the current batch information to the GPU for rendering.

TinySprite Module

TinySprite module is instanced using the construction function TS or TinySprite if working with unminified version. The function requires as a parameter a HTML Canvas element.

var canvas = TS(document.getElementsByClassName('canvas')[0]);

TinySprite Properties:

  • g : WebGLRenderingContext : Reference to the WebGL Context used by the renderer.
  • c : HTMLCanvasElement : Reference to the HTML Canvas Element used by the renderer.
  • col: Number : Integer number representing the current tint color on the canvas. It's represented like ARGB (ex: 0xFFFFFFFF).

TinySprite Methods:

  • bkg(red : Number, green : Number, blue : Number) : void: Sets the background color. Maps to glClearColor. It requires normilized to 1.0 values.
  • cls() : void: Clear the current frame buffer.
  • img( texture : WebGLTexture, x : Number, y : Number, width : Number, height : Number, rotation: Number, translateX: Number, translateY: Number, scaleX: Number, scaleY: Number, u0 : Number, v0 : Number, u1 : Number, v1 : Number) : void: Batches texture rendering properties. It's very similar to TinyCanvas img method but here you must pass the transformation parameters drawing function. This is because TinySprite doesn't have a matrix stack. NOTE: If you are not drawing a tile of a texture then you can set u0 = 0, v0 = 0, u1 = 1 and v1 = 1.
  • flush() : void: Pushes the current batch information to the GPU for rendering.

Utility Functions

Tiny-Canvas comes with a couple of utility functions for easy creation of some WebGL primitives.

TCPrg(gl : WebGLRenderingContext, vsSrouce : String, fsSource : String) : WebGLProgram : Compiles a vertex and fragment shader and then links them to program.

TCBuf(gl : WebGLRenderingContext, bufferType : Number, size : Number, usage : Number) : WebGlBuffer : Creates and allocates a buffer object.

TCTex(gl : WebGLRenderingContext, image : (Image | ArrayBuffer), width : Number, height: Number) : WebGLTexture


Developed by Felipe Alfonso.

Author: Bitnenfer
Source Code: https://github.com/bitnenfer/tiny-canvas 
License: WTFPL License

#node #game #javascript 

How to Create an Image Clip Animation with Slider Controls using Only HTML & CSS

In this blog you’ll learn how to create an Image Clip Animation with Slider Controls using only HTML & CSS.

To create an Image Clip Animation with Slider Controls using only HTML & CSS. First, you need to create two Files one HTML File and another one is CSS File.

1: First, create an HTML file with the name of index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Image Clip Animation | Codequs</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <input type="radio" name="slide" id="one" checked>
      <input type="radio" name="slide" id="two">
      <input type="radio" name="slide" id="three">
      <input type="radio" name="slide" id="four">
      <input type="radio" name="slide" id="five">
      <div class="img img-1">
        <!-- <img src="images/img-1.jpg" alt="">
      </div>
      <div class="img img-2">
        <img src="images/img-2.jpg" alt="">
      </div>
      <div class="img img-3">
        <img src="images/img-3.jpg" alt="">
      </div>
      <div class="img img-4">
        <img src="images/img-4.jpg" alt="">
      </div>
      <div class="img img-5">
        <img src="images/img-5.jpg" alt="">
      </div>
      <div class="sliders">
        <label for="one" class="one"></label>
        <label for="two" class="two"></label>
        <label for="three" class="three"></label>
        <label for="four" class="four"></label>
        <label for="five" class="five"></label>
      </div>
    </div>
  </body>
</html>

2: Second, create a CSS file with the name of style.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: -webkit-linear-gradient(136deg, rgb(224,195,252) 0%, rgb(142,197,252) 100%);
}
.wrapper{
  position: relative;
  width: 700px;
  height: 400px;
}
.wrapper .img{
  position: absolute;
  width: 100%;
  height: 100%;
}
.wrapper .img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  clip-path: circle(0% at 0% 100%);
  transition: all 0.7s;
}
#one:checked ~ .img-1 img{
  clip-path: circle(150% at 0% 100%);
}
#two:checked ~ .img-1 img,
#two:checked ~ .img-2 img{
  clip-path: circle(150% at 0% 100%);
}
#three:checked ~ .img-1 img,
#three:checked ~ .img-2 img,
#three:checked ~ .img-3 img{
  clip-path: circle(150% at 0% 100%);
}
#four:checked ~ .img-1 img,
#four:checked ~ .img-2 img,
#four:checked ~ .img-3 img,
#four:checked ~ .img-4 img{
  clip-path: circle(150% at 0% 100%);
}
#five:checked ~ .img-1 img,
#five:checked ~ .img-2 img,
#five:checked ~ .img-3 img,
#five:checked ~ .img-4 img,
#five:checked ~ .img-5 img{
  clip-path: circle(150% at 0% 100%);
}
.wrapper .sliders{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  display: flex;
}
.wrapper .sliders label{
  border: 2px solid rgb(142,197,252);
  width: 13px;
  height: 13px;
  margin: 0 3px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}
#one:checked ~ .sliders label.one,
#two:checked ~ .sliders label.two,
#three:checked ~ .sliders label.three,
#four:checked ~ .sliders label.four,
#five:checked ~ .sliders label.five{
  width: 35px;
  border-radius: 14px;
  background: rgb(142,197,252);
}
.sliders label:hover{
  background: rgb(142,197,252);
}
input[type="radio"]{
  display: none;
}

Now you’ve successfully created an Image Clip Animation with Sliders using only HTML & CSS.

#html #css 

Ray  Patel

Ray Patel

1619571780

Top 20 Most Useful Python Modules or Packages

 March 25, 2021  Deepak@321  0 Comments

Welcome to my blog, In this article, we will learn the top 20 most useful python modules or packages and these modules every Python developer should know.

Hello everybody and welcome back so in this article I’m going to be sharing with you 20 Python modules you need to know. Now I’ve split these python modules into four different categories to make little bit easier for us and the categories are:

  1. Web Development
  2. Data Science
  3. Machine Learning
  4. AI and graphical user interfaces.

Near the end of the article, I also share my personal favorite Python module so make sure you stay tuned to see what that is also make sure to share with me in the comments down below your favorite Python module.

#python #packages or libraries #python 20 modules #python 20 most usefull modules #python intersting modules #top 20 python libraries #top 20 python modules #top 20 python packages

Ray  Patel

Ray Patel

1619615100

Python Collections Module: Counter, ChainMap, Deque & Tuple

Python Collections module offers a set of container data types that extend the features of stock containers like Lists, Tuples, Sets, and Dictionaries. With these special containers, you not only have the features of stock containers, but also some extra methods which come in very handy for certain tasks.

By the end of this tutorial, you’ll have the knowledge of the following:

  • What is the collections module?
  • Various functions like :
  1. Counter
  2. ChainMap
  3. Deque
  4. Named Tuple
  • Working examples

The Collections module comes pre-installed in Python so we don’t need to pip install it. We can just import it and you’re ready to go! Let’s go into the most used functions in detail.

#data science #collection #collection module #python #python collection module #python module

Python Collections Module: Counter, ChainMap, Deque & Tuple | upGrad blog

Python Collections module offers a set of container data types that extend the features of stock containers like Lists, Tuples, Sets, and Dictionaries. With these special containers, you not only have the features of stock containers, but also some extra methods which come in very handy for certain tasks.

By the end of this tutorial, you’ll have the knowledge of the following:

  • What is the collections module?
  • Various functions like :
  1. Counter
  2. ChainMap
  3. Deque
  4. Named Tuple
  • Working examples

The Collections module comes pre-installed in Python so we don’t need to pip install it. We can just import it and you’re ready to go! Let’s go into the most used functions in detail.

#data science #collection #collection module #python #python collection module #python module