Category Archives: Int Programming
Publishing a Processing sketch
Please follow these instructions for publishing your Processing sketches in the blog:
1.- Connect to IAAC’s FTP with your favorite FTP software.
2.- Upload the Processing files (.pde) to your folder (optional: create more folders inside yours to have your sketches orginized)
3.- In the WordPress admin panel create a New Post and make sure that the content field is in HTML mode (not Visual mode)
4.- Type the text you want as an explanation of the task and include a canvas tag indicating the path to your file in the attribute data-processing-sources
5.- Add to the canvas tag the width and height attributes indicating the size of your processing canvas
6.- Add categories and tags to your post… and we are good to go! (I mean, click the Update button ;)
Here is an example, your canvas tag should look something like this:
<canvas width="640" height="480" data-processing-sources="http://legacy.iaacblog.com/intprocessing/cristobalcastilla/T03_02_ClockAnalog.pde"></canvas>
You should see the following sketch:
FYI: we’re using Processing JS to make processing sketches work in the browser. Please visit the plug-in’s page to read more info about it.
Class 1 – Exercise – Drawing flags
Draw the flags according to the following rules:
- Draw them in order of difficulty (from top to bottom)
- Try to use as little polygons as possible
- Be as precise as possible with the colours and proportions of the elements
- Draw one flag per sketch. The size of the sketch should be 190 x 120 px.
flags
The first exercise of programming fundamentals (together with Cristobal Castilla) was to code flags, which introduced us what processing and programming is and how to get images out of range of numbers and letters. There were 16 flags to make. For example, that’s how Catalan flag looks like in code:
void setup() {
size (190, 120);
}
void draw(){
noStroke();
fill(255,223,58);
rect(0, 0, 190, 120);
fill(255,12,13);
rect(0,13,190,14);
fill(255,12,13);
rect(0,40,190,14);
fill(255,12,13);
rect(0,67,190,14);
fill(255,12,13);
rect(0,94,190,14);
}
And these are all flags made by Processing:
Also posted in Exercises, Gerda Antanaityte, Students Tagged flags, gerda antanaityte, iaac, processing Comments closed