Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ❤ 💻
We are community of people that helps each other.

If you think you have some skills to help others

help someone and become a part of our community - List Q & A

JavaScript and animated sinus in console

0 contributions
15 points

Hello everyone 🙂

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.

1. Smile sine animation example

// ONLINE-RUNNER:browser;

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);

2. Crazy fast

// ONLINE-RUNNER:browser;

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);

3. Custom sine animation example

// ONLINE-RUNNER:browser;

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);

4. Funny smiled sine example

// ONLINE-RUNNER:browser;

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);

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. 👍 🙂

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more