1 / 21

ASCII ART

ASCII ART. Assignment 1. Outline. Introduction to ASCII art Assignment 1 basic part Assignment 1 bonus part Real practice. What is ASCII art? . Use characters to present images in an artistic way. Generated computationally or manually.

kendall
Télécharger la présentation

ASCII ART

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ASCII ART Assignment 1

  2. Outline • Introduction to ASCII art • Assignment 1 basic part • Assignment 1 bonus part • Real practice

  3. What is ASCII art? • Use characters to present images in an artistic way. • Generated computationally or manually. • Let’s see an example which is very popular 4 years ago… • http://www.youtube.com/watch?v=qTlDy1STpdk • http://www.youtube.com/watch?v=zAad2zqvnvI

  4. Assignment 1 • The assignment 1 will require you to write a program to turn an image into ASCII art. • The assignment will be divided into 2 parts: basic part and bonus part. • The basic part is very very easy! • The bonus part takes little percentage.

  5. Read input • We provide a file ascii.cpp containing a function to read input from images with ppm format. • For example:BYTE3 *image_data=LoadPPMImage("D:/m1.ppm"); • The function return a struct pointer pointing to image data.

  6. Access image data • The struct is also simple: • struct BYTE3{ unsigned char x; unsigned char y; unsigned char z;}; • The x, y, z represent RGB channels. B G R

  7. Access image data • After calling the LoadPPMImage function we get all image data into image_data. • At the same time the height and width is stored in 2 global variables image_height & image_width. • The image data is stored in an 1-D array way. • For example, to access G value in 13th row 7th column:image_bm[7+13*image_width] • We have 0th row and 0th column.

  8. From RGB to gray • All above are the basic knowledge. • Next we need to convert a color image to a gray one. • We use the formula:gray value = 0.299 * R + 0.587 * G + 0.114 * B

  9. Quantize the gray value • Next step is to use only 10 values to represent the image. • It can be achieved by:quantized value = floor(gray value / (255/10)) (Special handle that when quantized value = 10,force it to be 9) ‘6’ ‘7’ ‘0’ ‘2’ ‘9’ ‘1’ ‘3’ ‘4’ ‘5’ ‘8’

  10. Map to characters • The final step is to map the values to characters. ‘6’ ‘7’ ‘0’ ‘2’ ‘9’ ‘1’ ‘3’ ‘4’ ‘5’ ‘8’ ‘-’ ‘^’ ‘#’ ‘O’ ‘’ ‘$’ ‘=’ ‘+’ ‘|’ ‘.’

  11. Bonus part • One thing is worth doing, which is to deal with large image. • First compute in final result how many pixels one character representing. • Then average the gray in the area. • Another thing is to read the paper below and try to implement it:http://www.cse.cuhk.edu.hk/~ttwong/papers/asciiart/asciiart.html

  12. Submission • Zip ascii.cpp, ascii_bonus.cpp, ascii.exe, ascii_bonus.exe and the directory of images you found suitable to do ASCII art. • Submit through elearning system:http://elearn.cuhk.edu.hk • That all about the assignment 1.Next are something for interest.

  13. Real practice • All above are about ASCII art for one image. • How to do something cool so that you can show off? • Let’s turn a video into an ASCII art!http://www.cse.cuhk.edu.hk/~xymao/

  14. Get frames from video • Here I recommend a software named “ffmpeg”. • It is a powerful software for handling multimedia data, and it is free. • Google, download and install it. • Next I’ll use windows system as example.

  15. Get frames from video • Write a .bat file in the same dir with ffmpeg.exe:set /p output=output:ffmpeg-i "ba.mp4" -r 8 -vcodec ppm "%output%“pause • Run the bat file like this:

  16. More about ffmpeg • ffmpeg can do a lot of things like: • Resize the image • Handle almost all types of image, audio, video file.In the example I extract frames from mp4 and saveit as ppm. • It can also turn a sequence of images into video. • Try it out yourself!

  17. Display on html • We need to use program to write a html file. • write_head(f);write_script(f);for loopfprintf(f,"%s","<pre>\n"); /* your code to write ASCII art image*/fprintf(f,"%s","</pre>\n");write_foot(f); Put ASCII image in <pre> tag

  18. Html head • fprintf(f,"%s","<html>\n<head>\n\<style type=\"text/css\">\n\pre{ font-size:8px;line-height:0.8;background-color:#fff;}\n\body { background-color:#000; }\n\</style>\n\\n</head>\n<body>\n"); In <style> tag to set attributes of other tags

  19. Html foot • fprintf(f,"%s","</td>\n<td>\n</td>\n</tr>\n</table>\n<audio src=\"ba.mp3\" autoplay loop ></audio></body>\n</html>\n"); Auto play <audio> tag

  20. Script Get all <pre> tags which is frames of the video • We use javascript to play the video: • <script type="text/javascript"> • window.onload=function(){ • var frames=document.getElementsByTagName('pre'); • var length=frames.length; • var current=0; • vardoframe=function(){ • frames[current].style.display='block'; • frames[(current-1+length)%length].style.display='none'; • current=(current+1)%length; • }; • for(vari=0;i<length;i++)frames[i].style.display='none'; • setInterval(doframe,1000/8); • }; • </script> Set all frames invisible at beginning Call doframe for every 1/8 second doframe function to display current frame and hide previous one

  21. Appreciate your own work! • PS: We prefer exe file produced with 32-bit system, but 64-bit will also be accepted. • PS2: Some version of visual studio may add \r before \n automatically, so you just need to print \n in code, to make sure the exe produce the same output as sample output. Actually we do not care about whether it is \r\n or \n, just to ease the grading. • PS3: If your exe doesn’t work or can’t produce the same output as sample output, we will look into your cpp file. We will try hard to give you full mark.

More Related