Just a game…
Oct 27th, 2015 by Red Lion

This Monday we were asked to complete a small task on Processing…together with Tom we wrote a “Raindrops” programme, in which small circles fall from top of the screen to the bottom with random speed, and return to the top again when they reached the bottom.

Tom wanted us to write some codes to make something happen when the raindrops collide. He said we only needed to work on it for an hour, and if we didn’t complete this task within an hour, we can ask him for help.

Alright, so I tried to look for some examples with collision. And I found this “Bouncy Bubbles” on the official website. I then found the code for collision and tried to figure out how it worked. I knew I couldn’t just paste and copy…and I used an hour trying to find out what this “others[i]” here stands for…and I still didn’t know. I’m going to ask for help 😀

Click here to watch “Bouncy Bubbles” and read its code.

Somehow I managed to find out something even more interesting when looking for code examples. Look at this example here. This one taught me how to draw afterimage for moving objects!

And of course when I was struggling on the collision code I came up with something else. In fact I knew how to detect the raindrops’ collision with something else, but I didn’t figure out how the raindrops detect the other raindrops…and so I made a small game. It’s like meteor showers fall from the top and you’re controlling a UFO and you need to try to avoid the meteor rocks. If hit, the background will turn red. Detecting collision of “raindrops” (meteors) and the UFO is fairly easy. And I drew afterimages.

2015-10-26 17-43-37


And now, to share my code:

The first tab:

Raindrop [] drops;

void setup(){
//i want how many drops
drops = new Raindrop[20];
//from 0 to as many (drops.length) as I have
for(int i=0;i<drops.length;i++){
//make new raindrop to fill up the list
drops[i]=new Raindrop();

void draw(){
rect(0,0,800,600);//these two lines make the fading afterimage effect. The trick is to draw a half transparent background in every loop


for(int i=0;i<drops.length;i++){


 The second tab:

class Raindrop{
float x;
float y;
float speed;
PImage img = loadImage(“ufo.png”);
float angle;
//a setup for an object
y = 0;
//set x position random between 0 – screenwidth
x = random(width);
speed = random(5,10);
void collision(){
translate(mouseX, mouseY);//set coordinate origin to mouse position
rotate(angle);//make a rotating UFO
image(img, 0,0,50,50);//I drew a UFO sprite
if(dist(x,y,mouseX,mouseY)<30){//detect collision. 30 is “UFO radius + raindrop radius”
rect(0,0,800,600);//the red background when collided with meteor

void move(){
x=random(width);//this wasn’t here before, but I found out that if I didn’t add this, the x positions of the raindrops would never change, thus causing a dead angle in the game
void display(){

It’s funny how British teachers give their assignment. In China, most assignments are revisions of what we’ve learned in the class. In Britain however, although what learned in class is included in the assignment, but more of  it is to explore and do research by the student himself (I don’t know whether this applies to all programmes, or just our programme). And during this process we might find interesting stuff. I guess that’s creativity.


About yesterday’s meeting
Oct 20th, 2015 by Red Lion

One thing here different from China is that teachers communicate with students by sending emails…back in my home country they would rather use text messages (because text messages are really cheap in China…only 1p/message). And so Tom scheduled this tutorial thing for me and sent an email, but I didn’t reply, and the day before the meeting he sent me another email complaining why I didn’t reply…



translation: I’m so scared that I hid myself

This tutorial was actually a small meeting in which we discuss our ideas about the programme and stuff we were interested in (I was wondering how Tom and John chose students? They got Vera and I separated!). Tom introduced Google Scholar to me. It was totally great! Better than university library search! With that I found more articles based on my favourite stuff. Besides that he also told me that I can find relevant papers by looking at the references at the end of the paper, which was pretty convenient, and how to judge whether a paper was well-written. And we also discussed about taking notes, which could be very very useful when writing my final dissertation. I remember when I was writing my undergraduate final dissertation, most of my references were books instead of papers. Anyway, I used to take few notes (I would prefer underlining important parts instead), but I guess it’s time to change…after all these papers are all in English and English is my second language…anyway, sorting these papers out by writing notes will make it easier for citing them in the future.

And after that I expressed the idea that I could not understand noise music and hacking as art…these electronic art (that’s a video game company!) practices. John really loved these stuff (and I accidentally found out that he loved chess). Tom introduced this Korean guy Nam June Paik and NIME(New Instruments for Musical Expression) to me. I went home and googled these. I watched some videos. They were funny, but still, I could not appreciate this kind of art…perhaps they were just not my dish. Just like some people dislike NPR, saying this technique is going backwards (3D to 2D). However, still many people appreciate the unique visual effects of NPR. Surely some other people appreciate noise art. I’d rather listen to my neo-classical music (which one of my classmates hates).


It’s getting pretty late today. I’ll talk about my specific ideas about experimental music and contemporary arts later sometime. Going to bed now 🙂

NPR rocks!
Oct 19th, 2015 by Red Lion

The first time I heard of the term “Non-photorealistic rendering(NPR)” was after I arrived here in the UK. Before that I would rather call it “2-dimensional rendering” or some sort. Or “cel-shading” (though cel-shading is only one of the NPR styles…anyway cel-shading is my favourite). I used the library search and found some research papers based on NPR and I really liked one of them.  This paper was a research about peoples feelings about whether an image was hand-drawn or computer-generated. The rendering was pen-and -ink style instead of my favourite cel-shading style. It’s funny when the participants expressed their different ideas…and I think there’s still a lot to work on pen-and-ink rendering because they really look…unreal (huh?!). Err, the paper was written in 2006. I’m sure artists have made breakthroughs within these years= =[*and one thing I would like to shout is that this paper is much easier to understand than that essay Tom gave us last week!!! lol I guess I’m only used to science research papers and not those philosophic ones…after all both my parents are scientists and I read their papers when I was in primary school(are you serious!?). It’s kind of annoying that these NPR papers are all computer science studies instead of art and design studies…I know computer science is cool, but I really don’t like the idea that computer stuff is only computer stuff!*]

The reason why I love NPR so much was all because was the fabulous game Guilty Gear Xrd. No one would ever notice it was made of 3D models at first sight! Unless they could spot those polygons! Yes, polygons!! And also, have a look at this forum HERE – players talking about the graphics of the game.

a916daf1c8aac2f66e0a92b3e0d85ad91420930150_full Faust总017-500x323



Of course NPR is nothing new but we’re trying to find easier ways of rendering, create better software plugins and discover the aesthetics within this digital technique. I would say that Legend of Zelda: The Wind Waker was actually an experimental work of NPR rendering…it used cel-shading, and, err, was horrible, to be honest, though I’m a huge fan of Zelda series. The creative point was that it made the characters’ facial expressions much more complicated compared to using ordinary facial textures and ordinary Phong shading. I mean, it was more like cartoon. The characters eyes can become very big when astonished, and even their pupils could change size – and move, of course. But one thing I don’t understand is, why didn’t they draw the character’s outlines? It would be much better with outlines! Cel-shading without outline just looks stupid. This game was published in 2002.Oh, and one more thing, this game was remade in 2013, and the graphics improved. But this time it was not pure cel-shading as before. Ambient  reflection lights has been added, which may seem pretty strange when combined with cel-shading, but in fact the 2013 version looks much better. Even without the outlines…if you want to find out about the “ambient reflection light” I was talking about, please visit this site and click “Watch the trailer”.

2015-8-19 16-44-16 174720_69512732


Other examples of NPR games are: Okami, Naruto Ninja Storm,  Borderlands, Dragon Ball Z Budokai, Prince of Persia 4 etc. One thing special about Okami is that it not only used cel-shading but also used pen-brush rendering style for the outlines of the 3D model, making it look like traditional Japanese water-and-ink paintings. I’m not putting all of these screenshots here… if you’re interested, please google 🙂

If I have time I’ll post a translation article about techniques of NPR used in Guilty Gear Xrd or Naruto Ninja Storm. I found those two on Chinese game forums.


Hello, Processing
Oct 12th, 2015 by Red Lion

And finally we started to learn Processing today! However I forgot to bring my laptop because I thought the laptop was for the Workshop session in Tuesday *lol*

Before Processing was introduced we had a discussion about mapping. Tom sent each student an email with an article attached, titled “The map is the territory”. It was quite a difficult-to-understand article, with loads of philosophy terms…I googled for some information about “the map is not the territory” theory, and after reading those I seem to have figured out what that article was trying to say..well, I guess.

2015-10-12 16-13-47


Then we were introduced to Processing, a programming software invented for digital artists. There was an example available for download. It was a streetview programme. I tried to change some of the codes after I returned to my accommodation, but things kept going wrong…anyway, the code was easy to understand. Just a window showing a group of images one by one and loops forever.  And you can control frame rate. A good beginning, I guess?

Hello world!
Oct 9th, 2015 by Red Lion

Welcome to Newcastle Digital Media Sites. This is your first post. Edit or delete it, then start blogging!

»  Substance:WordPress   »  Style:Ahren Ahimsa