Discover Top Posts Tagged with #drawing with code

Brief History of Code Cartooning

1992: As a cartoonist, I wanted to see my computer make randomly generated comics. It sounded fun and easy. And like the wrong way to do comics.

With books and a laser printer, I learned to code (a little) in PostScript. The idea was: make a grid of panels that resembled comics, using simple shapes and nonsense text. The page above was made by about 600 lines of code. Half of that was for making the words. And it used only 5 shapes: box, circle, line, round-box, and word-balloon.

1993 - 1995: Thrilled with the idea that code itself could write and draw, I kept experimenting with randomly generated comics. I added more elements to the code for art and writing, and did comics for an entertainment tabloid newspaper (Chris Lauer’s Anthem Monthly).

Each month I changed the program to write a different kind of story or panel sequence. Usually the first and last panels were different from the rest. Some readers enjoyed the random digital comics. Others were puzzled, not finding standard stories and punchlines.

The Comics Journal #171 ran a brief write-up on my code comics work.

1996 - 1998: Feeling the limits of a one-page grid, I revised my random comics-making code so that it could allow scripting (random or non-random), varied page layouts, and multiple pages.

Using that new code, I wrote a script to show the program's various page layout and drawing features. It included some built-in panel types, shapes, figures, and backgrounds. (PDF here.)

1999: I added color, for RAN DUM LOOP. This program ran on a Mac in a gallery. It writes and draws random comics and cartoon art onscreen endlessly.

The colors, compositions, poses, words and sentences change constantly. Because it uses random combinations of many basic parts, you never see the same drawing twice.

1998 - 2003: I wrote code to make little multi-page zines (unpublished) of random digital comics sketches, fragments, and works in progress. These booklets were in black-and-white or color. Some became my reference for making more complete artworks later.

2002-2004: For art competitions and gallery shows, I began writing code to make full-color poster-size art prints (one-copy editions). Acrobat Distiller made (non-random) printable PDF files, from my random source code.

2005: Wanting to share my code art with others led to publishing RAN DUM 1, a 28-page color zine of random digital comics and random digital art prints.

2010 - current: I found print-on-demand online printers (Blurb, Lulu, and PrestoPhoto), where I could print randomly generated full-color sketchbooks. I’ve made 40 sketchbooks, printing one copy each. (So far, about 8000 pages.)

2012 - current: I started a Tumblr blog, “CodeCartooning”, for sharing my code art experiments. I've posted pages from my random code art sketchbooks,

...and some animated gifs (done with Canvas & JavaScript).

2014 - current: I began adding code (Web Audio API) to generate sound in my web-browser based video animations. YouTube channel: poundart1

#process #drawing with code #john pound #generative art #randomly generated #code art #sketchbook #video #gif #animation #books #zines #comics

Glitch Art . White on White . InTangible Spaces

Data Sketches

#glitch art #Data Sketches #Algorists #pixel art #drawing with code #creative coding

Tiny Code Art App #01

In 40 lines of JavaScript code, make a web art app. (40 lines = 1 page.)

Here, an animation loop draws simple jit boxes on a web page. Colors, size, and positions are random. It has 3 button controls:

start / stop animation

clear each frame, or accumulate boxes

save a frame as PNG image, lower on the page

First, here’s the HTML part. It makes a web page, with a blank canvas and 3 buttons. (No art yet.) In a text editor, create a new document. Add this code. Save as a plain text file, ending in ".html" (like "app01.html").

<!DOCTYPE html> <html> <head> <title>Tiny Code Art App #01: jit boxes</title> <style> /* CSS for position, size, border */ canvas {display:block; margin:auto; border:1px solid #888;}/* centered */ div {margin:auto; text-align:center; background-color:#eee; padding:3px;} img {margin:2px; max-width:22%; border:1px solid #888;}/* smaller */ </style> </head> <body> <canvas id="canvas1"></canvas> <div> <input type="button" id="gostop" value=">" /> clear: <input type="checkbox" id="clearit" /> <input type="button" id="makePNG" value="-> PNG" /> </div> <div id="exports"><hr></div> <script> // JavaScript goes here </script> </body> </html>

You don't need the <style> section, but it makes the page look better.

Now, here’s the JavaScript code, in 40 lines. Put it between the <script> tags. It does the art and animation. And it tells the control buttons what to do when you click them.

// controls: animation on/off, clear-frame on/off, export PNG document.getElementById("gostop").onclick = function(){// animation var uu = u, drwng = uu.isDrawing;// local scope vars if (drwng){clearInterval(uu.drawProcessId)}// stop anim loop else {uu.drawProcessId = setInterval(uu.draw, 1000/uu.fps)}// start document.getElementById("gostop").value = drwng ?">":"||";// button uu.isDrawing = !drwng;// toggle boolean } document.getElementById("clearit").onchange = function(){// toggle var el = document.getElementById("clearit"), bool = !u.clearFrame; el.checked = u.clearFrame = bool;// update } document.getElementById("makePNG").onclick = function(){ var doc = document, myImg = doc.createElement("img");// start an img myImg.src = cnvs.toDataURL();// copy canvas art to it, doc.getElementById("exports").appendChild(myImg);// add it to page } // setup canvas, context, size, vars for drawing var cnvs = document.getElementById("canvas1"); var c = cnvs.getContext("2d");// c is short for context var w = c.canvas.width = 500;// set canvas size var h = c.canvas.height = 500;// w,h short for wide,high var u = {};// object holds vars for user controls u.isDrawing = false; u.clearFrame = false;// if false, art accumulates on canvas u.fps = 10;// set frames per second // color + drawing functions, using randomness: function randcolor_hexstring(){return '#'+('000000'+ ((Math.random() *0xFFFFFF)|0).toString(16)).substr(-6)} u.draw = function(){// 1 frame of animation art if (u.clearFrame){c.clearRect(0,0,w,h)}// erase previous frames? var r = Math.random, w2 = r() *.67*w, h2 = r() *.67*h;// random size from w,h var x = r() *(w-w2), y = r() *(h-h2);// random position from remaining space c.fillStyle = randcolor_hexstring();// random color c.fillRect(x,y, w2,h2);// draw and fill rectangle }; document.getElementById("gostop").click();// start drawing

Save the file. Open in a browser. Click buttons.

If you make a PNG, you can drag it to your desktop (in Mac OS) to save it.

#tutorial #drawing with code #javascript #html5 canvas #code art #generative art

Via Elkelk on Ello

#ello #artist on ello #art #drawing with code #design #digital art #code

Your color palettes are always so perfect. I imagine some of that has to do with your taste and the panels you choose to post, but how much control or influence do you have over the outcome of colors selected in the code itself? Are there nested conditionals at play or is it for the most part totally random? Love your work! Thanks.

Thank you!

For my blog, I do select pieces that I like better than others, from my sketchbooks. Colors are part of that.

Very rarely, I will tell my code to use certain colors, or a certain color scheme. (Like a sepia tone palette for an antique effect.)

Mostly, for variety and surprise on each page, I have the code choose a palette randomly from a big list of possible color palettes I’ve made for my code. (Those are fun to come up with.) And then the code chooses colors randomly from the palette, for general categories of stuff it draws: figures, eyes, things, skies, grounds. These overall color choices bring some unity to the art.

(Although sometimes it can draw things in totally random colors.)

#process #drawing with code #colors

MORE THINGS CODE DRAWS

boxes

couples

crowds

darkness

deserts

floors

gradations

grids

loops

mixes

patterns

rainbows

shards

smokestacks

spirits

stripes

tables

talking

triangles

tridents

the universe

walls

waves

wireframes

zaps

50 more things with links are listed here.

#101 things #code art #drawing with code

Thanks , Sent you an email!

floatingwoo:

I am interested in creating animation loops using code and posting them on tumblr. I have worked in Flash - actionScript, worked through some courses on javascript, currently I work with a drag and drop game engine called gameSalad. None of which would enable me to output it to anything I could post on tumblr.

The best I can do is make a screen recording using quicktime and that just looks like crap.

My question to you is …can you tell me what your process is? Or rather than rob me of the thrill ….Can you point me in the direction for learning it on my own?

I see you are using javascript and HTML5 Canvas, does the latter allow you to output in some format that can be posted, or do you have to bring it into another application?

I’ve enjoyed your art!

You asked how I record animations for sharing on Tumblr. I have made GIFs and a few videos. I’ve tried a few ways:

GIF method 1 – PNGs to Photoshop

For GIFs, the first way I tried was making my web animation code draw and export each frame as a PNG. I grab each frame, and drop it in a folder, re-numbered sequentially (an automated action attached to the folder can do this). Then I import the sequence in Photoshop as an animation, and export as a GIF. More details.

GIF method 2 – JavaScript helper file

The second way I make GIFs is to use JavaScript code that others have written.

There is jsgif . It kinda slow. And colors vary in some frames. Sometimes it fails.

GIF method 3 – JavaScript helper files, web workers

and there is gif.js, with gif.worker.js . It’s fast, but (because it uses web workers) I have to upload my code and the js helper files to a workplace on my website, rather than running them locally on my computer. Colors vary in some frames.

Video method 1 – JavaScript record WebM, convert

For videos, I found whammy.js can record Canvas animations, in Chrome, into a WebM format. Then I use a paid app (like Bigasoft Total Video Converter, on Mac OSX) to convert it to MP4 for Tumblr. Make video width greater than Tumblr dashboard, or Tumblr will enlarge video, turning it super grainy!

Video method 2 – record screen area

The other method for video is using a paid app (SnapZ Pro X, on Mac OSX) for screen recording. I choose what size area to record. It records as a MOV. I can trim off the beginning or end in Quicktime Player. I upload to Youtube, then embed in a Tumblr video post.

#process #drawing with code #javascript #html5 canvas