Tag Archives: sketch

Question 1.3: Visual expression 1 – The basics

The Question 1.3: Visual expression 1 – The basics (V) homework for Week 1 of Design: Creation of Artifacts in Society required me to draw a sketch of a chair. The goal of this assignment was to get me comfortable with the basics of sketching to ensure I can create a quality output of the visual expression of my designs.

q_1_3_sketch_chair
Apparently, the Bentwood chair is a classic chair that was designed more than 100 years ago and suits all manner of cafes and dining rooms, from French bistros to modern cafes and upmarket restaurants. Really? We found our set of fours on the side of the road prior to a hard-rubbish collection.

I’m having trouble with the surfaceTouchEvent

I’m having trouble with the surfaceTouchEvent in the Responding to touch interaction recipe from the Processing 2 Creative programming cookbook source code on GitHub.

I’ve worked through the Troubleshooting,  Discussion and Known issues, Common problems, Understanding changes to processing.core sections of the Android page of the Processing Wiki, but still no success.

Unsurprisingly, someone else posted a similar issue with Android Multitouch on Processing 2.0.X on the Android Processing Forum. Unfortunately their solution (import. android.view.motionEvent) doesn’t seem to resolve my issue.

Screen-Shot-2014-05-16-at-6.25.08-PMScreen-Shot-2014-05-16-at-6.25.27-PM

Time to sort this one out.

Accessing screen size and density

Making my way through the Accessing screen size and density recipe from the Processing 2 Creative programming cookbook source code on GitHub.

In this recipe I learned how to use the Android DisplayMetrics class to determine general information about the display of the device used to run the sketch.  While this is more of a diagnostic recipe than a creative one, I think it’s pretty useful way for finding out more about the capabilities of your device which could then inform the way you code your sketch. Nice.

Screenshot_2014-05-15-21-04-21

Screen-Shot-2014-05-15-at-9.01.26-PM

Drawing triangle and quad strips

Making my way through the Drawing triangle and quad strips recipe from the Processing 2 Creative programming cookbook source code on GitHub.

In this recipe I learned how to use the QUAD_STRIP and TRIANGLE_STRIP parameters inside the beginShape function to draw triangle or quad 3D geometry to screen. With some work, QUAD_STRIP and TRIANGLE_STRIP could be used to draw 3D grass and lawn geometry on screen for Sew, Grow and Mow as an alternative to pre-modelled geometry. Maybe.

Screen-Shot-2014-05-10-at-6.40.00-AM

This code draws the QUAD_STRIP and then rotates it around the centre of the screen. I particularly like how vertex (x1, y1, 0) and vertex(x2, y2, 50 + i) are used to add two vertices to the shapes with each iteration of the for loop.

Screen-Shot-2014-05-10-at-6.40.38-AM

Mixing 2D and 3D objects

Making my way through the Mixing 2D and 3D objects recipe from the Processing 2 Creative programming cookbook source code on GitHub.

In this recipe I learned how to use the ENABLE_DEPTH_TEST and the DISABLE_DEPTH_TEST parameter inside the hint function at the beginning and end of the draw function to to enable and disable the z buffer. This means the first black square intersects the coloured 3D cubes, while the second white square is drawn on top of the coloured 3D cubes. The DISABLE_DEPTH_TEST parameter would be useful if you wanted to display user interface elements such as buttons, banners or instructional text on top of the 3D environment.

Screen-Shot-2014-05-08-at-9.03.30-PM

Screen-Shot-2014-05-08-at-8.49.07-PM

 

Making polygon soup

Making my way through the Making polygon soup recipe from the Processing 2 Creative programming cookbook source code on GitHub.

In this recipe I learned how to create a 3D cylinder with a flexible function that allows for the top, bottom and sides of the cylinder to be customised. In this recipe, the QUAD_STRIP parameter (draws a series of connected quads) is introduced in the beginShape function.

Once again, the frameCount system variable is used to rotate each 3D object by one degree per frame as the value of the variable is increased by one in each frame.

Screen-Shot-2014-04-29-at-9.30.34-PM
Removing the code responsible for drawing the bottom and sides of the each cylinder to learn more about how the function draws the cylinder to the screen.
Screen-Shot-2014-04-29-at-9.31.04-PM
Removing the code responsible for drawing the top and bottom of the each cylinder to learn more about how the function draws the cylinder to the screen.
Screen-Shot-2014-04-29-at-9.31.46-PM
Removing the code responsible for drawing the top and sides of the each cylinder to learn more about how the function draws the cylinder to the screen.
Screen-Shot-2014-04-29-at-9.32.29-PM

Using lights

Making my way through the Using lights recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe, I learned how to declare the lightMode and lightDirection integers to allow for different lighting modes to be activated. Inside the setUp function they’re assigned a value of 0 and then referenced again in the if test. In this recipe, I also learned how to use the lights, directionalLight, ambientLight, pointLight and spotLight functions for the different lighting modes, even the noLights function for a no lighting mode.

This recipe contains code for generating and animating 3D primitives (first demonstrated in Drawing 3D primitives recipe) used to demonstrate the lighting setup. This recipe also contains code for a keyboard interface (first demonstrated in the Keyboard interaction recipe) to activate different lighting modes. For this keyboard interface, N = no lights, L = lights, D = directional light, A = ambient light, P = point light, S = spot light. The Up, Right, Down and Left arrow keys also change the direction of the light when the directional light is activated.

Screen-Shot-2014-04-28-at-8.36.26-PM

Drawing 3D primitives

Making my way through the Drawing 3D primitives recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned how:

  • the box function can be used with one or three parameters to set different values for depth, width and height of the box.
  • the sphereDetail function can be used to define a resolution higher or lower than the default sphere function
  • to create a variable (angleY) that can rotate each 3D object around its Y-axis.
  • the frameCount system variable can be used to rotate each 3D object by one degree per frame as the value of the variable is increased by one in each frame. This value is converted to radians, cause that’s the unit of measurement Processing uses. Might be easier to work with radians rather than convert to degrees all of the time. Maybe.

Screen-Shot-2014-03-31-at-8.28.44-PM

Understanding 3D space

Making my way through the Understanding 3D space recipe from the Processing 2 Creative programming cookbook source code on GitHub.

In this recipe I learned how set a variable for depth and zSpeed and also how to change the variable inside the draw function for animation. I also learned that if you want to use the rect or ellipse functions draw shapes in a 3D environment you need to use the translate function to change the coordinate system. Normally, the translate function uses x, y and z coordinates in a 3D environment, but in this Sketch the z coordinate has been replaced by the depth variable. Using the depth variable for the z coordinate with the for loop and the if test animates the four coloured squares. Also, the squares are always drawn at 0, 0. It’s just the point of origin in z-space being moved.

Screen-Shot-2014-03-21-at-9.28.51-PM

Screen-Shot-2014-03-21-at-9.28.35-PM

Offscreen drawing

Making my way through the Offscreen drawing recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned how to:

  • declare a PGraphics object and then initialise it with the createGraphics function inside the setup function.
  • use the createGraphics function to create a new transparent image to be drawn on and the beginDraw and endDraw functions to start and stop drawing on the image. For this Sketch, strokes and lines are drawn on the PGraphics object. To do this, they needed to be prefixed with a variable (pg).

ch02_r09_002
The display window is cleared every time the mouse is pressed. The if test inside the mousePressed function specifies there’s a 50 percent chance the new background will be black or white.
ch02_r09_001

ch02_r09_005

Manipulating SVG files

Making my way through the Manipulating SVG files recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned:

  • more about using the shape function to draw shapes in the display window
  • how to declare the PShape object and create custom variables (snowFlake, small1 to small6 and big1) and the disableStyle, enableStyle, fill and stroke functions to manipulate discrete parts of the SVG loaded into the Sketch.
  • how to use getChild to get text (small1 to small6) from the id attribute of each shape in the SVG file.

Screen-Shot-2014-03-16-at-5.19.24-PM

Calculating points on a curve

Making my way through the Calculating points on a curve recipe from the Processing 2 Creative programming cookbook source code on GitHub.

In this recipe I learned how to use the bezierPoint and curvePoint functions to calculate points on curves and splines. bezierPoint uses five parameters. The first four are coordinates for the anchor and control points (40, 120, 300, 600) of the bezier curve and the fifth is parameter is a number between 0 and 1. This Sketch uses noise to generate the number. curvePoint works in a similar way to bezierPoint, except it’s for Catmull-Rom splines. I also learned how to use:

  • the first four parameters and the last four parameters of the bezier curve’s anchor points as the parameters for the red lines used to simulate the curve’s ‘handle’
  • noise to animate the point as it’s moved along the curve
  • rectMode to change the location from which the rectangle is drawn. For this example, CENTER is used to specify the first two parameters of each rect (120, 40 and 300, 240) as the shape’s centre point.

Screen-Shot-2014-03-12-at-11.40.14-PM

Working with colours

Making my way through the Working with colours recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned how to use the color function to create a variable of the type colour (c = colour variable), the stroke function to set the colour of the stroke, the fill function to set the fill colour of the shape. I also added an additional +130 to the height of displayHeight. I wanted the size and position of all the shapes to be relative to the window size (displayWidth, displayHeight), but I haven’t figured out how to do that yet.

Screen Shot 2014-02-11 at 6.32.15 PM

Drawing basic shapes

Making my way through the Drawing basic shapes recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned how to use the rect, ellipse, quad and triangle functions to draw basic geometric shapes. I also found it interesting how two for loops are used to create the grid background pattern. I’m curious to find out if this coding style is better or more efficient than a single for loop I used to create my grid background pattern. I guess I’ll find that out as I continue to work through each recipe.

I understand this recipe is about drawing basic shapes and not about size and positioning, but there’s something rather inflexible about the way each shape is drawn. I’d prefer to scale and position each shape relative to the size of the window.

  • Extension task 1: As an extension to this recipe, I think I’ll explore relative scale and positioning in an attempt to make my Sketch that little bit more flexible.
  • Extension task 2: I wonder if it’s possible to detect or determine the display size of the environment/user agent. If so, objects may be able to be drawn and positioned relative to the display size. My task is to find out and then create a few example sketches.

Screen Shot 2014-02-04 at 8.47.13 PM

Keyboard interaction

Making my way through the Keyboard interaction recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned about using keyPressed, keyReleased and keyTyped functions to assign keys on the keyboard to execute code and also a bit more about if tests and declaring variables, particularly changing their values when specified keys are pressed.

ch01_rec10_keyboard

Mouse interaction

Making my way through the Mouse interaction recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned about the mouseClicked, mouseDragged, mouseMoved, mousePressed and mouseReleased functions. I also learned about the mouseX, mouseY, pmouseX, pmouseY, mousePressed and mouseButton variable. The mouseButton variable allows you to determine if the left, right or middle mouse button has been clicked. This recipe is also the first time an if test has been used. They’re cool. I know I’ll be using them heavily to determine the display or actions in future sketches.

Screen Shot 2014-01-25 at 10.58.01 PM

Maths functions

Making my way through the Maths functions recipe from the Processing 2 Creative programming cookbook source code on GitHub. In this recipe I learned about declaring variables and the abs, ceil, floor, round, sq, sqrt, min, max, and dist functions. I also learned how to use the println function to display output of functions to the Processing console window. Good for debugging a Sketch!

Screen Shot 2014-01-25 at 9.39.17 PM

For this recipe the Processing window displayed at runtime isn’t used, but I still wanted to use the size() function.

Using a for loop to draw lines

I wanted to draw a grid. Previously, I specified each horizontal and vertical line in my sketch. Totally boring, inefficient and completely inflexible way to draw repetitive lines. So, I checked out the Processing reference on for loops and then applied that methodology to my existing sketch. Tight!
Screen Shot 2014-01-24 at 11.48.33 PM

This could be the method to use to draw a grid for the Design or Sew sections of the Sew, grow and mow: An AR lawn art experience.

Concept: The activity flow

During the initial design stage of an activity I like to use pen and paper to quickly map out the flow of the activity. The tactile nature of paper allows for scribbles and scrawls, coloured pens or pencils, hasty redraws, cutting, tearing, taping and a rendezvous with the scanner or photocopier. I think something like an iPad or Samsung Tab style device could also give me similar functionality to pen and paper. I’d like one of those.

These drawings describe the flow of an activity for a digital learning experience.