Fix Persian problems

This commit is contained in:
Ahmad 2021-02-04 21:57:00 +03:30
parent a6399fec5d
commit 0cb9f1762c
6 changed files with 240 additions and 11 deletions

View File

@ -22,7 +22,7 @@
## این کتاب چه چیز هایی را پوشش می‌دهد؟
این کتاب روی شیدر های پیکسلی GLSL تمرکز دارد. در مرحله اول شیدر را تعریف می‌کنیم; بعد یاد می‌گیریم چگونه شیدر های مولد(procedural) بسازیم, همچنین الگو ها تکستچر ها و انیمیشن آن ها. شما اصول شیدر را یاد خواهید گرفت و آن را در سناریو های زیر می‌توانید استفاده کنید: پردازش تصویر (عملیات تصویری، پیچیدگی های ماتریس، بلور، فیلتر های رنگی، جداول جستجو و غیره) و شبیه سازی (Conway's game of life, Gray-Scott's reaction-diffusion, water ripples, watercolor effects, Voronoi cells, etc.). در اواخر کتاب مجموعه ای از تکنیک های پیشرفته مبتنی بر Ray Marching را مشاهده خواهیم کرد.
این کتاب روی شیدر های پیکسلی GLSL تمرکز دارد. در مرحله اول شیدر را تعریف می‌کنیم; بعد یاد می‌گیریم چگونه شیدر های مولد(procedural) بسازیم, همچنین الگو ها تکستچر ها و انیمیشن آن ها. شما اصول شیدر را یاد خواهید گرفت و آن را در سناریو های زیر می‌توانید استفاده کنید: پردازش تصویر (عملیات تصویری، پیچیدگی های ماتریس، بلور، فیلتر های رنگی، جداول جستجو و غیره) و شبیه سازی (بازی زندگی, واکنش انتشار Gray-Scott, موج آب, افکت های آبرنگی, سلول های Voronoi , و غیره.). در اواخر کتاب مجموعه ای از تکنیک های پیشرفته مبتنی بر Ray Marching را مشاهده خواهیم کرد.
*هر قسمت شامل مثال های تعاملی نیز هست که می‌توانید با آن ها کار کنید* وقتی کد را عوض کنید، تغییرات را بلافاصله مشاهده می‌کنید. مفاهیم شیدر گاهی انتزاعی و گیج کننده هستند، بنابراین این مثال های تعاملی برای کمک به شما بسیار مفید و ضروری هستند. هرچه سریعتر مفاهیم را اجرا کنید، فرایند یادگیری بهتر خواهد بود.

View File

@ -30,11 +30,11 @@
ریز پردازنده های کوچک را مانند جدولی از لوله ها وداده های هر پیکسل را مانند یک توپ تصور کنید، 14,400,000 توپ می‌تواند هر لوله های را مسدود کند، اما می‌توان یک جدول از 800x600 لوله کوچک را که 30 موج 480,000 تایی پیکسل در ثانیه دریافت می‌کند را به راحتی کنترل کرد. در وضوح بالاتر هم به همین صورت عمل می‌کند. هرچه سخت افزار های موازی بیشتری داشته باشید، به همان نسبت جریان بیشتری را می‌توانید مدیریت کنید.
از دیگر قدرت های فوق العاده GPU عملکرد های ویژه ریاضی آن است که از طریق سخت افزار سریع تر می‌شود، یعنی این عملیات ریاضی به جای استفاده از نرم افزار مستقیما توسط میکرو تراشه حل می‌شوند، به عبارتی عملکرد های مثلثاتی و ماتریسی به سرعت الکتریسیته می‌تواندد سریع باشند.
از دیگر قدرت های فوق العاده GPU عملکرد های ویژه ریاضی آن است که از طریق سخت افزار سریع تر می‌شود، یعنی این عملیات ریاضی به جای استفاده از نرم افزار مستقیما توسط میکرو تراشه حل می‌شوند، به عبارتی عملکرد های مثلثاتی و ماتریسی به سرعت الکتریسیته می‌توانند سریع باشند.
## GLSL چیست؟
مخفف OpenGL Shading Language است. که استانداری خاص از برنامه های شیدر هست و در فصل بعدی خواهید دید. بسته به سخت افزار و سیستم عامل ها انواع دیگر شیدر نیز وجود دارند. در اینجا ما با OpenGL تنظیم شده توسط گروه Khronos کار خواهیم کرد. دانستن تاریخچه OpenGL می‌تواند به درک بیشتر قرار داد های عجیب و غریب آن مفید باشد، برای همین توصیه میکنیم نگاهی به این موضوع داشته باشید: [openglbook.com/chapter-0-preface-what-is-opengl.html](http://openglbook.com/chapter-0-preface-what-is-opengl.html)
مخفف OpenGL Shading Language است. که استانداردی خاص از برنامه های شیدر هست و در فصل بعدی خواهید دید. بسته به سخت افزار و سیستم عامل ها انواع دیگر شیدر نیز وجود دارند. در اینجا ما با OpenGL تنظیم شده توسط گروه Khronos کار خواهیم کرد. دانستن تاریخچه OpenGL می‌تواند به درک بیشتر قرار داد های عجیب و غریب آن مفید باشد، برای همین توصیه میکنیم نگاهی به این موضوع داشته باشید: [openglbook.com/chapter-0-preface-what-is-opengl.html](http://openglbook.com/chapter-0-preface-what-is-opengl.html)
## چرا شیدر ها به دردناک بودن معروفند؟

View File

@ -20,7 +20,7 @@
5. یکی از دیگر ویژگی های مشابه C مثال بالا وجود ماکرو ها هستند. با استفاده از آنان می‌توان متغیر های جهانی را تعریف کرد و یا برخی عملیات شرطی اساسی را انجام داد(ifdef and #endif#). تمام دستورات کلان(ماکرو) با هشتگ شروع می‌شوند. ماکرو ها قبل از کامپایل اجرا می‌شوند، شرایط را بررسی می‌کند(ifdef and #endif#) و ارجاعات به defines# را کپی می‌کند. مثلا در مثال بالا ما خط 2 را در صورت تعریف GL_ES وارد می‌کنیم. که معمولا در هنگام کامپایل این کد در تلفن های همراه و مرورگر ها اتفاق می‌افتد.
6. شناور ها(float) در شیدر ها حیاتی هستند، بنابراین سطح دقت بسیار مهم است. دقت پایین تر به معنای رندر سریع تر است، همچنین کیفیت کمتر. می‌توانید مثل خط دو مثال بالا متغیر ها را شناور با دقت متوسط درنظر بگیرید(precision mediump float)، همچنین می‌توانید متغیر شناور با دقت پایین(precision lowp float) یا بالا(precision highp float)هم در نظر بگیرید.
6. شناور ها(float) در شیدر ها حیاتی هستند، بنابراین سطح دقت بسیار مهم است. دقت پایین تر به معنای رندر سریع تر است، همچنین کیفیت کمتر. می‌توانید مثل من خط دو مثال بالا متغیر ها را شناور با دقت متوسط درنظر بگیرید(precision mediump float)، همچنین می‌توانید متغیر شناور با دقت پایین(precision lowp float) یا بالا(precision highp float)هم در نظر بگیرید.
7. آخرین و شاید مهمترین نکته در مثال بالا اینکه در GLSL تضمین نمی‌شود که متغیر ها به طور خودکار تغییر نوع داده(casting) رویشان اعمال شود. این به چه معناست؟ تولید کنندگان رویکرد های مختلفی برای سرعت بخشیدن روند پردازش کارت های گرافیکی دارند، و مجبورند حداقل مشخصات را تضمین کنند. کستینگ ازین رویکرد ها نیست. در مثال بالا vect4 دارای نقطه شناور است و برای آن انتظار می‌رود که به متغیر های شناور انتساب شود. اگر می‌خواهید کد سازگار خوبی ایجاد کنید و ساعت ها وقت صرف دیبگ کردن آن نکنید، عادت کنید در float ها از نقطه(.) استفاده کنید.

View File

@ -28,7 +28,7 @@ uniform float iTime; // shader playback time (in seconds)
<div class="codeAndCanvas" data="time.frag"></div>
همانطور که می‌بینید GLSL سورپرایز های بیشتری دارد. GPU دارای عملکرد های زاویه شتاب همچنین توابع نمایی و مثلثاتی هست. برخی ازین توابع عبارتند از: [`sin()`](../glossary/?search=sin), [`cos()`](../glossary/?search=cos), [`tan()`](../glossary/?search=tan), [`asin()`](../glossary/?search=asin), [`acos()`](../glossary/?search=acos), [`atan()`](../glossary/?search=atan), [`pow()`](../glossary/?search=pow), [`exp()`](../glossary/?search=exp), [`log()`](../glossary/?search=log), [`sqrt()`](../glossary/?search=sqrt), [`abs()`](../glossary/?search=abs), [`sign()`](../glossary/?search=sign), [`floor()`](../glossary/?search=floor), [`ceil()`](../glossary/?search=ceil), [`fract()`](../glossary/?search=fract), [`mod()`](../glossary/?search=mod), [`min()`](../glossary/?search=min), [`max()`](../glossary/?search=max) and [`clamp()`](../glossary/?search=clamp).
همانطور که می‌بینید GLSL سورپرایز های بیشتری دارد. GPU دارای عملکرد های زاویه شتاب همچنین توابع نمایی و مثلثاتی هست. برخی ازین توابع عبارتند از: [`sin()`](../glossary/?search=sin), [`cos()`](../glossary/?search=cos), [`tan()`](../glossary/?search=tan), [`asin()`](../glossary/?search=asin), [`acos()`](../glossary/?search=acos), [`atan()`](../glossary/?search=atan), [`pow()`](../glossary/?search=pow), [`exp()`](../glossary/?search=exp), [`log()`](../glossary/?search=log), [`sqrt()`](../glossary/?search=sqrt), [`abs()`](../glossary/?search=abs), [`sign()`](../glossary/?search=sign), [`floor()`](../glossary/?search=floor), [`ceil()`](../glossary/?search=ceil), [`fract()`](../glossary/?search=fract), [`mod()`](../glossary/?search=mod), [`min()`](../glossary/?search=min), [`max()`](../glossary/?search=max) و [`clamp()`](../glossary/?search=clamp).
اکنون زمان آن است که دوباره با کد با بازی کنیم.

231
04/README-fa.md Normal file
View File

@ -0,0 +1,231 @@
## اجرا کردن شیدر
به عنوان بخشی از ساخت این کتاب در این قسمت، اکوسیستمی از ابزار ها برای ایجاد و نمایش و یا اشتراک گذاری شیدر ها ایجاد کردم. این ابزار ها به راحتی روی لینوکوس، مک و ویندوز و حتی [رزبری پای](https://www.raspberrypi.org/) و همچنین مرورگر ها، بدون نیاز به تعویض کد اجرا می‌شوند.
## اجرا کردن شیدر روی مرورگر
**نمایش**: تمام مثال های این کتاب توسط [glslCanvas](https://github.com/patriciogonzalezvivo/glslCanvas) به نمایش در می‌آید، که روند اجرای شیدر های مستقل را بسیار آسان می‌کند.
```html
<canvas class="glslCanvas" data-fragment-url=“yourShader.frag" data-textures=“yourInputImage.png” width="500" height="500"></canvas>
```
همانطور که می‌بینید فقط به یک المان `canvas` با تعریف `class="glslCanvas"` و url شیدر شما در `data-fragment-url`. نیاز است. برای آشنایی بیشتر [اینجا](https://github.com/patriciogonzalezvivo/glslCanvas).
اگر مثل من هستنید و دوست دارید مستیقا شیدر هارا را روی کنسول اجرا کنید, در اینضورت باید یک نگاهی به [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) بیاندازید. این برنامه این امکان را به شما می‌دهد که شیدر ها را در روی bash یا unix pipelines به روش مشابه [ImageMagick](http://www.imagemagick.org/script/index.php) استفاده کنید. همچنین [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) یک روش خوب برای کامپایل شیدر روی [Raspberry Pi](https://www.raspberrypi.org/) است, به همین علت [openFrame.io](http://openframe.io/) از آن برای نمایش شیدر ها استفاده می‌کند. درمورد این نرم افزار بیشتر بدانید در [اینجا](https://github.com/patriciogonzalezvivo/glslViewer).
```bash
glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png
```
**ساخت**: برای تجربه برنامه نویسی شیدر ها، من یک ویرایشگر آنلاین [glslEditor](https://github.com/patriciogonzalezvivo/glslEditor) ساختم. این ویرایشگر در مثال های این کتاب هم تعبیه شده است, این مجموعه ابزارک های مفیدی را هم فراهم می‌کند تا تجربه کار با کد glsl را ملموس تر کند. همچنین آن را بعنوان یک برنامه وب مستقل هم می‌توانید در [editor.thebookofshaders.com/](http://editor.thebookofshaders.com/) استفاده کنید. اطلاعات بیشتر در [اینجا](https://github.com/patriciogonzalezvivo/glslEditor).
![](glslEditor-01.gif)
اگر تمایل به آفلاین کار کردن دارید، از [SublimeText](https://www.sublimetext.com/) استفاده کنید، میتوانید رو [package for glslViewer](https://packagecontrol.io/packages/glslViewer) نصب کنید. برای اطلاعات بیشتر [اینجا](https://github.com/patriciogonzalezvivo/sublime-glslViewer).
![](glslViewer.gif)
**اشتراک گذاری**: ادیتور آنلاین ([editor.thebookofshaders.com/](http://editor.thebookofshaders.com/)) می‌تواند شیدر های شما را به اشتراک بگذارد! هر دو نسخه دارای دکمه اکسپورت هستند که می‌تواند یک آدرس منحصر به فرد برای شیدر شما ایجاد کند. همچنین توانایی اکسپورت مستقیم به [openFrame.io](http://openframe.io/) هم وجود دارد.
![](glslEditor-00.gif)
**ذخیره و نگه داری**:اشتراک گذاری کدتان قدم اول برای اشتراک گذاری آن ها به عنوان اثر هنریست. علاوه بر گزینه خروجی گرفتن برای [openFrame.io](http://openframe.io/) من یک ابزار برای اشتراک گذاری آثار شما در سایت هم در نظر گرفتم, با نام [glslGallery](https://github.com/patriciogonzalezvivo/glslGallery). بیشتر بدانید [اینجا](https://github.com/patriciogonzalezvivo/glslGallery).
![](glslGallery.gif)
## اجرا کردن شیدر هایتان در فریمورک ها دلخواهتان
اگر تجربه کار با فریمورک هایی مثل: [Processing](https://processing.org/), [Three.js](http://threejs.org/) یا [OpenFrameworks](http://openframeworks.cc/) دارید, برای استفاده از آن ها برای شیدر نویسی هم هیجان زده خواهید شد. در ادامه نمونه هایی از چگونگی تنطیم فریمورک ها برای اجرای شیدر ها با همان چارچوب گفته شده در ان کتاب می‌پردازم. (در [GitHub repository for this chapter](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04) ,سورس کد کامل برای استفاده از این سه فریمورک را می‌یابید.)
### در **Three.js**
ریکاردو کابلوی نابغه و فروتن (aka [MrDoob](https://twitter.com/mrdoob) ) همراه برخی دیگر، توسعه [contributors](https://github.com/mrdoob/three.js/graphs/contributors) را برعهده داشتند، که یکی از معروف ترین فریمورک های WebGl, یعنی [Three.js](http://threejs.org/) است. مثال ها، آموزش ها و کتاب های زیادی را در مورد این کتاب خانه جاوا اسکریپت برای ساخت گرافیک سه بعدی می‌توانید پیدا کنید.
در زیر مثالی از html و JS آورده شه است که برای شروع کار با شیدره در three.js نیاز است. به این عبارت `id="fragmentShader"` دقت کنید, اینجا جاییست که شیدر های این کتاب را در آنجا می‌توانی کپی کنید.
```html
<body>
<div id="container"></div>
<script src="js/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
gl_Position = vec4( position, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec2 u_resolution;
uniform float u_time;
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
gl_FragColor=vec4(st.x,st.y,0.0,1.0);
}
</script>
<script>
var container;
var camera, scene, renderer;
var uniforms;
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.Camera();
camera.position.z = 1;
scene = new THREE.Scene();
var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
uniforms = {
u_time: { type: "f", value: 1.0 },
u_resolution: { type: "v2", value: new THREE.Vector2() },
u_mouse: { type: "v2", value: new THREE.Vector2() }
};
var material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
onWindowResize();
window.addEventListener( 'resize', onWindowResize, false );
document.onmousemove = function(e){
uniforms.u_mouse.value.x = e.pageX
uniforms.u_mouse.value.y = e.pageY
}
}
function onWindowResize( event ) {
renderer.setSize( window.innerWidth, window.innerHeight );
uniforms.u_resolution.value.x = renderer.domElement.width;
uniforms.u_resolution.value.y = renderer.domElement.height;
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
uniforms.u_time.value += 0.05;
renderer.render( scene, camera );
}
</script>
</body>
```
### در **Processing**
ساخته شده توسط [Ben Fry](http://benfry.com/) و [Casey Reas](http://reas.com/) in 2001, [Processing](https://processing.org/) یک محیط فوق العاده ساده و قدرتمند است که می‌توانید در آن اولین قدم های کد زنی خود را بردارید. (حداقل برای من اینگونه بود). [Andres Colubri](https://codeanticode.wordpress.com/) بروزرسانی های مهمی به OpenGl و پردازش ویدئو آن اضافه کرده است, که استفاده از شیدر های GLSL را در این محیط دوستانه بسیار آسان می‌کند. این برنامه به دنبال فایل `"shader.frag"` در پوشه `data` داخل `sketch` می‌گردد. مطمئن شوید که نمونه هایی که از اینجا در آن پوشه کپی می‌کنید، تغییر نام دهید.
```cpp
PShader shader;
void setup() {
size(640, 360, P2D);
noStroke();
shader = loadShader("shader.frag");
}
void draw() {
shader.set("u_resolution", float(width), float(height));
shader.set("u_mouse", float(mouseX), float(mouseY));
shader.set("u_time", millis() / 1000.0);
shader(shader);
rect(0,0,width,height);
}
```
برای اینکه شیدر ها در نسخه های قبل از 2.1 کار کند, باید خط مقابل را به اول شیدر خود اضافه کنید: `#define PROCESSING_COLOR_SHADER`. این شکلی خواهد شد:
```glsl
#ifdef GL_ES
precision mediump float;
#endif
#define PROCESSING_COLOR_SHADER
uniform vec2 u_resolution;
uniform vec3 u_mouse;
uniform float u_time;
void main() {
vec2 st = gl_FragCoord.st/u_resolution;
gl_FragColor = vec4(st.x,st.y,0.0,1.0);
}
```
برای اطلاعات بیشتر در مورد استفاده از شیدر ها در processing این آموزش را نگاه کنید [اینجا](https://processing.org/tutorials/pshader/).
### در **openFrameworks**
هرکسی در جای خاصی احساس راحتی می‌کند, در مورد من, هنوز هم [openFrameworks community](http://openframeworks.cc/) است. این فریمورک cpp در چارچوب OpenGl و برخی کتابخانه های دیگر cpp هست. بسیار شبیه processing هم هست, اما با عوارض واضحی همچون سر و کله زدن با کامپایلر cpp. با همان روش processing ، openFrameWorks فایل های شیدر شما را در پوشه Data جستجو می‌کند،پس جایگازی و تغییر نام فایل های frag را فراموش نکنید.
```cpp
void ofApp::draw(){
ofShader shader;
shader.load("","shader.frag");
shader.begin();
shader.setUniform1f("u_time", ofGetElapsedTimef());
shader.setUniform2f("u_resolution", ofGetWidth(), ofGetHeight());
ofRect(0,0,ofGetWidth(), ofGetHeight());
shader.end();
}
```
اگر میخواهید از مجموعه کامل یونیفرم ها شامل GlslViewer , GlslCanvas به روش ساده تری در OpenFrameworks استفاده کنید، استفاده از[ofxShader](https://github.com/patriciogonzalezvivo/ofxshader) را پیشنهاد میدهم که، که افزونه ایست که توانایی استفاده از چندین بافر، متریال و شیدر و هات ریلود و همچنین تبدیل اتوماتیک برای OpenGl در رزبری پای را امکان می‌سازد. و کد شما به همین سادگی انجام می‌شود.
```cpp
//--------------------------------------------------------------
void ofApp::setup(){
ofDisableArbTex();
sandbox.allocate(ofGetWidth(), ofGetHeight());
sandbox.load("grayscott.frag");
}
//--------------------------------------------------------------
void ofApp::draw(){
sandbox.render();
sandbox.draw(0, 0);
}
```
برای اطلاعات بیشتر در مورد استفاده از شیدر ها در openFrameworks سری به [excellent tutorial](http://openframeworks.cc/ofBook/chapters/shaders.html) ساخته شده توسط [Joshua Noble](http://thefactoryfactory.com/) بزنید.
### در **Blender**
[GlslTexture](https://github.com/patriciogonzalezvivo/glslTexture) یک افزونه است که امکان می‌دهد با برنامه نویسی و استفاده از GLSL، تکستچر تولید کنید. همچنین با بقیه محیط هم سازگار است. اینگونه کار می‌کند:
1. در سرچ بار: `F3` (یا spaceBar). تایپ کنید `GlslTexture`
![](blender/00.png)
2. طول و عرض و منبع را تغییر دهید (که میتواند مسیری به فایل خارجی باشد).
![](blender/01.png)
3. از این تصویر روی متریال خود اسفاده کنید. اسم عکس بر پایه اسم منبع تعریف می‌شود.
![](blender/02.png)
4. به Text Editor بروید (یا یک ادیتور خارجی در صورت تمایل) و شیدر را تغییر دهید. به صورت آنی(هات ریلود) تغییرات را مشاهده خواهید کرد.
![](blender/03.png)

View File

@ -56,7 +56,7 @@
* انعکاس و شکست
* [ضمیمه:](appendix/) راه های دیگر استفاده ازین کتاب
* [چگونه بصورت آفلاین ازین کتاب استفاده کنم؟](appendix/00/)
* [چگونه بصورت آفلاین از این کتاب استفاده کنم؟](appendix/00/)
* [چگونه روی رزبری پای مثال ها را اجرا کنم؟](appendix/01/)
* [چگونه این کتاب را چاپ کنم؟](appendix/02/)
* [چگونه مشارکت کنم؟](appendix/03/)
@ -68,13 +68,13 @@
## درباره نویسندگان
[Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/) (1982, Buenos Aires, Argentina) یک آرتیست و توسعه دهنده اهل نیویورک است.او فضا های بینابینی را جستجو می‌کند، بین ارگانیک و مصنوعی، بین آنالوگ و دیجیتال، بین فردی و اجتماعی.او از کد بعنوان یک زبان رسا برای توسعه بهتر در کار خود استفاده می‌کند.
[Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/) (1982, Buenos Aires, Argentina) یک آرتیست و توسعه دهنده اهل نیویورک است. او فضا های بینابینی را جستجو می‌کند، بین ارگانیک و مصنوعی، بین آنالوگ و دیجیتال، بین فردی و اجتماعی. او از کد بعنوان یک زبان رسا برای توسعه بهتر در کار خود استفاده می‌کند.
او دانش آموخته روان درمانی و expressive art therapy است. همچنین دارای مدرک MFA در زمینه طراحی و فناوری ار Parsons The new School هست و اکنون در آنجا تدریس می‌کند. هم اکنون بعنوان مهندس گرافیک در Mapzen مشغول ساخت ابزار نقشه برداری open Source هست.
او دانش آموخته روان درمانی و expressive art therapy است. همچنین دارای مدرک MFA در زمینه طراحی و فناوری از Parsons The new School هست و اکنون در آنجا تدریس می‌کند. هم اکنون بعنوان مهندس گرافیک در Mapzen مشغول ساخت ابزار نقشه برداری open Source هست.
<div class="header"> <a href="http://patriciogonzalezvivo.com/" target="_blank">WebSite</a> - <a href="https://twitter.com/patriciogv" target="_blank">Twitter</a> - <a href="https://github.com/patriciogonzalezvivo" target="_blank">GitHub</a> - <a href="https://vimeo.com/patriciogv" target="_blank">Vimeo</a> - <a href="https://www.flickr.com/photos/106950246@N06/" target="_blank"> Flickr</a></div>
[Jen Lowe](http://jenlowe.net/) یک دانشمند و ارتباط دهنده داده مستقل در Datatelling است.جایی که افراد و اعداد و حروف را کنار هم جمع می‌کند. او همچنین طراحی SVA تدریس می‌کند، همچنین هم بنیانگذار دانشکده محاسبات شاعرانه است. همچنین در SXSW و Eyeo سخران است. کار های او توسط نیویورک تایمز و Fast Company پوشش داده شده است. تحقیق، نوشتار و گفتار او پیامد های داده و فناوری در جامعه را کاوش می‌کند. او دارای مدرک B.S در ریاضیات کاربردی و کارشناسی ارشد در علوم اطلاعات است. اغلب مخالف است و همیشه در کنار عشق.
[Jen Lowe](http://jenlowe.net/) یک دانشمند و ارتباط دهنده داده مستقل در Datatelling است. جایی که افراد و اعداد و حروف را کنار هم جمع می‌کند. او همچنین طراحی SVA تدریس می‌کند، و هم بنیانگذار دانشکده محاسبات شاعرانه است. همچنین در SXSW و Eyeo سخنران است. کار های او توسط نیویورک تایمز و Fast Company پوشش داده شده است. تحقیق، نوشتار و گفتار او پیامد های داده و فناوری در جامعه را کاوش می‌کند. او دارای مدرک B.S در ریاضیات کاربردی و کارشناسی ارشد در علوم اطلاعات است. اغلب مخالف است و همیشه در کنار عشق.
<div class="header"> <a href="http://jenlowe.net/" target="_blank">WebSite</a> - <a href="https://twitter.com/datatelling" target="_blank">Twitter</a> - <a href="https://github.com/datatelling" target="_blank">GitHub</a></div>
@ -102,8 +102,6 @@
ممنون از [Sergey Karchevsky](https://www.facebook.com/sergey.karchevsky.3) برای Russian [translation (russian)](?lan=ru)
ممنون از [Ahmad Erfani](https://twitter.com/ahmaderfani12) برای Persian [translation (Persian)](?lan=fa)
ممنون از [Andy Stanton](https://andy.stanton.is/) برای اصلاح و بهبود [the pdf/epub export pipeline](https://thebookofshaders.com/appendix/02/)
ممنون از همه کسانی که به این پروژه ایمان داشتند و[در اصلاحات مشارکت کردند](https://github.com/patriciogonzalezvivo/thebookofshaders/graphs/contributors) و یا اهدا کردند.