Tues 23rd and Thurs 25th

Tuesday 23rd

  • Review p5 processing differences.

Exercises on images

  1. The walk cycle

Write code to animate a walking character with sprite images. (You are provided with the some sprite images and some template code to complete) The final goal of this Assignment is to create an interactive scene, in which the character walks over to the places where the user clicks. Here is a animated GIF demonstrating what your solution will resemble:

Here is the source image for the walk cycle of an animated character. Feel free to choose your own walk cycle from GIFs like this or this or this and break it down into frames using an online tool like this.

The individual frames of the above walk cycle can be found in this zip file. There are 8 frames, that are .PNG images with transparent backgrounds. This works best using a transparent background.

Here is the starter “template” code you will use to create your project. Please carefully note the places where you are expected to add code.

*In this code, please change the very last function from “mouseIsPressed” to “mousePressed”. mouseIsPressed is from a depreciated version of p5. We don’t use this anymore!

Run the starter program. You should see the program above running.

  • There are 4 fragments of code for you to write, which are described in more detail below:
    1. Load the images into an array;
    2. move the character across the canvas;
    3. display the character with a cycling frame number;
    4. flip the character left/right appropriately.
  • Load the images. Currently the program loads just a single frame of the walk cycle, purely for demonstration purposes. Inside the setup() function, you are advised to PUT CODE HERE TO LOAD THE IMAGES INTO THE frames ARRAY, USING THE FILENAMES STORED IN THE filenames ARRAY. In other words, this is where you should write code that loads all 8 of the walk cycle images. Specifically, you should write a for loop that fills up the frames array with images obtained by loading the (respective) URLs given in the array of filenames strings.
  • Display the current frame. In the draw() function, you are advised to PUT CODE HERE TO DISPLAY THE CHARACTER, CYCLING THROUGH THE FRAMES. You’ll be successively displaying each of the images in the framesarray, incrementing the array-index of the image you display on each refresh of the draw() function. (Don’t forget to restart the index at zero when your index exceeds the length of the frames array.) One possibility is to apply the modulus operator to the frameCount system property.
  • Move the character across the canvas. The target (“goal”) location is set in the mousePressed() function, whenever the user clicks the canvas. In line 34, you are advised to PUT CODE HERE TO MOVE THE CHARACTER TOWARDS THE TARGET. You’ll need to devise some way of moving the character a small portion of the way from its current location towards the target location, essentially reassigning the character’s position on every frame. There’s no single correct way to achieve this, and we’re curious what you come up with. One solution is to use lerp(). Another method uses some simple trigonometric proportions based on the numbers dx, dy, and distanceFromCharacterToTarget.
  • Flip the direction the character is facing, if you’re able, when the character is moving towards the left. You are advised to do this in Line 41 (FLIP THE IMAGE IF THE CHARACTER'S HEADING LEFT),  just before the character is rendered to the screen. We recommend you achieve this by applying a scale() of (-1,1) to the character’s image inside a push()/pop() structure. This step may be tricky, so save it for last.
  • Don’t forget to comment your code.

2. Compositing images

  • Collate a folder of images and create a program that composits three images chosen at random by varying their transparency and layering them.

Homework:

Thursday 25th

  • Intro to randomness and chance.
  • Perlin noise
  • The random function revisited.

Exercises

  • Dice throw: Review the coin flip example and create a simulation of a die that is ‘rolled’ every time the mouse is clicked. Note the algorithm in the example that sets the probability:
     

    r = random(2); //generate a random number
if(r<1){ //if random number is bigger than 1 (50% chance of this)
    fill(0); //fill for letters
    text('H',width/2, height/2+10);  //heads
    fill(255,0,0);
}else{ //or else r is less than 1   (50% chance of this)
    fill(0); //fill for letters
    text('T',width/2, height/2+10);  //tails
    fill(0,255,0);
}

    Use the same technique of generating a random number and then using a conditional statement on your die which should be evenly weighted and each result should have an even 1 in 6 chances of appearing. Test your program over 18 clicks. How well does it perform? Can you write a dice class and use to create 6 dice objects?

  • Lattice Random Walk (Drunk Walk): Create a sketch in which a small element travels erratically from one moment to the next, leaving a trail as it moves. It should have a 1-in-4 chance of moving up, down, left or right. Generate a random number and use this with conditional statements to decide what direction it should move.
  • Perlin noise. Review the perlin noise tutorial. Can you use Perlin noise to create the movement of a shape or character?

 

 

 

Homework for next Tuesday:

  • Generate 3 concepts for the Generative Landscape Project, making a sketch for each and post to the blog.
  • Chapter 10 in Learning Processing: Algorithms. Read each section of the chapter and run each code example in p5js. Take the example code from here that has been ported from Processing and run it in openProcessing. Once you understand how each class works, and how they fit together. Take this program and modify it to make a new game that also involves falling objects that the user can catch. However, instead of having raindrops being caught by a catcher, change this concept to something else eg. money falling and being caught by Jeff Bezos’s face, goldfish being caught by a cat, a cutout of you trying to catch different grades (As, Bs, Cs). Be creative.