CCode for Artists - Miles DeCoster

Code for Artists is a bunch of files created to try out ideas and techniques using various web-related technologies. Some were created to solve specific problems, others just explore what can be done with some bits of code. Creating problems is at least as interesting as solving them. As this is a website, most of the samples are built around HTML, CSS, JavaScript and PHP. I try to put all of the necessary code for a sample in the same document, so if you view source you will find the HTML, CSS and JavaScript, or JQuery code. That does not work so well for PHP so I generally will have some code snippets on the page or in a separate file to document the PHP code. PHP, of course, needs to be run through a server to function. Also, some examples require multiple documents due to the nature of the projects.

Leave a comment: Comments

Filter examples:

 HTML examples  
 CSS examples  
 JavaScript/jQuery examples  
 PHP examples
  
 Processing examples

Code for Artists - Wordpress version (not complete, but searchable with categories, etc.)

What's new?

  • p5js canvas with html animated gif image and styled paragraph on top of the canvas.

    Uses p5js DOM library to add an image, in this case an animated gif on top of the canvas. The image is not in the draw loop, so the gif animates.

  • Control panel with knobs

    Uses p5js audio to make an interactive sound panel. Variation on the files below, but now with knobs of different sizes and colors.

  • Simple audio control panel

    Uses p5js audio to make an interactive sound panel. This doesn't do a lot, but I wrote a function that makes the knobs and it is easy to make as many as you want.

  • Simple audio control panel 2 voices

    Variation on the above project with two oscillators, so more knobs.

  • Make some interesting sounds!

    Uses p5js audio to make an interactive sound panel. Try different settings and press the "1" key to hear the sound.

  • A simple synthesizer built in p5js.

    Use the mouse or the 1-7 and QWERTYU keys. 8 octaves. Adjust the ADSR settings.

  • A simple synthesizer with low-pass filter

    Same as above but filter added. Adjust the ADSR and filter settings.

  • Audio example with tremolo

    Uses a Low Frequency Oscillator to control the amplitude of an audio oscillator. You can adjust the amplitude and frequency of the LFO

  • Sliding panels on scroll

    Use a vertical scroll to move panels in opposite vertical directions.

  • Move a planet around the sun

    Use a vertical scroll to move a planet in an eliptical orbit around the sun. This uses the scroll distance with sin and cosine functions to reposition a div when scrolling.

  • Bar chart with fixed vertical scale

    A bar chart with a fixed vertical scale for two data sets. Uses d3.

  • Bar chart with multiple datasets

    A bar chart with multiple data sets you can click through with animation between data states. Uses d3.

  • Donut chart with labels and animation

    A donut chart with some random data updates with labels and animation between data states. Uses d3.

  • Donut chart with labels and animation

    Same as above but the labels show the numerical value of the slice instead of the text label. Uses d3.

  • Responsive layout: flixed left column, fluid right column

    A simple resonsive layout with a fixed left column size and a fluid right column.

  • Responsive layout: flixed right column, fluid left column

    A simple resonsive layout with a fixed right column size and a fluid left column.

  • Responsive layout: flixed right column, fluid left column

    Same as previous example with faux column background on right.

  • Responsive layout: flixed left column, fluid center column, fixed right

    Responsive variation with re-stacked sidebars.

  • D3 - Manipulating the DOM in an HTML document

    This sample uses some data (numbers) to change DOM elements with transitions.

  • Eyeo2014 Presenters Face Mixer

    Face pics of some of the Eyeo2014 presenters sliced up and reassembled. Different mix each time the page loads. Adding more presenters as the conference goes on.

  • Eyeo2014 Attendees Face Mixer

    Face pics of some of the Eyeo2014 attendees sliced up and reassembled. Add your face. Different mix each time the page loads. Adding more faces as the conference goes on.

  • CFA FAce Mixer

    Slices uploaded pictures and makes a composite of the slices. The area in the composite corresponds to the same area in each of the pictures. More photos = more slices. A different combination is created each timne you load the page. Pictures do not have to be faces, of course. There are two components, the uploader and the mixer.

  • Lehigh Valley Hackathon 2014 - PhotoBot

    The image shredder component for the PhotoBot - takes the photo booth photos and makes a composite of slices from the faces of all of the participants. More photos = more slices.

  • Weather info from JSON feed

    Uses AJAX to access a JSON data feed of weather info for various cities

  • Generate Spanish verb conjugations

    Make up "Spanish" verbs, real or imagined.

  • Flickr phtotos from JSON feed

    Enter a subject and view Flickr public images from JSON feed

  • Flickr phtotos collage from JSON feed

    Enter a subject and view a collage of public images from JSON feed

  • Not new, but a link to another page of sample files

    Links to a lot of code samples and demo pages from various classes.

  • Spanish vocabulary game

    Learn Spanish (or English) words. Several categories. Scoring, animation, timers. LocalStorage for scores.

  • Remembering cards game

    This deals a deck of cards in random order. Click on a card to flip it. Click another card. If it matches the first card in number they stay flipped otherwise they turn back over.

  • Language flash cards - variation 2

    In this variation cards are presented in random order. Picture cards with 3 languages and audio. Play audio when the speaker icon is clicked.

  • Random circle maker

    Makes random size overlapping circles with random opacity and quasi-random fill colors.

  • Random pill maker

    Makes random size lozenges with random opacity and random fill colors.

  • Processing and JavaScript!

  • Drop down menu to select font

    Simple form element to select font for a paragraph.

  • CSS thermometer

    A thermometer-styled indicator animates and plays sound when clicked.

  • Language flash cards

    Some flash cards with text, images and audio. Uses JSON to organize words and resources.

  • Language flash cards - responsive

    Some flash cards with text, images and audio. Uses JSON to organize words and resources. Responsive to window size.

  • Language flash cards - variation

    Picture cards with 3 languages and audio. Play audio when the speaker icon is clicked.

  • Language flash cards - quiz

    Picture cards with 3 languages and audio - quiz version.

  • Drag and drop color swatches

    Drag color swatches onto html elements to change colors.

  • Movable color palette

    Loop generates color swatches in a movable div with open/close toggle. Asigns color to div when a swatch is clicked.

  • Movable color palette with HSL colors

    Like the previous example, but uses HSL color values to get a more organized color scheme.

  • Responsive Mobile Menu

    A simple responsive design that changes horizonal tab menu to stacked mobile menu with open/close icon.

  • Touch swipe images

    Touch and swipe images. This uses the touchswipe JavaScript plugin from Skinker Labs. This is a general purpose "touch" plugin, that lets you detect various touch interactions, motion, multi-finger ets. The sliding animation is done via CSS transforms. Webkit only, I think for the gallery example, but could be expanded to other browsers as the results of the touch interaction are not part of the plug-in.

  • Touch Swipe full screen

    Touch and swipe screen sized panels. This uses the swipe.js JavaScript plugin from Brad Birdsall. The sliding animation is done via CSS transforms. Code base includes CSS transforms for the main browsers, Safari, Firefox, Chrome, Opera, and IE. Works great on iPad and iOS in general. Thanks to Matt G and Matt H for the demo.

  • Bits and pieces (small bits of code that do specific things)

    Motion effects (page samples with various motion effects)

    • Multi-plane camera effect

      This uses background image scaling to create an effect similar to that created by multi-plane animation cameras. Scrolling up and down zooms the camera into and out of the scene. The different layers scale at different rates.

    • Multi-plane camera modified for touch interfaces

      This uses background image scaling to create an effect similar to that created by multi-plane animation cameras. Scrolling up and down zooms the camera into and out of the scene. The different layers scale at different rates. This version is modified a bit to make it work with touch interfaces as well as desktop browsers.

    • Multi-plane camera effect - variation

      This uses background image scaling to create an effect similar to that created by multi-plane animation cameras. Scrolling up and down zooms the camera into and out of the scene. This version adds a sliding panel.

    • Parallax side-scroll effect

      This uses background image positioning to create a parallax effect. Scrolling side-to-side moves the layers at different speeds.

    • Arbitrary motion vertical-scroll effect

      This uses div positioning reacting to vertical scrolling. Each div moves in a different direction/speed when you scroll.

    • Focus image on scroll

      This uses div opacity reacting to vertical scrolling. The top blurred image is faded out when you scroll revealing the in-focus image below. As this does not use the CSS blur filter, it works in more browsers.

    • Blur image on scroll using css

      This uses the CSS blur property reacting to vertical scrolling. The scroll distance is used to calculate the CSS blur property value for the div with the image in it. Works in browsers that support the blur filter. Firefox does not.

    • Move focus image on scroll

      This example moves a slice of in-focus image over a blurred version. When you scroll the div with the in-focus slice moves down and the image inside the div moves up giving the appearance that the slice is stationery with regard to the blurred image. This uses two images, one normal, one blurred in Photoshop. Does not use the CSS blur.

    • Move focus image on scroll with CSS

      This example moves a slice of in-focus image over a blurred version using the CSS blur property. When you scroll the div with the in-focus slice moves down and the image inside the div moves up giving the appearance that the slice is stationery with regard to the blurred image. Similar to the effect with separate blurred and focused images, but the lower image is just blurred with CSS rather than Photoshop. Does not work in Firefox or other browsers that don't support CSS blur.

    • Move focus with the mouse

      This example moves a circle of in-focus image over a blurred version. When you move the mouse the div with the infocus slice moves with the mouse and the image inside the div moves as well giving the appearance that the circle is stationery with regard to the blurred image. This example uses CSS to blur the lower layer image. For browsers that don't support blur, the image would need to be blurred in an image editor.

    • Move spotlight with the mouse

      This example appers to move a circle of light and focus over a darkened blurred image. When you move the mouse the div with the infocus slice moves with the mouse and the image inside the div moves as well giving the appearance that the circle is stationery with regard to the blurred image. This example uses CSS to blur the lower layer image. For browsers that don't support blur, the image would need to be blurred in an image editor. If you look at this in Firefox, for example, you will see the light effect, but not the focus.

    • Snow fall animation

      Continuous snowfall. Animating two ULs inside a div at different speeds. SVG graphics. Cloning and moving LIs to create continuous animation. Code is pretty crude at this point, but in time for the holidays!

    Image galleries (page samples with various image galleries)

    • Thumbnails and one large image version 1

      Click thumbnail images to display larger versions. A simple jQuery code using file names to change the larger picture.

    • Thumbnails and one large image version 2

      Click thumbnail images to display larger versions. A simple jQuery code that hijacks regular HTML links to change the larger image.

    • Upload an image for the page header

      Use a form to select an image (gif, jpeg or png) from your local drive and upload it to the server. The image will be resized, saved and placed in a folder. The saved file will be named "banner.jpg" and that image source is then inserted into the banner div.

    • jQuery image preloader

      Script preloads a set of images. It has three functions that can be called are called when the script loads, each image loads and all of the images are loaaed.

    • jQuery image preloader and slideshow

      Script preloads a set of images. The fist image is faded in once it is loaded. When all of the images are loaded the links for the "slideshow" appear. The slide show uses the jQuery animate function to fade out the image and fade in the chosen image. We use jQuery to hijack the links and to hide the things we want to show only when the images are loaded so the page still has basic functionality with JavaScript disabled.

    • jQuery image preloader and slideshow version 2

      Script preloads a set of images. The fist image is faded in once it is loaded. When all of the images are loaded the thumbnails appear. The slide show uses the jQuery animate function to fade out the image and fade in the chosen image. We use jQuery to hijack the links and to hide the things we want to show only when the images are loaded so the page still has basic functionality with JavaScript disabled.

    • Side sliding endless repeat images - responsive

      A set of images that slide right to left, repeating and responsive to window size.

    • Side sliding endless repeat left and right - responsive

      A set of images that slide right to left or right to left, repeating and responsive to window size. Auto play or manual.

    • Upload images for a "banner" slideshow.

      An image uploader that scales, crops, numbers and saves image files. Another page uses the images for a banner with a slide show of preloaded images based on the file list generated by the uploader.

    • Change an image during vertical scroll

      This sample has a fixed position image that changes the source file when scrolled. It works with touch devices (iPhone, iPad) as well as desktop browswers.

    Color (some color stuff)

    • Build a grid of swatches

      This example uses a script to build a grid of greyscale swatches.

    • Build a grid of web-safe color swatches

      Set the way-back for 1995. This example uses a script to build a grid of swatches using the once-popular web-safe colors.

    • Build a grid of 1331 swatches

      A variation on the previous example, just useing 11 color steps instead of 6.

    • Build a grid of HSL color swatches

      A variation on the previous example, using HSL (hue, saturation and lightness) values.

    • Color wheel generated by Processing

      This is one of the examples that comes with the Processing 1.5 installation saved as a Java applet. Version 2 of Processing is now available.

    • Color wheel generated by Processing - modified

      Processing JS is replacing Java applets as the preferred method of rendering Processing sketches on the Web. This example fixes the TINT function in the Colorwheel example.

    • Processing JS - Translate Processing sketches to JavaScript

      A Processing sketch translated to JavaScript via Processing-JS and added to a canvas element. Simple and cool. No need to change the Sketch code!

    • RGB Color Mixer

      A color mixer with HTML5 sliders showing primary and secondary colors. In Webkit browsers the sliders are also color coded via CSS.

    • CSS Transitions are fast and easy.

      This is a simple CSS transition

      p.change {
      	padding:10px;
      	background:#f00;
      	display:block;
      	width:200px;
      	transition: all 2s;
      	-moz-transition: all 2s;
      	-webkit-transition: all 2s; 
      	-o-transition: all 2s; 
      }
      .change:hover {
      	background:#0f0;
      	padding:80px;
      }
      

    ┬ęcopyright 2016 Miles DeCoster