void samuelbarran(){ specialstudy(0,0,0); creating a rating system(230,255,20);
Void setup(){ Void documents my journey from being a complete processing beginner to being able to work independently and create a rating system that collates data. I was apprehensive of coding at first, I felt it was something I wouldn’t be able to use effectively and had built up a fear of it. I had never used processing before but instantly fell in love with the methodical process and the scope to produce visual outcomes. I wanted to use the special study as an opportunity to learn a new application that will help improve my practice and general skill level. I believe the more I understand a new process the easier it is to apply it to my work and use it practically. While being a total beginner at processing I feel at home on the computer, it’s my favourite tool to create work with so increasing my skill set in this area is highly beneficial for me. I aim to show that processing is an accessible application that you can have fun with while using it. I found that the more code I wrote successfully the more rewarding it became. While I still consider myself a beginner, I feel confident in my ability to create a visual output that compliments my style and practice; } }
ratemystudy.pde
Rate that Shit- Rating System howareu?.pde
How Are U?- Emotion Response
howudoin.pde
How Are U?- Experiment
Void dayone(){ sunshine(0,0,0); My processing journey started on the first day of final year. I was fortunate to learn about processing early on because it inspired my final major project and special study ideas. The class focused on how to setup a processing document and create a crosshair that could move randomly. From that I experimented during and after the lesson with what I could create. Pushing the boundaries and trying things out. This fuelled my motivation to learn new aspects of processing and after the lesson I created a sunshine from the elements we had learnt that day; } Void toptip(){ If you’re struggling to get your code to work make sure you close any brackets that you open. You can do this by clicking on the open bracket and processing will reveal where, if any, the bracket closes; } Void sunshine(){ To create the sunshine I first created the setup, which always starts with void setup(){ size(700,400); //Numbers refer to the x and y axis, measured in pixels. background(0,0,255); //Numbers refer to the RGB values. So far we have a blue rectangular background. R:0 G:0 B:255
400
700
After creating the background we need to create the sun and position it on the canvas. To do this we start with void draw(){ stroke(250,120,84);//stroke colour RGB values fill(250,120,84); //fill colour RGB values ellipse(700,400,300,300); //object name, x and y axis, size of object)
Because we’ve placed the ellipse at 700,400 that means it’s in the bottom right hand corner. If the values were 350,200 the circle would be in the middle of the screen.
30
350,200 0 ,3
00
s ize
700,400
To create an x position & y position we need to go to the start of the code, before void setup(){ and add a float. A float is a kind of variable, I think of it as a way of giving the variable a code name that you can refer to later on. The floats in this piece of code refer to the x & y positions of the lines and ellipse and where they will be when the code is activated. They look like this: floatxpos; floatypos; floatxpos2; floatypos2; They are then identified in void setup(){ xpos=350; ypos=200; xpos2=350; ypos2=200; To create the ‘rays of sunshine’ underneath void draw(){ I add the line & ellipse with stroke and fill values; stroke(225,205,8); //stroke RGB values fill(225,205,8); //fill RGB values ellipse(xpos,ypos,10,10);//position marked with floats, followed by size of ellipse. line(xpos,ypos,700,400);//position marked with floats, followed by length of line. I did this twice so I could create two different coloured rays and it’s why I have two x and y positions that are the same. Once I had all my items ready it was time to create the movement of the rays so that they would shine from the sun.
To do this I added: xpos=random(700);//700 spans the x axis ypos=random(400);//400 spans the y axis This was the full code of the second coloured line and ellipse: stroke(250,120,84);//different RGB values to previous lines fill(250,120,84);//different RGB values to previous lines ellipse(xpos2,ypos2,10,10);//use of secondary floats line(xpos2,ypos2,700,400);//use of secondary floats xpos2=random(700); ypos2=random(400);
xpos & ypos
random
Void toptip(){ In this instance if I wrote the sun(ellipse) last in void draw(){ you would see the origins of the lines in the corner instead of being behind the sun ruining the illusion that they are coming from the sun. Think about layers and the position of the code if you’re not getting the output you expected. } I was really impressed with the visual I was able to accomplish after one lesson and squashed my original fears about coding being too complicated and difficult to learn. The best thing about using random in code is that you have a different visual outcome every time you activate it. } }
Void experiments(){ spaceinvaders(0,0,0); tabletennis(0,0,0); rectangle(0,0,0); Void spaceinvaders(){ Creating the space invaders game was the project that we spent our processing lessons on. Here’s an earlier and completed version of the game. We created every element including the sound effects, score, gun, bullets etc. I was really impressed with the overall project and it helped me develop my rating system massively.
} Void tabletennis(){ Using techniques from the space invader code I managed to create the most unrealistic table tennis simulation ever. The ball stays on the table and bounces off the sides in any direction. I grabbed code from a previous experiment and tweaked some of the values to correspond with the shape of the table tennis table and created a the table in illustrator and added it in using a PImage.
}
Void rect(){ I was trying to figure out how to create a square and put it in the middle of the screen. Having exhausted all the options I found a processing glossary online that had all the terms I needed to create what I desired. To create a square I inputted: rectMode(CENTER);//uses the center of rectangle to position on canvas rect(250,250,300,300);//x & y axis, size of rectangle I able to create a strange visual that is unique every time it’s played.
} }
Void ratingsystem(){ ratethatshit(0,0,0); To conclude my special study I wanted to create a rating system that I could potentially use in my final major project. My goal was to create a five star rating system that would register the clicks it received and add them to a counter. I created two different types of stars with illustrator to use in processing:
line(rat)
full(frat)
Void toptip(){ If you want to add any images or additional data, like I added the stars, you need to create a folder called “data” within the processing folder of your current project and place it in there. That way whenever you refer to a file by name it knows exactly where to look. } Before I create the basic void setup(){ I added in all the rats and frats using PImage: PImage rat_1; //same name as file to avoid confusion PImage frat_1; //same name as file to avoid confusion They are then identified in the void setup(){ rat_1=loadImage(“rat_1.png”);//loadImage is the command that makes processing look into the data folder frat_1=loadImage(“frat_1.png”);//“frat_1.png” is the exact name of the file and repeated for all 10 stars Once the images are in the document and after creating a black background it’s time to position them on the visual, this is done in void draw(){ image(rat_1,35,218,125,125);//rat_1 refers to PImage image(rat_2,160,218,125,125);//x&y coordinates, size These steps are repeated for all 5 rats.
I then wanted to add the title “rate that shit” and a line of text for users to rate; “this rating system” to do this I needed to include my chosen font in the data folder, then using PFont I added it to the code: PFont type; //”type” reference to be used in code It’s then identified in the void setup(){ type=loadFont(“Lato-BoldItalic-48.vlw”); //loadFont is the command that makes processing look into the data folder. //exact font name found in the data folder Once the font has been idenitified it can be used in void draw(){ to add text to the visual: textSize(20); //pt size of font text(“RATE THAT SHIT”,540,25); //what you want the text to say, x&y position textFont(type); //refers to PFont This is repeated this for the other line of text and the counters used to remember the amount of times each star was clicked with the mouse, but to make them count I had to add an interger using int at the start of the code: int score1=0; //score1 is my reference, starts at 0 int score2=0; //score for each star, 5 in total To add them into the visual we go back into void draw(){ and use a similar code to the title: text(score1,65,425); //score1 refers to int, x&y coordinates this is repeated five times for each star, referring to a different score (score1,score2 etc) To make the counters correspond with each star and to change them from rat to frat I needed to create a mouse command using void MousePressed(){ and if statements: if(mouseX>35 && mouseX<35+125){ //creating a hitbox for star, x coordinates + size of star if(mouseY>218 && mouseY<218+125){ //creating a hitbox for star, y coordinates + size of star rat_1=frat_1; //if mouse is pressed within co-ordinates rat turns into frat score1=score1+1;//add one to the counter It’s then followed by two closing brackets so that five more can be made.
At this point I wanted the rating system to run on a timer so that once a rating was selected it would register on the counter then return to rats so that the next user could select their rating. To do this I added a float & some PImages to refer to later: float tstamp;// used to create time limit for each click PImage orig_1;//to be used in alloff(); to reset the stars after each click PImage orig_2;//repeated for all 5 stars Before we can use the PImages we need to identify them in void setup(){ orig_1=loadImage(“rat_1.png”); orig_2=loadImage(“rat_2.png”); //origs are just a different name for the rats so that they can be used to reset the rating system after a click. Then in void draw(){ I added the if statement: if(millis()-tstamp>1000) alloff(); //this statement says that if the tstamp is greater than one second then run alloff(); //processing uses milliseconds to measure time alloff(); doesn’t mean anything at this point so I needed to create void alloff(){ at the bottom of the code. Within it I added: rat_1=orig_1;//rat_1 becomes orig_1 rat_2=orig_2;//repeated for all 5 rats Once this has been created it needs to be added to the start of void MousePressed(){ along with tstamp: alloff();//start with alloff tstamp=millis();//tells the code to look at the if statement At this point the rating system register a click, change the rat a second reset to all rats. Doing problem, if for example star 4 was up but star 1 to 3 wouldn’t:
was working, it would into a frat and after it this way created a pressed it would light
To combat this I created another full star that didn’t have text on it: PImage drat;//“drat” my reference drat=loadImage(“drat.png”); //written in void setup(){ identifies drat from data folder To make the stars change to drat after each click it needs to be added void MousePressed(){, heres star 4’s code: if(mouseX>410 && mouseX<410+125){ if(mouseY>218 && mouseY<218+125){ rat_1=drat; rat_2=drat; rat_3=drat; rat_4=frat_4; //if mouse pressed in the hitbox star 1-3 turns into drat score4=score4+1;//score counter for star 4 adds 1
The rating system was finally full functioning. When the code is activated it collects data using the counters and resets the stars after a second once its they have been clicked. The skills I’ve learnt from creating the rating system has motivated me to create other versions and iterations that could be very useful when developing about my final major project. I feel confident using processing to produce random visual content and interactive material. I will definitely use it in the future to create new and different outcomes. } }