diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml new file mode 100644 index 00000000..384cedbd --- /dev/null +++ b/.github/workflows/pages.yml @@ -0,0 +1,66 @@ +# Sample workflow for building and deploying a Hugo site to GitHub Pages +name: Deploy Hugo site to Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: ["main"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow one concurrent deployment +concurrency: + group: "pages" + cancel-in-progress: true + +# Default to bash +defaults: + run: + shell: bash + +jobs: + # Build job + build: + runs-on: ubuntu-latest + env: + HUGO_VERSION: 0.99.0 + steps: + - name: Install Hugo CLI + run: | + wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_Linux-64bit.deb \ + && sudo dpkg -i ${{ runner.temp }}/hugo.deb + - name: Checkout + uses: actions/checkout@v3 + with: + submodules: recursive + - name: Setup Pages + id: pages + uses: actions/configure-pages@v1 + - name: Build with Hugo + run: | + hugo \ + --minify \ + --baseURL ${{ steps.pages.outputs.base_url }} + - name: Upload artifact + uses: actions/upload-pages-artifact@v1 + with: + path: ./public + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v1 diff --git a/.gitmodules b/.gitmodules index 1d95c411..eb663cee 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +1,6 @@ [submodule "themes/book"] path = themes/book url = https://github.com/alex-shpak/hugo-book +[submodule "themes/ananke"] + path = themes/ananke + url = https://github.com/theNewDynamic/gohugo-theme-ananke.git diff --git a/README.md b/README.md index 244e35f3..61e985ae 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,6 @@ -# Showcase Template +# Grupo de estudio +- Angela Cardenas +- Diego Carvajal +- Brayan Portela +- David Muñoz -Welcome to the [gohugo](https://gohugo.io/) template to create rich content [academic reports](https://www.wordy.com/writers-workshop/writing-an-academic-report/) having [p5.js](https://p5js.org/) sketches. - -## Hacking - -Install the [gohugo](https://gohugo.io/) [static site generator](https://jamstack.org/generators/) then: - -```sh -$git clone https://github.com/VisualComputing/showcase -$cd showcase -$git submodule update --init --recursive -$hugo server -D --disableFastRender -``` - -Deploy with `$git push` after redefined `baseURL` in `config.toml` which should point to your actual public remote. - -### Remarks - -1. If you renamed the repo, say to `newreponame`, don't forget to update all url references of the markdown and js file sources, to reflect that change, i.e., look in all the [content folder](https://github.com/VisualComputing/showcase/tree/main/content) files for `showcase` occurrences and replace them by `newreponame`. -2. If you forked the repo don't forget to activate the [actions](https://github.com/VisualComputing/showcase/actions). -3. Don't forget to select the `gh-pages` branch as the one to serve your site from at the [pages section of your repo configuration page](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site), if it is no so by default. -4. The **showcase** template uses the [hugo-book](https://github.com/alex-shpak/hugo-book) theme by default. Check the [hugo themes site](https://themes.gohugo.io/) if you wish to add other ones. \ No newline at end of file diff --git a/config.toml b/config.toml index 3a9cf553..7665fdf9 100644 --- a/config.toml +++ b/config.toml @@ -1,7 +1,7 @@ -baseURL = "https://visualcomputing.github.io/showcase" +baseURL = "https://dicarvajalb.github.io/visual_computing" languageCode = "en-us" -title = "Showcase Template" -theme = 'book' +title = "Grupo de estudio" +theme = "book" # Book configuration disablePathToLower = true @@ -22,7 +22,7 @@ enableGitInfo = true # Set source repository location. # Used for 'Last Modified' and 'Edit this page' links. - BookRepo = 'https://github.com/visualcomputing/showcase' + BookRepo = 'https://github.com/Dicarvajalb/visual_computing' # Configure the date format used on the pages # - In git information @@ -35,3 +35,4 @@ enableGitInfo = true # Theme will print warning if page referenced in markdown does not exists. BookPortableLinks = false + diff --git a/content/_index.md b/content/_index.md index 39001154..2264e864 100644 --- a/content/_index.md +++ b/content/_index.md @@ -3,37 +3,8 @@ title: Introduction type: docs --- -# Showcase Template - -Welcome to the [gohugo](https://gohugo.io/) template to create rich content [academic reports](https://www.wordy.com/writers-workshop/writing-an-academic-report/) having [p5.js](https://p5js.org/) sketches. - -## Hacking - -Install the [gohugo](https://gohugo.io/) [static site generator](https://jamstack.org/generators/) then: - -```sh -$git clone https://github.com/VisualComputing/showcase -$cd showcase -$git submodule update --init --recursive -$hugo server -D --disableFastRender -``` - -Deploy with `$git push` after redefined `baseURL` in `config.toml` which should point to your actual public remote. - -### Remarks - -{{< hint info >}} -If you renamed the repo, say to `newreponame`, don't forget to update all url references of the markdown and js file sources, to reflect that change, i.e., look in all the [content folder](https://github.com/VisualComputing/showcase/tree/main/content) files for `showcase` occurrences and replace them by `newreponame`. -{{< /hint >}} - -{{< hint info >}} -If you forked the repo don't forget to activate the [actions](https://github.com/VisualComputing/showcase/actions). -{{< /hint >}} - -{{< hint info >}} -Don't forget to select the `gh-pages` branch as the one to serve your site from at the [pages section of your repo configuration page](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site), if it is no so by default. -{{< /hint >}} - -{{< hint info >}} -The **showcase** template uses the [hugo-book](https://github.com/alex-shpak/hugo-book) theme by default. Check the [hugo themes site](https://themes.gohugo.io/) if you wish to add other ones. -{{< /hint >}} \ No newline at end of file +# Grupo de estudio +- Angela Cardenas +- Diego Carvajal +- Brayan Portela +- David Muñoz \ No newline at end of file diff --git a/content/docs/shortcodes/Taller 1/Convoluciones.md b/content/docs/shortcodes/Taller 1/Convoluciones.md new file mode 100644 index 00000000..e4d5aca5 --- /dev/null +++ b/content/docs/shortcodes/Taller 1/Convoluciones.md @@ -0,0 +1,278 @@ +# **1. Convoluciones** +--- +## Problem statement + +Una convolucion sobre una imagen es un calculo matematico sobre un conjunto de pixeles sobre la misma, esta operacion hace uso de los denominados **Kernel**; +Un kernel es una matriz con valores determinados los cuales permiten aplicar diferentes mascaras sobre las imagenes, los valores dentro de las matrices de los kernel se pueden alterar con base en el resultado que se desee obtener se pueden modificar. + +- Se desea una aplicacion web que pueda aplicar diferentes convoluciones a una imagen. + +## Background + +La **operacion de convolucion** se define como: + +{{< katex display >}} +g(x,y)=\omega *f(x,y)=\sum _{dx=-a}^{a}{\sum _{dy=-b}^{b}{\omega (dx,dy)f(x-dx,y-dy)}} +{{< /katex >}} + +Sin embargo, se puede definir mas facilmente si se utiliza el kernel como un vector 1-dimensional asi. Con este vector, se toman los 4 canales **__R,G,B,A__** y se separan en vectores que puedan operarse de manera escalar, recordemos que el producto escalar entre dos vectores se define como; + + +{{< katex display >}} +u \cdot v = u {\displaystyle =u_{1}\cdot v_{1}+u_{2}\cdot v_{2}+...+u_{n}\cdot v_{n}} {\displaystyle =u_{1}\cdot v_{1}+u_{2}\cdot v_{2}+...+u_{n}\cdot v_{n}}, +{{< /katex >}} + + +**Precaucion** +> Al operar la imagen se deben tener en cuenta la inexistencia de pixeles externos, si se aplicara la convolucion donde el centro del kernel se ubica sobre el primer pixel, habran posiciones que no esten definidas por lo cual hay dos posibles alternativas. +* Operar desde el pixel **(1,1)** +* Operar desde el pixel **(0,0)** pero reescribiendo toda la imagen añadiendo pixeles de valor 0 al rededor de la imagen; +--- + +{{< hint info >}} +**¿Como interactuar con la ilusión?** +Para cambiar los efectos sobre la imagen hay de usar el Slider para seleccionar uno +de los kernels, ya despues de seleccionado se debe presionar el boton **Recargar canvas**. +{{< /hint >}} + +## Code + +{{< p5-iframe sketch="/visual_computing/sketches/convolutions.js" width="625" height="625" >}} + +{{< details "**CODIGO:** Convoluciones" close >}} +**C**odigo generado usando el editor web de **P5.js**. +```javascript + var img,kernel; +let channelsMap,RedMat,BlueMat,GreenMat,newChannels,fMap; + +function preload() { + img = loadImage('/showcase/sketches/bubbleCatC.png'); +} + +function setup() { + createCanvas(600,600); + noLoop(); + + //Boton de Recarga + button = createButton('Recargar Canvas'); + button.position(10, 10); + button.mousePressed(reload); + + //Cambiar el kernel + slider = createSlider(1, 5, 1); + slider.position(120, 10); + slider.style('width', '80px'); +} + +//Calcular el producto punto +function ppunto(Pix,Ker){ + let sum = 0; + for(let x = 0;x < Ker.length;x++){ + sum = sum + (Pix[x]*Ker[x]) + } + return sum; +} + +//Dividimos los canales en arreglos individuales +function ChannelDivider(ImgArr){ + let imgRed = [], imgGreen = [], imgBlue = [], imgAlpha = []; + for(let i = 0; i < ImgArr.length ; i+=4){ + imgRed.push(ImgArr[i]); + imgGreen.push(ImgArr[i+1]); + imgBlue.push(ImgArr[i+2]); + imgAlpha.push(ImgArr[i+3]); + } + return [imgRed,imgGreen,imgBlue,imgAlpha] +} + +//Recomponer la imagen +function ChannelComposer(R,G,B,A){ + let imageChannels = []; + for(let i = 0; i < A.length*4 ; i+=4){ + imageChannels[i] = R[i/4]; + imageChannels[i+1] = G[i/4]; + imageChannels[i+2] = B[i/4]; + imageChannels[i+3] = A[i/4]; + } + return imageChannels; +} + +//separar los arreglos para hacer una matriz +function ArraySplice(arr,dim){ + var matrix = [], i, k; + for (i = 0, k = -1; i < arr.length; i++) { + if (i % dim === 0) { + k++; + matrix[k] = []; + } + matrix[k].push(arr[i]); + } + return matrix; +} +//Reescribir el arreglo como matriz +function dimensioner(LTM){ + var extended = []; + for(let r = 0; r < LTM.length ; r++){ + for(let c = 0; c < LTM[r].length; c++){ + //Si estoy en el primer pixel + if(r==0 && c==0){ + extended.push( + [0,0,0, + 0,LTM[r][c],LTM[r][c+1], + 0,LTM[r+1][c],LTM[r+1][c+1]] + ); + }else + //si estoy en la primer fila + if(r==0 && (c>0 && c!=LTM[r].length - 1)){ + extended.push( + [0,0,0, + LTM[r][c-1],LTM[r][c],LTM[r][c+1], + LTM[r+1][c-1],LTM[r+1][c],LTM[r+1][c+1]] + ); + }else + //Si estoy en el el ultimo pixel de una fila + if(r==0 && c==LTM[r].length - 1){ + extended.push( + [0,0,0, + LTM[r][c-1],LTM[r][c],0, + LTM[r+1][c-1],LTM[r+1][c],0] + ); + }else + + //si estoy en el primer pixel de una columna + if((r>0 && r0 && r0 && c }} + +--- + +## Conclusions + +El ejercicio es bastante complejo debido a las limitantes que existen al momento del renderizado, Sin embargo la manipulacion matematica de la imagen permite un acercamiento practico a funciones utilizadas por editores graficos lo cual permite entender que procesos se realizan bajo las interfaces para poder obtener resultados. \ No newline at end of file diff --git a/content/docs/shortcodes/Taller 1/Histograma.md b/content/docs/shortcodes/Taller 1/Histograma.md new file mode 100644 index 00000000..99cfb346 --- /dev/null +++ b/content/docs/shortcodes/Taller 1/Histograma.md @@ -0,0 +1,89 @@ +# Histograma +--- +## Problem statement + +Un histograma de imagen es una representación gráfica de la distribución tonal en una imagen digital. Para esto traza el número de píxeles para cada valor tonal de manera que al mirar el histograma de una imagen específica, un espectador podrá juzgar la distribución tonal completa de un vistazo. + +Tiene muchos usos entre ellos sirve dar al fotógrafo una mejor comprensión de los valores de brillo en una imagen. + + + +## Background +Un histograma es una representación de la distribución de datos numericos, este fue creado por Karl Pearson. Este tiene 2 ejes x y y, el primero contiene eventos cuya frecuencia debe contar y el otro contiene la frecuencia. + +## Code + +{{< p5-iframe sketch="/visual_computing/sketches/histogram.js" width="720" height="420" >}} +{{< p5-iframe sketch="/visual_computing/sketches/histogram2.js" width="700" height="440" >}} +{{< p5-iframe sketch="/visual_computing/sketches/histogram3.js" width="400" height="400" >}} + +{{< details "**CODIGO:** Histograma" close >}} +**C**odigo generado usando el editor web de **P5.js**. +```javascript +var img; +var maxRange = 256; +var histogram = new Array(maxRange); +function preload() { + img = loadImage("/visual_computing/sketches/einstein.jpg"); // Load the image +} + +function setup() { + createCanvas(img.width, img.height+10); + background(255); + img.resize(0,400); + colorMode(HSL, maxRange); + image(img, 0, 0); + + for (i = 0; i <= maxRange; i++) { + histogram[i] = 0 + } + + transform_rgb(); + + construir_histograma(); + +} + +function construir_histograma(){ + image(img, 0, 0); + stroke(300,100,80) + push() + translate(10,0) + for (x = 0; x <= maxRange; x++) { + index = histogram[x]; + + y1=int(map(index, 0, max(histogram), img.height, img.height-200)); + y2 = img.height + xPos = map(x,0,maxRange,0, img.width-20) + stroke('red'); + line(xPos, y1, xPos, y2); + + } + pop() +} + +function transform_rgb(){ + loadPixels(); + + for (var x = 0; x < img.width; x+=5) { + for (var y = 0; y < img.height; y+=5) { + var loc = (x + y * img.width) * 4; + var h = pixels[loc]; + var s = pixels[loc + 1]; + var l = pixels[loc + 2]; + var a = pixels[loc + 3]; + b = int(l); + histogram[b]++ + } + } +} + + //Bibliografia: https://editor.p5js.org/ebenjmuse/sketches/HyPfeGkCZ +``` +{{< /details >}} + +--- + +## Conclusions + +El ejercicio es bastante complejo debido a que debe adaptarse a cualquier imagen, pero es un analisis muy util de la imagen ya que con un solo vistazo se sabe cual es la tendencia de los colores. \ No newline at end of file diff --git a/content/docs/shortcodes/Taller 1/Ilusiones/BindingMovement.md b/content/docs/shortcodes/Taller 1/Ilusiones/BindingMovement.md new file mode 100644 index 00000000..5d6f8f2b --- /dev/null +++ b/content/docs/shortcodes/Taller 1/Ilusiones/BindingMovement.md @@ -0,0 +1,149 @@ +# Movimiento Enlazado +--- +## Problem statement + +La presente ilusión muestra 4 líneas aparentemente moviéndose de forma _independiente_, sin embargo, al revisarlas de forma extensiva se puede notar que se mueven en pares ordenados paralelos. La figura que describe este movimiento corresponde a un rombo el cual posee sus vértices ocultos; + +Al hacer que los vértices sean visibles se puede notar como el tenerlos ocultos crea el movimiento ilusorio. + +{{< hint info >}} +**¿Como interactuar con la ilusión?** +Para visibilizar las figuras que desmontan la ilusión es necesario marcar +el checkbox **"Visible"** , el Slider que se encuentra permite cambiar la +visibilidad _"Alpha"_ de las figuras. +{{< /hint >}} + +## Code + +{{< p5-global-iframe id="sketchid" width="625" height="625" >}} + let bgColor = 200, checkbox; + function setup() { + createCanvas(600,600); + angleMode(DEGREES); + rectMode(CENTER); + + //transparency + slider = createSlider(20, 255, 100); + slider.position(10, 10); + slider.style('width', '80px'); + + //Squares Transparency + checkbox = createCheckbox('Visible', false); + checkbox.position(10,40); + + } + + function drawSquares(visible){ + let xAxis = 150; + let yAxis = 150; + let size = 120; + + rotate(45); + + if(!checkbox.checked()){ + fill(bgColor); + noStroke() + }else{ + let alpha = slider.value(); + fill(0,100,100,alpha); + noStroke(); + } + + rect(xAxis,-yAxis,size,size); + rect(-xAxis,yAxis,size,size); + rect(xAxis,yAxis,size,size); + rect(-xAxis,-yAxis,size,size); + } + + function mainSquare(){ + translate(p5.Vector.fromAngle(millis()/500,40)); + let bSize = 300; + rotate(45); + fill(bgColor) + stroke(0, 0, 255); + strokeWeight(6); + rect(0,0,bSize,bSize); + } + + function draw() { + background(bgColor); + translate(width/2,height/2); + + push(); + mainSquare(); + pop(); + + drawSquares(false); + } +{{< /p5-global-iframe >}} + +{{< details "**CODIGO:** Movimiento Enlazado" close >}} +**C**odigo generado usando el editor web de **P5.js**. +```javascript + let bgColor = 200, checkbox; + function setup() { + createCanvas(600,600); + angleMode(DEGREES); + rectMode(CENTER); + + //transparency + slider = createSlider(20, 255, 100); + slider.position(10, 10); + slider.style('width', '80px'); + + //Squares Transparency + checkbox = createCheckbox('Visible', false); + checkbox.position(10,40); + + } + + function drawSquares(visible){ + let xAxis = 150; + let yAxis = 150; + let size = 120; + + rotate(45); + + if(!checkbox.checked()){ + fill(bgColor); + noStroke() + }else{ + let alpha = slider.value(); + fill(0,100,100,alpha); + noStroke(); + } + + rect(xAxis,-yAxis,size,size); + rect(-xAxis,yAxis,size,size); + rect(xAxis,yAxis,size,size); + rect(-xAxis,-yAxis,size,size); + } + + function mainSquare(){ + translate(p5.Vector.fromAngle(millis()/500,40)); + let bSize = 300; + rotate(45); + fill(bgColor) + stroke(0, 0, 255); + strokeWeight(6); + rect(0,0,bSize,bSize); + } + + function draw() { + background(bgColor); + translate(width/2,height/2); + + push(); + mainSquare(); + pop(); + + drawSquares(false); + } +``` +{{< /details >}} + +--- + +## Conclusions + +Para el ojo inexperto el movimiento puede resultar complejo ya que la ilusion cumple con el objetivo y de primera mano da a enter que tras ella se requieren calculos y codigos complejos para obtener la sincronizacion. Sin embargo, el desarrollo del ejercicio permite entender como la manipulacion geometrica y de factores como perspectiva y velocidad permiten generar animaciones complejas. \ No newline at end of file diff --git a/content/docs/shortcodes/Taller 1/Ilusiones/SKE.md b/content/docs/shortcodes/Taller 1/Ilusiones/SKE.md new file mode 100644 index 00000000..d9ca04b8 --- /dev/null +++ b/content/docs/shortcodes/Taller 1/Ilusiones/SKE.md @@ -0,0 +1,58 @@ +# Efecto esteroquinético + +## Problem statement + +El efecto esteroquinético es una ilusión visual de la profundidad. Es un efecto ilusorio que depende del movimiento. Se basa en que la rotación de figuras adecuadas crea una ilusión tridimensional + +## Code + +Pasos dentro del código: + +1. Dibujar el primer circulo +2. Iterar por cada círculo definiendo su rotación y su posición. + +{{< details title="source code" open=false >}} +{{< highlight html >}} +let angle = 0; +let speed = 0.05; +let circleColor = true; + +function setup() { +createCanvas(400, 400); +} + +function draw() { +background(220); +angle += speed; +strokeWeight(1) +circle(200,200,400); +cirrcle(375) +} + +function cirrcle(size){ +fill(255,255,0) +if(circleColor){ +fill(0,0,255) + } +circleColor = !circleColor + +if(size>100){ +translate(p5.Vector.fromAngle(millis() / 1000, 12.5)); +strokeWeight(0) +circle(200,200, size); +cirrcle(size-25) +}else if(size>0){ +translate(p5.Vector.fromAngle(millis() / 1000, -12.5)); +circle(200,200, size); + cirrcle(size-25) +} +return +} +{{< /highlight >}} +{{< /details >}} + +{{< p5-iframe sketch="/visual_computing/sketches/illusion3d.js" width="450" height="450" >}} + +## Conclusions + +Es una manera muy interesante de crear la ilusión de la tercera dimensión, estos conceptos van encaminados hacia la creación de gráficas en 3D. diff --git a/content/docs/shortcodes/Taller 1/Ilusiones/SteppingFeet.md b/content/docs/shortcodes/Taller 1/Ilusiones/SteppingFeet.md new file mode 100644 index 00000000..e9769bdf --- /dev/null +++ b/content/docs/shortcodes/Taller 1/Ilusiones/SteppingFeet.md @@ -0,0 +1,184 @@ +# Paso a paso +--- +## Problem statement + +Tambien llamada Stepping feet, es una ilusión visual de percepción de movimiento. Esta muestra dos pies, uno azul y otro amarillo, que se mueven horizontalmente a través de un paisaje que consta de rayas blancas y negras. Aunque ambos pies se mueven a una velocidad constante, su velocidad percibida es distinta. + + +{{< hint info >}} +**¿Como interactuar con la ilusión?** +Para cambiar la velocidad de las figuras se usa el primer slider, para cambiar la relación baras/pie se usa el segundo slider y para mover o detener los pies se debe clickear la casilla de move. +{{< /hint >}} + +## Code + +{{< p5-iframe sketch="/visual_computing/sketches/stepping_feet.js" width="625" height="625" >}} + +{{< details "**CODIGO:** Paso a paso" close >}} +**C**odigo generado usando el editor web de **P5.js**. +```javascript +var canvasWidth = 600; +var canvasHeight = 400; + +var quantity = 2; +var speed = 1; + +var positionXBar1 = 0; +var positionYBar1 = canvasHeight / 3; +var positionYBar2 = (2*canvasHeight) / 3; +var widthBar = 80; +var heightBar = 40; +var colorBar1 = 'yellow'; +var colorBar2 = 'blue'; +var moveBarRight = true; +var isMove = true; + +var sliderSpeed; + +function setup() { + createCanvas(canvasWidth, canvasHeight); + background('white'); + drawLayout(); +} + +function draw() { + drawBoard(); + updateSpeed(); + drawBar1(); + drawBar2(); +} + +function drawBoard(){ + let position; + + quantity = sliderQuantity.value(); + + let realLines = (canvasWidth / widthBar) * quantity; + let widthLine = widthBar / quantity; + let numberLines = realLines % 2 == 0 ? realLines + 1 : realLines; + + for (let i = 0; i < numberLines; i++) { + position = i * widthLine; + if (i % 2 == 0) { + fill('black'); + rect(position, 0, widthLine, canvasHeight); + } else { + strokeWeight(0) + fill('white'); + rect(position, 0, widthLine, canvasHeight); + } + } +} + +function drawBar1(){ + fill(colorBar1); + rect(positionXBar1, positionYBar1, widthBar, heightBar); + if (moveBarRight) { + positionXBar1 += speed; + if (positionXBar1 + widthBar > canvasWidth) { + moveBarRight = false; + } + } else { + positionXBar1 -= speed; + if (positionXBar1 <= 0) { + moveBarRight = true; + } + } +} + +function drawBar2() { + fill(colorBar2); + rect(positionXBar1, positionYBar2, widthBar, heightBar); + if (moveBarRight) { + positionXBar1 += speed; + if (positionXBar1 + widthBar > canvasWidth) { + moveBarRight = false; + } + } else { + positionXBar1 -= speed; + if (positionXBar1 <= 0) { + moveBarRight = true; + } + } + } + + function updateSpeed() { + if (isMove) { + speed = sliderSpeed.value(); + } + } + +function drawLayout() { + //Reset button + button = createButton('Reset'); + button.position(40, 440); + button.mousePressed(() => { + canvasWidth = 600; + canvasHeight = 400; + quantity = 2; + speed = 1; + positionXBar1 = 0; + positionYBar1 = canvasHeight / 3; + positionXBar2 = 0; + positionYBar2 = (2*canvasHeight) / 3; + widthBar = 80; + heightBar = 40; + moveBarRight = true; + }); + + //Move checkbox + checkbox = createCheckbox('Move', isMove); + checkbox.position(40, 470); + checkbox.mousePressed(() => { + if (speed === 0) { + isMove = true; + speed = sliderSpeed.value(); + } else { + isMove = false; + speed = 0; + } + }); + + //Slider speed + sliderSpeed = createSlider(1, 10, 1); + sliderSpeed.position(40, 500); + sliderSpeed.style('width', '80px'); + + //Slider quantity + sliderQuantity = createSlider(1, 10, 1); + sliderQuantity.position(40, 540); + sliderQuantity.style('width', '80px'); + + //Change color + sel = createSelect(); + sel.position(40, 580); + sel.option('blue-yellow'); + sel.option('red-green'); + sel.option('grey'); + sel.selected('kiwi'); + sel.changed((value) => { + switch(value.target.value) { + case 'blue-yellow': + colorBar1 = 'yellow' + colorBar2 = 'blue' + break; + case 'red-green': + colorBar1 = 'green' + colorBar2 = 'red' + break; + case 'grey': + colorBar1 = 'white' + colorBar2 = 'black' + break; + } + }); + +} +``` +{{< /details >}} + +--- + +## Conclusions + +La clave de esta ilusión es el contraste, ya que cuando hay un mayor contraste entre el pie y el fondo, el pie se hace visible más facilmente y da una sensación de movimiento rapido mientras que cuando el contraste es bajo, el pie es más dificil de diferenciar del fondo y parecer ir más lento. Esta ilusió demuestra que el fondo de un objeto puede tener un efecto significativo en su velocidad percibida. \ No newline at end of file diff --git a/content/docs/shortcodes/Taller 1/Ilusiones/_index.md b/content/docs/shortcodes/Taller 1/Ilusiones/_index.md new file mode 100644 index 00000000..ab17ba59 --- /dev/null +++ b/content/docs/shortcodes/Taller 1/Ilusiones/_index.md @@ -0,0 +1,13 @@ +--- +bookCollapseSection: true +--- + +# Taller 1 + +## Objetivo + +En este taller fortaleceremos conceptos de manipulación de píxeles para la modificación de una imagen mediante Kernels, reproduciremos ilusiones ópticas para familiarizarnos con P5.js y construiremos un visualizador de histogramas. + +## Types + +{{
}} diff --git a/content/docs/shortcodes/Taller 1/Lightness.md b/content/docs/shortcodes/Taller 1/Lightness.md new file mode 100644 index 00000000..f64f9013 --- /dev/null +++ b/content/docs/shortcodes/Taller 1/Lightness.md @@ -0,0 +1,87 @@ +# Lightness + +## Problem statement + +Sería útil tener una herramienta que permita la manipulación de luminosidad de una imagen, y de esta manera poder aclarar imágenes oscuras para poder ver sus siluetas. + +## Background + +- Manipulación de pixeles usando `P5.js` +- Uso de [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV#Lightness) +- Conversión entre HSL y RGB + +## Code + +Pasos dentro del código: + +1. Cargar la imagen a manipular y el `botón de rango` +2. Dado un valor en el `botón de rango`, se aumenta la luminosidad de cada pixel en la imagen.S + +{{< details title="source code" open=false >}} +{{< highlight html >}} + +new p5((p) =>{ +let img; +let myPixels; +p.preload = function() { +img = p.loadImage("/showcase/sketches/medusa.jpeg"); +} + +p.setup = function () { +p.createCanvas(400, 400); +let inp = p.createInput("0","range"); + +inp.size(100); + +inp.input((e) => handleBtn(e)); + +inp.position(0,p.height-20) +p.image(img, 0, 0, p.width, p.height); +p.colorMode(p.RGB) +p.loadPixels(); +myPixels = [...p.pixels] +console.log("myPixels",myPixels[0]) +} + +p.draw = function (){ + +} + +handleBtn= function(inp){ +console.log("inp", inp.target.value) +let d = p.pixelDensity(); +let halfImage = 4 _ (p.width _ d) _ (p.height _ d); +for (let i = 0; i < halfImage; i += 4) { + +let colorRGB = p.color(myPixels[i],myPixels[i+1], myPixels[i+2]) +let hueValue = p.floor( p.hue(colorRGB) ); +let saturationValue = p.saturation(colorRGB); +let lightnessValue = p.lightness(colorRGB); + +let colorHSV = p.color(`hsl(${ hueValue }, ${ saturationValue }%, ${ (lightnessValue + parseFloat(inp.target.value))}%)`) + +p.pixels[i] = p.red(colorHSV); +p.pixels[i + 1] = p.green(colorHSV); +p.pixels[i + 2] = p.blue(colorHSV); +p.pixels[i + 3] = p.alpha(colorHSV); +} +p.updatePixels(); +console.log("myPixels",myPixels[0]) +} + +handleImg = function(event){ +console.log("event.target",event.target.value) +p.loadImage(event.target.value, img2 => { +p.image(img2, 0, 0, p.width, p.height); +}); + +} +}) +{{< /highlight >}} +{{< /details >}} + +{{< p5-iframe sketch="/visual_computing/sketches/lightness.js" width="450" height="450" >}} + +## Conclusions + +Esta forma de manipular los pixeles llega a buenos resultados en cuanto a la modificación de luminocidad, pero es costosa computacionalmente, sería interesante descubrir el trabajo que realizan programas como Photoshop para lograr una óptima manipulación sobre una imagen. diff --git a/content/docs/shortcodes/Taller 1/Multiplicacion RGB.md b/content/docs/shortcodes/Taller 1/Multiplicacion RGB.md new file mode 100644 index 00000000..9d547b76 --- /dev/null +++ b/content/docs/shortcodes/Taller 1/Multiplicacion RGB.md @@ -0,0 +1,54 @@ +# Multiplicación RGB + +## Problem statement + +¿Qué sucede si multiplicamos dos colores RGB? + +## Code + +Pasos dentro del código: + +1. Obtener los 2 valores RGB de la paleta +2. Calcular su multiplicación y mostrarla en pantalla + +{{< details title="source code" open=false >}} +{{< highlight html >}} +let backgroundColor; +let color1, color2 +function setup() { + createCanvas(200, 200); + let c1 = createInput("0,0,0",'color') + let c2 = createInput("0,0,0",'color') + + + c1.input(()=> setColor1(c1,c2)) + c2.input(()=> setColor1(c1,c2)) +} + +function setColor1(c1,c2){ + let color1 = color(red(c1.value()), green(c1.value()), blue(c1.value())) + let black = color(0,0,0) + fill(color1) + rect(0,0, 130,130) + let color2 = color(red(c2.value()), green(c2.value()), blue(c2.value())) + fill(color2) + rect(70,70, 130,130) + + //let white = color(255,255,255) + + const cred = (red(c1.value()) * red(c2.value())) / 255; + const cblue = (blue(c1.value()) * blue(c2.value())) / 255; + const cgreen = (green(c1.value()) * green(c2.value())) /255; + fill(color(cred, cgreen,cblue)) + rect(70,70, 60,60) + //background(cred,cgreen,cblue) + +} +{{< /highlight >}} +{{< /details >}} + +{{< p5-iframe sketch="/visual_computing/sketches/RGBmultiply.js" width="450" height="450" >}} + +## Conclusions + +La multiplicación RGB, bajo algunos casos, hacer ver que cuadrados tienen una cierta transparencia, y que los colores se combinan. diff --git a/content/docs/shortcodes/Taller 1/_index.md b/content/docs/shortcodes/Taller 1/_index.md new file mode 100644 index 00000000..ab17ba59 --- /dev/null +++ b/content/docs/shortcodes/Taller 1/_index.md @@ -0,0 +1,13 @@ +--- +bookCollapseSection: true +--- + +# Taller 1 + +## Objetivo + +En este taller fortaleceremos conceptos de manipulación de píxeles para la modificación de una imagen mediante Kernels, reproduciremos ilusiones ópticas para familiarizarnos con P5.js y construiremos un visualizador de histogramas. + +## Types + +{{
}} diff --git a/content/docs/shortcodes/buttons.md b/content/docs/shortcodes/buttons.md deleted file mode 100644 index c2ef1e75..00000000 --- a/content/docs/shortcodes/buttons.md +++ /dev/null @@ -1,13 +0,0 @@ -# Buttons - -Buttons are styled links that can lead to local page or external link. - -## Example - -```tpl -{{}}Get Home{{}} -{{}}Contribute{{}} -``` - -{{< button relref="/" >}}Get Home{{< /button >}} -{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}} diff --git a/content/docs/shortcodes/columns.md b/content/docs/shortcodes/columns.md deleted file mode 100644 index 0b8fde83..00000000 --- a/content/docs/shortcodes/columns.md +++ /dev/null @@ -1,45 +0,0 @@ -# Columns - -Columns help organize shorter pieces of content horizontally for readability. - - -```html -{{}} -# Left Content -Lorem markdownum insigne... - -<---> - -# Mid Content -Lorem markdownum insigne... - -<---> - -# Right Content -Lorem markdownum insigne... -{{}} -``` - -## Example - -{{< columns >}} -## Left Content -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. -Miseratus fonte Ditis conubia. - -<---> - -## Mid Content -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! - -<---> - -## Right Content -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. -Miseratus fonte Ditis conubia. -{{< /columns >}} diff --git a/content/docs/shortcodes/details.md b/content/docs/shortcodes/details.md deleted file mode 100644 index 3d5aedc4..00000000 --- a/content/docs/shortcodes/details.md +++ /dev/null @@ -1,22 +0,0 @@ -# Details - -Details shortcode is a helper for `details` html5 element. It is going to replace `expand` shortcode. - -## Example - -```tpl -{{}} -## Markdown content -Lorem markdownum insigne... -{{}} -``` - -{{< details "Title" open >}} -## Markdown content -Lorem markdownum insigne... -{{< /details >}} - -{{< details "Title" >}} -## Markdown content -Lorem markdownum insigne... -{{< /details >}} diff --git a/content/docs/shortcodes/hints.md b/content/docs/shortcodes/hints.md deleted file mode 100644 index 3477113d..00000000 --- a/content/docs/shortcodes/hints.md +++ /dev/null @@ -1,32 +0,0 @@ -# Hints - -Hint shortcode can be used as hint/alerts/notification block. -There are 3 colors to choose: `info`, `warning` and `danger`. - -```tpl -{{}} -**Markdown content** -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -{{}} -``` - -## Example - -{{< hint info >}} -**Markdown content** -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -{{< /hint >}} - -{{< hint warning >}} -**Markdown content** -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -{{< /hint >}} - -{{< hint danger >}} -**Markdown content** -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -{{< /hint >}} diff --git a/content/docs/shortcodes/katex.md b/content/docs/shortcodes/katex.md deleted file mode 100644 index dd0a8591..00000000 --- a/content/docs/shortcodes/katex.md +++ /dev/null @@ -1,25 +0,0 @@ -# KaTeX - -KaTeX shortcode let you render math typesetting in markdown document. See [KaTeX](https://katex.org/) - -## Example - -{{< columns >}} -{{< highlight latex >}} -{{}} -f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi -{{}} -{{< /highlight >}} -<---> -{{< katex display >}} -f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi -{{< /katex >}} -{{< /columns >}} - -## Display Mode Example - -Here is some inline example: {{< katex >}}\pi(x){{< /katex >}}, rendered in the same line. And below is `display` example, having `display: block` -{{< katex display >}} -f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi -{{< /katex >}} -Text continues here. diff --git a/content/docs/shortcodes/mermaid.md b/content/docs/shortcodes/mermaid.md deleted file mode 100644 index a8819d9f..00000000 --- a/content/docs/shortcodes/mermaid.md +++ /dev/null @@ -1,41 +0,0 @@ -# Mermaid Chart - -[MermaidJS](https://mermaid-js.github.io/) is library for generating svg charts and diagrams from text. - -{{< hint info >}} -**Override Mermaid Initialization Config** - -To override the [initialization config](https://mermaid-js.github.io/mermaid/#/Setup) for Mermaid, -create a `mermaid.json` file in your `assets` folder! -{{< /hint >}} - -## Example - -{{< columns >}} -{{< highlight tpl1 >}} -{{}} -stateDiagram-v2 - State1: The state with a note - note right of State1 - Important information! You can write - notes. - end note - State1 --> State2 - note left of State2 : This is the note to the left. -{{}} -{{< /highlight >}} - -<---> - -{{< mermaid >}} -stateDiagram-v2 - State1: The state with a note - note right of State1 - Important information! You can write - notes. - end note - State1 --> State2 - note left of State2 : This is the note to the left. -{{< /mermaid >}} - -{{< /columns >}} diff --git a/content/docs/shortcodes/p5/_index.md b/content/docs/shortcodes/p5/_index.md deleted file mode 100644 index 0cf152de..00000000 --- a/content/docs/shortcodes/p5/_index.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -bookCollapseSection: true ---- - -# p5 - -`p5` helps add [p5 sketches](https://p5js.org/) into your book. There are two types of `p5` [shortcodes](https://gohugo.io/content-management/shortcodes/) according to the html element used to embed them. - -## Types - -{{
}} diff --git a/content/docs/shortcodes/p5/div.md b/content/docs/shortcodes/p5/div.md deleted file mode 100644 index 2277ea5f..00000000 --- a/content/docs/shortcodes/p5/div.md +++ /dev/null @@ -1,206 +0,0 @@ -p5 `div` [shortcodes](https://gohugo.io/content-management/shortcodes/) embed [p5.js](https://p5js.org/) code within a [div element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div). There are two p5 `div` shortcodes: [p5-div](#p5-div) and [p5-instance-div](#p5-instance-div). - -# p5-div - -```html -{{}} -``` - -All parameters are optional but `sketch`. Default values are shown in the above snippet but for `libs*`. Up to `lib5` libs may be specified. - -## Scintillating grid - -Look at [this](https://mathworld.wolfram.com/ScintillatingGridIllusion.html) and also [this](https://www.illusionsindex.org/i/scintillating-grid) among many more references there are. - -{{< details title="p5-div markdown" open=false >}} -{{< highlight html >}} -{{}} -{{< /highlight >}} -{{< /details >}} - -{{< p5-div sketch="/showcase/sketches/scintillating.js" >}} - -# p5-instance-div - -```html -{{}} - // inline sketch code -{{< /p5-instance-div */>}} -``` - -{{< hint warning >}} -Note that the inline `sketch` should be coded in [p5 instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode) syntax. -{{< /hint >}} - -All parameters are optional but `id`. Default values are shown in the above snippet but for `libs*`. Up to `lib5` libs may be specified. - -## Lilac chaser - -Look at [this](https://en.wikipedia.org/wiki/Lilac_chaser) introductory reference. - -{{< details title="p5-instance-div markdown" open=false >}} -{{< highlight md >}} -{{}} - // Adapted from [this](https://github.com/VisualComputing/Cognitive/blob/gh-pages/sketches/lilacChaser.js) - let jump = 0; - let count = 0; - - p5.setup = function() { - p5.createCanvas(400, 400); - p5.frameRate(7); - }; - - function drawBlurCircles(x, y, r) { - p5.push(); - p5.noStroke(); - var opc = 0.4; - var step = 3.0/r; - - for (var i = r; i > 0; i-=1.5) { - if (opc < 5) { - opc += step; - p5.fill(255, 20, 180, opc); - } - p5.ellipse(x, y, i, i); - } - p5.pop(); - }; - - p5.draw = function() { - p5.background(200); - var numCircles = 12; - var stepAngle = 360.0/numCircles; - p5.push(); - p5.translate(p5.width/2.0, p5.height/2.0); - for (var i = 0; i < 360; i = i + stepAngle) { - if (i != jump) { - p5.push(); - p5.rotate(p5.radians(i)); - drawBlurCircles(120, 0, 60); - p5.pop(); - } - } - if( !p5.mouseIsPressed ) { - jump = (jump + stepAngle)%360; - } - p5.push(); - p5.strokeWeight(1.5); - p5.line(-7, 0, 7, 0); - p5.line(0, -7, 0, 7); - p5.pop(); - p5.pop(); - } -{{< /p5-instance-div */>}} -{{< /highlight >}} -{{< hint warning >}} -Note that `p5` should be the name to be used for the sketch object variable. -{{< /hint >}} -{{< /details >}} - -{{< p5-instance-div id="pacman" >}} - let jump = 0; - let count = 0; - - p5.setup = function() { - p5.createCanvas(380, 380); - p5.frameRate(7); - }; - - function drawBlurCircles(x, y, r) { - p5.push(); - p5.noStroke(); - var opc = 0.4; - var step = 3.0/r; - - for (var i = r; i > 0; i-=1.5) { - if (opc < 5) { - opc += step; - p5.fill(255, 20, 180, opc); - } - p5.ellipse(x, y, i, i); - } - p5.pop(); - }; - - p5.draw = function() { - p5.background(200); - var numCircles = 12; - var stepAngle = 360.0/numCircles; - p5.push(); - p5.translate(p5.width/2.0, p5.height/2.0); - for (var i = 0; i < 360; i = i + stepAngle) { - if (i != jump) { - p5.push(); - p5.rotate(p5.radians(i)); - drawBlurCircles(120, 0, 60); - p5.pop(); - } - } - if( !p5.mouseIsPressed ) { - jump = (jump + stepAngle)%360; - } - p5.push(); - p5.strokeWeight(1.5); - p5.line(-7, 0, 7, 0); - p5.line(0, -7, 0, 7); - p5.pop(); - p5.pop(); - } -{{< /p5-instance-div >}} - -## Video on canvas - -Adapted from [here](https://p5js.org/examples/dom-video-canvas.html). Don't forget to checkout also the [video on dom](https://p5js.org/examples/dom-video.html) example. - -{{< details title="p5-instance-div markdown" open=false >}} -{{< highlight md >}} -{{}} - let fingers; - - p5.setup = function() { - p5.createCanvas(710, 400); - // specify multiple formats for different browsers - fingers = p5.createVideo(['/showcase/sketches/fingers.mov', '/showcase/sketches/fingers.webm']); - fingers.hide(); // by default video shows up in separate dom - // element. hide it and draw it to the canvas instead - }; - - p5.draw = function() { - p5.background(150); - p5.image(fingers, 10, 10); // draw the video frame to canvas - p5.filter(p5.GRAY); - p5.image(fingers, 150, 150); // draw a second copy to canvas - }; - - p5.mousePressed = function() { - fingers.loop(); // set the video to loop and start playing - } -{{< /p5-instance-div */>}} -{{< /highlight >}} -{{< hint warning >}} -Note that `p5` should be the name to be used for the sketch object variable. -{{< /hint >}} -{{< /details >}} - -{{< p5-instance-div id="video" >}} - let fingers; - - p5.setup = function() { - p5.createCanvas(710, 400); - // specify multiple formats for different browsers - fingers = p5.createVideo(['/showcase/sketches/fingers.mov', '/showcase/sketches/fingers.webm']); - fingers.hide(); // by default video shows up in separate dom - // element. hide it and draw it to the canvas instead - }; - - p5.draw = function() { - p5.background(150); - p5.image(fingers, 10, 10); // draw the video frame to canvas - p5.filter(p5.GRAY); - p5.image(fingers, 150, 150); // draw a second copy to canvas - }; - - p5.mousePressed = function() { - fingers.loop(); // set the video to loop and start playing - } -{{< /p5-instance-div >}} \ No newline at end of file diff --git a/content/docs/shortcodes/p5/iframe.md b/content/docs/shortcodes/p5/iframe.md deleted file mode 100644 index 93dbe5a7..00000000 --- a/content/docs/shortcodes/p5/iframe.md +++ /dev/null @@ -1,176 +0,0 @@ -p5 `iframe` [shortcodes](https://gohugo.io/content-management/shortcodes/) embed [p5.js](https://p5js.org/) code within an [iframe element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe). There are two p5 `iframe` shortcodes: [p5-iframe](#p5-iframe) and [p5-global-iframe](#p5-global-iframe). - -# p5-iframe - -```html -{{}} -``` - -All parameters are optional but `sketch`. Default values are shown in the above snippet but for `libs*`. Up to `lib5` libs may be specified. - -## Color relativity - -Look at this [brief explanation](https://p5js.org/examples/color-relativity.html) about what color relativity is. - -{{< details title="p5-iframe markdown" open=false >}} -{{< highlight html >}} -{{}} -{{< /highlight >}} -{{< /details >}} - -{{< p5-iframe sketch="/showcase/sketches/colors.js" width="725" height="425" >}} - -## Third party libraries - -Example adapted from [p5.EasyCam](https://github.com/freshfork/p5.EasyCam/blob/master/examples/QuickStart/QuickStart.js). - -{{< details title="p5-iframe markdown" open=false >}} -{{< highlight html >}} -{{}} -{{< /highlight >}} -{{< /details >}} - -{{< p5-iframe sketch="/showcase/sketches/quick_easycam.js" lib1="https://cdn.jsdelivr.net/gh/freshfork/p5.EasyCam@1.2.1/p5.easycam.min.js" width="525" height="525" >}} - -## Sound - -Example took from the [p5 examples](https://p5js.org/examples/sound-sound-effect.html). - -{{< details title="p5-iframe markdown" open=false >}} -{{< highlight html >}} -{{}} -{{< /highlight >}} -{{< /details >}} - -{{< p5-iframe sketch="/showcase/sketches/sound.js" width="225" height="225" >}} - -# p5-global-iframe - -```html -{{}} - // inline sketch code -{{< /p5-global-iframe */>}} -``` - -{{< hint warning >}} -Note that the inline `sketch` should be coded in [p5 global mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode) syntax. -{{< /hint >}} - -All parameters are optional but `id`. Default values are shown in the above snippet but for `libs*`. Up to `lib5` libs may be specified. - -## Breathing square - -Look at [this reference](https://michaelbach.de/ot/mot-breathingSquare/) for an explanation and further parameterization of the illusion. - -{{< details title="p5-global-iframe markdown" open=false >}} -{{< highlight html >}} -{{}} - // Coded as `global mode` of [this](https://github.com/VisualComputing/Cognitive/blob/gh-pages/sketches/rotateSquare.js) - let angle = 0; - let speed = 0.06; - - function setup() { - createCanvas(600, 600); - } - - function draw() { - background(255, 255, 255); - rotateSquare(); - if (!mouseIsPressed) { - strokeWeight(0); - stroke(0); - fill(255, 140, 0); - rect(0, 0, 281, 281); - rect(318, 0, 281, 281); - rect(0, 318, 281, 281); - rect(318, 318, 281, 281); - } - } - - function rotateSquare() { - push(); - angle += speed; - strokeWeight(0); - stroke(0); - fill(0, 0, 255); - translate(width / 2, height / 2); - rotate(angle); - rect(-187.5, -187.5, 375, 375); - pop(); - } -{{< /p5-global-iframe */>}} -{{< /highlight >}} -{{< /details >}} - -{{< p5-global-iframe id="breath" width="625" height="625" >}} - let angle = 0; - let speed = 0.06; - - function setup() { - createCanvas(600, 600); - } - - function draw() { - background(255, 255, 255); - rotateSquare(); - if (!mouseIsPressed) { - strokeWeight(0); - stroke(0); - fill(255, 140, 0); - rect(0, 0, 281, 281); - rect(318, 0, 281, 281); - rect(0, 318, 281, 281); - rect(318, 318, 281, 281); - } - } - - function rotateSquare() { - push(); - angle += speed; - strokeWeight(0); - stroke(0); - fill(0, 0, 255); - translate(width / 2, height / 2); - rotate(angle); - rect(-187.5, -187.5, 375, 375); - pop(); - } -{{< /p5-global-iframe >}} - -# p5-widget - -The `p5-widget` [shortcode](https://gohugo.io/content-management/shortcodes/) embed [p5.js](https://p5js.org/) code within an [p5-widget](https://toolness.github.io/p5.js-widget/). - -```html -{{}} - // inline sketch code -{{< /p5-widget */>}} -``` - -All parameters are optional. Default `ver` is `1.4.2`. For example: - -## Widget example - -{{< details title="p5-widget markdown" open=false >}} -{{< highlight html >}} -{{}} -function setup() { - createCanvas(300, 300); -} - -function draw() { - background(255, 0, 255); -} -{{< /p5-widget */>}} -{{< /highlight >}} -{{< /details >}} - -{{< p5-widget autoplay=true height="400" width="400" ver="1.4.2" >}} -function setup() { - createCanvas(300, 300); -} - -function draw() { - background(255, 0, 255); -} -{{< /p5-widget >}} \ No newline at end of file diff --git a/content/docs/shortcodes/tabs.md b/content/docs/shortcodes/tabs.md deleted file mode 100644 index 096892c6..00000000 --- a/content/docs/shortcodes/tabs.md +++ /dev/null @@ -1,50 +0,0 @@ -# Tabs - -Tabs let you organize content by context, for example installation instructions for each supported platform. - -```tpl -{{}} -{{}} # MacOS Content {{}} -{{}} # Linux Content {{}} -{{}} # Windows Content {{}} -{{}} -``` - -## Example - -{{< tabs "uniqueid" >}} -{{< tab "MacOS" >}} -# MacOS - -This is tab **MacOS** content. - -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. -Miseratus fonte Ditis conubia. -{{< /tab >}} - -{{< tab "Linux" >}} - -# Linux - -This is tab **Linux** content. - -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. -Miseratus fonte Ditis conubia. -{{< /tab >}} - -{{< tab "Windows" >}} - -# Windows - -This is tab **Windows** content. - -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. -Miseratus fonte Ditis conubia. -{{< /tab >}} -{{< /tabs >}} diff --git a/content/imgs/madusa.jpeg b/content/imgs/madusa.jpeg new file mode 100644 index 00000000..ade5de93 Binary files /dev/null and b/content/imgs/madusa.jpeg differ diff --git a/content/menu/index.md b/content/menu/index.md index dc3c1e8d..0977e140 100644 --- a/content/menu/index.md +++ b/content/menu/index.md @@ -11,4 +11,4 @@ headless: true - [Katex]({{< relref "/docs/shortcodes/katex" >}}) - [Mermaid]({{< relref "/docs/shortcodes/mermaid" >}}) - [Tabs]({{< relref "/docs/shortcodes/tabs" >}}) -
+
diff --git a/content/sketches/Que-es-paisaje.jpg b/content/sketches/Que-es-paisaje.jpg new file mode 100644 index 00000000..c6c421f5 Binary files /dev/null and b/content/sketches/Que-es-paisaje.jpg differ diff --git a/content/sketches/RGBmultiply.js b/content/sketches/RGBmultiply.js new file mode 100644 index 00000000..c8829239 --- /dev/null +++ b/content/sketches/RGBmultiply.js @@ -0,0 +1,31 @@ +let backgroundColor; +let color1, color2 +function setup() { + createCanvas(200, 200); + let c1 = createInput("0,0,0",'color') + let c2 = createInput("0,0,0",'color') + + + c1.input(()=> setColor1(c1,c2)) + c2.input(()=> setColor1(c1,c2)) +} + +function setColor1(c1,c2){ + let color1 = color(red(c1.value()), green(c1.value()), blue(c1.value())) + let black = color(0,0,0) + fill(color1) + rect(0,0, 130,130) + let color2 = color(red(c2.value()), green(c2.value()), blue(c2.value())) + fill(color2) + rect(70,70, 130,130) + + //let white = color(255,255,255) + + const cred = (red(c1.value()) * red(c2.value())) / 255; + const cblue = (blue(c1.value()) * blue(c2.value())) / 255; + const cgreen = (green(c1.value()) * green(c2.value())) /255; + fill(color(cred, cgreen,cblue)) + rect(70,70, 60,60) + //background(cred,cgreen,cblue) + +} \ No newline at end of file diff --git a/content/sketches/bubbleCatC.png b/content/sketches/bubbleCatC.png new file mode 100644 index 00000000..f36b0a93 Binary files /dev/null and b/content/sketches/bubbleCatC.png differ diff --git a/content/sketches/colores.jpg b/content/sketches/colores.jpg new file mode 100644 index 00000000..3338c5b8 Binary files /dev/null and b/content/sketches/colores.jpg differ diff --git a/content/sketches/convolutions.js b/content/sketches/convolutions.js new file mode 100644 index 00000000..ec3e4680 --- /dev/null +++ b/content/sketches/convolutions.js @@ -0,0 +1,226 @@ +var img,kernel; +let channelsMap,RedMat,BlueMat,GreenMat,newChannels,fMap; + +function preload() { + img = loadImage('/visual_computing/sketches/bubbleCatC.png'); +} + +function setup() { + createCanvas(600,600); + noLoop(); + + //Boton de Recarga + button = createButton('Recargar Canvas'); + button.position(10, 10); + button.mousePressed(reload); + + //Cambiar el kernel + slider = createSlider(1, 5, 1); + slider.position(120, 10); + slider.style('width', '80px'); +} + +//Calcular el producto punto +function ppunto(Pix,Ker){ + let sum = 0; + for(let x = 0;x < Ker.length;x++){ + sum = sum + (Pix[x]*Ker[x]) + } + return sum; +} + +//Dividimos los canales en arreglos individuales +function ChannelDivider(ImgArr){ + let imgRed = [], imgGreen = [], imgBlue = [], imgAlpha = []; + for(let i = 0; i < ImgArr.length ; i+=4){ + imgRed.push(ImgArr[i]); + imgGreen.push(ImgArr[i+1]); + imgBlue.push(ImgArr[i+2]); + imgAlpha.push(ImgArr[i+3]); + } + return [imgRed,imgGreen,imgBlue,imgAlpha] +} + +//Recomponer la imagen +function ChannelComposer(R,G,B,A){ + let imageChannels = []; + for(let i = 0; i < A.length*4 ; i+=4){ + imageChannels[i] = R[i/4]; + imageChannels[i+1] = G[i/4]; + imageChannels[i+2] = B[i/4]; + imageChannels[i+3] = A[i/4]; + } + return imageChannels; +} + +//separar los arreglos para hacer una matriz +function ArraySplice(arr,dim){ + var matrix = [], i, k; + for (i = 0, k = -1; i < arr.length; i++) { + if (i % dim === 0) { + k++; + matrix[k] = []; + } + matrix[k].push(arr[i]); + } + return matrix; +} +//Reescribir el arreglo como matriz +function dimensioner(LTM){ + var extended = []; + for(let r = 0; r < LTM.length ; r++){ + for(let c = 0; c < LTM[r].length; c++){ + //Si estoy en el primer pixel + if(r==0 && c==0){ + extended.push( + [0,0,0, + 0,LTM[r][c],LTM[r][c+1], + 0,LTM[r+1][c],LTM[r+1][c+1]] + ); + }else + //si estoy en la primer fila + if(r==0 && (c>0 && c!=LTM[r].length - 1)){ + extended.push( + [0,0,0, + LTM[r][c-1],LTM[r][c],LTM[r][c+1], + LTM[r+1][c-1],LTM[r+1][c],LTM[r+1][c+1]] + ); + }else + //Si estoy en el el ultimo pixel de una fila + if(r==0 && c==LTM[r].length - 1){ + extended.push( + [0,0,0, + LTM[r][c-1],LTM[r][c],0, + LTM[r+1][c-1],LTM[r+1][c],0] + ); + }else + + //si estoy en el primer pixel de una columna + if((r>0 && r0 && r0 && c 100){ + translate(p5.Vector.fromAngle(millis() / 1000, 12.5)); + strokeWeight(0) + circle(200,200, size); + cirrcle(size-25) + }else if(size>0){ + translate(p5.Vector.fromAngle(millis() / 1000, -12.5)); + circle(200,200, size); + cirrcle(size-25) + } + return +} \ No newline at end of file diff --git a/content/sketches/lightness.js b/content/sketches/lightness.js new file mode 100644 index 00000000..71617b7e --- /dev/null +++ b/content/sketches/lightness.js @@ -0,0 +1,60 @@ + +new p5((p) =>{ + let img; + let myPixels; + p.preload = function() { + img = p.loadImage("/visual_computing/sketches/medusa.jpeg"); + } + + +p.setup = function () { + p.createCanvas(400, 400); + let inp = p.createInput("0","range"); + + inp.size(100); + + inp.input((e) => handleBtn(e)); + + inp.position(0,p.height-20) + p.image(img, 0, 0, p.width, p.height); + p.colorMode(p.RGB) + p.loadPixels(); + myPixels = [...p.pixels] + console.log("myPixels",myPixels[0]) +} + +p.draw = function (){ + +} + +handleBtn= function(inp){ + console.log("inp", inp.target.value) +let d = p.pixelDensity(); +let halfImage = 4 * (p.width * d) * (p.height * d); +for (let i = 0; i < halfImage; i += 4) { + + let colorRGB = p.color(myPixels[i],myPixels[i+1], myPixels[i+2]) + let hueValue = p.floor( p.hue(colorRGB) ); + let saturationValue = p.saturation(colorRGB); + let lightnessValue = p.lightness(colorRGB); + + let colorHSV = p.color(`hsl(${ hueValue }, ${ saturationValue }%, ${ (lightnessValue + parseFloat(inp.target.value))}%)`) + + + p.pixels[i] = p.red(colorHSV); + p.pixels[i + 1] = p.green(colorHSV); + p.pixels[i + 2] = p.blue(colorHSV); + p.pixels[i + 3] = p.alpha(colorHSV); +} +p.updatePixels(); + console.log("myPixels",myPixels[0]) +} + +handleImg = function(event){ + console.log("event.target",event.target.value) + p.loadImage(event.target.value, img2 => { + p.image(img2, 0, 0, p.width, p.height); + }); + +} +}) \ No newline at end of file diff --git a/content/sketches/medusa.jpeg b/content/sketches/medusa.jpeg new file mode 100644 index 00000000..ade5de93 Binary files /dev/null and b/content/sketches/medusa.jpeg differ diff --git a/content/sketches/stepping_feet.js b/content/sketches/stepping_feet.js new file mode 100644 index 00000000..683e3a3c --- /dev/null +++ b/content/sketches/stepping_feet.js @@ -0,0 +1,176 @@ +var canvasWidth = 600; +var canvasHeight = 400; + +var quantity = 2; +var speed = 1; + +var positionXBar1 = 0; +var positionYBar1 = canvasHeight / 3; +var positionYBar2 = (2*canvasHeight) / 3; +var widthBar = 80; +var heightBar = 40; +var colorBar1 = 'yellow'; +var colorBar2 = 'blue'; +var moveBarRight = true; +var isMove = true; +var contrast = true; + +var sliderSpeed; + +function setup() { + createCanvas(canvasWidth, canvasHeight); + background('white'); + drawLayout(); +} + +function draw() { + if(contrast){ + drawBoard(); + }else{ + background(220); + } + updateSpeed(); + drawBar1(); + drawBar2(); +} + +function drawBoard(){ + let position; + + quantity = sliderQuantity.value(); + + let realLines = (canvasWidth / widthBar) * quantity; + let widthLine = widthBar / quantity; + let numberLines = realLines % 2 == 0 ? realLines + 1 : realLines; + + for (let i = 0; i < numberLines; i++) { + position = i * widthLine; + if (i % 2 == 0) { + fill('black'); + rect(position, 0, widthLine, canvasHeight); + } else { + strokeWeight(0) + fill('white'); + rect(position, 0, widthLine, canvasHeight); + } + } +} + +function drawBar1(){ + fill(colorBar1); + rect(positionXBar1, positionYBar1, widthBar, heightBar); + if (moveBarRight) { + positionXBar1 += speed; + if (positionXBar1 + widthBar > canvasWidth) { + moveBarRight = false; + } + } else { + positionXBar1 -= speed; + if (positionXBar1 <= 0) { + moveBarRight = true; + } + } +} + +function drawBar2() { + fill(colorBar2); + rect(positionXBar1, positionYBar2, widthBar, heightBar); + if (moveBarRight) { + positionXBar1 += speed; + if (positionXBar1 + widthBar > canvasWidth) { + moveBarRight = false; + } + } else { + positionXBar1 -= speed; + if (positionXBar1 <= 0) { + moveBarRight = true; + } + } + } + + function updateSpeed() { + if (isMove) { + speed = sliderSpeed.value(); + } + } + +function drawLayout() { + //Reset button + button = createButton('Reset'); + button.position(40, 440); + button.mousePressed(() => { + canvasWidth = 600; + canvasHeight = 400; + quantity = 2; + speed = 1; + positionXBar1 = 0; + positionYBar1 = canvasHeight / 3; + positionXBar2 = 0; + positionYBar2 = (2*canvasHeight) / 3; + widthBar = 80; + heightBar = 40; + moveBarRight = true; + }); + + //Move checkbox + checkbox = createCheckbox('Move', isMove); + checkbox.position(40, 470); + checkbox.mousePressed(() => { + if (speed === 0) { + isMove = true; + speed = sliderSpeed.value(); + } else { + isMove = false; + speed = 0; + } + }); + + //Slider speed + sliderSpeed = createSlider(1, 10, 1); + sliderSpeed.position(40, 500); + sliderSpeed.style('width', '80px'); + + //Slider quantity + sliderQuantity = createSlider(1, 10, 1); + sliderQuantity.position(40, 540); + sliderQuantity.style('width', '80px'); + + //Change color + sel = createSelect(); + sel.position(40, 580); + sel.option('blue-yellow'); + sel.option('red-green'); + sel.option('grey'); + sel.selected('kiwi'); + sel.changed((value) => { + switch(value.target.value) { + case 'blue-yellow': + colorBar1 = 'yellow' + colorBar2 = 'blue' + break; + case 'red-green': + colorBar1 = 'green' + colorBar2 = 'red' + break; + case 'grey': + colorBar1 = 'white' + colorBar2 = 'black' + break; + } + }); + + // Bye Contrast button + button = createButton('Bye contrast'); + button.position(150, 440); + button.mousePressed(() => { + contrast = false; + }); + + // Hi Contrast button + button = createButton('Hi contrast'); + button.position(150, 470); + button.mousePressed(() => { + contrast = true; + }); + +} \ No newline at end of file diff --git a/content/sketches/storm2.png b/content/sketches/storm2.png new file mode 100644 index 00000000..df2d84cd Binary files /dev/null and b/content/sketches/storm2.png differ diff --git a/layouts/shortcodes/p5-iframe2.html b/layouts/shortcodes/p5-iframe2.html new file mode 100644 index 00000000..9cfaaf06 --- /dev/null +++ b/layouts/shortcodes/p5-iframe2.html @@ -0,0 +1,25 @@ +{{ $defver := `1.4.2` }} +{{ $sketch := .Get `sketch` }} +{{ $lib1 := .Get `lib1` }} +{{ $lib2 := .Get `lib2` }} +{{ $lib3 := .Get `lib3` }} +{{ $lib4 := .Get `lib4` }} +{{ $lib5 := .Get `lib5` }} + + \ No newline at end of file diff --git a/themes/ananke b/themes/ananke new file mode 160000 index 00000000..470ea409 --- /dev/null +++ b/themes/ananke @@ -0,0 +1 @@ +Subproject commit 470ea40982f5036554819253c3ac6ed4a34193f4