抖音上很火的字符画/字符视频，学会简直不要太炫酷！

效果图

将自由者联盟的logo转成下面的样式

                                                                                
                                                                                
      ......................................................................    
    .........................................................................   
   ..........#(#(#(#(#(#(................................#(#(#(#(#(#..........  
  ........######,,,,,,,,(###..........................##(#,,,,,,,#######....... 
  ......(###,,,,,,,,,,,,,,,#(........................##,,,,,,,,,,,,,,###(...... 
  ......(##,,,,,,,,,,,,,,*,/#.......................##,,,,,,,,,,,,,,,,,#(#..... 
  ......((((,,,,,,.............................................,,,,,,,(((...... 
  ........###,,....................................................,####....... 
  ..........(........................................................#......... 
  .......................&&&..........................&&&...................... 
  ......................&&&&.........................&&&&&..................... 
  ......................&&&&.........................&&&&...................... 
  ..............................*****************.............................. 
  ........................*****************************........................ 
  ...........(..(......************************************.......((........... 
  .........#..#......****************************************...(#..#.......... 
  .................*******************************************................. 
  .................************///**************///************................ 
  .................***********////*************////************................ 
  .................,***********//****************/************................. 
  ...................****************************************.................. 
  ......................**********************************..................... 
  ..........................**************************......................... 
  ..................................**********................................. 
  .................................#(###(###(#(................................ 
  ...................................###(####.................................. 
   ...........................................................................  
    ..........................................................................  
     .......................................................................    
         ...............................................................  

视频讲解

本期视频来自The Coding Train，通过p5.js框架实现，不仅可以绘制字符画，还可以实现实时的字符视频！

常见问题

今天下午有热心网友问到下面的相关代码如何使用，首先我们需要打开对应的在线调试链接

• 修改语言为简体中文

• 点击右上角登录，如果有Github、Google账户可以直接授权登录

• 点击复制项目

然后你就可以在下方上传图片了，譬如上传自由者联盟的图片（这里要求是jpg的，建议小一点，太大了会很卡）

上传成功后，需要修改代码

相关代码

ASCII视频特效

核心代码sketch.js

// Image to ASCII
// The Coding Train / Daniel Shiffman

const density = "Ñ@#W$9876543210?!abc;:+=-,._                    ";
// const density = '       .:-i|=+%O#@'
// const density = '        .:░▒▓█';

let video;
let asciiDiv;

function setup() {
  noCanvas();
  video = createCapture(VIDEO);
  video.size(64, 48);
  asciiDiv = createDiv();
}

function draw() {
  video.loadPixels();
  let asciiImage = "";
  for (let j = 0; j < video.height; j++) {
    for (let i = 0; i < video.width; i++) {
      const pixelIndex = (i + j * video.width) * 4;
      const r = video.pixels[pixelIndex + 0];
      const g = video.pixels[pixelIndex + 1];
      const b = video.pixels[pixelIndex + 2];
      const avg = (r + g + b) / 3;
      const len = density.length;
      const charIndex = floor(map(avg, 0, 255, 0, len));
      const c = density.charAt(charIndex);
      if (c == " ") asciiImage += " ";
      else asciiImage += c;
    }
    asciiImage += '<br/>';
  }
  asciiDiv.html(asciiImage);
}

您可以点击上方的蓝色按钮，访问在线调试

调试期间需要调用摄像头，然后你就可以看到字符串绘制的自己了

基于Canva的ASCII图像

核心代码sketch.js

其中gloria20.jpg为图片地址

// Image to ASCII
// The Coding Train / Daniel Shiffman



const density = 'Ñ@#W$9876543210?!abc;:+=-,._ ';
let gloria;

function preload() {
  gloria = loadImage("gloria20.jpg");
}

function setup() {
  createCanvas(400, 400); 
}

function draw() {
  background(0);
  
  let w = width / gloria.width;
  let h = height / gloria.height;
  gloria.loadPixels();
  for (let i = 0; i < gloria.width; i++) {
    for (let j = 0; j < gloria.height; j++) {
      const pixelIndex = (i + j * gloria.width) * 4;
      const r = gloria.pixels[pixelIndex + 0];
      const g = gloria.pixels[pixelIndex + 1];
      const b = gloria.pixels[pixelIndex + 2];
      const avg = (r + g + b) / 3;
      
      noStroke();
      fill(255);
      //square(i * w, j * h, w);
      
      const len = density.length;
      const charIndex = floor(map(avg,0,255,len,0));
      
      
      
      textSize(w);
      textAlign(CENTER, CENTER);
      text(density.charAt(charIndex), i * w + w * 0.5, j * h + h * 0.5);
      
      
    }
  }
  
  
}

基于DOM的ASCII图像

核心代码sketch.js

其中gloria48.jpg为图片地址

// Image to ASCII
// The Coding Train / Daniel Shiffman



const density = "Ñ@#W$9876543210?!abc;:+=-,._ ";

let gloria;

function preload() {
  gloria = loadImage("gloria48.jpg");
}

function setup() {
  noCanvas();
  gloria.loadPixels();
  for (let j = 0; j < gloria.height; j++) {
    let row = "";
    for (let i = 0; i < gloria.width; i++) {
      const pixelIndex = (i + j * gloria.width) * 4;
      const r = gloria.pixels[pixelIndex + 0];
      const g = gloria.pixels[pixelIndex + 1];
      const b = gloria.pixels[pixelIndex + 2];

      const avg = (r + g + b) / 3;

      const len = density.length;
      const charIndex = floor(map(avg, 0, 255, len, 0));

      const c = density.charAt(charIndex);
      if (c == " ") row += " ";
      else row += c;
    }
    createDiv(row);
  }
}

文本特效ASCII图像

核心代码sketch.js

其中图片为gloria48.jpg，文本为gloria.txt

// Image to ASCII
// The Coding Train / Daniel Shiffman


let sourceText;
let poem;
let gloria;
let startIndex = 0;

function preload() {
  gloria = loadImage("gloria48.jpg");
  sourceText = loadStrings("gloria.txt");
}

function setup() {
  createCanvas(800, 800); 
  poem = sourceText.join(' ');
  textFont("Courier-Bold");
}

function draw() {
  background(0);
  frameRate(10);
  
  let charIndex = startIndex;
  let w = width / gloria.width;
  let h = height / gloria.height;
  gloria.loadPixels();
    for (let j = 0; j < gloria.height; j++) {
  for (let i = 0; i < gloria.width; i++) {
      const pixelIndex = (i + j * gloria.width) * 4;
      const r = gloria.pixels[pixelIndex + 0];
      const g = gloria.pixels[pixelIndex + 1];
      const b = gloria.pixels[pixelIndex + 2];
      const avg = (r + g + b) / 3;
      
      noStroke();
      fill(avg);      
      textSize(w*1.2);
      textAlign(CENTER, CENTER);
      
      text(poem.charAt(charIndex % poem.length), i * w + w * 0.5, j * h + h * 0.5);
      charIndex++;
    }
  }
  
  startIndex++;
  
  
}