code samples

[Daniel Shiffman]

I'm not sure about this, but just want to throw this out there. I am wondering if we should make the code samples a bit more "real." A smaller fixed-width font that looks more like a code editor with more specific code (even if not 100% accurate). For example:

ellipse(300, 500, 100, 100);

or even

strokeWeight(4);
stroke(0, 100, 200);
fill(0, 100, 200);
ellipse(300, 500, 100, 100);

and

if (mousePressed) {
  fill(random(255), random(255), random(255));
}

var d = dist(mouseX, mouseY, 500, 300);
if (d < 200) {
  fill(random(255), random(255), random(255));
}

and

var slider = createSlider(0, 255, 127);
slider.position(500,320);

[Scott Garner]

I experimented with this, but thought it both looked heavy and in the dialog you say "line of code".

We can certainly give it a shot. The circle sketch has a showCode() that's called in script.js. You can pass whatever you want. <br/> will add new lines and something like   will indent.

I can go back and make the font size smaller if it gets too big.

[Daniel Shiffman]

I made some minor adjustments to the code panels. These are how they stand as of now:

ellipse(80, 80, 148, 148);

(added spaces between the arguments)

if (mousePressed) {
  fill(random(255), random(255), random(255));
}

var slider = createSlider(0, 255, 127);

(I think having the arguments is useful. I added var slider just to show a bit more code possibilities but am not sure about this one?)

Also, this might be silly but it's bothering me that it's not a mono-spaced font. How about using Source Code Pro?

[Scott Garner]

I'll use the font in the p5.js style guide. The only thing I don't like
here is that the fill line gets super long and makes the panel a bit
awkward. We'll see how it looks with the font change.

On Thu, Jul 31, 2014 at 1:44 PM, Daniel Shiffman [e-mail]
wrote:

I made some minor adjustments to the code panels. These are how they stand
as of now:

ellipse(80, 80, 148, 148);

(added spaces between the arguments)

if (mousePressed) {
fill(random(255), random(255), random(255));
}

var slider = createSlider(0, 255, 127);

(I think having the arguments is useful. I added var slider just to show
a bit more code possibilities but am not sure about this one?)

Also, this might be silly but it's bothering me that it's not a
mono-spaced font. How about using Source Code Pro
https://www.google.com/fonts/specimen/Source+Code+Pro?

—
Reply to this email directly or view it on GitHub
#17 (comment)
.

[Daniel Shiffman]

I have a feeling you changed the fill() line b/c with the random() it gets very long. However, fill(255, 0, 0); feels wrong to me b/c the circle is not changing to red when clicked. I think we should probably go back to:

if (mousePressed) {
  fill(random(255), random(255), random(255));
}

or do you have a better idea?

[Scott Garner]

Yes, that was just for length and I did red since that's what happens when you click in the video, but I understand the misgivings. I feel weird about the if statement in general since that logic would just cycle randomly while the mouse was down?

We have plenty of vertical room, so for now I tried:

if (mousePressed) {
  var red = random(255);
  var green = random(255);
  var blue = random(255);
  fill(red, green, blue);
}

[Daniel Shiffman]

Ah, good point. Should we try?

function mousePressed() {
  var red = random(255);
  var green = random(255);
  var blue = random(255);
  fill(red, green, blue);
}

It would crazy to do the following, right?

function mousePressed() {
  var d = dist(x, y, mouseX, mouseY);
  if (d < 74) {
    var red = random(255);
    var green = random(255);
    var blue = random(255);
    fill(red, green, blue);
  }
}

[Scott Garner]

That wouldn't be too crazy. Maybe we could add a few lines to the other
examples to balance things out. I guess the question is whether we want to
communicate simplicity or total accuracy.

On Fri, Aug 1, 2014 at 7:43 PM, Daniel Shiffman [e-mail]
wrote:

Ah, good point. Should we try?

function mousePressed() {
var red = random(255);
var green = random(255);
var blue = random(255);
fill(red, green, blue);
}

It would crazy to do the following, right?

function mousePressed() {
var d = dist(x, y, mouseX, mouseY);
if (d < 74) {
var red = random(255);
var green = random(255);
var blue = random(255);
fill(red, green, blue);
}
}

—
Reply to this email directly or view it on GitHub
#17 (comment)
.

[Scott Garner]

On second thought, it does look pretty crazy. I think maybe the simpler version is less daunting.

[Daniel Shiffman]

Agree. Will leave this open in case @lmccart wants to weigh in. But it's probably as good as we're going to get it for now.

[Lauren Lee McCarthy]

just looked at this... I think the first version is simpler/better, but it should be isMousePressed for the boolean variable, mousePressed is the function

[Scott Garner]

Oops, fixed.