Tim Dickson – Blog 14

In the final week of the semester, I continued to work on my generative system assignment. I still had to do the following:

  • Draw a sun that is displayed behind the clouds.
  • Put measurements on the thermometer and make it display the temperature of the current city.
  • Allow the user to change between cities with the arrow keys or buttons
  • Make the clouds move based on the current city’s wind speed.
  • Make the clouds continually generate, instead of stopping at 200
  • Determine the current condition and animate it.
  • Populate the animation with images of each existing city, as well as more cities depending on how much time I had.

I started off by looking at how to draw a sun. I could’ve drawn a bright circle in the sky, but I wanted to make it more animated, like it was constantly burning. I wasn’t sure where to start, so I looked online to see if anyone had done something similar for inspiration. I found an example on Open Processing, which did exactly what I wanted my sun to do except this one was done using processing rather than p5.js. After reading through the code, I was able to understand what was going on.

Processing Sun.png

I realised how similar processing was to p5.js and I was able to determine that:

  • void is the same as function.
  • size is the same as createCanvas.
  • All of the floats, ints, etc. needed to be turned into variables in p5.js
  • dist is a preset variable in p5.js so it wouldn’t work properly, I had to change its name to something else.

The example made the user press the spacebar to generate a new drawing every time, where I wanted mine to keep changing continuously so I left the loop in mine and didn’t put in any user control, I just followed the way that they drew it to get a similar effect. I decided to keep the sun in the same spot in each location instead of making it random as well, in case it were to show up in front of an object in the background image and not look as effective.

I then looked at drawing the measurements on the thermometer. I created a loop that would divide the height of the thermometer tube by 50 and draw a line in every instance. I wanted some form of numerical element though as well to make the identification easier so I thought about how I could do that. I remembered once using a formula that would check if a number was divisible by another number by determining if the remainder of the division was 0, so I looked that up and found the answer on W3 Schools. You can use a percentage sign to check the divisibility of a number like this:

if (number % 5 == 0) {

}

In this case, if the number variable divided by 5 returned a remainder of 0, it would therefore be divisible by 5 and would run whatever is inside the if statement. So this is what I used for my thermometer, if the number was divisible by 5 it would display it as text, else it would display it as a line. I then drew a box over the top of the red mercury on the thermometer, with a height that is controlled by the temperature. I tested it on several locations and the accuracy was perfect.

My assignment then looked like it was really starting to come together as you can see below, note that I took the cloud for loop out so that it only displayed one cloud and I could see what I was doing with the sun and temperature. I also removed the temperature text as I had determined that my thermometer was working correctly.

Generative System F.png

I then looked at adding user navigation in. This was easy as I had already done similar things in previous examples. I used my flow and response example, where a new bouncing ball was generated every time the user pressed the down arrow on their keyboard, to write code that would increase and decrease the currentCity variable whenever the user pressed the left or right arrow keys. I then used the Spider-Man colouring in example, where I had buttons to change colours, to create buttons that would do the same as the arrow keys on the keyboard.

This worked straight away but I had to set conditions for it to loop once it reached the end of the array (go back to the start after it reaches the end, or to the end from the start if going backwards), otherwise it would crash. This was fairly easy too, I just had to set the currentCity to equal 0 if it went over the length of the cities array, or set it equal to the length of the array if it went under 0.

As I was navigating through the different locations, the thermometer was jumping straight from one value to another, so I thought I might try and make it a little bit nicer. I put in another variable which checked whether the new temperature was greater than or less than the temperature of the previous city and then lowered it or raised it gradually instead of instantly, creating a nice animation effect.

The next thing that I wanted to look at was the clouds. So far, I had only been able to create so many before they would disappear, and I couldn’t get them to move based on the wind speed that I had retrieved. I ended up fixing both of these issues by making the x position of the cloud reset to a new position whenever it hit the width of the canvas, and setting the windSpeed variable before any of the functions so that it was accessible to the cloud function.

Generative System G.png

I now had everything working as I wanted it to apart from the last bit of text left on the screen – the condition. I needed to create if statements that would run animations based on the retrieved condition, and I also needed to create new animations for:

  • Storm clouds.
  • Rain clouds.

I also noticed with my animation that sometimes when changing to a new city for the first time, the graphics would build up on top of each other and look messy until the image loaded properly. I realised that this was because I was loading the images in the draw function and not in my preload function. I moved the bit where it loads the images into the preload function, and created a for loop which stored each one in an array. However, this array was relying on a number value so I had to take the shuffle function off my array of cities in order for the numbers to line up with the images array. Instead of having the cities display in a random order each time, I now made the first displayed city random and then the rest alphabetical.

Generative System H.png

I ended up managing to show rain and lightning in the animation as well. I originally started off trying to display rain in a similar way to the clouds, with different blue ellipses falling all over the screen. I found it hard to replicate because when you clicked into a rainy city, the rain clouds would start rolling in but the rain would start displaying all over the screen, even where the rain clouds hadn’t reached yet. I need some kind of way to make the rain start scrolling in with the clouds and then stay on the screen whilst it is raining and then scroll back out again when you click into a non-rainy city. When playing around with it, I found that placing angled, white strokes all over the screen that display randomly looked more effective and it was easier to implement. I also decided to make the city condition change instantly, rather than trying to make the rain adapt to the new condition scrolling through. I thought that in doing this, the user won’t be given any false impressions about the weather conditions because they will instantly be shown when the button is pressed and they won’t have to wait for the new condition to roll onto the screen. It also allows them to navigate the interface whilst understanding the conditions more quickly.

Generative System I.png

When thinking about how to replicate the lightning during a thunderstorm, I decided to have a look at Open Processing again for inspiration. I found this example, which keeps on drawing a new line to different x positions until it reaches a certain height, creating a line that keeps changing direction as it falls. I thought that this was a very good representation of the way that lightning acts so just like with the sun, I decided to base my animation off of the Open Processing example. This worked effectively, and I found this screenshot in particular very interesting, looking like the lightning is striking a ferry on the harbour:

Generative System J.png

When showing my work to my tutors and peers, I received feedback on how it was an interesting concept (particularly with the animating thermometer), and how it was good to have the API working in there. However, Paris was cloudy with a wind speed of 0 at the time, meaning that the clouds were blocking the sun and not moving themselves, so there was no animation at all to offer to the user (this was the first time that I had come across a situation like this). I asked for feedback on how I could make situations like this more interesting and I was told that it might make it better if more information was shared so that there was more to look at in each city. My aim for this project was to create a visual generation rather than text, hence the removal of all of the text I had in the animation when I was testing it, so we thought that maybe I could show the time and create a dark overlay to show whether it was night time or day time in that city. I also didn’t really want to take too much away from the real factual information that it was giving by making it display something completely random. This may not have been offering much more animation wise, but at least it would offer the user more interesting things to take in and it would mean that it would be acting as a clock as well, rather than just a barometer. I also believed that once I populated it with more cities, it would offer a more interesting experience because the user could keep clicking through the different cities rather than looking at the same four. With only two days left until it was due (in which I had to go to work all day on both of those days), and the blogs due on the same night, I decided to have a go at adding these in as well.

I came across a few difficult situations. Firstly, I was receiving no single time value back with the weather data, only a string that had the date, time and time zone. I wanted to be able to check whether the current time was before or after sunset and sunset in that city and then display a dark overlay if the sun wasn’t up. I found this example on W3 Schools, which takes sections of a string, so I got the section of just the hours and minutes for the current time, sunrise time and sunset time. I then had to convert them to numbers and check whether the current time value was before sunset or after sunrise, and if it was make it draw a dark overlay over the image and behind the cloud.

I decided to try and add a moon in as well, in which I used my sun animation, turning it to white and removing the excess scribble outside of it’s diameter. This created a really effective look except it kept drawing it over and over just like the sun, making the moon constantly move and look unrealistic. After ages of playing around with it, I managed to get it to stop constantly being drawn by removing the random variables from the moon function and placing them in the setup, making them only change when the city changes so that a new moon is generated for each city, but it keeps drawing the same moon whilst it is on the same city. I also added a glow behind it with ellipses that increase in opacity and brightness as they get smaller. I ended up with this cool night time animation:

Generative System K.png

After getting all of the code working properly, I began to populate the generative system with different cities. This was very easy to do because of the way that I set it up. All I had to do was get the WOEID from the website that I had found earlier, place it in the cities array, and then create an image named after that city and place it in the assets folder. I kept doing this and made sure that there was a lot of cities in there so that there was a lot to look at. I also made sure that I included cities with all different weather conditions in order to increase the chances of every aspect of the animation being shown when it is run, this included having tropical cities such as Darwin to increase the chance of there being a thunderstorm included and I wasn’t disappointed:

Generative System L.png

As I added more and more cities, I surprised myself with how interesting it was becoming, being able to constantly navigate through the cities and see all of the different animations. It actually helped me to learn more about the time zones and weather conditions in different cities by being able to navigate through them and compare them so quickly. I found myself at times thinking that things didn’t seem right and maybe something was wrong (even though I felt my code was right), and then I’d Google it to find out it was in fact correct, it was just something I didn’t know about the city. For example, I saw at 7:30pm that the sun was down in Brisbane and Sydney but then when I got to Melbourne it was sunny and I thought “oh no, what’s gone wrong here?”. I Googled it to find that the sun doesn’t set until around 8pm in Melbourne.

Overall I was very impresssed with what I was able to create at the end of the semester, I felt like I had included a lot of the things that I had learnt throughout the progress of this course. Through learning the extra feature in using an API to access data, I felt like I was creating a more generative experience by using real world information to generate data. I had hoped to be able to create something with information like this since I saw the example earlier in the semester that used flight paths to create an animation so I was very happy to be able to do something like this in the end and create something that continually interests even myself.

NOTE THAT I FOUND THAT FOR SOME REASON THE ANIMATION ONLY RUNS FROM A LIVE PREVIEW IN A CODE EDITOR AND NOT FROM THE INDEX.HTML FILE

Advertisements

Tim Dickson – Blog 13

This week I continued to work on my generative system based on what I had set up last week with the weather API. I started off by styling the application to look more like what I had in mind. I found a font which resembled the kind of effect that I wanted for the city name and loaded it in, and I also set up a system that loads the images of the cities in. I used a similar system to the one that I set up when I started making a memory game a few weeks ago, where I created an array full of values and then used them inbetween two other strings to generate the path to the image, meaning that the code for the path was only written once altogether instead of once for each image. I wanted to make the city name’s text to be in uppercase, and I managed to find this example on W3 Schools to help me achieve that. I also added navigational features to the user interface, having two buttons down the bottom of the screen which will allow the user to navigate through the cities backwards or forwards, placed above an overlay on the image. I drew a thermometer to the right of the screen which will be used to show the temperature of each city once I figure out the code to convert the return value into the height of the mercury.

Generative System D.png

In the tutorial, we were shown examples of particle systems and how they are generated. I found this example of fireworks particularly interesting and thought about how I may be able to use something similar in my animation to generate rain if a rainy condition has been returned:

Fireworks.png

 I started to animate my generative system by making clouds that move across the sky. I took inspiration from the array examples that I had used in previous weeks, which involved little circles moving around the screen randomly as the x and y values were constantly changing slightly. I modified this code to create the effect of clouds by creating three larger circles, with two of them being smaller than the main circle, positioned to either side. I made them generate in different greyscale shades, just as clouds do, and I made only their x value change in one direction and their y value remain the same, so that they move sideways across the sky just like real clouds do. I made it generate 250 of them to the left of the canvas and move across, but then once they reached the other side they disappeared. I also wanted the wind speed to be able to control the speed of the clouds, but when I tried to pass the windSpeed variable into the cloud function it didn’t seem to work properly, causing the whole application to crash.
Generative System E.png
It was a good start to the interface though. Now I just need to focus on:
  • Making the clouds continuously generate and flow across the screen
  • Showing the temperature on the thermometer
  • Having the wind speed control the clouds
  • Having rain and thunderstorm animations
  • Displaying a sun that disappears behind the clouds
  • Allowing the user to be able to navigate the interface

Tim Dickson – Blog 12

I wasn’t too sure about how effectively I could make the plane animation that I started on last week meet the requirements of the brief and how well I would be able to carry it out so I started to look for either ideas for my generative system. I looked at the following examples that Liam and Harrison posted in Slack to see if they gave me any inspiration: 

via Ryoji Ikeda via Raven Kwok

I also looked at the examples on the p5.js editor to see if I could find anything that interested me. I found this Interaction: Reach example pretty interesting, where it grabs the ball as it gets near the arm and then throws it away, and thought about similar things that I may be able to do:

Reach A.png Reach B.png Reach C.png
via p5.js Alpha Editor

 

I thought about the possibility of having multiple arms, and multiple balls, I could possibly even create an octopus like creature out of it, but when thinking about adding user interaction and other features, I wasn’t sure where to go with it.

I started going back through my blog for inspiration and found myself looking at the examples that used csvs to generate visual infographics again. It was something that I really wanted to try so I started to attempt to do one. I found this example on the p5.js alpha editor, which loaded earthquake information from an external url into the program so I now had the code to be able to do it, I just needed to be able to find somewhere where I could get information from.

I started looking at surf reports and weather reports to see if there was any APIs that I could use that had lots of information that I could draw into my system and I found one from Magic Seaweed and one from Yahoo Weather. The Magic Seaweed one looked pretty good and the instructions were very informative, however it was only in a beta stage and you had to request access to it, where the Yahoo Weather one was all there and ready to use, so I started to play around with that.

I found out that the Yahoo Weather API required Where On Earth Identifiers (WOEIDs) to load information for different cities, and I found this website which allows you to find all of them. I started off trying to load the information for Sydney, before loading information for a few other cities as well. Just like in the memory game I started to create a couple of weeks ago, I created a request that would load a url based on two strings with a variable inbetween like this, so that the request url only had to be written once instead of for every city:

var url = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%3D' + cityWOEID +'&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=';
weatherForecast = loadJSON(url);

I was able to combine the Yahoo Weather API with the p5.js earthquake JSON example and with some previous JavaScript knowledge, alert the JSON response to determine what values I was able to use. From there, I used the following resources to display the values that I needed:

  • W3 Schools to convert the JSON response into a text string
  • W3 Schools to convert the JSON response into a number
  • W3 Schools to round the number up to so many decimal places
  • Check Your Maths to learn how to convert miles per hour into kilometres per hour
  • Stack Overflow to learn how to remove the quotes that were left in the string

I then displayed all of these values that I needed as text elements in p5.js This is the code and the result that it creates:

/*
* @name Generative System
* @author Tim Dickson
* @description Progress on my second assignment.
*/

// Create the variable that will pull the weather data
var weatherForecast;

// Create an array with the woeid code for selected cities
var cities = [['Sydney', 1105779], ['New York', 2459115], ['Melbourne', 1103816], ['San Francisco', 2487956], ['Brisbane', 1100661], ['London', 44418]];

function preload() {

// Create a number that will randomise which city's information is displayed
var randomNumber = Math.round(random(0, 5));

// Load the data from an external url into the weatherForecast variable
var url = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%3D' + cities[randomNumber][1] +'&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=';
weatherForecast = loadJSON(url);

}

function setup() {

// Set the canvas size
createCanvas(1000, 1000);

// Set the text settings
textAlign(CENTER);
textSize(30);

}

function draw() {

// Draw the background
background(200);

// Get the location, remove the quotes from the string and display it
var location = JSON.stringify(weatherForecast.query.results.channel.location.city);
locationWithoutQuotes = location.replace(/\"/g, "");
text('City: ' + locationWithoutQuotes, 0, 100, width, 50);

// Get the temperature, convert it to celsius, round it up and display it
var temperature = Number(weatherForecast.query.results.channel.item.condition.temp);
var temperatureInCelsius = (temperature - 32) * 5 / 9;
var temperatureRounded = temperatureInCelsius.toFixed(1);
text('Temperature: ' + temperatureRounded + ' degrees', 0, 200, width, 50);

// Get the wind speed, convert it to km/h, round it up and display it
var windSpeed = Number(weatherForecast.query.results.channel.wind.speed);
var kmh = windSpeed * 1.609344;
var kmhRounded = kmh.toFixed(1);
text('Wind Speed: ' + kmhRounded + ' km/h', 0, 300, width, 50);

// Get the wind direction and display it
var windDirection = Number(weatherForecast.query.results.channel.wind.direction);
text('Wind Direction: ' + windDirection + ' degrees', 0, 400, width, 50);

// Get the condition, remove the quotes from the string and display it
var condition = JSON.stringify(weatherForecast.query.results.channel.item.condition.text);
conditionWithoutQuotes = condition.replace(/\"/g, "");
text('Condition: ' + conditionWithoutQuotes, 0, 500, width, 50);

}
Generative System C.png

 

Tim Dickson – Blog 11

In our final Kadenze tutorial, we looked at adding cameras and more to our drawings, this involved looking at some of the things that you can do beyond the p5.js library.

There are a number of addon libraries that come with p5.js that extend its basic abilities. There is a p5.dom (Document Object Model) library which has the ability to create and interact with HTML elements outside of the graphics canvas (it lets you create other elements on your page and do cool things with them). There is also a p5.sound library which as the name suggests, allows you to use sound files within the drawing. These p5.dom and p5.sound libraries need to be referenced in the html file if they aren’t already in there.

A button can be created using the following code:

var button = createButton("label that you want to put on the button");

By creating the button inside a variable named button, it allows us to reference it throughout the code and do other things with it such as setting its position:

button.position(x position, y position);

The createCanvas method that we use in every drawing is also a create method, so we can also use a pointer to position it as well.

var canvas = createCanvas(width, height);

canvas.position(x position, y position);

Another thing that I noticed in the tutorial that I hadn’t seen before was the use of colour modes:

colorMode(HSB);

I looked it up and found out that HSB stands for hue, saturation, and brightness, and from what I saw in the tutorial, it looks like it offers a brighter variety of colours.

To trigger an event when the buttons are pressed, we need to write the following code:

button.mousePressed(function that you want to call);

Other create methods that we can use include createP which creates a paragraph of text on the page, and createInput which creates a box that can be used to give text input into your program. An example of this would be:

var input = createInput();

Unlike the others, createInput doesn’t take any arguments inside its parentheses. We can use .value to get the value of an input box.

createSlider is another create method that we can use, which creates a slider that can be used to manipulate elements of the sketch. It takes three arguments: the minimum value, the maximum value and the starting value:

var slider = createSlider(minimum value, maximum value, starting value);

Just like with the input box, we can use .value to get the value of a slider.

Another useful tip that I picked up in this tutorial was that .webm as a video format works particularly well across a lot of different browsers. We can include videos in our drawings by using the code:

var video = createVideo("path to the video");

We can then use video.loop to play the video repetitively and video.pause to pause the video.

To change the label of a button, we can use the following code:

button.html("new string");

To draw the frames of a video on the canvas, we can use:

image(video, x, y);

Another interesting thing that I noticed was the ability to use filters on images, such as:

filter('INVERT');

We can then use the following code to hide the video and only show the frames being drawn as images on the canvas:

video.hide();

Another create method that we can use is createCapture, which accesses the webcam on your computer and creates a html element that displays the video feed from it. Just like with an image object, we can also access the pixels of our capture object like this:

capture.loadPixels();

In addition to capturing video, we can also capture our microphone input and work with that too:

var mic = p5.AudioIn();

mic.start();

mic.getLevel();

There is a whole lot more that you can do with p5.dom and p5.sound. In addition to these libraries, there are many other user-contributed libraries that help you extend into other domains such as games, speech, etc.

I decided to code the example from the webcam and microphone tutorial to get a better understanding of how it works. This code only works when run locally though and not in the p5.js alpha editor:

/*
* @name Webcam and Microphone
* @author Tim Dickson
* @description A drawing that uses the webcam and microphone inputs to draw ellipses of different sizes and shades.
*/

// Set the variables for the webcam and microphone
var capture;
var mic;

function setup() {

// Set the canvas size
createCanvas(710, 400);

// Set the capture variable to equal the webcam input
capture = createCapture();
capture.hide();

// Set the mic variable to equal the microphone input
mic = new p5.AudioIn();
mic.start();

// Set how the ellipses will be displayed
noStroke();
fill(0);

}

function draw() {

// Set the background colour to white
background(255);

// Load the pixels from the webcam input
capture.loadPixels();

// Set the size of the ellipses based on the volume of the microphone input
var stepSize = round(map(mic.getLevel(), 0, 0.5, 10, 50));

// Create a loop that places the ellipses across the screen vertically and horizontally
for (var y = 0; y < capture.height; y += stepSize) {
for (var x = 0; x < capture.width; x += stepSize) {

// Set the darkness of the ellipse based on the darkness of the pixels from the webcam input
var i = y * capture.width + x;
var darkness = (255 - capture.pixels[i * 4]) / 255;

// Set the radius for the ellipses based on the darkness and volume level
var radius = stepSize * darkness;

// Draw the ellipses
ellipse(x, y, radius, radius);

}
}

}
Webcam and Microphone.png

In class, we looked at a flocking example where ellipses would move around in groups, just like schools of fish. After seeing this, I didn’t think that I would be able to offer enough out of a memory game so I started to think of ways that I could do something similar.

Flocking.png

 An example I thought of was Roulette planes, which fly in different formations in the sky. I could possibly have an animation which randomly showed the planes flying in different formations across the screen and the user could interact with them by making them do things, giving them control over the animation. I wasn’t too sure on how it would work yet, but it was just an idea that came to mind for now.

via Wikipedia

 I started to code something to see if it got me anywhere and I came up with the following animation, which sees the planes continually flying in formation from left to right across the screen with a cloud travelling in the same direction at a different speed. It showed that I was able to load everything that I needed into it, it was just a matter of figuring out what I would be able to do with it:

/*
* @name Generative System
* @author Tim Dickson
* @description Progress on my second assignment.
*/

// Create variables for the plane and cloud positions
var planePosition = 0;
var cloudPosition = 0;

function preload() {

// Load the images for the planes and the clouds
plane = loadImage("assets/plane.png");
// @source https://pixabay.com/en/plane-propeller-old-flight-biplane-146181/
cloud = loadImage("assets/cloud.png");
// @source http://www.freepngimg.com/png/5109-cloud-png-image

}

function setup() {

// Set the canvas width and height to fill the window
createCanvas(windowWidth, windowHeight);

}

function draw() {

// Create a sky gradient background
for (lineHeight = 0, greenColour = 100; lineHeight < height; lineHeight ++, greenColour += 0.1) {
stroke(0, greenColour, 255);
line(0, lineHeight, width, lineHeight);
}

// Make the planes move from left to right and reset them if they go outside of the window
if (planePosition <= width + 600) {
planePosition += 5;
} else if (planePosition > width + 600) {
planePosition = -200;
}

// Draw the cloud and make it move across the window from left to right
image(cloud, cloudPosition, 200, cloud.width / 3, cloud.height / 3);
cloudPosition += 0.5;

// Draw the planes
drawPlanes();

}

function drawPlanes() {

// Make the planes jitter slightly to look more realistic
this.jitter = random(-0.5, 0.5);

// Draw the planes in formation and make them follow the height of the mouse position
image(plane, planePosition, pmouseY);
image(plane, planePosition + 75, pmouseY - 100 + jitter, plane.width / 2, plane.height / 2);
image(plane, planePosition + 100, pmouseY - 200 + jitter, plane.width / 3, plane.height / 3);
image(plane, planePosition - 250, pmouseY - 70 + jitter, plane.width / 1.5, plane.height / 1.5);
image(plane, planePosition - 200, pmouseY - 175 + jitter, plane.width / 2.5, plane.height / 2.5);
image(plane, planePosition - 450, pmouseY - 100 + jitter, plane.width / 2, plane.height / 2);

}
Generative System B.png

Tim Dickson – Blog 10

This week’s Kadenze tutorial focused on synthesising ideas from the entire course to make a simple game from them. This was interesting because games are a great way to explore interactive potentials, and they are also a new way to tell stories.

This game that we looked at involved:

  • Objects to encapsulate the ideas of each one of the following objects
  • Arrays to make an endless amount of things to catch
  • Simple variables to keep score
  • A program with a state that the user can move between 

It started off by looking at creating objects which fall from the ceiling, with some sort of paddle or basket to catch them down below, and the user getting a point each time that they catch one. With the objects falling from the sky, it used an object in the code that encapsulated its position and how quickly it is moving. It expanded on this by using arrays to make a number of these falling objects and then they added collision detection to create some sort of action when they bump.

It was interesting to see how they incorporated the function into the code by adding the following functions inside the draw function to update and render the ball:

myball.update();

myball.render();

I also learned that you could use .init to set the initial function of an object:

this.init = function() {

Set initial function here

}

This allows this.init(); to be called later on.

 

Some important points that I took note of in the class this week were that:

 

  • Capital letters are used to denote the name of a class, lower case letters are then used to denote an instant of that class
  • The following code can be used to make a number random 5% of the time: (random(0, 100) < 5);
  •  Using \n within a string creates a new line, I have seen this used before in programs such as Balsamiq Mockups to create new lines within a text label so it is a familiar function for me

This week I also began to play around with ideas for my generative system assignment. Following on from my idea of a memory game that I thought of last week, I began to try and create it. The main things that I managed to get working were:

  • Creating an array that held the image names and then getting the values out of this array and placing them within two strings to load the image so that all of the images could be loaded from one line of code
  • Using a for loop inside a for loop to spread the images out across the canvas horizontally and vertically.

I used two images from earlier (that I used in my type story example a few weeks ago) to test the application and this is the code that I came up with and the result that it produced:

/*
* @name Generative System
* @author Tim Dickson
* @description Progress on my second assignment.
*/

// Create an array with the images that will be used
var images = ["transformerRobot", "transformerCar"];

function setup() {

// Set the canvas size to fill the size of the window with a black background
createCanvas(windowWidth, windowHeight);
background(0);

}

function draw() {

// Draw boxes across the screen width and height
newBox();

}

function newBox() {

// Set the boxes to be white with no outline
fill(255);
noStroke();

// Draw boxes horizontally and vertically
for (boxesWidth = 10; boxesWidth < windowWidth; boxesWidth += ((windowWidth - 70) / 6) + 10) {
for (boxesHeight = 10; boxesHeight < windowHeight; boxesHeight += ((windowHeight - 60) / 5) + 10) {

// Create a random number to decide which image is shown in the box
var shuffle = round(random(0, 1));

// Draw the box
rect(boxesWidth, boxesHeight, (windowWidth - 70) / 6 , (windowHeight - 60) / 5)

// Place an image in the box
boxImage = createImg("assets/"+images[shuffle]+".jpg");
boxImage.hide();

// Set the image width and height
imageWidth = (windowWidth - 70) / 6;
imageHeight = ((windowHeight - 60) / 5) - 20;
image(boxImage, (boxesWidth + (imageWidth / 2))-(imageHeight / 2) , boxesHeight + 10, imageHeight, imageHeight);

}
}

}
Generative System A.png

Tim Dickson – Blog 9

This week was focused on data and visualisation, a topic that I found very interesting. Our world produces a tremendous amount of data, making sense of this data is not an easy task. Visualisation analyses and represents data as a visual form to help us make better conclusions and get a better understanding of large data sets. Arrays let us access and manipulate large amounts of data. They hold a list of values, rather than just a single quantity.

An array is created with the following code:

var arrayName = [];

You can refer to each slot in an array by using its index, for example arrayName[0] would refer to the first item in an array.

Computers can’t generate truly random numbers, there’s always an algorithm behind the scenes determining when numbers should appear.

However, the numbers that they generate are still more random than a what a human would be able to generate, an interesting quote from this tutorial was that “if computers are bad at generating random numbers, then humans are terrible at it”

I also learned that text files could be loaded into the preload function as strings:

loadStrings("numbers.txt");

Another useful function that I found out about was the round function:

round();

I had previously been using Math.floor();, which I found on W3 Schools.

It was very interesting to see the comparison between human behaviour and computer behaviour and how humans tend to avoid numbers around 50 cause they don’t seem random enough, whereas computers will pick numbers wherever.

The examples used to show data visualisation were really engaging – Casey’s demonstrations of the guy that created graphics of the life stats of his father:

Feltron Annual Report.png
via Feltron

 

And the coding used to networj and connect different places together were very cool, combining the act of printing with the act of coding. I really liked the aeroplane flight path animation in particular:

Visualising Flightpaths.png
via Kadenze

 

I would really love to represent something similar in my assignment and create something from a real time csv/json. Flight patterns reveal something unexpected, we know they are above us all of the time but don’t quite know the extent until we use coding to visualise it. 

The generative text animation based on speech was also cool as well as the cities latitude and longitude being mapped to the size of the square in the animation.

With visualisation, you start with a bunch of data, text, or numbers and through code you are able to transform that into a really compelling image/visualisation on the screen.

I think that using a csv file to generate information in my generative system assignment could make it really interesting, so I started looking around for csvs. I came across some such as this one, which contains a list of information about different Australian towns.

 

I also looked elsewhere for information and thought about possibly creating an interesting memory game. This would be like a standard game of memory where the user has to try and match two of the same images together, but it could be more interactive and generative by:

  • Having different categories that they user could navigate in order to create their own story
  • Having lots of different animations as the user uses the program to make the concept more interesting and engaging for the user

I expect my ideas to continue developing and changing over the next couple of weeks until I end up with a solution that I am truly happy with that meets all of the requirements of the brief.

Tim Dickson – Blog 8

This week we looked at objects and modularity, as well as taking related variables and functions and bringing them together to create multiple copies of these objects.

These can have variable fields or properties and we call functions methods. We can define an object using a special function called a constructor.

Here is an example where a Bug class is created with two methods inside it which draw and update the bug:

var fly;

var sam;

 

function setup() {

  createCanvas(900, 600);

  fly = new Bug(width/2, height/2);

  same = new Bug(100, 100);

}

 

 

function draw() {

  background(255);

  fly.draw();

  fly.update();

  sam.draw();

  sam.update();

}

 

function Bug(startX, startY) {

  this.x = startX;

  this.y = startY;

  this.diameter = random(10, 100);

  this.speed = random(2, 10);

 

  this.draw = function() {

    fill(0);

    noStroke();

    ellipse(this.x, this.y, this.diameter, this.diamter);

  }

 

  this.update = function() {

    this.x += random(-this.speed, this.speed);

    this.y += random(-this.speed, this.speed);

  }

}

The class contains the bug’s properties and the keyword ‘this’ refers to future instances of this object. This lets you know that the methods and properties that you are referring to are local to this object. Just like with any other function, you can also pass parameters into an object.

 

 

  • Variables define the nouns
  • Methods define the functionality of the object 

 

I found it very interesting to discuss Don Norman’s Design of Everyday Things in the class this week as well. It is a book that I have just purchased and started to read, and I hope to use my learnings from both the course and book together as the semester progresses.

The most important takings from the class were that:

  • Classes start with a capital letter
  • A method uses this operator: this.move = function() {
  • this = nowhere else.. just here

We looked at modifying the code for the Objects: Array example, this is what I came up with, different coloured falling balls that keep bouncing until they stop and then drop out of the canvas:

/*
* @name Modified Objects Array Example
* @author Tim Dickson
* @description A modified version of the p5.js Objects Array example. It features objects of different colours that Bounce rather than Jitter.
*/

// Declare the objects, whether they are falling or not, and their colours
var ball = [];
var falling = [];
var colours = [[168, 114, 221], [209, 154, 102], [68, 158, 176], [75, 171, 239], [218, 108, 117], [229, 187, 102]];

function setup() {

// Set the canvas size
createCanvas(1000, 1000);

// Create the balls
for (i = 0; i < 100; i++) {
ball[i] = new Bounce();
}

}

function draw() {

// Set the background colour
background(40, 44, 52);

// Display the balls
for (i = 0; i < 100; i++) {
ball[i].fall();
ball[i].display();
}

}

// Create a class for Bounce
function Bounce() {

// Set the position, size, speed, and colour
this.x = random(width);
this.bounceBack = random(height);
this.y = this.bounceBack;
this.diameter = random(10, 30);
this.speed = 3;
this.falling = true;
this.colour = Math.floor(random(0, 6));

// Create a function to make the balls fall and bounce
this.fall = function() {
if (this.falling == true) {
this.y += this.speed;
this.speed = this.y * 0.005;
}
if (this.y >= height - this.diameter / 2) {
this.falling = false;
this.bounceBack += 20;
}
if (this.y <= this.bounceBack - this.diameter / 2) {
this.falling = true;
}
if (this.falling == false) {
this.y -= this.speed;
this.speed = this.y * 0.005;
}
};

// Create a function that displays the balls in their current position
this.display = function() {
fill(colours[this.colour]);
ellipse(this.x, this.y, this.diameter, this.diameter);
}

};
Modified Objects Array Example.png