{"id":1669,"date":"2014-12-11T01:26:48","date_gmt":"2014-12-11T01:26:48","guid":{"rendered":"http:\/\/41j.com\/blog\/?p=1669"},"modified":"2014-12-11T01:29:28","modified_gmt":"2014-12-11T01:29:28","slug":"simple-example-sdl-emscripten-generating-graphics-c","status":"publish","type":"post","link":"https:\/\/41j.com\/blog\/2014\/12\/simple-example-sdl-emscripten-generating-graphics-c\/","title":{"rendered":"Simple example of SDL in Emscripten (generating graphics from C)"},"content":{"rendered":"

It’s pretty easy to get emscripten installed<\/a>. And straight forward to compile existing SDL code a simple:<\/p>\n

\r\nemcc mycode.c -o mycode.html\r\n<\/pre>\n
Will work. However there are a few things to watch out for when working with SDL. Firstly, Emscripten currently supports SDl1.2 I don’t believe there are any plans for SDL2 support. Secondly you may need to change your code slightly. I tried my previous SDL1.2 example<\/a> and it compiled and sort of worked, but pretty much hung the browser. The issue is that Emscripten doesn’t like infinite loops. In fact the correct way to work in emscripten is register a callback for screen rendering with emscripten_set_main_loop. You can set the required number of frames per second or allow the browser to decide. To use this function you also need to include emscripten.h. Here’s a version of my previous code modified to use this callback:<\/p>\n
\r\n#include <string.h>\r\n#include <SDL\/SDL.h>\r\n#include <iostream>\r\n#include <emscripten.h>\r\n\r\nusing namespace std;\r\n \r\nSDL_Surface *screen;\r\n\r\nvoid renderloop() {\r\n  SDL_Flip(screen);\r\n  SDL_LockSurface(screen);\r\n  for(int n=0;n<1000;n++) {\r\n    int x=rand()%800;\r\n    int y=rand()%600;\r\n    int pixel=rand()*100000;\r\n    int bpp = screen->format->BytesPerPixel;\r\n    Uint8 *p = (Uint8 *)screen->pixels + y * screen->pitch + x * bpp;\r\n    if((x>screen->w)||(y>screen->h)||(x<0)||(y<0)) return;\r\n    *(Uint32 *)p = pixel;\r\n  }\r\n \r\n  SDL_Event event;\r\n  while(SDL_PollEvent(&event)) {\r\n    if(event.key.keysym.sym == SDLK_c     ) { SDL_FillRect(screen,NULL,0); }\r\n  }\r\n \r\n  SDL_UnlockSurface(screen);\r\n  \/\/SDL_Quit();\r\n}\r\n\r\nint main(int argc, char *argv[]) {\r\n\r\n \r\n  if(SDL_Init(SDL_INIT_VIDEO)<0) {\r\n    cout << "Failed SDL_Init " << SDL_GetError() << endl;\r\n    return 1;\r\n  }\r\n \r\n  screen=SDL_SetVideoMode(800,600,32,SDL_ANYFORMAT);\r\n  if(screen==NULL) {\r\n    cout << "Failed SDL_SetVideoMode: " << SDL_GetError() << endl;\r\n    SDL_Quit();\r\n    return 1;\r\n  }\r\n \r\n  emscripten_set_main_loop(renderloop,0,0);\r\n \r\n  return 0;\r\n}\r\n<\/pre>\n
You can compile it using the command above (assuming you save it as mycode.cpp). And you should see the following output in firefox:<\/p>\n
\"emscripten_graphics\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
It’s pretty easy to get emscripten installed. And straight forward to compile existing SDL code a simple: emcc mycode.c -o mycode.html Will work. However there are a few things to watch out for when working with SDL. Firstly, Emscripten currently supports SDl1.2 I don’t believe there are any plans for SDL2 support. Secondly you may […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-1669","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1RRoU-qV","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1669","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/comments?post=1669"}],"version-history":[{"count":2,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1669\/revisions"}],"predecessor-version":[{"id":1672,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/1669\/revisions\/1672"}],"wp:attachment":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/media?parent=1669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/categories?post=1669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/tags?post=1669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}