https://github.com/evaristocuesta/pict2pix

Pict2Pix.js is a creative coding library to apply fancy pixel animations to images.
https://github.com/evaristocuesta/pict2pix

code-art creative-coding creativecodeart creativecoding effects generative-art image-effects image-manipulation javascript javascript-library web

Last synced: 18 days ago
JSON representation

Pict2Pix.js is a creative coding library to apply fancy pixel animations to images.

• Host: GitHub
• URL: https://github.com/evaristocuesta/pict2pix
• Owner: evaristocuesta
• License: mit
• Created: 2021-07-14T18:18:51.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-11-13T18:49:55.000Z (about 1 year ago)
• Last Synced: 2024-10-12T14:27:28.065Z (about 1 month ago)
• Topics: code-art, creative-coding, creativecodeart, creativecoding, effects, generative-art, image-effects, image-manipulation, javascript, javascript-library, web
• Language: JavaScript
• Homepage: https://evaristocuesta.github.io/pict2pix/
• Size: 12.1 MB
• Stars: 41
• Watchers: 1
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Pict2Pix.js

[![Last release](https://img.shields.io/github/v/release/evaristocuesta/pict2pix?label=last%20release)](https://github.com/evaristocuesta/Pict2Pix/releases) [![Languages](https://img.shields.io/github/languages/top/evaristocuesta/Pict2Pix)](https://github.com/evaristocuesta/Pict2Pix/) [![License](https://img.shields.io/github/license/evaristocuesta/Pict2Pix)](https://raw.githubusercontent.com/evaristocuesta/Pict2Pix/master/LICENSE) [![Author](https://img.shields.io/badge/author-Evaristo%20Cuesta-blue)](https://www.evaristocuesta.com/)

Pict2Pix.js is a creative coding library to apply fancy pixel animations to images.

![Screenshot example](./resources/pict2pix.gif)

# Get started with Pict2Pix

## Setting up a basic skeleton

To get started with Pict2Pix.js library, follow the next steps:

- Include the prict2pix.min.js file.

```html

```

- Place an image inside a container because the library will replace the image by a canvas.

```html



    



```

- Get the image element and call to pict2pix.animate function.

```javascript

const image = document.getElementById('image-jh');

window.onload = function initialize() {

    pict2pix.animate({

        image: image,

        numberOfParticles: 800,

        horizontalSpeed: 1,

        verticalSpeed: -1,

        particleType: 'twisted-particle'

    });

}

```


## Full basic skeleton code

### HTML

```html

    

    

    

    Document

    

    


        

    

    

    


```

### JavaScript

```javascript

const image = document.getElementById('image-jh');

window.onload = function initialize() {

    pict2pix.animate({

        image: image,

        numberOfParticles: 800,

        horizontalSpeed: 1,

        verticalSpeed: -1,

        particleType: 'twisted-particle'

    });

}

```

Take a look at https://evaristocuesta.github.io/pict2pix/ for more examples code.

## Contributors

- [Evaristo Cuesta](https://evaristocuesta.com)

- [Frank Laboratory](https://www.youtube.com/c/Frankslaboratory/)