Skip to content

Tag: Pixelart

OpenPixels: simple sprite sheet with Processing

/**
 * Openpixels example in Processing.
 * This simple example of how to get a sprite 
 * from a sprite sheet.
 */
 
PImage bg;
PImage sprite_sheet;
PImage player;
 
void setup() { 
  // load images
  bg = loadImage("kitchen.png");
  sprite_sheet = loadImage("guy.png");
 
  /* The sprite size is 32x49.
     Look guy.png, the "stand position" is at (36,102). */
 
  player = createImage(32, 49, ARGB);
  player.copy(sprite_sheet, 36, 102, 32, 49, 0, 0, 32, 49);
 
  // set screen size and background
  size(bg.width, bg.height);  
  background(bg);
 
  frameRate(30);
}
 
void draw() { 
  background(bg);
  image(player, 100, 50);
}

See more at OpenPixels.

simple HTML5 animation: clouds over background

If you are reading this text, sorry, your browser don’t support HTML5 Canvas (or maybe I did something wrong).

Code:

var canvas;
var ctx;
 
var background;
var width = 300;
var height = 200;
 
var cloud;
var cloud_x;
 
function init() {
	canvas = document.getElementById("cloud_demo_canvas");
	width = canvas.width;
	height = canvas.height;
	ctx = canvas.getContext("2d");
 
	// init background 
	background = new Image();
	background.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/forest.png';
 
	// init cloud
	cloud = new Image();
	cloud.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/cloud.png';
	cloud.onload = function(){
		cloud_x = -cloud.width;
	};
 
	return setInterval(main_loop, 10);
}
 
function update(){
	cloud_x += 0.3;
	if (cloud_x > width ) {
		cloud_x = -cloud.width;
	}
}
 
function draw() {
	ctx.drawImage(background,0,0);
	ctx.drawImage(cloud, cloud_x, 0);
}
 
function main_loop() {
	draw();
	update();
}
 
init();

HTML code:

<canvas id="cloud_demo_canvas" width="640" height="480">Alternative text if browser don't support canvas.</canvas>

Credits and notes:

bug invaders

Sem dúvida os post-its nos tornam mais ágeis e são indispensáveis para metodologias que fazem uso de dashboards como Scrum. Mas o que fazer com as toneladas de post-its que são gerados e descartados? E o impacto ambiental? E o meio ambiente? E as araras-azuis?

Eis minha intervenção artística no escritório. Bug Invaders (sugestão de nome do Diego “Diegão” Andrade), nada mais justo já que umas das funcionalidades dos post-its é manter um rastro dos bugs e issues em aberto.

  • Lixo é ressignificado em arte (ao menos por um período antes de virar lixo outra vez).
  • Deixa o ambiente mais divertido.
  • Pixel art! Foram gastos 48 pixels.
  • Nostalgia.