Tag Archives: Pixelart

1

Posted by Silveira on 8 January, 2012 Comments Off

OpenPixels: simple sprite sheet with Processing

Posted by Silveira on 22 August, 2011 No comments

/**
 * 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

Posted by Silveira on 2 June, 2011 16 comments

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:

Fluffy Clouds by Daniel Gregory Benoy under GNU GPL 2.0/GNU GPL 3.0/CC-BY-SA 3.0 license.
Background tiles by me. See the Open Pixels project. CC-BY-SA 3.0 license.
Code by me under GNU GPL 3.0 or CC-BY-SA 3.0 license
To embed the JavaScript in a WordPress post compress it to one line.
Thanks to Mozilla’s HTML5 tutorial and James Litten’s Tutorial “Moving Shapes on the HTML5 Canvas With the Keyboard”.
If you could not see it here, try this simpler page.
Tested in Google Chrome 10.0.648.204. Worked or not worked in your browser? Please comment.

Openpixels – Chars

Posted by Silveira on 19 May, 2010 5 comments

As the big subject now is soccer world cup, the main brazilian team uniform is now available on the project.

Here a example of character:

Gimp source file: open_chars.xcf

bug invaders

Posted by Silveira on 22 April, 2010 No comments

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.

Openpixels – Chars

Posted by Silveira on 23 December, 2009 1 comment

Now I’m calling this set of free and open art for my and others games I draw just by Openpixels. And to celebrate this and Christmas, here’s a pixel art game style Santa Claus. I hope he bring a lot a pixels in his bag.