JavaScript and animated sinus in console 🙂💻 
Tags: javascript, webdev, beginners, tutorial
Published: 2020-06-28 19:45:38

Hello everyone 🙂

PS: This is my first post here, so be forgiving 🙂

Today I'd like to share with you simple but effective way of using mathematical sinus to make funny animation in console with my favourite JavaScript.

Do you have smarter or better way of doing similar example? Any suggestion is appreciated, thanks in advance. 👍

I hope someone will get inspired by this post and will create something even more creative.

This post was originally published at:
[JavaScript and animated sinus in console](https://dirask.com/posts/VjvxlD)

All code examples can be run with online runner under link:
[code examples with online runner](https://dirask.com/posts/VjvxlD)

# 1. Smile sine animation example

```javascript
function printSine(x1, x2) {
	var dx = 3.14 / 4.0; // x axis step
    var dy = 1.0  / 5.0; // y axis step

  	function printLine(character) {
    	var line = '';

        for(var y = y1; y < y2; y += dy) {
            line += '.';
        }
      
      	console.log(line + character);
    }
  
    for (var rad = x1; rad < x2; rad += dx) {
        var y1 = 0.0;
        var y2 = Math.sin(rad) + 1;

        printLine('😃');
    }
}

var x1 = 0.0;     // begining of sinus chart
var x2 = 6 * 3.14 // end of sinus chart

setInterval(function() {
  	console.clear();
  	printSine(x1, x2);
  
  	x1 += 0.3;
  	x2 += 0.3;
  
}, 40);
```

Ouput:
[code example with online runner](https://dirask.com/posts/VjvxlD)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rfuklxl568cz3llwmbh5.PNG)


# 2. Crazy fast

```javascript
function printSine(x1, x2) {
	var dx = 3.14 / 4.0; // x axis step
    var dy = 1.0  / 5.0; // y axis step

  	function printLine() {
    	var line = '';

      	for(var i = 0; i < arguments.length; ++i) {
          	var character = arguments[i];
          
            for(var y = y1; y < y2; y += dy) {
                line += ' ';
            }

          	line += character;
            line+= '                 ';
          
          	for(var y = y2; y < 1.0; y += dy) {
                line += ' ';
            }
        }
      
      	console.log(line);
    }
  
    for (var rad = x1; rad < x2; rad += dx) {
        var y1 = 0.0;
        var y2 = Math.sin(rad) + 1;

        printLine('😃', '😃');
    }
}

var x1 = 0.0;     // begining of sinus chart
var x2 = 6 * 3.14 // end of sinus chart

setInterval(function() {
  	console.clear();
  	printSine(x1, x2);
  
  	x1 += 0.3;
  	x2 += 0.3;
  
}, 4);
```

Ouput:
[code example with online runner](https://dirask.com/posts/VjvxlD)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7u9j2bjfbwb759npqzv3.PNG)

# 3. Custom sine animation example

```javascript
function printSine(x1, x2) {
	var dx = 3.14 / 4.0; // x axis step
    var dy = 1.0  / 5.0; // y axis step

    for (var rad = x1; rad < x2; rad += dx) {
        var y1 = 0.0;
        var y2 = Math.sin(rad) + 1;

        var line = '';

        for(var y = y1; y < y2; y += dy) {
            line += ' ';
        }

        console.log(line + '+');
    }
}

var x1 = 0.0;     // begining of sinus chart
var x2 = 6 * 3.14 // end of sinus chart

setInterval(function() {
  	console.clear();
  	printSine(x1, x2);
  
  	x1 += 0.3;
  	x2 += 0.3;
  
}, 50);
```

Ouput:
[code example with online runner](https://dirask.com/posts/VjvxlD)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qh7rgxvzs6pdkj3ymmxf.PNG)

# 4. Funny smiled sine example

```javascript
function printSine(x1, x2) {
	var dx = 3.14 / 4.0; // x axis step
    var dy = 1.0  / 5.0; // y axis step

  	function printLine(character) {
    	var line = '';

        for(var y = y1; y < y2; y += dy) {
            line += ' ';
        }
      
      	console.log(line + character);
    }
  
    for (var rad = x1; rad < x2; rad += dx) {
        var y1 = 0.0;
        var y2 = Math.sin(rad) + 1;

        printLine('*');
    }
  
  	printLine('😃');
}

var x1 = 0.0;     // begining of sinus chart
var x2 = 6 * 3.14 // end of sinus chart

setInterval(function() {
  	console.clear();
  	printSine(x1, x2);
  
  	x1 += 0.3;
  	x2 += 0.3;
  
}, 50);
```

Ouput:
[code example with online runner](https://dirask.com/posts/VjvxlD)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mwn5cdcldksv1brvvvpy.PNG)

So, that's all for today, I hope you enjoyed this short post, leave a comment with improvement suggestions or any thoughts.

Thanks, be well and see you soon in my next post. 👍 🙂