tag:blogger.com,1999:blog-12842162717883150802024-03-12T17:27:32.505-07:00Coding SpecialtyAnonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.comBlogger17125tag:blogger.com,1999:blog-1284216271788315080.post-66806197463687606592016-04-27T17:43:00.000-07:002016-04-27T17:43:30.831-07:00When do two variables refer to the same object, and how to copy a variableOne of my greatest confusions of JavaScript (and sometimes, greatest vexation) is when two variables refer to the same object. For example, <code>a</code< is the same object as <code>b</code>, but <code>c</code> is not the same object as <code>d</code> here:
<pre><code>var a = b = [1, 2, 3];
a.shift(); // 1
b; // [2, 3]
var c = d = "Hello, World!";
c = c.slice(0, -1); // "Hello, World"
d; // "Hello, World!"
</code></pre>
Here is the rule: when assigning one variable to another, the variables refer to the same object if and only if the object is not a primitive. So, if the object is a string, boolean, or number, they do NOT refer to the same object. Otherwise, they refer to the same object.
<h2>Overcoming variable reference with clones!</h2>
So, what can be done? What if I want to copy an object? I use a trick for Arrays all the time, inline in code: <code>array.slice()</code> returns a new copy of array, so that you can modify it without affecting the original. For objects, this is rather intuitive: iterate over each property and put it in a new object. So here's some code for a JavaScript "clone" method:
<pre><code>function clone(value){
// throw an error for undefined input
if(typeof value === "undefined")
throw new ReferenceError("expected argument at 0: value from {clone}");
// check for primitives
if(typeof value === "number" ||
typeof value === "string" ||
typeof value === "boolean")
return value; // nothing needs to be done
// check for array/sliceable objects
if(typeof value.slice !== "undefined")
return value.slice();
// otherwise, let's iterate through the object
var retObj = {};
for(var prop in value){
retObj[prop] = value[prop];
}
return retObj;
}</code></pre>
Rather succinct, I like it enough.Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com1tag:blogger.com,1999:blog-1284216271788315080.post-18713082178330517532016-04-20T17:44:00.002-07:002016-04-20T17:44:59.441-07:00Null-coalescing operators: when and when not to use themAlright, this is something I've seen too many times in JavaScript code—even professionally—so I am going to address it here. This mistake is an easy one to make, and I use to make this mistake all the time; it's easy, simple, tempting, and nigh impossible to debug. I present to you: the null-coalescing operator. That is, the simple double-bar <code>||</code>. Now, you might be wondering, "what's so bad about it?" Well, nothing. It's just bad programmers using it incorrectly.<br>
<br>
The <code>||</code> operator is used in JavaScript not only to describe a disjunction, but also to specify default parameters to a function. (It's used in place of default parameter assignment, i.e. the one in <code>function foo(bar=5){}</code>, setting <code>bar</code> to 5.) It might be used (correctly) in the following situation:
<pre><code>function add(x, y, z){
z = z || 0;
return x + y + z;
}</code></pre>
This function successfully does what it's supposed to: add <code>x</code> and <code>y</code>, and <code>z</code> if specified. This works because of the short-circuiting property of <code>||</code>. This operator is roughly equivalent to the following function:
<pre><code>function disjunction(LHS, RHS){
if(LHS){
return LHS;
} else {
return RHS;
}
}</code></pre>
In this case, when the <code>LHS</code> is undefined, the value of the expression is <code>RHS</code>. However, the obverse of the statement (i.e. when <code>LHS</code> is defined then the value is not <code>RHS</code> and is thus is <code>LHS</code>) does not hold. Observe:
<pre><code>function multiply(x, y, z){
z = z || 1;
return x * y * z;
}</code></pre>
This works for most testcases (try it yourself) except for when <code>z === 0</code>; the expected result is <code>0</code>, but what we get is <code>x * y</code>. Why? Well, let's look at what the disjunction yields. <code>z = z || 1</code> becomes <code>z = 0 || 1</code>, which becomes <code>z = 1</code>, the incorrect result. This is why I follow this rule: <strong>when the RHS to the disjunction is truthy, use <code>typeof z === "undefined" ? default : z</code>; otherwise, one can use <code>||</code></strong>.Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com0tag:blogger.com,1999:blog-1284216271788315080.post-32825156543815478012016-04-02T20:44:00.001-07:002016-04-02T20:44:57.458-07:00Atoms and TokensThe <em>atomic score</em> (or a.s., as abbreviated further in this post) of a program is the number of functional tokens in the program. Sometimes, the atomic score does not take into count separators such as parentheses and semicolons, in some languages. However, it is not immediately clear as to how many of these there are in a program.
<br><br>
I found a neat rule-of-thumb technique for calculating the a.s. of a JavaScript program, and any other line-independent program: put the smallest amount of code you can en each line without changing the program (i.e., without causing a syntax error). Let's look at the following program:
<pre><code>var userInput = Number(Prompt("Give me some input!!"));
userInput += 20;
alert("Your number plus twenty: " + userInput);
userInput >>= 1;
alert(userInput);</code></pre>
Let's line-ify this! We'll remove what whitespace we can in the process.
<pre><code>var
userInput
=
Number
(
Prompt
(
"Give me some input!!"
)
)
;
userInput
+=
20
;
alert
(
"Your number plus twenty: "
+
userInput
)
;
userInput
>>=
1
;
alert
(
userInput
)
;</code></pre>
This is 31 lines, or roughly 31 tokens. If we remove separators (parens etc.) and remove non-significant tokens (e.g. <code>var</code> and the trailing semicolon), this becomes 21 tokens:
<pre><code>userInput
=
Number
Prompt
"Give me some input!!"
;
userInput
+=
20
;
alert
"Your number plus twenty: "
+
userInput
;
userInput
>>=
1
;
alert
userInput</code></pre>
<h2>Examples</h2>
Let's try a some more examples that compare JavaScript, <a href="http://conorobrien-foxx.github.io/Jolf/">Jolf</a>, a procedural golfing language, and some other various languages. For each task, I will provide a table for each language/language style and its respective a.s. Each program will be golfed to the intent of minimizing the a.s. This means that they will retain whitespace for readability. Each tokenized program will be followed by its a.s.
<h3>Task 1: Add two inputs</h3>
<table class="half">
<tr>
<th>JavaScript (full program)</th> <th>Tokenized</th>
</tr>
<tr>
<td>
<pre><code>alert(Number(prompt()) + Number(prompt()));</code></pre>
</td>
<td>
<pre><code>alert
Number
prompt
+
Number
prompt</code></pre>
</tr>
<tr>
<td colspan="2">a.s. = 5</td>
</tr>
<tr>
<th>JavaScript (ES6 arrow function)</th> <th>Tokenized</th>
</tr>
<tr>
<td>
<pre><code>(a, b) => a + b;</code></pre>
</td>
<td>
<pre><code>a
,
b
=>
a
+
b</code></pre>
</tr>
<tr>
<td colspan="2">a.s. = 7</td>
</tr>
<tr>
<th>Jolf</th> <th>Tokenized</th>
</tr>
<tr>
<td>
<pre><code>+jJ</code></pre>
</td>
<td>
<pre><code>+
j
J</code></pre>
</tr>
<tr>
<td colspan="2">a.s. = 3</td>
</tr>
<tr>
<th><a href="http://ethproductions.github.io/japt/">Japt</a></th> <th>Tokenized</th>
</tr>
<tr>
<td>
<pre><code>U+V</code></pre>
</td>
<td>
<pre><code>U
+
V</code></pre>
</tr>
<tr>
<td colspan="2">a.s. = 3</td>
</tr>
<tr>
<th>J, <a href="https://github.com/DennisMitchell/jelly/">Jelly</a>, APL</th> <th>Tokenized</th>
</tr>
<tr>
<td>
<pre><code>+</code></pre>
</td>
<td>
<pre><code>+</code></pre>
</tr>
<tr>
<td colspan="2">a.s. = 1</td>
</tr>
</table>
<h3>Task 2: Summation over array</h3>
Takes input as <code>[a, b, c, …, z]</code> and outputs <code>a + b + c + … + z</code>.
<table class="half">
<tr>
<th>JavaScript (full program)</th> <th>Tokenized</th>
</tr>
<tr>
<td>
<pre><code>alert(prompt().split(",").reduce(function(p, c){
return p + c;
}));</code></pre>
</td>
<td>
<pre><code>alert
prompt
.
split
","
.
reduce
function
p
,
c
return
p
+
c</code></pre>
</tr>
<tr>
<td colspan="2">a.s. = 15</td>
</tr>
<tr>
<th>JavaScript (ES6 arrow function)</th> <th>Tokenized</th>
</tr>
<tr>
<td>
<pre><code>x => x.reduce((p, c) => p + c);</code></pre>
</td>
<td>
<pre><code>x
=>
x
.
reduce
p
,
c
=>
p
+
c</code></pre>
</tr>
<tr>
<td colspan="2">a.s. = 11</td>
</tr>
<tr>
<th>Jolf</th> <th>Tokenized</th>
</tr>
<tr>
<td>
<pre><code>ux</code></pre>
</td>
<td>
<pre><code>u
x</code></pre>
</tr>
<tr>
<td colspan="2">a.s. = 2</td>
</tr>
<tr>
<th>Japt</th> <th>Tokenized</th>
</tr>
<tr>
<td>
<pre><code>UrAB{A+B</code></pre>
</td>
<td>
<pre><code>U
r
A
B
{
A
+
B</code></pre>
</tr>
<tr>
<td colspan="2">a.s. = 8</td>
</tr>
<tr>
<th>J, Jelly, APL</th> <th>Tokenized</th>
</tr>
<tr>
<td>
<pre><code>+/</code></pre>
</td>
<td>
<pre><code>+
/</code></pre>
</tr>
<tr>
<td colspan="2">a.s. = 2</td>
</tr>
<th>Jelly</th> <th>Tokenized</th>
</tr>
<tr>
<td>
<pre><code>S</code></pre>
</td>
<td>
<pre><code>S</code></pre>
</tr>
<tr>
<td colspan="2">a.s. = 1</td>
</tr>
</table>
<h2>Final remarks</h2>
Jelly is wicked short, and it's absolutely fantastic. Japt is beautiful, and I probably did something horribly wrong in my summation attempt. Finally, Jolf is my child, and it will also be first place in my mind.
<br><br>
Also, feel free to correct me if I'm wrong.Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com0tag:blogger.com,1999:blog-1284216271788315080.post-63457936232406837142016-03-17T21:09:00.000-07:002016-03-17T21:09:47.344-07:00Thinking more functionally: compositionRecently, I've been learning how to program in J (<a href="http://www.jsoftware.com/">website</a> <a href="https://en.wikipedia.org/wiki/J_%28programming_language%29" target="_blank">wikipedia</a> <a href="http://tryj.tk/">online interpreter</a> <a href="https://bit.ly/defcon">random link</a>). It can be thought of as a “functional” programming language, being based off of arrays and their modification; in fact, everything is an array: numbers are singleton arrays, lists are arrays, tables are arrays of arrays, etc.; I'm not entirely sure about where boxes fall, but that's a different story.)<br />
<br />
Anyhow, functional programming is <i>my favorite</i> form of programming, and J and I become friends instantly. I tried APL, but I didn't feel like non-ASCII with a useful language. So J it was.<br />
<br />
How is this related, you may ask? Well, for my favorite project Jolf I am planning on adding an aspect of functionality to it. And this is the content of the post: to walk you through how to make JavaScript functions more functional. This is the first post in a planned three-part series. This post will cover the code behind function composition, as well as provide an overview of the topic at hand.<br />
<br />
<hr />
<h2>Step 1: outline</h2>
So what do I plan on adding? Well, to put it simply, I'm planning on emulating J's feature. To illustrate this, I will assume we have functions <code>add</code>, <code>multiply</code>, etc. defined. So, let this serve as a basic list:
<ol>
<li><strong>Function composition.</strong> That is, for functions <code>f</code> and </code>, the composition <code>f ○ g</code> is basically this:
<pre class="center">[f ○ g](x<sub>0</sub>,…,x<sub><i>n</i></sub>) ≡ f(g(x<sub>0</sub>,…,x<sub><i>n</i></sub>))
[square ○ add](x, y) = (x + y)<sup>2</sup></pre>
Put concisely, it's
performing function <code>f</code> on the result of function <code>g(x<sub>0</sub>,…,x<sub><i>n</i></sub>)</code>.</li>
<li><strong>Function reflection.</strong> This is, for my purpose, converting an <i>n</i>-ary function to a unary one by using a single argument for all of its arguments. For a binary function <code>f</code>, it is thus:
<pre class="center">f<sup>~</sup>(x) = f(x, x)
add<sup>~</sup>(x) = x + x</pre>
</li>
<li><strong>Function Argument Binding</strong>. “Simply” stated, to bind (or link) an argument to a function is to have that argument be passed to that function; the function that describes this behaviour is the binding of that argument to the original function. So, if we have <code>f(x,y)</code> being a binary function, and <code>f ⌒ n</code> symbolically represents the action of binding, then
<pre class="center">[f ⌒ n](x) = f(x, n)
[multiply ⌒ 2](x) = 2x</pre>
</li>
</ol>
<hr>
<h2>Show us some code already!</h2>
Yeah, yeah, alrighty then. Let's tackle function composition first. As we know, <code>[f ○ g] = f(g(x))</code>. For this, we're going to modify <code>Array.prototype</code>. (Don't give me any flak for doing this, as I honestly don't care if it conflicts with other programs modifying the prototype. I will slap you with a trout if you do!)
<br><br>
We are going to write a function that returns <em>another</em> function that will take an arbitrary amount of arguments. It will then call the argument to the prototype with the arguments to the returned function, then the result of that will be called by the <code>this</code> function. That's very wordy, huh? Let's work on function composition without a prototype before converting it. This is simple enough, no? We can return a function that calls <code>f</code> with the application of <code>g</code> on the arguments. For this, we can use <code>Array#apply</code> in tandem with <code>Array.from</code>.
<br><br>
(NOTE! <code>Array.from</code> is a feature with spotty support! If you are worried with cross-browser compatabiliy, use <code>Array.prototype.slice.call(window, arrayLike)</code> instead.)
<pre>function compose(f, g){
return function(){
return f(g.apply(window, Array.from(arguments)));
}
}</pre>
You can test this code out and see that this works. Now, for some abstraction to the prototype! Since we are using the <code>this</code> value within the function, I will be using a closure for consistant behaviour. This is what the basic function may look like:
<pre>Function.prototype.compose = function(otherFunc){
return (function(orig){
return function(){
return orig(otherFunc.apply(window, Array.from(arguments)));
}
})(this);
}</pre>
This works by creating a closure that takes the <code>this</code> as a variable. Other than that, the code is pretty much the same as the original code constructed.
<br><br>
Ready for a bit of a challenge? Good, because I'm not asking. You have homework!
<br><br>
<strong>Exercise A:</strong> it would be nice to be able to call <code>Function#compose</code> with multiple arguments without having to link multiple <code>.compose</code> calls together. Implement this in the body of <code>Function#compose</code>, either your own or the one I have provided. Here following are some test cases for you that your function should pass. Beforehand I have defined the actual functions used.
<pre>function square(x){ return x*x; }
function halve(x){ return x/2; }
function add(x, y){ return x+y; }
function id(x){ return x; }
id.compose(square,add)(5, 6); // (5*6)^2 = 30^2 = 900
id.compose(square,halve)(3); // (3/2)^2 = 1.5^2 = 2.25
// make sure you implement it in this order!
halve.compose(square,id,add)(10, 4); // ((10+4)^2)/2 = (14^2)/2 = 196/2 = 98</pre>
<strong>Exercise B:</strong> Do this code in the shortest amount of bytes. You may convert the code to ES6, if it helps. It must, however, be in JavaScript ;). The shortest code by the time the next post is made wins an honourable mention. (You may post it in the comments below.)Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com0tag:blogger.com,1999:blog-1284216271788315080.post-15556148302361467812015-12-01T18:06:00.000-08:002015-12-01T18:06:31.164-08:00JavaScript: editing the built-ins<p>Whilst working on my newest project <a href="https://github.com/ConorOBrien-Foxx/Jolf">Jolf</a>, I found the need to “edit” the built-ins of JavaScript. What does that mean? I wanted to edit the <code>alert</code> function so that it would also apply <code>JSON.stringify</code> on the input. How can I do this? Abusing JavaScript closures, of course!</p>
<p>JavaScript is interesting in that it really doesn't care. For the record. JavaScript doesn't care what you do with it. It grumbles only when it cannot possibly complete the action. Other than arguing with you when you use undefined variables (or make a mistake with variables at all) and when you completely garble the text you type, JavaScript rolls with it. That is why the aim of the post is even feasible.</p>
<p>Now, let's do a simple example. Let's fix the abomination of the <code>isNaN</code> function. One would expect that this function would return <code>true</code> if and <i>only</i> the input is <code>NaN</code>; however, this function tries first to evaluate the input as a number, <i>then</i> detecting if the result is <code>NaN</code>. So, <code>isNaN(30) => false</code>, but <code>isNaN("Now in 3d!") => true</code>. We want it so that <code>isNaN(x) iff x is NaN</code>. How? Observe that <code>typeof NaN === "number"</code>. So, we check for a number type first, then call the old <code>isNaN</code> function, like so:</p>
<pre>(function(oldNaNTest){
return isNaN = function(inputNum){
if(typeof inputNum!=="number") return false; // NaN is a number
else return oldNaNTest(inputNum);
}
})(isNaN);</pre>
<p>This creates an anonymous function with <code>isNaN</code> as an argument. And, as an argument, <code>oldNaNTest</code> is it's own, “separate” function (i.e. being distinct from `isNaN` and not merely a reference), so it retains `isNaN`s value. We do a type-check on the input, and proceed with returning the correct results.</p>
<p>But why an anonymous function? Well, consider what might happen if it wasn't. We would use something like this:</p>
<pre>isNaN = function(inputNum){
if(typeof inputNum!=="number") return false;
else return isNaN(inputNum);
}</pre>
<p>All would be well with non-numbers, as they return <code>false</code>; however, when given a number, we look to the <code>else</code> statement for our instruction. And what are we pointed to? Yep, <code>isNaN</code>. Is this wrong? Oh good heavens, yes it is! JavaScript looks at this statement and thinks, <i>now, I need to look at the scope for a function named <code>isNaN</code>. Does that exist…yes! I found one! Here, take it!</i> JavaScript hands you the function you just made. Why? Because you overwrote the old one, silly. We could create a reference, say, <code>oldNaNTest</code>, in the global scope, then proceed as normal. Two problems with that: one, you have an extra variable in the global scope. That's dirty! Secondly, if you try to get rid of that variable, you encounter an error, because 'ol JavaScript cannot find the function reference. :( It works, but it is neither elegant nor efficient.</p>
<p>Let's edit the <code>eval</code> command so that it it only evaluates the argument if it is a valid number. We can even use our new, correct <code>isNaN</code> function! We'll assume that is appended in the code snippet below.</p>
<pre>(function(oldEval){
return eval = function(arg){
// test if valid number
var testArg = Number(arg); // will be NaN if invalid
return isNaN(testArg)?arg:oldEval(arg);
}
})(eval);</pre>
<p>Simplex enough, eh?</p>Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com0tag:blogger.com,1999:blog-1284216271788315080.post-50446984285616927072015-11-10T14:54:00.000-08:002015-11-10T14:54:15.620-08:00The Cosmic Number<h2>
<a href="http://jsfiddle.net/qpyypn7L/2/">The Cosmic Problem (JSFiddle)</a></h2>
^ Well... what else do you want? Haha, just kidding. Of course I'm going to tell 'ya about it.<br />
<br />
Pick a number. Any integer! <a href="http://images6.fanpop.com/image/photos/33000000/4-is-the-COSMIC-NUMBER-random-33048031-651-1001.jpg">Because four is the cosmic number</a>.<br />
<br />
“Um... 7?”<br />
<br />
Seven is five, five is four, four is the cosmic number!<br />
<br />
“... 27.”<br />
<br />
Twenty-seven is twelve, twelve is six, six is three, three is five, five is four, four is the cosmic number!<br />
<br />
<i><u><b>What is the trick? (scroll down)</b></u></i><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Give up? Okay, you're going to hit yourself once I tell you: count the lengths of the number. Not the number itself, just the English.<br />
<br />
I can just <i>hear</i> you. Don't feel too bad: it's a hard trick; I'm making you think of math when you need to be thinking of words. Now you've learned a neat party trick, but what gives? Of course, I did link to you a working example (that works with any integer between ±undecillion, I think), but that's not what's interesting.<br />
<br />
Here's my thought process. First, I wonder if all numbers tend to four. Obviously, four tends to four, it being <i>the only number whose value numbers its letters</i>; thus, it is a natural tendency. Is it, however, a hard-and-fast rule?<br />
<br />
I conjecture that this is indeed a rule. Now, a proof is needed. So let us begin!<br />
<br />
First, let us describe the process.<br />
<ol>
<li>Start with a number, call it N<sub>0</sub>.</li>
<li>Create a marker, call it k. Set k initially to 0.</li>
<li>Let E(x) be the English representation of a number x; for example, E(20) is twenty, E(25) is twenty-five (notice the hyphen), and E(123) is one hundred twenty-three (notice the lack of the improper “and” and punctuation other than the dash).</li>
<li>Let length(S) be the number of characters in string S. For example, length("Hello!") is 6, and length("O'Brien") is 7.</li>
<li>Set N<sub>k+1</sub> = length(E(N<sub>k</sub>))</li>
<li>Does N<sub>k+1</sub> = 4?<ol>
<li>If so, terminate the process, returning k.</li>
<li>Otherwise, increment k and go to step 5.</li>
</ol>
</li>
</ol>
<br />
<span class="claim">Conjecture: </span>All integers, when the above process is repeatedly applied, tend to four, i.e., have “fourness”; equivalently, there is no integer for which the above process does not halt.
<br />
<i></i><br />
My idea at first was to find the name of the longest number within the context (call it M), calculate length(E(M)), and prove that every number from 1 to M tends to four. However, this is [a] a laborious task (also consider that length(E(10M±1)) > length(E(M) )<span class="_Tgc"></span> and [b] is unsatisfactory for all numbers. But what then shall be the argument form?<br />
<br />
As it stands, this problem seems to be in, or at the very least related to, a currently unsolvable class of problems. A famous example would be the <a href="https://en.wikipedia.org/wiki/Collatz_conjecture">Collatz Conjecture</a>. As Paul Erdős said,<br />
<br />
<blockquote class="tr_bq">
Mathematics may not be ready for such problems.</blockquote>
<br />
So perhaps the proof is unattainable; the Cosmic Problem, like the Collatz Conjecture, involves in a case function's <i>n</i>-ness (i.e. that functions values tending towards <i>n</i> unconditionally). They both have common “seed” strings that are found (e.g. three to five to four). I, however, like to think that, since the Cosmic Problem is different in that it requires a non-mathematical conversion, that a proof can indeed be placed.<br />
<br />
As of now, I have not found such a proof. But I'm still looking... ;)<br />
<br />
Cheers!Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com0tag:blogger.com,1999:blog-1284216271788315080.post-48817487742263936472015-10-01T16:06:00.002-07:002015-10-01T16:08:46.671-07:00Esoteric - SimplexNo, no, no, not a simplex. I mean <i>Simplex</i>. Simplex is a single-char programming language, that is, all of its commands are single characters. I'll give a list of commands. Note that there are missing characters. These are either non-serious commands or are unimplemented.<br />
<pre style="white-space: pre-wrap;">Char Description
A Adds the current byte to the previous byte and removes the current byte, decrements pointer
B Converts the byte to binary
C Asks for input and outputs it
D Sets the current byte to twice its value
E Raises the previous byte the (current byte)th power and removes the current byte, decrements pointer
F Goes back n characters in the source code. Deletes the current byte.
G Asks for single-char input and Manhattan-adds it to the current byte
I Increments the byte
J Binary left-shift
K Binary right-shift
L Goes left a byte
M Decrements the byte
N Goes (current byte) bytes backwards in the strip.
O Goes to the (current byte)th position in the source code
R Goes right a byte
S Subtracts the current byte from the previous byte and removes the current byte, decrements pointer
T Multiplies the previous byte by the current byte and removes the current byte, decrements pointer
U Sets the current byte to half its value
V Divides the previous byte by the current byte and removes the current byte, decrements pointer
W Converts character to lower case (ASCII only)
X Sets the current byte to a random integer from 0 to the current byte
Y Floors the current value
Z Converts character to upper case (ASCII only)
0-9 Manhattan-adds the number to the current byte (a+_m b=10a+b).
a Make the number negative
b Asks for input that will store each character into a byte on the strip in order.
c Copies the current byte to the next byte and increments the pointer.
d Reverses the entire strip/tuple (tuple check first)
e Manhattan adds e = 2.718281828459045… to the stack.
f Turns off safety mode.
g Clears the strip and outputs it as ASCII characters.
Tuple: deletes the tuple and output its characters as ASCII.
i Asks for input as a number and stores it.
j Inserts a new cell at the pointer, pushing everything right.
k Skips the next command
l Writes the number of non-empty cells in the strip to the current cell
m Writes the index of the pointer to the cell
n Logically negates the current byte
o Outputs the current byte as a number
p Silent prime detection
q Checks for membership in a tuple (tupleByte member <=> member IN tupleByte)
Like this:
(t1,…,tN) M → (q) → (t1,…,tN) C
C is whether (1) or not (0) M in (t1,…,tN)
r Reverses the current number, removing leading zeroes. (1000→1)d
s Outputs the current byte as a string character
t Applies the next character's function (support […]) to every member of the current strip.
u Increments the strip number
v Decrements the strip number
x Proceed (confirms)
y Takes the current byte n and takes the n previous entries and pushes it into a tuple, then storing the tuple in the byte n bytes away OR if the current byte is a tuple, expands the tuple into n bytes (inclusive of the current byte, going out.)
z Resets the byte to zero
| Traverse the stack in the opposite direction
% Modulo
? Skips the next command if the byte is zero.
[…] Block statement. Read by ? as "one character".
{…} While loop. Execution continues until the current byte is zero.
!…! Comments.
# Stops evaluation
; Pushes the current character to the outer program (ability to compile to itself); if there are characters on the outer program at the end of execution, evaluates the outer program as the inner program.
` Suppresses evaluation of outer program and instead outputs it.
= N = current index. S = strip. S[N] = S[N] == S[N-1] (Equality testing)
> N = current index. S = strip. S[N] = S[N] > S[N-1] (Inequality testing)
< N = current index. S = strip. S[N] = S[N] < S[N-1] (Inequality testing)
" Toggle string-parsing mode. In string-parsing mode, char codes are written to the current byte and the pointer incremented. E.g., "Alive" would write values 65, 108, 105, 118, 101 to the current byte, the byte after that, etc.
(…)n Repeats … n times (pre-code compilation). If left off, assumed to be repeated once.
~~ Comment (pre-code, single-line)
</pre>
Here are some example programs:<br />
<h2>
BF Interpreter</h2>
Since there is a surjection from Simplex to BF, BF can compile to Simplex. The compiler can be written in simplex:<br />
<br />
<code>br{j">"=?[v"R";Ru]"<"=?[v"L";Ru]"+"=?[v"I";Ru]"-"=?[v"M";Ru]"."=?[v"s";Ru]","=?[v"G";Ru]"["=?[v"{";Ru]"]"=?[v"}";Ru]LL}
</code>
<br />
<h2>
Hello, World!</h2>
<code>"Hello, World!"g</code>Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com1tag:blogger.com,1999:blog-1284216271788315080.post-48267947930583480412015-10-01T15:43:00.000-07:002015-10-01T15:43:36.601-07:00What's up? Esoteric! - Cerveau Choix<a href="https://www.blogger.com/blogger.g?blogID=1284216271788315080" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><br /></a><a href="https://www.blogger.com/blogger.g?blogID=1284216271788315080" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=1284216271788315080" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a>OK, so I've been really into Esoteric languages. Y'know, those languages that aren't really practical to do real-world-ish stuff in, but are fun to program in. I'm also working on a few (yes, a few!) of my own. I'm not sure which one will be finished first... *OCD FTW*<br />
<br />
All notes on these programming schematics are from my notes.<br />
<br />
<h2>
<span style="font-style: italic;">Cerveau Choix</span></h2>
<div>
For convenience,there are alternate names by which the language may be named:</div>
<ul style="direction: ltr; margin-bottom: 0in; margin-left: .375in; margin-top: 0in; unicode-bidi: embed;" type="disc">
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;"><span style="font-style: italic;">Cerveau
Choix</span>
(Pronounced “Sare-voh Schwa”)</li>
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;"><span style="font-style: italic;">Cerveau</span> (Pronounced “Sare-voh”)</li>
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;">CC (Pronounced “Sea-sea”)</li>
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;"><span style="font-style: italic;">Choix</span> (Pronounced “Schwa”)</li>
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;">English “Brain Choice”</li>
</ul>
<div style="margin: 0in;">
This is really just
a fancy skin for BF (with some extra bonuses), allowing one to golf with
certain characters. The concept is that each of the BF characters are mapped to
a number, like so:</div>
<ol style="direction: ltr; font-style: normal; font-weight: normal; margin-bottom: 0in; margin-left: .375in; margin-top: 0in; unicode-bidi: embed;" type="1">
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;" value="0"><span style="font-style: normal; font-weight: normal;"><</span></li>
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;">></li>
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;">+</li>
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;">-</li>
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;">[</li>
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;">]</li>
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;">,</li>
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;">.</li>
</ol>
<div style="margin: 0in;">
<br /></div>
<div style="margin: 0in;">
And then mapping
permutations of characters to those symbols.</div>
<div style="margin: 0in;">
Outline:</div>
<div style="margin: 0in;">
Every program
consists of a preamble, consisting of the following:</div>
<div style="font-family: Consolas; font-size: 11.0pt; margin: 0in;">
<span style="font-style: italic;">C</span><span style="vertical-align: sub;">1</span>…<span style="font-style: italic;">C</span><span style="font-style: italic; vertical-align: sub;">n</span><span style="font-style: italic;">D</span></div>
<div style="font-size: 11.0pt; margin: 0in;">
<span lang="en-US" style="font-family: Calibri;">Where all </span><span lang="en-US" style="font-family: Consolas; font-style: italic;">i</span><span lang="en-US" style="font-family: Calibri;">, </span><span lang="en-US" style="font-family: Consolas; font-style: italic;">j</span><span lang="en-US" style="font-family: Calibri;">, </span><span lang="en-US" style="font-family: Consolas; font-style: italic;">C</span><span lang="en-US" style="font-family: Consolas; font-style: italic; vertical-align: sub;">i</span><span lang="x-IV_mathan" style="font-family: "Cambria Math";">≠</span><span lang="en-US" style="font-family: Consolas; font-style: italic;">C</span><span lang="en-US" style="font-family: Consolas; font-style: italic; vertical-align: sub;">j</span><span lang="en-US" style="font-family: Calibri;"> and </span><span lang="en-US" style="font-family: Consolas; font-style: italic;">C</span><span lang="en-US" style="font-family: Consolas; font-style: italic; vertical-align: sub;">i</span><span lang="x-IV_mathan" style="font-family: "Cambria Math";">≠</span><span lang="en-US" style="font-family: Consolas; font-style: italic;">D</span><span lang="en-US" style="font-family: Calibri;">, also with </span><span lang="en-US" style="font-family: Consolas; font-style: italic;">C</span><span lang="en-US" style="font-family: Consolas; font-style: italic; vertical-align: sub;">i</span><span lang="en-US" style="font-family: Calibri;"> denoting some arbitrary character.
After the preamble follows the code, either on the following lines or on the
same line, where a “</span><span lang="en-US" style="font-family: Consolas;">\n</span><span lang="en-US" style="font-family: Calibri;">” precedes the code (symbolic of
newline). For example, a BF code might be thus:</span></div>
<div style="font-family: Consolas; font-size: 11.0pt; margin: 0in;">
++++++++[>++++++++<-].</div>
<div style="margin: 0in;">
Might print out
character 64. Let's say our preamble was thus:</div>
<div style="margin: 0in;">
AB.</div>
<div style="margin: 0in;">
Then, our dictionary
would be this:</div>
<div style="direction: ltr;">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-color: #A3A3A3; border-style: solid; border-width: 1pt; direction: ltr; margin-left: .3333in;" valign="top">
<tbody>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="font-family: Consolas; font-size: 11.0pt; margin: 0in;">
<</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
A</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="font-family: Consolas; font-size: 11.0pt; margin: 0in;">
></div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
B</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="font-family: Consolas; font-size: 11.0pt; margin: 0in;">
+</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
AA</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><ul style="direction: ltr; margin-bottom: 0in; margin-left: .1805in; margin-top: 0in; unicode-bidi: embed;"><ul style="direction: ltr; margin-bottom: 0in; margin-left: 0in; margin-top: 0in; unicode-bidi: embed;" type="disc">
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;"> </li>
</ul>
</ul>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
AB</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="font-family: Consolas; font-size: 11.0pt; margin: 0in;">
[</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
BA</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="font-family: Consolas; font-size: 11.0pt; margin: 0in;">
]</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
BB</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="font-family: Consolas; font-size: 11.0pt; margin: 0in;">
,</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
AAA</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="font-family: Consolas; font-size: 11.0pt; margin: 0in;">
.</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
AAB</div>
</td>
</tr>
</tbody></table>
</div>
<div style="margin: 0in;">
And so, the code
would be translated as thus:</div>
<div style="font-family: Consolas; font-size: 11.0pt; margin: 0in;">
AB.</div>
<div style="font-family: Consolas; font-size: 11.0pt; margin: 0in;">
AA.AA.AA.AA.AA.AA.AA.AA.BA.B.AA.AA.AA.AA.AA.AA.AA.AA.A.AB.BB.AAB</div>
<div style="margin: 0in;">
As one can tell, the
trailing delineator is not required.</div>
<div style="margin: 0in;">
One is not limited
to two symbols in the preamble; one can you anywhere from 1 to 8 (more than 8
is allowed, but is impractical.) Examples of preambles and the respective code
and chart:</div>
<div style="margin: 0in;">
eFg~!</div>
<div style="direction: ltr;">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-color: #A3A3A3; border-style: solid; border-width: 1pt; direction: ltr;" valign="top">
<tbody>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .6673in;"><div style="margin: 0in;">
<</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .6673in;"><div style="margin: 0in;">
></div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .5895in;"><div style="margin: 0in;">
+</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8486in;"><ul style="direction: ltr; margin-bottom: 0in; margin-left: .1805in; margin-top: 0in; unicode-bidi: embed;"><ul style="direction: ltr; margin-bottom: 0in; margin-left: 0in; margin-top: 0in; unicode-bidi: embed;" type="disc">
<li style="margin-bottom: 0; margin-top: 0; vertical-align: middle;"> </li>
</ul>
</ul>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .6673in;"><div style="margin: 0in;">
[</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .6673in;"><div style="margin: 0in;">
]</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .6673in;"><div style="margin: 0in;">
,</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
.</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .6673in;"><div style="margin: 0in;">
e</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .6673in;"><div style="margin: 0in;">
F</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .5895in;"><div style="margin: 0in;">
g</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8486in;"><div style="margin: 0in;">
~</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .6673in;"><div style="margin: 0in;">
ee</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .6673in;"><div style="margin: 0in;">
eF</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .6673in;"><div style="margin: 0in;">
eg</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
e~</div>
</td>
</tr>
</tbody></table>
</div>
<div style="margin: 0in;">
eFg~!</div>
<div style="margin: 0in;">
g!g!g!g!g!g!g!g!ee!F!g!g!g!g!g!g!g!g!e!~e!F!e!~</div>
<div style="margin: 0in;">
<br /></div>
<div style="margin: 0in;">
However, I said that
this language was not merely a fancy reskin. It also includes a new operator,
the <span style="font-style: italic;">stack duplication operator</span>. Here is
the syntax:</div>
<div style="margin: 0in;">
{operator chain}<span style="font-style: italic;">n</span></div>
<div style="margin: 0in;">
This implies that
there are reserved identifiers; these are the numbers 0-9 and the symbol {, },
and |. (The latter I will explain later.) This means that these symbols <span style="font-style: italic;">cannot</span> be used in tandem with the stack
duplication operator; that is, if any of the symbols pertinent to said operator
are used in the preamble, they cannot be used within the code.</div>
<div style="margin: 0in;">
The last symbol is
the | or “bar” operator. It can be thought of as the import operator in Python,
except it doesn't depend on outside libraries, ergo, it is a self-sufficient
program. The bar operator allows one to make certain function accessible and definable.
Multiple bar commands should be on the same line. The bar line must precede the
preamble, but not necessarily on a line of its own.<span style="font-style: italic;"> </span>Here is a list of all valid bar commands:</div>
<div style="direction: ltr;">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-color: #A3A3A3; border-style: solid; border-width: 1pt; direction: ltr;" valign="top">
<tbody>
<tr>
<td style="background-color: black; border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="color: white; margin: 0in;">
<span style="font-weight: bold;">Command</span></div>
</td>
<td style="background-color: black; border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="color: white; margin: 0in; text-align: right;">
<span style="font-weight: bold;">Description of accessed
command</span></div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="margin: 0in;">
|z</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="margin: 0in; text-align: right;">
Set
current value to zero</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="margin: 0in;">
|d</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="margin: 0in; text-align: right;">
Doubles
the current value</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="margin: 0in;">
|h</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="margin: 0in; text-align: right;">
Halves
the current value (floor division of {current} // 2)</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="margin: 0in;">
|F</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="font-size: 11.0pt; margin: 0in; text-align: right;">
<span lang="en-US" style="font-family: Calibri;">Sets the current value to </span><span lang="en-US" style="font-family: Calibri;"><span style="mso-spacerun: yes;"> </span>(fibonacci)</span></div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="margin: 0in;">
|H</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="margin: 0in; text-align: right;">
Prints
“Hello, world!”</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="margin: 0in;">
|?</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="margin: 0in; text-align: right;">
Conditional.
Skips the next command if the current stack is zero.</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="margin: 0in;">
|#</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="margin: 0in; text-align: right;">
Allows
numeric numbers to be set to the next</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="margin: 0in;">
|c</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="margin: 0in; text-align: right;">
Sets
current value to the number of occupied cells</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="margin: 0in;">
|C</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="margin: 0in; text-align: right;">
Sets
current value to the number of occupied positive cells</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="margin: 0in;">
|X</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="margin: 0in; text-align: right;">
Resets
the holder to its original state and resets the IP.</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="margin: 0in;">
|i</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="margin: 0in; text-align: right;">
Allows
for multi-character input, overriding values to house the string
sufficiently, starting at pointer. (I.e., input = "Hello", </div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="margin: 0in;">
<span style="font-weight: bold;">|*</span></div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="margin: 0in; text-align: right;">
<span style="font-weight: bold;">Imports all the (non-bolded) commands in linear
order.</span></div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="margin: 0in;">
<span style="font-weight: bold;">|~</span></div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="margin: 0in; text-align: right;">
<span style="font-weight: bold;">Imports all the (non-bolded) commands in reverse
order.</span></div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .8902in;"><div style="margin: 0in;">
<span style="font-weight: bold;">|T</span></div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: 4.5631in;"><div style="margin: 0in; text-align: right;">
<span style="font-weight: bold;">Imports “true” commands, keeping to the original
sense of BF. (Working on specific definition)</span></div>
</td>
</tr>
</tbody></table>
</div>
<div style="font-size: 11.0pt; margin: 0in;">
<a href="https://www.blogger.com/blogger.g?blogID=1284216271788315080" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a><a href="https://www.blogger.com/blogger.g?blogID=1284216271788315080" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=1284216271788315080" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><span style="font-family: Calibri;">When a
bar command is used, it adds the function to the end of the list. E.g, if your
preamble was </span><span style="font-family: Consolas;">hcD;</span><span style="font-family: Calibri;">, then the modified table would be like this:</span></div>
<div style="direction: ltr;">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-color: #A3A3A3; border-style: solid; border-width: 1pt; direction: ltr;" valign="top">
<tbody>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="margin: 0in;">
<</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
h</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="margin: 0in;">
></div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
c</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="margin: 0in;">
+</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
D</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><ul style="direction: ltr; margin-bottom: 0in; margin-left: .1805in; margin-top: 0in; unicode-bidi: embed;"><ul style="direction: ltr; margin-bottom: 0in; margin-left: 0in; margin-top: 0in; unicode-bidi: embed;" type="disc">
</ul>
</ul>
- <br />
<ul style="direction: ltr; margin-bottom: 0in; margin-left: .1805in; margin-top: 0in; unicode-bidi: embed;"><ul style="direction: ltr; margin-bottom: 0in; margin-left: 0in; margin-top: 0in; unicode-bidi: embed;" type="disc">
</ul>
</ul>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
hh</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="margin: 0in;">
[</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
hc</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="margin: 0in;">
]</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
hD</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="margin: 0in;">
,</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
ch</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="margin: 0in;">
.</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
cc</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="margin: 0in;">
(sym9)</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
cD</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="margin: 0in;">
(sym10)</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
Dh</div>
</td>
</tr>
<tr>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7708in;"><div style="margin: 0in;">
Etc.</div>
</td>
<td style="border-color: #A3A3A3; border-style: solid; border-width: 1pt; padding: 4pt 4pt 4pt 4pt; vertical-align: top; width: .7166in;"><div style="margin: 0in;">
Dc</div>
</td>
</tr>
</tbody></table>
</div>
<div style="margin: 0in;">
So, the Hello,
world! program can be written as thus:</div>
<div style="font-family: Consolas; font-size: 11.0pt; margin: 0in;">
|Habc;bc<br />
</div>
Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com0tag:blogger.com,1999:blog-1284216271788315080.post-15078320705546506002015-01-02T14:29:00.001-08:002015-01-10T15:02:00.423-08:00Math Object Challenge: Update #2.I have made substantial progress; using Taylor series, I approximated the sin, cos, sec, and csc functions. I also added summation and product and a few others. I now, however, have to lean on the use of ln and exp functions from the math object. I added a new function 'truncIf' that truncates a number if and only if the other parameter is an integer (that is, equal it itself when truncated). It is used to give more accurate results when using the pow command.<br />
<br />
Code:
<code></code><br />
<div class="codeblock">
<code>var atan = Math.atan;<br />var tan = Math.tan;<br />var pi = Math.PI;<br />var ln = Math.log;<br />var exp = Math.exp;<br /><br />function ceil(x){<br /> return (sgn(x))*(abs(x)+.5+div(atan(-tan(pi*(abs(x)+.5))),pi))+(x<0?1:0);<br />}<br /><br />function floor(x){<br /> return -ceil(-x);<br />}<br /><br />function abs(x){<br /> return sgn(x)*x;<br />}<br /><br />function sgn(x){<br /> return (x<0)?-1:(x>0)?1:0;<br />}<br /><br />function div(x,y){<br /> return x/y;<br />}<br /><br />function sin(y){<br /> var sign = sgn(y);<br /> var x = abs(y);<br /> while(x>2*pi){<br /> x-=2*pi;<br /> }<br /> return (x - (pow(x,3)/fac(3)) + (pow(x,5)/fac(5)) - (pow(x,7)/fac(7)) + (pow(x,9)/fac(9)) - (pow(x,11)/fac(11)) + (pow(x,13)/fac(13)) - (pow(x,15)/fac(15)) + (pow(x,17)/fac(17)))*sign;<br />}<br /><br />function cos(y){<br /> var sign = sgn(y);<br /> var x = abs(y);<br /> while(x>2*pi){<br /> x-=2*pi;<br /> }<br /> return (1 - (pow(x,2)/fac(2)) + (pow(x,4)/fac(4)) - (pow(x,6)/fac(6)) + (pow(x,8)/fac(8)) - (pow(x,10)/fac(10)) + (pow(x,12)/fac(12)) - (pow(x,14)/fac(14)) + (pow(x,16)/fac(16)))*sign;<br />}<br /><br />function sec(x){<br /> return 1/cos(x);<br />}<br /><br />function csc(x){<br /> return 1/sin(x);<br />}<br /><br />function fac(x){<br /> return product(1,x,"#");<br />}<br /><br />function product(start,end,transform,inst){<br /> var inst = inst || "#";<br /> var out = 1;<br /> transform = transform.split("");<br /> for(i=0;i<transform.length;i++){<br /> transform[i] = transform[i].replace(inst,"i");<br /> }<br /> transform = transform.join("");<br /> for(i=start;i<=end;i++){<br /> out*=eval(transform);<br /> }<br /> return out;<br />}<br /><br />function sum(start,end,transform,inst){<br /> var inst = inst || "#";<br /> var out = 1;<br /> transform = transform.split("");<br /> for(i=0;i<transform.length;i++){<br /> transform[i] = transform[i].replace(inst,"i");<br /> }<br /> transform = transform.join("");<br /> for(i=start;i<=end;i++){<br /> out+=eval(transform);<br /> }<br /> return out;<br />}<br /><br />function pow(x,y){<br /> return truncIf(x+y,exp(y*ln(x)));<br />}<br /><br />function trunc(x){<br /> return +(x+"").split(".")[0];<br />}<br /><br />function truncIf(x,y){<br /> return (trunc(x)==x)?trunc(y):y;<br />}<br /><transform .length="" div="" end="" eval="" exp="" for="" function="" i="start;i<=end;i++){" inst="" ln="" out="" pow="" replace="" return="" split="" start="" sum="" transform="" trunc="" truncif="" var="" x="" y=""></transform><!--0--></code></div>
Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com0tag:blogger.com,1999:blog-1284216271788315080.post-91157577547568308462015-01-01T20:32:00.000-08:002015-01-01T20:32:20.207-08:00Challenge initiated: Let's re-create the Math object.First, a public apology: I'm moving away from the syntax highlighter. Sorry, :(, but I don't have the time and energy to use it. So, just a grey-and-white PRE.
So, right now, I'm attempting at re-creating all of the functions in the Math object. Typically, this wouldn't be to hard, however; I am trying to define as much of the functions mathematically, that is, with equations, leaning only on the functions I define myself.
Currently, I have very few functions covered; I am also currently leaning slightly on the Math object for two functions and a variable: Math.atan, Math.tan, and Math.PI; I can easily define the last one, and possibly the second with a Taylor sequence, but I haven't gotten around to doing this.
<code><pre style="background: #222">
var atan = Math.atan;
var tan = Math.tan;
var pi = Math.PI;
function ceil(x){
return (sgn(x))*(abs(x)+.5+div(atan(-tan(pi*(abs(x)+.5))),pi))+(x<0?1:0);
}
function floor(x){
return -ceil(-x);
}
function abs(x){
return sgn(x)*x;
}
function sgn(x){
return (x<0)?-1:(x>0)?1:0;
}
</pre></code>
That's all for now, I hope to have more for you tomorrow.Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com0tag:blogger.com,1999:blog-1284216271788315080.post-43543378111511416912014-10-25T13:01:00.000-07:002014-10-25T13:01:27.540-07:00MOLOTOVMy friend has no idea what this is. *sighs*
<pre style="line-height:1em;">
`:+shdmNMMMMNmdhs+:`
`/smMMNdyo+/::::/+oydNMMmy/`
:yMMms/. +/ ./smMMy:
+mMNs- +M. .oNMm+
:mMm/ mMh` /mMm/
`yMMo . NMMN- +NMy`
`mMm- y+. sMMMN .mMm.
`mMm` `yMMd+ `MMMM: : `dMm`
yMN. .dMMo/MMMM/ hd` `NMh
:MM+ o` :MMMMMMMM/ yMh /MM/
yMN Nd. /MMMMMMMMd/oMMN :d` NMh
NMy oMMdyyMMMMMymMMMMMMN- `dMy yMM
MMs sMMMMMMMMN`:NMMMMMs-+NMMs oMM
NMy //` sMMMMMMMN. .NMMMMMMMMMy` yMM
hMN `yMd+ `MMMMMMomm oMMMMMMMMo h+ mMd
:MM+ sMMmsdMMMNM: sh. yMMMMMMMM.:dM/ /MM/
hMN. `NMMMMMM/yM: yMdMMmMMMMMMMN `NMd
`mMd` yMMMMMm +MM- ://MN.MMMMMMM+ `dMm`
.mMm. /MMMMMM+ :+` `/.:MMMMMMy .mMm.
`yMN+ sMMMMdyo hMMMMMs +NMh`
/mMm/ -hMMMm- `hMMMNy- /mMN/
+mMNo. `/shmms` .hNmho: .omMNo`
/hMMms/` `:smMMh/
`/ymMMNhso+/::::/+oshNMMmy/`
`:+yhmNMMMMMMNmhyo:` </pre>
No code this time, sorry!Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com0tag:blogger.com,1999:blog-1284216271788315080.post-2379542782014965502014-10-07T15:32:00.002-07:002014-10-07T15:32:19.390-07:00Stack overflow<a style="color: white !important;" href="https://stackoverflow.com/users/4119004/conor-obrien">I'm on the stack overflow thing!</a> Nothing big, but a big helpAnonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com1tag:blogger.com,1999:blog-1284216271788315080.post-90924839953997527602014-10-01T14:09:00.003-07:002014-10-01T14:09:08.814-07:00Javascript Random Text (i.e. ZALGONATION)<h1>What this does</h1>
This is a little thing I invented whilst reading about the String.fromCodePoint and the respective identity getter. By generating a random number (thanks to Mozilla.org's <a href="https://developer.mozilla.org">developer wiki</a> for the code of generating random integer) between the range of the normal text's points (30 - 126), and repeating that a random number of times.
<div class="javascript"><ol><li class="li1"><div class="de1">window.<span class="me1">setInterval</span><span class="br0">(</span><span class="kw1">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> title <span class="sy0">=</span> document.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">"title"</span><span class="br0">)</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span></div></li>
<li class="li1"><div class="de1"> title.<span class="me1">innerHTML</span> <span class="sy0">=</span> <span class="st0">""</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">var</span> m <span class="sy0">=</span> gI<span class="br0">(</span><span class="nu0">2</span><span class="sy0">,</span><span class="nu0">20</span><span class="br0">)</span></div></li>
<li class="li2"><div class="de2"> <span class="kw1">for</span><span class="br0">(</span>i<span class="sy0">=</span><span class="nu0">0</span><span class="sy0">;</span>i<span class="sy0"><</span>m<span class="sy0">;</span>i<span class="sy0">++</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> title.<span class="me1">innerHTML</span> <span class="sy0">+=</span> <span class="kw4">String</span>.<span class="me1">fromCodePoint</span><span class="br0">(</span>gI<span class="br0">(</span><span class="nu0">32</span><span class="sy0">,</span><span class="nu0">126</span><span class="br0">)</span><span class="br0">)</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span></div></li>
<li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span><span class="nu0">20</span><span class="br0">)</span></div></li>
</ol></div>
<button id="randomTitle">RANDOM TITLE! (<b>MAY</b> BE BROKEN)</button>
<script>
document.getElementById("randomTitle").onclick = function(){window.setInterval(function(){
title = document.getElementsByTagName("title")[0]
title.innerHTML = ""
var m = gI(2,20)
for(i=0;i<m;i++){
title.innerHTML += String.fromCodePoint(gI(32,126))
}
},20)}
</script>
<h1>Final Notes</h1>
I'm on the Mozilla Developer wiki! Nothing big, duy, but I might be!
<h2>Links</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/profiles/ConorOB">My profile!</a></li>
<li><a href="https://developer.mozilla.org/en-US/demos/detail/alphabet-encoderdecoder/launch">My cross-browser demo!</a></li>
</ul>Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com0tag:blogger.com,1999:blog-1284216271788315080.post-41373791489259492542014-08-21T12:11:00.002-07:002014-08-21T12:32:04.766-07:00Alphabet to numbers + CODEPut this on your page to encode, scramble, and decode strings! It's amazing! :D
<h1>Usage</h1>
When using this, you <b>must give credit</b>, as this is under a Creative Commons License (see sidebar for more information)
<h1>Notes</h1>
<ol>
<li>Does not retain capitalization or punctuation</li>
<li>Spaces are replaced with a '<space>' Sub-string after the initial encoding. You would have to replace this manually if you don't like it.</li>
</ol>
<h1>Try it out!</h1>
<div id="example" style="overflow: hidden; border: 10px inset black; background: black; max-width: 50%;">
String:<br><textarea placeholder="Input a string to convert here..." id="string"></textarea><br>
Offset:<br><input value=0 id="offset" type="number"></input><br>
<button id="submit" onclick="submi()">Encode</button>
<button id="submit" onclick="submiN()">Decode</button>
<script>
function submi(){
var str = document.getElementById("string").value;
var off = parseInt(document.getElementById("offset").value);
str = str.encode();
str = str.scramble(off);
alert(str)
}
function submiN(){
var str = document.getElementById("string").value;
var off = parseInt(document.getElementById("offset").value);
str = str.decode();
alert(str)
}
</script>
<script>/*
ccccc ooooo dddd eeeee
C O O D D E
C O O D D Eee
C O O D D E
ccccc ooooo dddd eeeee
Copyright 2014 Conor O'Brien under a Creative Commons Attribution 4.0 International License.
*/
var alphabet = {
lower: ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],
upper: ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],
number: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26]
}
String.prototype.encode = function(){
var str = this.valueOf();
var returnStr = [];
var notAny = false;
str = str.toLowerCase()
str = str.split("")
for(i = 0; i < str.length; i++){
for(h = 0; h < alphabet.lower.length; h++){
if(str[i]==alphabet.lower[h]){
returnStr.push(h+1)
} else {
notAny = true;
}
}
if(str[i]==" "){
returnStr.push("<space>")
} else if(!notAny){
returnStr.push(str[i])
}
notAny = false;
}
returnStr = returnStr.toString();
while (returnStr.search(",") !== -1){
returnStr = returnStr.replace(","," ");
}
return returnStr;
}
String.prototype.scramble = function(number){
var str = this.valueOf();
var returnStr = [];
var notAny = false;
str = str.toLowerCase()
str = str.split(" ")
for(i = 0; i < str.length; i++){
for(h = 0; h < alphabet.number.length; h++){
if(str[i]==alphabet.number[h]){
returnStr.push(alphabet.number[h] + number)
}
}
}
returnStr = returnStr.toString();
while (returnStr.search(",") !== -1){
returnStr = returnStr.replace(","," ");
}
return returnStr;
}
String.prototype.decode = function(){
var str = this.valueOf();
var returnStr = [];
str = str.toLowerCase()
str = str.split(" ")
for(i = 0; i < str.length; i++){
for(h = 0; h < alphabet.number.length; h++){
if(str[i]==alphabet.number[h]){
returnStr.push(alphabet.lower[h])
}
}
if (str[i]=="<space>"){
returnStr.push(" ");
}
}
returnStr = returnStr.toString();
while (returnStr.search(",") !== -1){
returnStr = returnStr.replace(",","");
}
return returnStr;
}
</script>
</div>
<h1>Code</h1>
<div class="javascript"><ol><li class="li1"><div class="de1"><span class="coMULTI">/*</span></div></li>
<li class="li1"><div class="de1"><span class="coMULTI"> ccccc ooooo dddd eeeee</span></div></li>
<li class="li1"><div class="de1"><span class="coMULTI"> C O O D D E</span></div></li>
<li class="li1"><div class="de1"><span class="coMULTI"> C O O D D Eee</span></div></li>
<li class="li2"><div class="de2"><span class="coMULTI"> C O O D D E</span></div></li>
<li class="li1"><div class="de1"><span class="coMULTI"> ccccc ooooo dddd eeeee</span></div></li>
<li class="li1"><div class="de1"><span class="coMULTI"> </span></div></li>
<li class="li1"><div class="de1"><span class="coMULTI"> Copyright 2014 Conor O'Brien under a Creative Commons Attribution 4.0 International License.</span></div></li>
<li class="li1"><div class="de1"><span class="coMULTI">*/</span></div></li>
<li class="li2"><div class="de2"><span class="kw1">var</span> alphabet <span class="sy0">=</span> <span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> lower<span class="sy0">:</span> <span class="br0">[</span><span class="st0">"a"</span><span class="sy0">,</span><span class="st0">"b"</span><span class="sy0">,</span><span class="st0">"c"</span><span class="sy0">,</span><span class="st0">"d"</span><span class="sy0">,</span><span class="st0">"e"</span><span class="sy0">,</span><span class="st0">"f"</span><span class="sy0">,</span><span class="st0">"g"</span><span class="sy0">,</span><span class="st0">"h"</span><span class="sy0">,</span><span class="st0">"i"</span><span class="sy0">,</span><span class="st0">"j"</span><span class="sy0">,</span><span class="st0">"k"</span><span class="sy0">,</span><span class="st0">"l"</span><span class="sy0">,</span><span class="st0">"m"</span><span class="sy0">,</span><span class="st0">"n"</span><span class="sy0">,</span><span class="st0">"o"</span><span class="sy0">,</span><span class="st0">"p"</span><span class="sy0">,</span><span class="st0">"q"</span><span class="sy0">,</span><span class="st0">"r"</span><span class="sy0">,</span><span class="st0">"s"</span><span class="sy0">,</span><span class="st0">"t"</span><span class="sy0">,</span><span class="st0">"u"</span><span class="sy0">,</span><span class="st0">"v"</span><span class="sy0">,</span><span class="st0">"w"</span><span class="sy0">,</span><span class="st0">"x"</span><span class="sy0">,</span><span class="st0">"y"</span><span class="sy0">,</span><span class="st0">"z"</span><span class="br0">]</span><span class="sy0">,</span></div></li>
<li class="li1"><div class="de1"> upper<span class="sy0">:</span> <span class="br0">[</span><span class="st0">"A"</span><span class="sy0">,</span><span class="st0">"B"</span><span class="sy0">,</span><span class="st0">"C"</span><span class="sy0">,</span><span class="st0">"D"</span><span class="sy0">,</span><span class="st0">"E"</span><span class="sy0">,</span><span class="st0">"F"</span><span class="sy0">,</span><span class="st0">"G"</span><span class="sy0">,</span><span class="st0">"H"</span><span class="sy0">,</span><span class="st0">"I"</span><span class="sy0">,</span><span class="st0">"J"</span><span class="sy0">,</span><span class="st0">"K"</span><span class="sy0">,</span><span class="st0">"L"</span><span class="sy0">,</span><span class="st0">"M"</span><span class="sy0">,</span><span class="st0">"N"</span><span class="sy0">,</span><span class="st0">"O"</span><span class="sy0">,</span><span class="st0">"P"</span><span class="sy0">,</span><span class="st0">"Q"</span><span class="sy0">,</span><span class="st0">"R"</span><span class="sy0">,</span><span class="st0">"S"</span><span class="sy0">,</span><span class="st0">"T"</span><span class="sy0">,</span><span class="st0">"U"</span><span class="sy0">,</span><span class="st0">"V"</span><span class="sy0">,</span><span class="st0">"W"</span><span class="sy0">,</span><span class="st0">"X"</span><span class="sy0">,</span><span class="st0">"Y"</span><span class="sy0">,</span><span class="st0">"Z"</span><span class="br0">]</span><span class="sy0">,</span></div></li>
<li class="li1"><div class="de1"> number<span class="sy0">:</span> <span class="br0">[</span><span class="nu0">1</span><span class="sy0">,</span><span class="nu0">2</span><span class="sy0">,</span><span class="nu0">3</span><span class="sy0">,</span><span class="nu0">4</span><span class="sy0">,</span><span class="nu0">5</span><span class="sy0">,</span><span class="nu0">6</span><span class="sy0">,</span><span class="nu0">7</span><span class="sy0">,</span><span class="nu0">8</span><span class="sy0">,</span><span class="nu0">9</span><span class="sy0">,</span><span class="nu0">10</span><span class="sy0">,</span><span class="nu0">11</span><span class="sy0">,</span><span class="nu0">12</span><span class="sy0">,</span><span class="nu0">13</span><span class="sy0">,</span><span class="nu0">14</span><span class="sy0">,</span><span class="nu0">15</span><span class="sy0">,</span><span class="nu0">16</span><span class="sy0">,</span><span class="nu0">17</span><span class="sy0">,</span><span class="nu0">18</span><span class="sy0">,</span><span class="nu0">19</span><span class="sy0">,</span><span class="nu0">20</span><span class="sy0">,</span><span class="nu0">21</span><span class="sy0">,</span><span class="nu0">22</span><span class="sy0">,</span><span class="nu0">23</span><span class="sy0">,</span><span class="nu0">24</span><span class="sy0">,</span><span class="nu0">25</span><span class="sy0">,</span><span class="nu0">26</span><span class="br0">]</span></div></li>
<li class="li1"><div class="de1"><span class="br0">}</span></div></li>
<li class="li2"><div class="de2"><span class="kw4">String</span>.<span class="kw1">prototype</span>.<span class="me1">encode</span> <span class="sy0">=</span> <span class="kw1">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">var</span> str <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">valueOf</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">var</span> returnStr <span class="sy0">=</span> <span class="br0">[</span><span class="br0">]</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">var</span> notAny <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> str <span class="sy0">=</span> str.<span class="me1">toLowerCase</span><span class="br0">(</span><span class="br0">)</span></div></li>
<li class="li2"><div class="de2"> str <span class="sy0">=</span> str.<span class="me1">split</span><span class="br0">(</span><span class="st0">""</span><span class="br0">)</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">for</span><span class="br0">(</span>i <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> i <span class="sy0"><</span> str.<span class="me1">length</span><span class="sy0">;</span> i<span class="sy0">++</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">for</span><span class="br0">(</span>h <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> h <span class="sy0"><</span> alphabet.<span class="me1">lower</span>.<span class="me1">length</span><span class="sy0">;</span> h<span class="sy0">++</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">if</span><span class="br0">(</span>str<span class="br0">[</span>i<span class="br0">]</span><span class="sy0">==</span>alphabet.<span class="me1">lower</span><span class="br0">[</span>h<span class="br0">]</span><span class="br0">)</span><span class="br0">{</span> </div></li>
<li class="li1"><div class="de1"> returnStr.<span class="me1">push</span><span class="br0">(</span>h<span class="sy0">+</span><span class="nu0">1</span><span class="br0">)</span></div></li>
<li class="li2"><div class="de2"> <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> notAny <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">if</span><span class="br0">(</span>str<span class="br0">[</span>i<span class="br0">]</span><span class="sy0">==</span><span class="st0">" "</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li2"><div class="de2"> returnStr.<span class="me1">push</span><span class="br0">(</span><span class="st0">"<space>"</span><span class="br0">)</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span> <span class="kw1">else</span> <span class="kw1">if</span><span class="br0">(</span><span class="sy0">!</span>notAny<span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> returnStr.<span class="me1">push</span><span class="br0">(</span>str<span class="br0">[</span>i<span class="br0">]</span><span class="br0">)</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span></div></li>
<li class="li1"><div class="de1"> notAny <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"> <span class="br0">}</span></div></li>
<li class="li1"><div class="de1"> returnStr <span class="sy0">=</span> returnStr.<span class="me1">toString</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> while <span class="br0">(</span>returnStr.<span class="me1">search</span><span class="br0">(</span><span class="st0">","</span><span class="br0">)</span> <span class="sy0">!==</span> <span class="sy0">-</span><span class="nu0">1</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> returnStr <span class="sy0">=</span> returnStr.<span class="me1">replace</span><span class="br0">(</span><span class="st0">","</span><span class="sy0">,</span><span class="st0">" "</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span></div></li>
<li class="li2"><div class="de2"> <span class="kw1">return</span> returnStr<span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"><span class="br0">}</span></div></li>
<li class="li1"><div class="de1"> </div></li>
<li class="li1"><div class="de1"><span class="kw4">String</span>.<span class="kw1">prototype</span>.<span class="me1">scramble</span> <span class="sy0">=</span> <span class="kw1">function</span><span class="br0">(</span>number<span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">var</span> str <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">valueOf</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"> <span class="kw1">var</span> returnStr <span class="sy0">=</span> <span class="br0">[</span><span class="br0">]</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">var</span> notAny <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> str <span class="sy0">=</span> str.<span class="me1">toLowerCase</span><span class="br0">(</span><span class="br0">)</span></div></li>
<li class="li1"><div class="de1"> str <span class="sy0">=</span> str.<span class="me1">split</span><span class="br0">(</span><span class="st0">" "</span><span class="br0">)</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">for</span><span class="br0">(</span>i <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> i <span class="sy0"><</span> str.<span class="me1">length</span><span class="sy0">;</span> i<span class="sy0">++</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li2"><div class="de2"> <span class="kw1">for</span><span class="br0">(</span>h <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> h <span class="sy0"><</span> alphabet.<span class="me1">number</span>.<span class="me1">length</span><span class="sy0">;</span> h<span class="sy0">++</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">if</span><span class="br0">(</span>str<span class="br0">[</span>i<span class="br0">]</span><span class="sy0">==</span>alphabet.<span class="me1">number</span><span class="br0">[</span>h<span class="br0">]</span><span class="br0">)</span><span class="br0">{</span> </div></li>
<li class="li1"><div class="de1"> returnStr.<span class="me1">push</span><span class="br0">(</span>alphabet.<span class="me1">number</span><span class="br0">[</span>h<span class="br0">]</span> <span class="sy0">+</span> number<span class="br0">)</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span></div></li>
<li class="li2"><div class="de2"> <span class="br0">}</span></div></li>
<li class="li1"><div class="de1"> returnStr <span class="sy0">=</span> returnStr.<span class="me1">toString</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> while <span class="br0">(</span>returnStr.<span class="me1">search</span><span class="br0">(</span><span class="st0">","</span><span class="br0">)</span> <span class="sy0">!==</span> <span class="sy0">-</span><span class="nu0">1</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> returnStr <span class="sy0">=</span> returnStr.<span class="me1">replace</span><span class="br0">(</span><span class="st0">","</span><span class="sy0">,</span><span class="st0">" "</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span></div></li>
<li class="li2"><div class="de2"> <span class="kw1">return</span> returnStr<span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> </div></li>
<li class="li1"><div class="de1"><span class="br0">}</span></div></li>
<li class="li1"><div class="de1"><span class="kw4">String</span>.<span class="kw1">prototype</span>.<span class="me1">decode</span> <span class="sy0">=</span> <span class="kw1">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">var</span> str <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">valueOf</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"> <span class="kw1">var</span> returnStr <span class="sy0">=</span> <span class="br0">[</span><span class="br0">]</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> str <span class="sy0">=</span> str.<span class="me1">toLowerCase</span><span class="br0">(</span><span class="br0">)</span></div></li>
<li class="li1"><div class="de1"> str <span class="sy0">=</span> str.<span class="me1">split</span><span class="br0">(</span><span class="st0">" "</span><span class="br0">)</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">for</span><span class="br0">(</span>i <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> i <span class="sy0"><</span> str.<span class="me1">length</span><span class="sy0">;</span> i<span class="sy0">++</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">for</span><span class="br0">(</span>h <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> h <span class="sy0"><</span> alphabet.<span class="me1">number</span>.<span class="me1">length</span><span class="sy0">;</span> h<span class="sy0">++</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li2"><div class="de2"> <span class="kw1">if</span><span class="br0">(</span>str<span class="br0">[</span>i<span class="br0">]</span><span class="sy0">==</span>alphabet.<span class="me1">number</span><span class="br0">[</span>h<span class="br0">]</span><span class="br0">)</span><span class="br0">{</span> </div></li>
<li class="li1"><div class="de1"> returnStr.<span class="me1">push</span><span class="br0">(</span>alphabet.<span class="me1">lower</span><span class="br0">[</span>h<span class="br0">]</span><span class="br0">)</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>str<span class="br0">[</span>i<span class="br0">]</span><span class="sy0">==</span><span class="st0">"<space>"</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li2"><div class="de2"> returnStr.<span class="me1">push</span><span class="br0">(</span><span class="st0">" "</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span></div></li>
<li class="li1"><div class="de1"> returnStr <span class="sy0">=</span> returnStr.<span class="me1">toString</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> while <span class="br0">(</span>returnStr.<span class="me1">search</span><span class="br0">(</span><span class="st0">","</span><span class="br0">)</span> <span class="sy0">!==</span> <span class="sy0">-</span><span class="nu0">1</span><span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li2"><div class="de2"> returnStr <span class="sy0">=</span> returnStr.<span class="me1">replace</span><span class="br0">(</span><span class="st0">","</span><span class="sy0">,</span><span class="st0">""</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">return</span> returnStr<span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"><span class="br0">}</span></div></li>
<li class="li1"><div class="de1"> </div></li>
</ol></div>Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com2tag:blogger.com,1999:blog-1284216271788315080.post-23076612871030451672014-08-19T14:44:00.002-07:002014-08-19T14:44:37.282-07:00The year is 2048!First things first! I am, yes, apart of the 2048 craze. It's just one of those games that make you want to punch the living everything out of it, yes?
After playing for WHO KNOWS <i>HOW</i> LONG, I decided to play around with the Javascript.
<h1>Observations</h1>
<h2>One: This Is a JavaScript Job</h2>
Fiddling with the CSS, I made a 'Night' Theme (which I use, as it's preferable to the default). Anyone who has made a texture for 2048 would know that the JS 'pushes' (like you would do for an array item) a class to the tile upon it's creation. The CSS identifiers for this are:
<ol>
<li>.tile-<value><ul><li><value> is either 2, 4, 8, 16...1024, or 2048</li></ul></li>
<li>.tile<ul><li>Describes the animation of the tile.</li></ul></li>
</ol>
If one changes a two-tile (.tile-2) to a 2048 tile (.tile-2048), it will change upon moving the board, and will <i>not</i> retain its style.
<h2>Two: The JavaScript code is Complicated</h2>
With 10 JS Game-related files, one may be overwhelmed. There are 7 non-pollyfil files, which are listed below:
<ol>
<li>application.js</li>
<li>game_manager.js</li>
<li>grid.js</li>
<li>html_actuator.js</li>
<li>keyboard_input_manager.js</li>
<li>local_storage.js</li>
<li>tile.js</li>
</ol>
<h2>Three: All of the tiles are powers of two</h2>
..And, as a friend tells me, most are <a href="minecraft.net">Mojang's</a> Most Popular Game's resolution for Resource/Texture packs.
2 = 2<sup>1</sup><br>
4 = 2<sup>2</sup><br>
8 = 2<sup>3</sup><br>
16 = 2<sup>4</sup><br>
32 = 2<sup>5</sup><br>
64 = 2<sup>6</sup><br>
128 = 2<sup>7</sup><br>
256 = 2<sup>8</sup><br>
256 = 2<sup>8</sup><br>
512 = 2<sup>9</sup><br>
1024 = 2<sup>10</sup><br>
2048 = 2<sup>11</sup><br>
<h1>What this does</h1>
This is a code that will add a tile whose value can be <b>anything</b>, not limited to the powers of 2.
<br class="l">
Under application.js, one finds (on line 3) the program making a GameManager (found under game_manager.js), which takes the parameters of a grid size (4), an InputManager (KeyboardInputManager), an Actuator (HTMLActuator), and a StorageManager (LocalStorageManager). A new one is presumably created with each iteration of the loop (as it's found under "window.requestAnimationFrame"), but you can create one by simply typing into the console/command line on your 2048 page a variable as found <a href="#120943iu1398u54329084">here.</a>
<br class="l">
Of course, you have to create a prototype function (or a function that is applied to a certain object, like 'String.prototype.search = function(...' would be 'String.search(...')<br class="l">
Before doing what's stated above, you must do what is stated below (that is, <a href="#dfsdfsdf23rfew">here.</a>)<br class="l">
And enjoy!
<h1>Codes</h1>
<h2 id="dfsdfsdf23rfew">The Tile Manager Prototype</h2>
<div class="javascript"><ol><li class="li1"><div class="de1">GameManager.<span class="kw1">prototype</span>.<span class="me1">addTile</span> <span class="sy0">=</span> <span class="kw1">function</span> <span class="br0">(</span>value<span class="br0">)</span> <span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="kw1">this</span>.<span class="me1">grid</span>.<span class="me1">cellsAvailable</span><span class="br0">(</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> <span class="kw1">var</span> tile <span class="sy0">=</span> <span class="kw1">new</span> Tile<span class="br0">(</span><span class="kw1">this</span>.<span class="me1">grid</span>.<span class="me1">randomAvailableCell</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">,</span> value<span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> </div></li>
<li class="li2"><div class="de2"> <span class="kw1">this</span>.<span class="me1">grid</span>.<span class="me1">insertTile</span><span class="br0">(</span>tile<span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> <span class="br0">}</span></div></li>
<li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li>
</ol></div>
<h2 id="120943iu1398u54329084">The <span style="font-style: italic; font-size: 1em;">New</span> Game Manager</h2>
<div class="javascript"><ol><li class="li1"><div class="de1"><span class="kw1">var</span> Gamer <span class="sy0">=</span> <span class="kw1">new</span> GameManager<span class="br0">(</span><span class="nu0">4</span><span class="sy0">,</span> KeyboardInputManager<span class="sy0">,</span> HTMLActuator<span class="sy0">,</span> LocalStorageManager<span class="br0">)</span><span class="sy0">;</span></div></li>
</ol></div>
<h2>Syntax and Usage</h2>
All possible (legitimate) tiles.
<div class="javascript"><ol><li class="li1"><div class="de1">Gamer.<span class="me1">addTile</span><span class="br0">(</span><span class="nu0">2</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">Gamer.<span class="me1">addTile</span><span class="br0">(</span><span class="nu0">4</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">Gamer.<span class="me1">addTile</span><span class="br0">(</span><span class="nu0">8</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">Gamer.<span class="me1">addTile</span><span class="br0">(</span><span class="nu0">16</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2">Gamer.<span class="me1">addTile</span><span class="br0">(</span><span class="nu0">32</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">Gamer.<span class="me1">addTile</span><span class="br0">(</span><span class="nu0">64</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">Gamer.<span class="me1">addTile</span><span class="br0">(</span><span class="nu0">128</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">Gamer.<span class="me1">addTile</span><span class="br0">(</span><span class="nu0">256</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">Gamer.<span class="me1">addTile</span><span class="br0">(</span><span class="nu0">512</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li2"><div class="de2">Gamer.<span class="me1">addTile</span><span class="br0">(</span><span class="nu0">1024</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">Gamer.<span class="me1">addTile</span><span class="br0">(</span><span class="nu0">2048</span><span class="br0">)</span><span class="sy0">;</span></div></li>
</ol></div>
<h1>A final note</h1>
This is not a developers tactic--it has many glitches, and is not guaranteed to be cross-browser. Glitches can also occur due to the separate Game Managers trying to manage the same game, and can result in two <b>separate</b> respective games going on at once.
Use with caution, and, by using this, you accept the Terms and Conditions of Service listed below.
<h2>Terms and Conditions of Service</h2>
<h3>Article I - Definitions</h3>
<ol style="list-style: lower-roman">
<li>The term 'Blog post' is defined herein as an article in which is written a paragraph or more.</li>
<li>The term '2048 Game' or '2048 puzzle' or '2048' is defined herein as the original game hosted on the url "https://gabrielecirulli.github.io/2048/" (Link: <a href="https://gabrielecirulli.github.io/2048/">here</a>)</li>
<li>The term 'Usage' is defined herein as taking the codes provided within this Blog Post and applying them to the 2048 game.</li>
<li>The term 'Code' or 'Codes' refers to any of the Ordered List Item Groups (<ol>) that contain(s) a programming language (of which could be JavaScript, CSS, or HTML on this page).</li>
<li>The term 'User' or 'The User' is defined as the person or persons using the Codes provided on this page.</li>
</ol>
<h3>Article II - Main Requirements</h3>
<ol style="list-style: lower-roman">
<li>Usage of the contents within the Blog Post can only be used for testing or for gratification of beating the game. <b>You may not claim any results of using this code as anything besides that of which it is (which is the results of an edit of the JavaScripting)</b>. All screenshots of a game edited with the code provided in this blog post (or any alterations of said code) are <b>strictly prohibited</b>. The code can and will be <b>taken down</b> if multiple persons fail to comply to the Terms and Conditions of Service.</li>
<li>These Terms of Service <b>may and will be updated if necessary</b>. Failure to comply with the alterations of the Terms of Service will be an infraction like any other. Ignorance of the Terms is the fault of the User</li>
<li>All Content on the page is under a Creative Commons Attribution 4.0 international license.</li>
</ol>
<script>
window.onbeforeunload = function(){
alert('Make sure you read the Terms of Service! You are responsible for them in any event, whether or not you read them!!')
}
</script>Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com0tag:blogger.com,1999:blog-1284216271788315080.post-62916726895148239882014-08-17T13:14:00.001-07:002014-08-17T13:14:10.908-07:00JavaScript Routines Part 2: Canvas (whole)So what this is here is some things I've pieced together, including drawing prisms and cubes.
<div class="javascript">
<ol>
<li class="li1"><div class="de1">
<span class="kw1">var</span> canvas<span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
<span class="kw1">var</span> ctx<span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
window.<span class="me1">onload</span> <span class="sy0">=</span> <span class="kw1">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span></div>
</li>
<li class="li2"><div class="de2">
canvas <span class="sy0">=</span> document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">"canvas"</span><span class="br0">)</span></div>
</li>
<li class="li1"><div class="de1">
ctx <span class="sy0">=</span> canvas.<span class="me1">getContext</span><span class="br0">(</span><span class="st0">'2d'</span><span class="br0">)</span></div>
</li>
<li class="li1"><div class="de1">
<span class="br0">}</span></div>
</li>
<li class="li1"><div class="de1">
<span class="kw1">function</span> Circle<span class="br0">(</span>ctx<span class="sy0">,</span>x<span class="sy0">,</span>y<span class="sy0">,</span>r<span class="br0">)</span><span class="br0">{</span></div>
</li>
<li class="li1"><div class="de1">
<span class="co1">// x = top corner X y = top corner Y</span></div>
</li>
<li class="li2"><div class="de2">
<span class="co1">// r = radius ctx = canvas context</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">fillStyle</span> <span class="sy0">=</span> <span class="st0">"#000000"</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">beginPath</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">arc</span><span class="br0">(</span>x<span class="sy0">+</span>r<span class="sy0">,</span>y<span class="sy0">+</span>r<span class="sy0">,</span>r<span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="kw4">Math</span>.<span class="me1">PI</span><span class="sy0">*</span><span class="nu0">2</span><span class="sy0">,</span><span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">stroke</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
<span class="br0">}</span></div>
</li>
<li class="li1"><div class="de1">
<span class="kw1">function</span> rectRound<span class="br0">(</span>ctx<span class="sy0">,</span>x<span class="sy0">,</span>y<span class="sy0">,</span>width<span class="sy0">,</span>height<span class="sy0">,</span>radius<span class="br0">)</span><span class="br0">{</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">beginPath</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">moveTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="sy0">+</span>radius<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="sy0">-</span>radius<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">quadraticCurveTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="sy0">,</span>x<span class="sy0">+</span>radius<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">-</span>radius<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">quadraticCurveTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="sy0">,</span>x<span class="sy0">+</span>width<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="sy0">-</span>radius<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">,</span>y<span class="sy0">+</span>radius<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">quadraticCurveTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">,</span>y<span class="sy0">,</span>x<span class="sy0">+</span>width<span class="sy0">-</span>radius<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>radius<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">quadraticCurveTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="sy0">,</span>x<span class="sy0">,</span>y<span class="sy0">+</span>radius<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">stroke</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">fill</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
<span class="br0">}</span></div>
</li>
<li class="li1"><div class="de1">
<span class="kw1">function</span> prism<span class="br0">(</span>ctx<span class="sy0">,</span>x<span class="sy0">,</span>y<span class="sy0">,</span>width<span class="sy0">,</span>height<span class="sy0">,</span>depth<span class="sy0">,</span>lineWidth<span class="sy0">,</span>fillStyle<span class="br0">)</span><span class="br0">{</span></div>
</li>
<li class="li1"><div class="de1">
<span class="co1">// x = top corner X y = top corner Y</span></div>
</li>
<li class="li1"><div class="de1">
<span class="co1">// ctx = canvas context </span></div>
</li>
<li class="li1"><div class="de1">
<span class="co1">// example: prism(ctx,150,150,200,200,200,2,"rgba(22,0,22,.9)")</span></div>
</li>
<li class="li2"><div class="de2">
depth <span class="sy0">/=</span> <span class="nu0">3</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
<span class="co1">// COLORS</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">strokeStyle</span> <span class="sy0">=</span> <span class="st0">"rgba(0,0,0,0)"</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">fillStyle</span> <span class="sy0">=</span> fillStyle<span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">beginPath</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">moveTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="sy0">+</span>width<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">,</span>y<span class="sy0">+</span>width<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">+</span>width<span class="sy0">-</span>depth<span class="br0">)</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">-</span>depth<span class="br0">)</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">-</span>depth<span class="br0">)</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">fill</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
<span class="co1">// LINES</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">strokeStyle</span> <span class="sy0">=</span> <span class="st0">"#000000"</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineWidth</span> <span class="sy0">=</span> lineWidth<span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">lineJoin</span> <span class="sy0">=</span> <span class="st0">"miter"</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">beginPath</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">moveTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
<span class="co1">// MOVING X AND Y DEFAULTLY</span></div>
</li>
<li class="li1"><div class="de1">
x<span class="sy0">+=</span>width<span class="sy0">;</span>y<span class="sy0">+=</span>height<span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">moveTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">-</span>depth<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">-</span>height<span class="sy0">-</span>depth<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="sy0">-</span>height<span class="br0">)</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">moveTo</span><span class="br0">(</span>x<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">-</span>height<span class="sy0">-</span>depth<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>depth<span class="sy0">-</span>width<span class="sy0">,</span>y<span class="sy0">-</span>height<span class="sy0">-</span>depth<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">-</span>width<span class="sy0">,</span>y<span class="sy0">-</span>height<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">stroke</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> </div>
</li>
<li class="li1"><div class="de1">
<span class="br0">}</span></div>
</li>
<li class="li1"><div class="de1">
<span class="kw1">function</span> cube<span class="br0">(</span>ctx<span class="sy0">,</span>x<span class="sy0">,</span>y<span class="sy0">,</span>width<span class="sy0">,</span>lineWidth<span class="sy0">,</span>fillStyle<span class="br0">)</span><span class="br0">{</span></div>
</li>
<li class="li2"><div class="de2">
<span class="co1">// x = top corner X y = top corner Y</span></div>
</li>
<li class="li1"><div class="de1">
<span class="co1">// ctx = canvas context </span></div>
</li>
<li class="li1"><div class="de1">
<span class="co1">// example: cube(ctx,150,150,20,2,"rgba(44,22,44,1)")</span></div>
</li>
<li class="li1"><div class="de1">
depth <span class="sy0">=</span> width <span class="sy0">/</span> <span class="nu0">3</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
height <span class="sy0">=</span> width<span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
<span class="co1">// COLORS</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">strokeStyle</span> <span class="sy0">=</span> <span class="st0">"rgba(0,0,0,0)"</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">fillStyle</span> <span class="sy0">=</span> fillStyle<span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">beginPath</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">moveTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="sy0">+</span>width<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">,</span>y<span class="sy0">+</span>width<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">+</span>width<span class="sy0">-</span>depth<span class="br0">)</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">-</span>depth<span class="br0">)</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">-</span>depth<span class="br0">)</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">fill</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
<span class="co1">// LINES</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">strokeStyle</span> <span class="sy0">=</span> <span class="st0">"#000000"</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineWidth</span> <span class="sy0">=</span> lineWidth<span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineJoin</span> <span class="sy0">=</span> <span class="st0">"miter"</span><span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">beginPath</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">moveTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
<span class="co1">// MOVING X AND Y DEFAULTLY</span></div>
</li>
<li class="li1"><div class="de1">
x<span class="sy0">+=</span>width<span class="sy0">;</span>y<span class="sy0">+=</span>height<span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">moveTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">-</span>depth<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">-</span>height<span class="sy0">-</span>depth<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="sy0">-</span>height<span class="br0">)</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">moveTo</span><span class="br0">(</span>x<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">-</span>height<span class="sy0">-</span>depth<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>depth<span class="sy0">-</span>width<span class="sy0">,</span>y<span class="sy0">-</span>height<span class="sy0">-</span>depth<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">-</span>width<span class="sy0">,</span>y<span class="sy0">-</span>height<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">stroke</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> </div>
</li>
<li class="li1"><div class="de1">
<span class="br0">}</span></div>
</li>
<li class="li1"><div class="de1">
<span class="kw1">function</span> transPrism<span class="br0">(</span>ctx<span class="sy0">,</span>x<span class="sy0">,</span>y<span class="sy0">,</span>width<span class="sy0">,</span>height<span class="sy0">,</span>depth<span class="sy0">,</span>lineWidth<span class="sy0">,</span>opacity<span class="sy0">,</span>fillStyle<span class="br0">)</span><span class="br0">{</span></div>
</li>
<li class="li1"><div class="de1">
<span class="co1">// x = top corner X y = top corner Y</span></div>
</li>
<li class="li2"><div class="de2">
<span class="co1">// ctx = canvas context </span></div>
</li>
<li class="li1"><div class="de1">
<span class="co1">// example: transPrism(ctx,150,150,200,200,200,2,.5)</span></div>
</li>
<li class="li1"><div class="de1">
prism<span class="br0">(</span>ctx<span class="sy0">,</span>x<span class="sy0">,</span>y<span class="sy0">,</span>width<span class="sy0">,</span>height<span class="sy0">,</span>depth<span class="sy0">,</span>lineWidth<span class="sy0">,</span>fillStyle<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineWidth</span> <span class="sy0">=</span> lineWidth<span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineJoin</span> <span class="sy0">=</span> <span class="st0">"miter"</span><span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">strokeStyle</span> <span class="sy0">=</span> <span class="st0">"rgba(0,0,0,"</span> <span class="sy0">+</span> opacity <span class="sy0">+</span> <span class="st0">")"</span></div>
</li>
<li class="li1"><div class="de1">
depth <span class="sy0">/=</span> <span class="nu0">3</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">moveTo</span><span class="br0">(</span>x<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="sy0">-</span>depth<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">-</span>depth<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">moveTo</span><span class="br0">(</span>x<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="sy0">-</span>depth<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li2"><div class="de2">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">moveTo</span><span class="br0">(</span>x<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="sy0">-</span>depth<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">lineTo</span><span class="br0">(</span>x<span class="sy0">+</span>width<span class="sy0">+</span>depth<span class="sy0">,</span>y<span class="sy0">+</span>height<span class="sy0">-</span>depth<span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
ctx.<span class="me1">stroke</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div>
</li>
<li class="li1"><div class="de1">
<span class="br0">}</span></div>
</li>
<li class="li2"><div class="de2">
</div>
</li>
<li class="li1"><div class="de1">
</div>
</li>
</ol>
</div>
Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com0tag:blogger.com,1999:blog-1284216271788315080.post-60776472723920178032014-08-16T17:19:00.000-07:002014-08-17T13:03:14.648-07:00JavaScript Routines Part 1: CIRCLES!<div class="javascript"><ol><li class="li1"><div class="de1"><span class="kw1">function</span> Circle<span class="br0">(</span>ctx<span class="sy0">,</span>x<span class="sy0">,</span>y<span class="sy0">,</span>r<span class="sy0">,</span>fillStyle<span class="br0">)</span><span class="br0">{</span></div></li>
<li class="li1"><div class="de1"> <span class="co1">// x = top corner X y = top corner Y</span></div></li>
<li class="li1"><div class="de1"> <span class="co1">// r = radius ctx = canvas context</span></div></li>
<li class="li1"><div class="de1"> ctx.<span class="me1">fillStyle</span> <span class="sy0">=</span> <span class="br0">(</span><span class="kw1">typeof</span> fillStyle <span class="sy0">===</span> <span class="st0">"undefined"</span><span class="br0">)</span> <span class="sy0">?</span> <span class="st0">"rgb(0,0,0)"</span> <span class="sy0">:</span> fillStyle<span class="sy0">;</span></div></li>
<li class="li2"><div class="de2"> ctx.<span class="me1">beginPath</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> ctx.<span class="me1">arc</span><span class="br0">(</span>x<span class="sy0">+</span>r<span class="sy0">,</span>y<span class="sy0">+</span>r<span class="sy0">,</span>r<span class="sy0">,</span><span class="nu0">0</span><span class="sy0">,</span><span class="kw4">Math</span>.<span class="me1">PI</span><span class="sy0">*</span><span class="nu0">2</span><span class="sy0">,</span><span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"> ctx.<span class="me1">stroke</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"><span class="br0">}</span></div></li>
</ol></div>Anonymoushttp://www.blogger.com/profile/08710613114583320187noreply@blogger.com0