Skip to main content

Sketch# 3

 



let img;

let diameter;

function preload(){

  img=loadImage("images/blog.png");

}

function setup() {

  createCanvas(1280,720);

  imageMode(CENTER);

}

function draw() {

  background(255,0,245,1);//purple color

  diameter=map(mouseX,0,width,10,700);

  image(img,width/2,height/2,diameter,diameter);

  line(200,700,200,5);

  line(1060,700,1050,5);

  strokeWeight(1);

  stroke(0);

  if(mouseIsPressed){

    stroke(0);

  }else{

    stroke(255,255,0,1);

}

fill(255,255,1,255);//yellow color

  stroke(5);

ellipse(mouseX, mouseY,30,20);//moving round shape

ellipse(130,130,250,250);//static round shape upper left

fill(255,1,0,255);

ellipse(1150,498,250,255);//color red

}


Labels:

Comments

Post a Comment

Popular posts from this blog

Web Links

Positioning the p5.js sketch canvas in the website (November 16) https://github.com/processing/p5.js/wiki/Positioning-your-canvas   How to structure a effective Typographic Hierarchy https://www.toptal.com/designers/typography/typographic-hierarchy Writing About your Work https://creative-capital.org/2013/01/03/writing-about-your-work/ https://theabundantartist.com/how-to-write-an-artists-statement-that-doesnt-suck/ https://www.artbusiness.com/artstate.html Image Maps https://www.w3schools.com/html/html_images_imagemap.asp In Dreamweaver https://helpx.adobe.com/dreamweaver/using/image-maps.html Rhizome https://artbase.rhizome.org/wiki/Main_Page V2 https://www.v2.nl/ Intercommunication Center https://www.ntticc.or.jp/en/ Penny Stamps Lectures  https://stamps.umich.edu/penny-stamps-speaker-series Light Box Query https://lokeshdhakar.com/projects/lightbox2/ Google Fonts https://fonts.google.com/ Meta Tags https://www.w3schools.com/tags/tag_meta.asp How to Create Tooltips https://...
Post a Comment
Read more

Personal Website

homepages.utoledo.edu/mditore Critique Do not link name and last name with an artwork (p5.js) Change the location of Contact, also change the name to call it Blog Make sure that the Generative art is linked to the page or use a photograph to linked it to the p5.js site Make sure that all formatting is unified Correct grammar mistake in Animation on page 1  Photographs sizing on portfolio: Print
Post a Comment
Read more

Booklet pages formatting design process...

The booklet is a guide to provide art museum docents or teachers an art museum gallery visit that can add hands-on activities to the museum tour as a way of engaging the visitor in the appreciation of the museum's artworks and art in general. This booklet's artworks are not at the museum's collection but are part of a private collection (a requirement of the graphic design class assignment to use personal photographs), but a QR code is provided to link with the Toledo Museum of Art e-museum site where museum artworks from its permanent collection can be chosen to be included in art gallery activities. Above, one can appreciate the screenshots of the two spreads of four pages of the booklet that describes two hands-on gallery activities: Puzzle and Collage.  The formatting of the pages is similar to maintain uniformity of the design, understanding where the data is located that helps in the understanding that is required when engaging in a step-by-step activity.  The backgro...
Post a Comment
Read more