-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtutorials.html
145 lines (136 loc) · 9.1 KB
/
tutorials.html
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Brain fuck : Tutorials</title>
<link rel="icon" type="image/png" href="stuff/images/pic_re.png">
<link rel="stylesheet" type="text/css" href="real.css">
<script src="real.js"></script>
</head>
<body>
<div id="guide" class="guide">
<div class="guide-con">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="stuff/images/guide1.png" style="width:100%" class="guide_img">
<a download href="#">our powerpoint</a>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="stuff/images/guide2.png" style="width:100%" class="guide_img">
<a download href="#">our powerpoint</a>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="stuff/images/guide3.jpg" style="width:100%" class="guide_img">
<div class="text">Just remember to have fun!</div>
<a download href="#">our powerpoint</a>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<button id="got-it" class="got-it">I got it!</button>
</div>
</div>
<div class="top_nav_bar">
<nav>
<div class="nav_item">
<a href="index.html"><img src="stuff/images/pic.png" width="50px" style="position: relative; top:3px;"></a>
</div>
<div class="text_link nav_item" style="position: relative; top:-10px">
<a href="credits.html">Credits</a>
</div>
<div class="text_link nav_item" style="position: relative; top:-10px">
<a href="developers.html">Developers</a>
</div>
<div class="text_link nav_item" style="position: relative; top:-10px">
<p onclick="guide()">Guides</p>
</div>
<div class="text_link nav_item" style="position: relative; top:-10px">
<a href="links.html">Links</a>
</div>
<div class="text_link nav_item" style="position: relative; top:-10px">
<a href="tutorials.html" class="clicked">Tutorials</a>
</div>
<div class="text_link nav_item" style="position: relative; top:-10px">
<a href="about.html">About</a>
</div>
<div class="nav_item">
<form action="https://www.google.com/search" class="searchform" methozzzzzzzzzzzzd="get" name="searchform" target="_blank">
<div class="nav_item">
<input autocomplete="on" id="search" class="form-control search searchbar" name="q" placeholder="Search your stuff on Google" required="required" type="text">
</div>
<div class="nav_item"><input type="image" name="submit" src="stuff/images/search_icon2.png" alt="Submit" class="searchbt" id="searchbt"></div>
</form>
</div>
<div class="nav_item">
<a href="https://github.com/dkyg1087/welcome_to_Brainfuck" target="_blank"><img src="stuff/images/GitHub-Mark-120px-plus.png" width="50px" height="50px"></a>
</div>
</nav>
</div>
<div class="outer-con">
<br>
<hr>
<p>
<span class="_headline">Tutorials</span><span style="color: grey">       Here's how you actually code in brainfuck......</span>
</p>
<hr>
<br>
<p>
<h2>1. Basics
<hr style="width:15%">
</h2>
<br>
<p>       The idea behind brainfuck is memory manipulation. You are given a theoretically infinite sized array of 1 bytes.
<br>Within this array, you can either:</p>
<p style="background-color:lightgrey; padding:3px; text-align: left;">' > ' = increases memory pointer, or moves the pointer to the right 1 block.<br> '
< ' = d ecreases memory pointer, or moves the pointer to the left 1 block.<br>
'+ ' = i ncreases value stored at the block pointed to by the memory pointer.<br> ' - ' = decreases value stored at the block pointed to by the memory pointer. <br> ' [ '= start the loop. <br> ' ] '= if block
currently pointed to 's value is not zero, jump back to ' [ '<br> ' , ' = get 1 character from input and store it as ascii code value.<br> ' . ' = print the current ascii code value as a character to the console.</p>
<p><br> If you're familiar with C++, the instruction would be equivalent to:
<p style="background-color:lightgrey; padding:3px; text-align: left;">
int arr[infinite] = { 0 }, ptr = 0;<br> ' > ' : ptr++;<br>'
< ' : ptr--;<br>' + ': arr[ptr]++;<br> ' - ': arr[ptr]--;<br>
' [ ' : for(;arr[ptr]!=0;){<br> ' ] ' : }<br>' , ' : arr[ptr]=getchar()<br> ' . ' : cout<<arr[ptr]; </p>
</p>
</p>
<br><br>
<p>
<h2>2.Tips n Tricks
<hr style="width:15%">
</h2>
<p>
      First of all, memorize the Ascii table. If you can't do it, aleast prepare one for the good.<br><br> Now, let 's look at our first program:<br>
<p style="background-color:lightgrey; padding:3px; text-align: left;">     [ < ]</p>
<p>What it does is basically move left to the first ' 0 ' you see.<br> But that's hardly count as a real code.<br>So, here's a real code:</p>
<p style="background-color:lightgrey; padding:3px; text-align: left;">+++++[>+<-]</p>
<p>What it does is add the first cell with a number of 5, and add the next cell with 1 then decrease the first cell with 1 everytime until the first cell reaches 0.<br> So what it translates to C++ is:</p>
<p style="background-color:lightgrey; padding:3px; text-align: left;">for(arr[0]=5;arr[0]!=0;arr[0]--){<br>     arr[1]++;<br>}</p>
<p>So it actually copies a cell value to another cell. By changing the inner or outer amount of ' + ', you change the value in the secend cell.</p><br>
<p>Just by theese knowledges you should be able to read the first simple code of every language : Hello World. We've prepared a simple version of it,because it's your first time.(Comments are written right after the code, it is legal
after all. If you want to see how it works, you can copy it into our intepreter.)</p>
<p style="background-color:lightgrey; padding:3px; text-align: left;">
++++++++ Set Cell #0 to 8<br> [
<br> >++++ Add 4 to Cell #1; this will always set Cell #1 to 4<br> [ as the cell will be cleared by the loop<br> >++ Add 2 to Cell #2<br> >+++ Add 3 to Cell #3<br> >+++ Add 3 to Cell #4<br> >+ Add 1 to Cell #5<br>
<<<<- Decrement the loop counter in Cell #1<br>
] Loop till Cell #1 is zero; number of iterations is 4<br> >+ Add 1 to Cell #2<br> >+ Add 1 to Cell #3<br> >- Subtract 1 from Cell #4<br> >>+ Add 1 to Cell #6<br> [
<] Move back to the first zero cell you find; this will be Cell #1 which was cleared by the previous loop<br>
<- Decrement the loop Counter in Cell #0<br>
] Loop till Cell #0 is zero; number of iterations is 8
<br> >>. Cell #2 has value 72 which is 'H'<br> >---. Subtract 3 from Cell #3 to get 101 which is 'e'<br> +++++++..+++. Likewise for 'llo' from Cell #3<br> >>. Cell #5 is 32 for the space<br>
<-. Subtract 1 from Cell #4 for 87 to give a 'W'<br>
<. Cell #3 was set to 'o' from the end of 'Hello'<br>
+++.------.--------. Cell #3 for 'rl' and 'd'<br> >>+. Add 1 to Cell #5 gives us an exclamation point<br> >++. And finally a newline from Cell #6<br></p>
</p>
<br><br> If you want to know more, please visit <a href="https://gist.github.com/roachhd/dce54bec8ba55fb17d3a" target="_blank">Here</a>
</p>
</div>
</body>
</html>