PYTHON PROCESSING / Working with Image

IMAGE being drawn on top of each other on every loop. Each image is drawn on the position of mouse X and Y. Can you guess what image is this?

Continuing with my Python Processing study. I wanted to touch on IMAGE object real soon because it is one of the most fun topic we can do pretty quickly and easily.

While doing this, I am also looking at the provided example on IMAGE topic and also this YouTube video tutorial by John Park on Processing 3 (Java): https://youtu.be/ddtdPO3m1hw

What I am showing here is pretty basic however important for beginners and I am familiarizing myself with Python language for Processing. Instead of Java.

The whole code looks like below, with some parts commented for you to try yourself:

	# Testing image processing using Python Processing
	def setup():
	size(640, 360)
	global img
	img = loadImage("yoshi1.png") # load and variable of image
	#noLoop()
	def draw():
	# background(20,150,111)
	# image( img, x, y, size_x, size_y)
	#imageMode(CORNER)
	#image(img, 100, 100, img.width/4, img.height/4)
	#image(img, 200, 100, img.width/4, img.height/4)
	#image(img, 300, 100, img.width/4, img.height/4)
	#image(img, 400, 100, img.width/4, img.height/4)
	imageMode(CENTER)
	image(img, mouseX, mouseY, img.width/10, img.height/10)
	#image(img, 0, height/2, img.width/2, img.height/2)

view raw Processing_Image_Basic.py hosted with ❤ by GitHub

Few important notes:

• With Python, we do not seem have to explicitly specify the TYPE of object instance we are creating, in this case the IMAGE type. We simply load the image from path. Python guess the object type.
• We probably need to definte the image variable as GLOBAL
• imageMode(CORNER) or imageMode(CENTER) are useful to set the placement of image
• noLoop() and background() are kind of related. When we allow LOOP and draw() to run everytime and with no background() we will get the image being drawn over and over again each processing run, so we get overlapping result

I really feel that Python language really makes Processing experience a lot friendlier.

A slight modification to the script above and we can get this image below.

Image YOSHI that I borrowed from the Internet. It's PNG so it can have transparency.

Not sure how the whole Processing works together with Python modules or Java modules, but in the basic level, loading image, displaying image and assigning MOUSE POSITION to draw the image is a lot simpler!

There are many other METHODS of IMAGE object type in Processing you can use to modify the image, you can check for image related examples and also the documentations.

I guess the rest is up to you what you wanted to do with image, but this is only touching the very basic of:

- Creating a variable for image type of object

- Loading Image

- Displaying Image

- Drawing Image on specific position

- Drawing Image on mouse position

Enjoy!