Create your blog and photo album with postbit
Create your blog and photo album

Create new post

Content:

Upload a picture:
Tags (keywords separated by comma)

Save Cancel
The JavaScript Blog js:   Followers: 3 ; Following: 3

Explore The JavaScript Blog's photo albums:
Javascript tools (2)
Photos from posts (7)

JavaScript Art


Javascript art references:

APPS - Some apps that create abstract art or generative art that could have been created with javascript:

  • Thicket by Interval Studios
    https://itunes.apple.com/us/app/thicket/id461778014
  • Silk - Interactive Generative Art, based on http://weavesilk.com/
    https://itunes.apple.com/us/app/silk-interactive-generative/id436590129 

Post by The JavaScript Blog (2016-01-06 16:57)

Post your comment:

Name: Email: Site:

JavaScript OCR: convert image to text

It is now possible to convert images to text using OCR using pure javascript.

Javascript OCR tools:

Ocrad.js (Optical Character Recognition in JS): It is the Ocard OCR project converted to Javascript (with Emscripten compiler, that converts C code LLVM bytecode to javascript). It converts scanned text images into text.

Post by The JavaScript Blog (2014-04-23 11:20)

From: cheeseonehad
Checking it out 2014-09-22 04:31

Post your comment:

Name: Email: Site:

Online calculator with arbitrary precision

I've just created simple online calculator with arbitrary precision, so users can have many digital places. Here it is:
http://js.do/rsiqueira/precision-calculator
 
Currently it's very simple, only can only divide (x/y) and multiply (x*y) but it's useful to play with divisions. My initial goal was play with divisions that have interesting results in the decimal places expansion, like "1/9998"
 
JavaScript currently have precision of not many decimal places (20 decimal places), so the result would look just like this:
1/99998 = 0.00001000020000400008
(result from a simple online javascript calculator: http://www.centralinternet.com.br/html-calculator.html)
 
But with a large arbitrary precision decimal places, the result is much more impressive (80 decimal places in this case): 
1/99998 = 0.00001000020000400008000160003200064001280025600512010240204804096081921638432769
(result from the precision-calculator using bignumber.js or big.js JavaScript library created by Michael Mclaughlin)

One future idea for this js library would be to have a parser that could understand expressions like: 10.5 * (1/3+1/(2**16))
May be convert this to the bignumber API syntax and then eval the result.
 
Try also some interesting divisions, that will display incredible results in the decimal places expansion:
 
  1/99998 (will display powers of 2);
  1/99997 (will display powers of 3);
  1/998001 (will display sequential numbers);
  1001000/997002999 (will display all powers)

 

Post by The JavaScript Blog (2014-01-31 16:20)

Post your comment:

Name: Email: Site:

Ultra bass sound in Javascript

Copy the code below in this page to hear a bass sound created with JavaScript:
Page to test Javascript audio api (html5 audio): http://js.do/blog/sound-waves-with-javascript/
Code to paste and play:

var f = 140*(2/3); // Try 3/3, 4/3, 5/3, 6/3 to change tone
var samples_length = 44100;
for (var i=0; i < samples_length ; i++) {
  var t = i/samples_length;
  var w = 1*PI*f*t;
  samples[i] = cos(w + 8*sin(w*6/6) * exp(-t*2) );
  samples[i] *= exp(-t*2); // Fade sound
// samples[i] *= exp(t*6); // Uncomment to add distortion effect
}

Post by The JavaScript Blog (2013-12-16 12:37)

Post your comment:

Name: Email: Site:

JavaScript Style Guide

Principles of Writing Consistent, Idiomatic JavaScript
 
JavaScript Style Guide: https://github.com/rwaldron/idiomatic.js
 
Idiomatic Style Manifesto, Whitespace, Beautiful Syntax, Type Checking (Courtesy jQuery Core Style Guidelines), Conditional Evaluation, Practical Style (example of Module and Constructor) , Naming, Misc (example of switch statement, cases-delegator pattern)
 
Example of sample JavaScript code to create a constructor:
 
// A Practical Constructor
(function( global ) {
  function Ctor( foo ) {
    this.foo = foo;
    return this;
  }
 
  Ctor.prototype.getFoo = function() {
    return this.foo;
  };
 
  Ctor.prototype.setFoo = function( val ) {
    return ( this.foo = val );
  };
 
  // To call constructor's without `new`, you might do this:
  var ctor = function( foo ) {
    return new Ctor( foo );
  };
 
  // expose our constructor to the global object
  global.ctor = ctor;
 
})( this );

Post by The JavaScript Blog (2013-09-09 12:12)

Post your comment:

Name: Email: Site:

Color preview with JavaScript

Type a color code (#rrggbb):

Click "Preview Color" to change the background color of this div

Post by The JavaScript Blog (2013-09-06 20:59)

Post your comment:

Name: Email: Site:

Labyrinth in JavaScript

A JavaScript Labyrinth, using random number generator and just 2 Unicode characters: "╲" and "╱"

The original version is from a BASIC one-liner labyrinth that I found in the article "A single line of code sends readers into a labyrinth".

The original BASIC code run on a Commodore 64 to generate the maze:
10 PRINT CHR$ (205.5 + RND (1)); : GOTO 10

Labyrinth source code (interactive code inside the online JavaScript Editor): http://js.do/samples/labyrinth

The JavaScript Labyrinth result:

╱╱╱╲╱╲╲╲╱╱╲╲╱╲╲╱╲╱╲╲╲╲╲╱╲╱╱╲╲╱╲╲╱╲╱╲╲╱
╲╲╲╱╲╲╱╲╲╱╲╲╲╱╲╱╱╱╱╱╱╱╲╱╱╲╱╲╲╲╱╲╲╲╱╱╱╲
╲╱╲╱╲╱╱╱╱╱╱╱╲╲╱╲╲╱╱╲╲╱╲╱╲╲╱╱╱╱╲╱╲╱╱╲╱╲
╲╲╱╱╱╱╱╲╱╲╲╲╲╲╲╲╲╲╲╲╲╲╲╲╲╱╲╱╱╲╱╲╲╱╲╲╱╱
╲╲╱╱╱╲╱╲╱╲╱╱╲╱╲╲╱╲╱╱╱╱╲╲╲╲╱╲╲╱╱╱╱╱╲╲╱╱
╱╱╱╱╱╲╱╲╱╱╲╲╲╱╲╲╱╲╱╲╱╱╲╱╱╲╲╱╱╲╱╲╲╱╲╲╲╱
╱╲╱╲╲╱╱╲╲╱╱╱╲╱╱╱╱╱╱╲╲╲╲╱╲╱╱╱╱╲╱╲╱╱╲╱╱╲
╲╲╱╲╱╱╲╱╲╲╱╲╲╱╱╱╱╱╲╲╲╱╱╱╱╲╱╲╱╲╱╲╲╱╲╲╱╲
╲╲╱╲╲╲╱╲╱╱╲╲╱╲╱╲╲╱╲╲╱╱╲╱╲╱╱╱╲╱╱╱╱╲╲╱╲╱
╱╱╱╱╲╲╲╱╱╲╲╱╱╲╲╱╲╱╲╱╲╲╱╱╱╱╱╱╱╲╱╱╱╲╲╱╱╱
╱╲╲╱╱╲╲╲╱╱╲╱╲╱╲╲╱╱╲╱╱╱╲╲╲╲╱╱╱╱╲╲╲╱╲╲╲╲
╲╲╱╲╲╲╱╲╲╱╲╲╱╱╱╲╱╲╲╲╲╲╱╲╱╲╲╱╲╱╱╲╲╱╱╱╱╱
╲╲╱╲╱╱╱╱╲╱╲╲╲╱╲╱╱╱╲╱╲╱╲╱╲╲╲╱╱╱╲╲╲╱╱╲╱╱
╲╲╲╲╱╱╱╲╲╱╲╲╲╲╱╲╲╲╱╱╱╱╱╲╲╲╱╱╲╱╱╲╱╱╲╱╱╱
╲╲╲╲╲╲╱╲╱╲╱╲╲╲╱╲╱╲╱╱╲╱╲╱╲╱╱╲╲╱╱╱╱╲╲╲╲╲
╲╱╲╱╲╱╲╲╲╲╱╲╲╲╲╲╲╱╲╱╲╲╲╲╱╲╲╲╱╲╲╱╲╱╱╲╲╱
╲╱╱╲╲╱╲╱╲╲╲╱╲╲╱╱╲╲╲╱╱╲╲╲╱╱╱╱╱╱╱╲╲╲╲╱╱╲
╱╱╲╲╱╲╱╲╱╲╱╲╲╲╱╱╱╱╱╲╱╱╱╲╲╱╲╲╱╲╲╱╱╱╱╲╱╱
╱╲╲╱╱╱╲╲╲╲╱╱╲╱╱╱╲╲╱╱╱╱╲╲╱╲╱╲╱╱╱╱╲╲╲╲╲╱
╲╲╱╱╱╲╱╲╲╲╲╲╱╱╲╱╱╲╲╱╲╱╲╲╲╲╱╱╱╲╱╱╱╱╲╲╲╲
╱╱╱╱╲╲╲╲╱╲╱╲╱╲╱╱╲╲╲╱╲╱╱╲╱╱╱╲╲╲╱╱╲╱╱╱╲╱
╱╲╱╱╲╲╱╱╲╲╱╲╲╱╱╱╱╲╲╱╲╲╱╱╱╱╱╲╲╲╲╱╲╱╱╱╲╲
╲╲╲╱╱╱╱╲╱╱╱╲╲╱╱╲╱╲╱╱╱╱╱╱╱╱╱╲╲╱╱╱╲╲╱╲╲╲
╱╲╱╲╱╱╱╲╲╱╲╱╱╲╱╱╱╲╱╱╲╱╲╲╱╲╲╱╱╱╱╲╱╲╱╲╱╲
╲╱╱╱╱╲╱╲╱╱╱╱╱╱╲╱╲╱╲╱╲╱╱╲╲╲╲╱╱╲╱╱╱╱╲╲╲╱
╲╲╱╱╱╱╱╱╱╱╱╱╱╱╱╲╱╱╲╲╲╲╲╲╱╲╲╲╲╱╱╲╱╲╱╲╱╱
╲╲╲╲╲╱╱╲╱╲╱╱╲╱╲╱╲╱╱╱╱╲╲╱╲╲╱╲╱╲╲╲╲╲╱╲╲╱
╱╲╱╲╱╲╲╱╲╱╱╱╱╱╲╲╲╱╱╲╱╱╱╲╲╲╲╱╲╲╲╲╱╱╱╲╲╲
╱╱╱╲╱╱╱╱╱╱╱╱╱╱╲╱╱╱╱╲╲╱╲╲╲╱╱╱╱╲╲╱╱╱╱╲╲╲
╲╲╱╲╱╲╲╲╱╲╲╲╲╱╱╱╱╲╱╲╲╲╲╱╲╱╱╱╱╲╱╲╱╲╲╱╱╲
╱╱╲╲╱╲╲╱╱╱╲╲╱╲╲╱╲╱╲╲╱╲╱╲╲╱╱╲╱╲╲╱╲╲╱╱╲╱
╲╲╲╱╲╲╲╱╲╲╱╱╱╲╱╱╱╱╲╱╱╱╲╲╱╲╲╲╲╱╱╲╲╱╲╲╲╱
╱╱╱╱╱╱╱╲╱╲╲╲╱╲╲╱╲╱╲╲╲╱╲╲╱╱╲╲╱╱╲╱╱╱╱╱╲╲
╲╱╲╱╱╲╱╱╲╲╲╲╱╱╱╱╲╱╲╱╲╲╱╱╲╲╱╲╱╲╲╱╱╲╲╱╲╱
╱╱╱╲╱╱╲╲╲╲╱╱╲╲╱╱╱╲╱╱╲╱╱╱╱╲╱╱╲╱╱╲╱╲╱╲╱╲
╱╱╲╱╲╲╱╱╱╱╲╱╲╱╱╲╱╱╱╱╱╲╲╱╱╲╱╲╲╲╲╲╲╲╲╲╲╲
╲╲╲╱╱╲╱╲╱╲╱╲╲╱╲╱╲╱╲╱╲╱╲╲╱╱╱╱╱╱╱╱╲╱╱╱╱╲
╱╱╱╱╱╱╱╱╲╱╱╱╱╱╲╲╱╱╲╱╱╲╲╱╱╲╱╱╱╱╱╲╱╱╱╱╱╱
╲╱╲╱╱╱╲╱╲╲╱╲╲╱╲╲╱╱╲╱╱╱╲╲╱╱╱╲╱╲╱╱╲╲╲╲╱╱
╲╲╲╱╲╱╱╲╲╱╲╲╲╱╱╱╱╲╱╲╱╲╲╱╲╱╲╲╲╲╲╱╱╲╲╱╱╲
╱╲╱╲╱╲╲╱╲╲╱╱╱╲╱╲╱╲╲╲╱╲╲╱╲╲╱╲╱╲╲╱╱╲╲╲╲╲
╲╲╱╱╱╲╱╲╱╲╱╱╱╱╱╲╲╲╱╲╱╲╱╱╲╱╱╱╱╱╱╲╱╲╲╱╱╱
╲╲╱╱╱╲╲╲╲╱╱╱╱╱╱╲╲╱╱╲╱╱╲╱╱╲╲╲╲╱╱╱╲╲╱╱╲╱
╱╲╲╲╲╱╱╱╲╲╱╱╱╲╲╱╲╱╱╱╲╱╲╱╲╱╱╲╲╲╱╱╲╲╱╲╲╲

 

Post by The JavaScript Blog (2012-12-01 01:05)

Post your comment:

Name: Email: Site:

Find and Replace with JavaScript

How to do a find and replace using javascript?

When you have a text where you need to do some find and replace, try this web application in JavaScript where you can paste your text, type the words to be found and replaced and click "go" to view the results of the find and replace:
 
Online find and replace tool: http://js.do/samples/find-and-replace

It works also with regular expressions. The source code is available to be viewed and changed online.

The main code uses "new RegExp" and ".replace()" javascript functions, like this:
 

var str = "this is the original string";
var re = new RegExp("original string", "g");
var str_replaced = str.replace(re, "replaced string");	

Created with js.do - Online Javascript Editor
 
 

Post by The JavaScript Blog (2012-11-15 19:34)

Post your comment:

Name: Email: Site:

Javascript PC emulator running Linux


This is the browser running linux inside a web page!

It uses the pure Javascript PC Emulator, created by Fabrice Bellard (author of QEMU, ffmpeg and many other software projects).

My web browser takes 15 seconds to boot linux and the emulator runs very fast.

This PC emulator is a partial port of QEMU to JavaScript.
The file "jslinux.js" (Linux launcher) loads the linux images (vmlinux-2.6.20.bin and linuxstart.bin), creates a virtual hard disk (hda).

Try Linux inside the PC emulator here, boot from your browser: http://www.busybox.net/live_bbox/live_bbox.html

Screenshot of the browser running linux. Results of commands "cat /proc/cpuinfo", "df" and "free":

The terminal emulator is also in javascript, similar to "termlib.js" but a new one, also written by Fabrice Bellard.

Post by The JavaScript Blog (2012-11-09 16:33)

Post your comment:

Name: Email: Site:

CKEditor - Online HTML Editor for web pages


CKEditor is the online HTML editor used by Postbit to edit posts and photo descriptions.

CKEditor online demo: http://ckeditor.com/demo

Some CKEditor hints:

Toolbar default configuration is in the file: http://ckeditor.com/apps/ckeditor/3.6.5/ckeditor.js

CKEditor Toolbar Basic:
i.toolbar_Basic = [['Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','About']];

CKEditor Toolbar Full:
i.toolbar_Full = [
{name:'document',items:['Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates']},
{name:'clipboard',items:['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo']},
{name:'editing',items:['Find','Replace','-','SelectAll','-','SpellChecker','Scayt']},
{name:'forms',items:['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField']},'/',
{name:'basicstyles',items:['Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat']},
{name:'paragraph',items:['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl']},
{name:'links',items:['Link','Unlink','Anchor']},
{name:'insert',items:['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe']},'/',
{name:'styles',items:['Styles','Format','Font','FontSize']},
{name:'colors',items:['TextColor','BGColor']},
{name:'tools',items:['Maximize','ShowBlocks','-','About']}
];

How to customize the "save button" from the toolbar (default function is to submit the form):

  CKEDITOR.plugins.registered['save'] = {
    init : function( editor ) {
      var command = editor.addCommand( 'save',
          {
             modes : { wysiwyg:1, source:1 },
             exec : function( editor ) { // Add here custom function for the save button
               alert('You clicked the save button in CKEditor toolbar!');
             }
          }
      );
      editor.ui.addButton( 'Save',{label : 'Save',command : 'save'});
    }
  }


But when you need just to edit javascript code online, always use js.do - the online javascript editor

 

Post by The JavaScript Blog (2012-10-24 18:10)

Post your comment:

Name: Email: Site:



  Page 1 of 4 NEXT PAGE >>

| Explore users | New posts | Create your blog | Create your photo album |
| About Postbit | Our blog | Terms of use | Contact Postbit |


Copyright © 2017 - postbit.com