User test

[perryliao]

Colour Chisel User Test

User Information

Name: Perry Liao
Programming Experience: 3-4 years
UI/UX Experience: Yes, casually in my free time
Languages Known: JavaScript/TypeScript, Python, C#
Is the language useful?: too complicated to use, unintuitive IMHO
Not gonna lie I still don't know what "combining the paths" means, it's not specified in the examples
what further functionality would you like to see?:

• Debugging help, I copied the "S" with 6 coordinates and took 3 out and somehow the path stopped rendering and I had no idea why.
• maybe an alternative (r,g,b) in terms of 0 to 1 would be nice, rather than 0 to 255

Feedback: definitely hard to pick up as a language, would be nice to have more examples/docs

Tests

Exporting the different constants.

Please input and export a blue hex (#0000FF), a red hsl value (hsl(0,0.5,0.5)) and a green rgb (rgb(0,255,0)).

export (#0000FF);
export (hsl(0,0.5,0.5));
export (rgb(0,255,0));

Finding compliments

Export your favourite colour and its compliment.

export var fav = (#e7a90b);
export fav > compliment;

Making a path

Make a path consisting of your favourite colour and its compliment.

var fav = (#e7a90b);
var path = [fav, fav > compliment];

export path > rotate 45 > compliment > scale 0.5; 

Find the analogous a path

Create a path and find an analogous path that is 45 degrees over. Export both paths.

var fav = (#e7a90b);
var path = [fav, fav > compliment];

export path > rotate 45 > compliment > scale 0.5; 
export path > rotate 45 > compliment > scale 0.5 > analogous 45;

Scale a path

Create a path and make 2 versions of the path. One version of the path should be larger (closer to edge of the colour wheel), and the other should be smaller (closer to the middle of the path). Export all the paths.

var fav = (#e7a90b);
var path = [fav, fav > compliment];

export path > rotate 45 > compliment > scale 0.25; 
export path > rotate 45 > compliment > scale 0.5 > analogous -45;
export path > rotate 45 > compliment > scale 0.75 > analogous -90;

Combine 2 paths

Create 2 paths, with no overlapping values. Combine these 2 paths and export the new path.

var sPath1 = [
	(hsl(60, 0.5, 0.5)),
	(hsl(90, 0.5, 0.5))
];

var sPath2 = [
	(hsl(300, 0.5, 0.5)),
	(hsl(270, 0.5, 0.5))
];

export [sPath1, sPath2];

Make the 'S'

Using only a single hex, rgb or hsl value, use transformations to make the S shape (An example of the S shape is on the 'Paths' example on the other page, this used 6 inputs, try and do it with 1 input).

var start = (hsl(60, 0.5, 0.5));
var path = [
  start,
  start > rotate 30,
  start > rotate 60,
  start > rotate 60 > compliment,
  start > rotate 60 > compliment > rotate -30,
  start > rotate 60 > compliment > rotate -60
];
export path;

Draw a picture

Can you draw a picture on the colour wheel? Let me see your creativity. This one is for fun.

not attempted.